WebBox norijin note
WebBox norijin
Category: スポンサー広告  

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

TOP > スポンサー広告 > HTML5入門:タグの意味と使い方!!コンテンツのグループ化編 vol.2!!

Category: HTML5   Tags: HTML5  ol  dl  dt  dd  figure  figcaption  div  

HTML5入門:タグの意味と使い方!!コンテンツのグループ化編 vol.2!!

html5-11.gif
前回までは、「HTML5入門:タグの意味と使い方!!コンテンツのグループ化編 vol.1!!」について勉強してきました。今回も前回の続きで、「HTML5入門:タグの意味と使い方!!コンテンツのグループ化編 vol.2!!」ついて勉強していきたいと思います。興味あるかたはどうぞ...

HTML5:番号付きのリストを作りたい(ol,li)

<ol><li>~</li></ol>



要素解説 ol
カテゴリー フロー・コンテンツ
利用できる場所 フロー・コンテンツが期待される場所
コンテンツモデル li要素を0個以上

li要素についてはこちら

 項目の順序が重要なリストは、ol要素とli要素で作成します。  ol要素は、その範囲が番号付きのリストであることを表す要素です。リスト表示される各項目は、li要素で指定します。  一般的なブラウザでは、各項目の先頭に連番の数字が付き、リスト全体がインデントした状態で表示されます。

<p>HTML5とは...</p>
<ol>
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
</ol>


HTML5:リストの開始番号を変更したい(ol,start,li)

<ol start="★"><li>~</li></ol>

★=開始番号の整数


要素解説 ol
カテゴリー フロー・コンテンツ
利用できる場所 フロー・コンテンツが期待される場所
コンテンツモデル li要素を0個以上


 ol要素のstart属性では、リストの開始番号を指定できます。番号は整数で指定し、0やマイナスの値も指定できます。デフォルトは「1」です。
 start属性は、HTML4.01で非推奨とされていましたが、HTML5では非推奨でなくなりました。

<ol>
     <li value="2">テキスト</li>
     <li>テキスト</li>
     <li value="5">テキスト</li>
     <li>テキスト</li>
     <li>テキスト</li>
</ol>


HTML5:記述リストを表示したい(dl,dt,dd)

<dl><dt>~</dl></dd>~</dd><dl>



要素解説 dl
カテゴリー フロー・コンテンツ
利用できる場所 フロー・コンテンツが期待される場所
コンテンツモデル 1個以上のdt要素に1個以上のdd要素が続くグループを0個以上
要素解説 dt
カテゴリー なし
利用できる場所 dl要素内で、dd要素またはdl要素の前
コンテンツモデル フレージング・コンテンツ
要素解説 dd
カテゴリー なし
利用できる場所 dl要素内で、dd要素またはdlt要素の後
コンテンツモデル フロー・コンテンツ

 dl要素は、その範囲が用語とその用語に対する説明とで形成された、記述リストであることを表します。
 dl要素で説明したい用語を、dd要素で用語の説明文を表します。dt要素とdd要素はセットで使用しますが、1対1である必要はありません。また、dl要素とdd要素のセットはdl要素の中に複数入れることができます。


<dl>
     <dt>テキスト</dt><dd>テキスト</dd>
     <dt>テキスト</dt><dd>テキスト</dd>
     <dt>テキスト</dt><dd>テキスト</dd>
</dl>


HTML5:図柄とキャプションを表したい(figure,figcaption)

<figure>~</figure>  図版
<figcaption>~</figcaption> 図版のキャプション

要素解説 figure
カテゴリー フロー・コンテンツ/セクショニング・ルート
利用できる場所 フロー・コンテンツが期待される場所
コンテンツモデル 1個のfigcaption要素の次にフロー・コンテンツ/フロー・コンテンツの後に1個のfigcaption要素/フロー・コンテンツ
要素解説 figcaption
カテゴリー なし
利用できる場所 figure要素の最初、または最後の子要素として
コンテンツモデル フロー・コンテンツ


 figure要素は、文書の本文(メイン・コンテンツ)から参照される図柄(イラスト、図表、写真、ソースコードなど)であることを表す要素です。この場合の図柄とは、例えば同じページ内の別の場所、専用ページや別のページに移動させても影響のないものを指します。本文から切り離すことのできない図版には利用できません。  figure要素には、figcaption要素を使ってキャプションを付ける事が出来ます。figcaption要素は、figure要素の中の最初か最後に1つだけ使用できます。

<body>
<p>HTML5は...</p>
<p>セクションは...</p>
<figure>
      <img src="サンプル画像URL" width="400" alt="サンプル画像">
      <figcaption>サンプル画像のイメージです</figcaption>
</figure>
</body>


HTML5:凡用的な領域を設定したい(div)



要素解説 div
カテゴリー フロー・コンテンツ
利用できる場所 フロー・コンテンツが期待される場所
コンテンツモデル フロー・コンテンツ


 div要素は、特定の意味を持たない凡用的な領域(フロー・コンテンツ)を設定します。この要素を指定しただけでは表示上の変化はありませんが、複数の要素をグループ化し、class属性やid属性を使ってスタイルシートを設定したい場合やlang属性を使って言語情報を付加したい場合などに使用します。  ただし、div要素よりも適した要素が他にないかを検討し、そうした要素がない場合のみdiv要素を使うようにしてください。

HTMLソース
<body>
<div>
<p>HTML5とは...<code>div</code>とは...</p>
<p>ということで<code>class</code>や<code>lang</code>というのは...</p>
</div>
</body>

CSSソース
div {
      padding: 0 0.5em;
      border: 1px solid #0033ff;
      width: 30px;
      font-family: Helvetica,Arial,sans-serif;
}
code{
      color: #ff0000;
}


今回はもお付き合いいただいてありがとうござました。なんとなくおわかりいただけたでしょうか?当ブログを辞書のように使っていただければ幸いです。僕自身がまだまだまだ...初心者なので、ふと過去の記事を見て調べる事がよくあります。
今回は、「HTML5入門:タグの意味と使い方!!コンテンツのグループ化編 」について、vol.1とvol.2で勉強しましたね。 次回は、「HTML5入門:タグの意味と使い方!!テキストレベルの位置づけ」について勉強していきます。
関連記事

テーマ : インターネットサービス    ジャンル : コンピュータ

TOP > HTML5 > HTML5入門:タグの意味と使い方!!コンテンツのグループ化編 vol.2!!

LEAVE
'A'
COMMENT






07-2018
SUN MON TUE WED THU FRI SAT
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -

06   08

月別アーカイブ
タグクラウド
全記事表示リンク

 About
WebBox norijin note

はじめまして!!
1983年4月生まれのAB型。広島出身の元美容師で、その後、大阪にてIT企業に勤め、現在三人で会社を立ち上げる為、日々精進しています。
 ブログでは、WEBについて勉強した内容や、自分が使ってて便利な情報を気ままに発信しています。

 Contact
メールフォーム

名前:
メール:
件名:
本文:

 link
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。