FC2ブログ
WebBox norijin note
WebBox norijin
Category: スポンサー広告  

スポンサーサイト

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

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

Category: HTML5   Tags: HTML5  p  hr  pre  blockquote  ul  li  

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

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

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

HTML5:段落を表したい(p)


<p>~</p>

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

 段落はp要素で表します。ただし、p要素よりも適した要素がないかを検討し、そうした要素がない場合にのみp要素を使うようにしてください。例えば、連絡先であればaddress要素、フッタであればfooter要素で表せます。
<body>
<p>
HTML5とは...
</p>
<p>
HTML5で変更されたタグは...
</p>
</body>


HTML5:テーマの変わり目を表したい(hr)


<hr>

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

 hr要素では、段落単位での変わり目を表します。例えば、物語のシーンが変わるときや、セクション内で別のテーマに変わるときの区切りとして利用されます。  これまでのHTMLでは、横罫線という視覚的な表現を指定する要素でしたが、HTML5では意味が変更されました。ただし、一般的なブラウザでは罫線が表示されるようです。
<body>
<p>
HTML5とは...
</p>
<hr>
<p>
では実際に...
</p>
</body>

HTML5:入力した通りに表示したい(pre)


<pre>~</pre>


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


HTML5文書内の空白文字や改行などを入力した通りにブラウザに反映させたいときは、pre要素で表します。pre要素はその範囲が整形済みのテキストであることを表す要素です。  プログラム・コード、電子メール内容、アスキー・アートをそのまま表示させたい場所などに利用できます。

<body>
<p>
<pre><code>
.leftmenu {
    potision: absolute;
    top: 120px;
    left: 0;
    width: 170px;
    padding: 0 0 20px 10px;
}
</code></pre>
</body>


HTML5:長い文章を引用したい(blockquote cite)


<blockquote cite="★">~</blockquote>



要素解説 blockqouote
カテゴリー フロー・コンテンツ/セクショニング・ルート
利用できる場所 フロー・コンテンツが期待される場所
コンテンツモデル フロー・コンテンツ

 blockquote要素は、他の情報源からの引用を表します。引用元のURLがある場合はcite属性で指定します。  この要素は比較的に長い文章を引用するときに使います。短いテキストを引用する場合には、q要素を使用してください。  一般的なブラウザでは、左右をインデントして表示されます。

<body>
<p>
HTML5では...
</p>
<blockquote cite="引用先のURL"><p>テキスト</p></blockquote>
</body>


HTML5:リストを作りたい(ul,li)


<ul><li>~<ul><li>

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

要素解説 li
カテゴリー なし
利用できる場所 ul要素内,ol要素内,menu要素内
コンテンツモデル フロー・コンテンツ


 項目の順序が需要でない箇条書きでは、ul要素とli要素で作成します。  ul要素は、その範囲が順不同のリストであることを表す要素です。リスト表示される各項目は、li要素で指定します。  一般的なブラウザでは、各項目の先頭に黒丸(・)が付き、リスト全体がインデントした状態で表示されます。

<p>HTML5では...</p>
<ul>
     <li>テキスト</li>
     <li>テキスト</li>
     <li>テキスト</li>
     <li>テキスト</li>
</ul>


今回の「HTML5入門:タグの意味と使い方!!コンテンツのグループ化編 vol.1!!」はここまでです。時間があまりないので、なかなか勉強が前に進まないですが、がんばりますので一緒に勉強してもらえる方は次回の「HTML5入門:タグの意味と使い方!!コンテンツのグループ化編 vol.2!!」で続きを勉強していきましょう。でわでわ!!

関連記事

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

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

 
とても魅力的な記事でした!!
また遊びに来ます!!
ありがとうございます。。
株の初心者の入門さん 
 コメントありがとうございます。
勉強中ですので、まだまだお役に立つような情報はないと思いますが、頑張って記事にしていきます。ほんとにうれしくて、やる気が出てきました。(単純)

LEAVE
'A'
COMMENT






09-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 - - - - - -

08   10

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

 About
WebBox norijin note

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

 Contact
メールフォーム

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

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