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

スポンサーサイト

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

TOP > スポンサー広告 > HTML5入門:テキストに対する意味付けの要素を持ったタグの使い方とソースとは!!

Category: HTML5   Tags: HTML5  a  em  strong  

HTML5入門:テキストに対する意味付けの要素を持ったタグの使い方とソースとは!!

HTML5入門:テキストに対する意味付けの要素を持ったタグの使い方とソースとは!!

前回、前々回までは、「HTML5入門:タグの意味と使い方!!コンテンツのグループ化編」について勉強してきました。今回からは「HTML5入門:テキストに対する意味付けの要素を持ったタグの使い方とソース!!」ついて勉強していきたいと思います。興味あるかたはどうぞ...

HTML5入門:リンクを設定したい(a)

<a href="★">~</a>

要素解説 a
カテゴリー フロー・コンテンツ/フレージング・コンテンツのみを含む場合:フレージング・コンテンツ/インタラクティブ・コンテンツ
利用できる場所 フレージング・コンテンツが期待される場所
コンテンツモデル トランスペアレント(ただし、インタラクティブ・コンテンツを入れることは不可)


 a要素にhref属性を指定すると、リンク(ハイパーリンク)を設定できます。リンク先のURLは、現在のファイルの位置関係を考えて、絶対URLにするか相対URLにするか決めてください。  これまでのHTMLでは、インライン要素であるa要素の中には、ブロックレベル要素を入れることはできませんでした。HTML5では、a要素の親要素の入れられる要素であれば、従来のブロックレベル要素に相当する(div要素など)でも入れることができるようになります。ただし、a,button,embed,iframe,textareaといったインタラクティブ要素をいれることはできません。

<body>
<p>
   <a href="http://www.サンプル.co.jp"><img> src="norijin.gif" alt="WEBBOX norijin noteのサイト"
</p>
</body>


HTML5入門:リンク先を読み込むウィンドウを指定したい(a href target)

<a href="★" target="◆">~</a>
★=リンク先のURL
◆=ウィンドウ名、または_blank,_self,_parent,_top

要素解説 a
カテゴリー フロー・コンテンツ/フレージング・コンテンツのみを含む場合:フレージング・コンテンツ/インタラクティブ・コンテンツ
利用できる場所 フレージング・コンテンツが期待される場所
コンテンツモデル トランスペアレント(ただし、インタラクティブ・コンテンツを入れることは不可)


 通常、リンク先のコンテンツはリンク元と同じウィンドウに読み込まれますが、target属性で読み込むウィンドウを指定することもできます。指定できる値は次の通りです。

・ウィンドウ名.....指定した名前のウィンドウに表示
・_blank........新しいウィンドウを開いて表示
・_self.........リンク元と同じウィンドウに表示
・_parent.......現在のウィンドウに親があれば、そのウィンドウに表示
・_top..........最上位のウィンドウ(現在のブラウザ領域全体)に表示

<p>
<a href="サンプルURL" target="blank">
サンプルページを別ウィンドウで表示します。</a>
</p>


HTML5入門:指定した場所に移動したい(a href id)

<a href="#★">~</a>  同一ページの場合
<a href="#◆">~</a>  他のページの場合
<▲ id="★">~</▲>
★=名前
◆=URL
▲=要素名

要素解説 a
カテゴリー フロー・コンテンツ/フレージング・コンテンツのみを含む場合:フレージング・コンテンツ/インタラクティブ・コンテンツ
利用できる場所 フレージング・コンテンツが期待される場所
コンテンツモデル トランスペアレント(ただし、インタラクティブ・コンテンツを入れることは不可)


 a要素を使って、特定の位置へ移動するリンクを作成できます。  同一ページ内で移動したい場合は、移動先の要素にid要素で名前を付け、この名前をリンク元の<a href="#★">~</a>の値に指定します。  他のページの特定の位置に移動したい場合は、<a href="サンプルURL#browser">~</a>のように、リンク元のhref属性に移動先のURLを追加して指定します。

<h1 id="faq">よくある質問</h1>
<p>ここでは代表的な質問をまとめています。</p>
<ul>
      <li><a href="#html">HTML5では...</a></li>
      <li><a href="#page1">HTML5とXHTMLの違い...</a></li>
      <li><a href="#page2">HTML5変更点は...</a></li>
</ul>
<hr>
<h2 id="html">HTML5では...</h2>
<p>テキストテキストテキスト</p>
<div class="top"><a href="#faq">戻る</a></div>
<hr>
<h2 id="page1">HTML5とXHTMLの違い...</h2>
<p>テキストテキストテキスト</p>
<div class="top"><a href="#faq">戻る</a></div>
<hr>
<h2 id="page2">HTML5変更点は...</h2>
<p>テキストテキストテキスト</p>
<div class="top"><a href="#faq">戻る</a></div>
<hr>


HTML5:強調したい(em)

<em>~</em>

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


 強調する部分は、em要素で表します。強調する部分を変更すると、文章の意味が変わるようなところに使用します。重要性は表さないので、重要であることを示したい場合には、strong要素を使用してください。  em要素は入れ子にすることができ、入れ子の数によって強調の度合いが強まります。

<p>今年は、あなたと<em>クリスマス</em>を過ごそう。</p>


HTML5:重要であることを示したい(strong)

<strong>~</strong>

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


 重要な部分は、strong要素で表します。強調という意味は持たないので、強調する部分であることを示したい場合はem要素を使用してください。  またem要素とは異なり、使う場所によって文章の意味が変わるかどうかは問いません。重要性を伝えたいところに使用します。  strong要素は入れ子にすることができ、入れ子の数によって重要性の度合いが強くなります。

<p>
<strong>注意</strong>最近、この辺では事故が起きています。
</p>


今回はここまでです。「HTML5入門:テキストに対する意味付けの要素を持ったタグの使い方とソースとは!!」について勉強しました。お付き合いありがとうございました。次回は「HTML5入門:テキストに対する意味付けの要素を持ったタグの使い方とソースとは!!vol.2」について勉強していきます。またよろしくお願いします。

関連記事

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

TOP > HTML5 > HTML5入門:テキストに対する意味付けの要素を持ったタグの使い方とソースとは!!

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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。