HTML
HTMLはホームページの文章を書くためのマークアップ言語です。
CSS
CSSを使用すれば豊かなデザインで表現ができます。
|
HTML HTML5 HTMLタグ スマートフォン |
CSS CSSプロパティ CSS・HTML便利ツール |
HTML色見本 配色組み合わせツール 特殊文字 |
JAVA Android |
PHP Smarty修飾子 EXCEL |
WEB技術の辞書・解説・使用例
●今までのHTMLでは以下のような文章構造が一般的でしたが。
<h1>あいうえお</h1>
<p>abcde</p>
<h2>かきくけこ</h2>
<p>fghij</p>
<h2>さしすせそ</h2>
<p>klmno</p>
<h3>たちつてと</h3>
<p>pqrst</p>
●HTML5のsectionタグを使用する場合以下のように記述します。
<section>
<h1>あいうえお</h1>
<p>abcde</p>
<section>
<h2>かきくけこ</h2>
<p>fghij</p>
</section>
<section>
<h2>さしすせそ</h2>
<p>klmno</p>
<section>
<h3>たちつてと</h3>
<p>pqrst</p>
</section>
</section>
</section>
google chrome のアドインHTML5 Outlinerで文章構造を確認する事ができます。
<section>
<h1>sectionタグのサンプル</h1>
<p>sectionタグのサンプル</p>
</section>
<article>
<section>
<h1>HTML</h1>
<p>HTMLはホームページの文章を書くためのマークアップ言語です。</p>
</section>
<section>
<h1>CSS</h1>
<p>CSSを使用すれば豊かなデザインで表現ができます。</p>
</section>
</article>
<h1>sectionタグのサンプル</h1>
<p>sectionタグのサンプル</p>
</section>
sectionタグのサンプル
sectionタグのサンプル
<article>
<section>
<h1>HTML</h1>
<p>HTMLはホームページの文章を書くためのマークアップ言語です。</p>
</section>
<section>
<h1>CSS</h1>
<p>CSSを使用すれば豊かなデザインで表現ができます。</p>
</section>
</article>
HTMLの一般属性
| 属性 | 説明 |
|---|---|
| class="～" | クラス名を指定。使用例 |
| id="～" | IDを指定します。使用例 |
| style="～" | スタイルシートを直接記述。使用例 |
| title="～" | タイトルを指定します。 |
| dir="ltr|rtl" | 文字の表示方向を指定。 ltr(左から右)、rtl(右から左) |
| lang="～" | 言語を指定。日本語の場合は"ja" |
HTML5の一般属性
| 属性 | 説明 |
|---|---|
| accesskey="キー" | アクセスキーを指定。 |
| tabindex="数値" | タブインデックスを指定。 |
| contenteditable="true|false|inherit" | 要素を編集可能に。true(する) false(しない) inherit(既定値、親要素の属性を継承) |
| contextmenu="id" | コンテキストメニューを指定。 |
| draggable="true|false" | ドラッグを可能に。true または false を指定 |
| dropzone="～" | ドロップを可能に。 |
| hidden | 要素を非表示に。 |
| spellcheck="true|false" | 自動スペルチェック機能。true または false を指定 |