HTML レイアウトのチップス

投稿日 2015/01/18

[Home] [Index] 

内部フレームを定義するには

ページの内部に別のページを表示するには、iframe タグを使います。

 詳細..
<iframe src="/index.html" width="640" height="400"></iframe>

ナビゲーション・メニューを定義するには

ここで言う「ナビゲーションメニュー」とはページの上の方にあるメニューのことです。これは nav タグ (あるいは div タグ) で囲まれた領域です。スタイルを設定することにより、箇条書き (ul) をメニューらしく表示することもできます。


<nav>
<ul style="list-style-type: none;">
 <li style="float:left;border:solid thin darkslategray; background-color:palegreen; padding:4px;">
  <a href="#">MENU1</a>
 </li>
 <li style="float:left;border:solid thin darkslategray; background-color:lightblue; padding:4px;">
  <a href="#">MENU2</a>
 </li>
 <li style="float:left;border:solid thin darkslategray; background-color:aquamarine; padding:4px;">
  <a href="#">MENU3</a>
 </li>
</ul>
</nav>

 

画面を左右の領域に分けて表示するには

画面を左右の領域に分けるには、2つの div タグ、あるいは aside タグとarticle タグを使い、float スタイルを left と right に設定します。

table タグを使い、2つの列の中にページの内容を書く方法もあります。

float スタイルを使う場合、最後に clear スタイルを both に設定する必要があります。

 詳細..
aside(style="float:left;")
article(style="float:right")
footer(style="clear:both")

ヘッダー、フッターを定義するには

HTML5 ではヘッダー、フッターを定義するのに header, footer タグを使います。これらは単なる領域なので、div タグで代用しても同じです。これらの領域は、通常、ページの幅いっぱいに表示するので、スタイル style="clear:both" を設定します。

 詳細..

領域に絶対座標を指定するには

領域をページの絶対座標に表示するには、position スタイルに absolute を指定します。

 詳細..



 

 


 このページの先頭  [Home]

 開設 2014年12月   著作権 2014-2015 bonk.red  連絡先: TEL 111-222-3333 MAIL sales@xxxxx.jp