SYSTEM238 / NOTES1 / WEB / htmlで要素を並べる3つの方法

NOTES1 PROG1
htmlで要素を並べる3つの方法
htmlで要素を横並びにする場合、table、ul、divタグを使った3つの方法がある。それぞれの例と特徴をノート。

TABLEタグ

ソース

<table>
    <tr>
        <td style="border:1px solid #ccc; width:50px;">1</td>
        <td style="border:1px solid #ccc; width:50px;">2</td>
        <td style="border:1px solid #ccc; width:50px;">3</td>
    </tr>
    <tr>
        <td style="border:1px solid #ccc; width:50px;">4</td>
        <td style="border:1px solid #ccc; width:50px;">5</td>
        <td style="border:1px solid #ccc; width:50px;">6</td>
    </tr>
</table>

実行例

1 2 3
4 5 6

特徴

  • 固定した表組が作れる。
  • 縦横(二次元)方向に関連のあるデータを表現するのに使用する。
  • 売上情報などのExcelで扱う様なデータを表現する。

ULタグ

ソース

<ul style="width:200px;list-style-type:none;"> ← width:200px
    <li style="float:left; width:50px; border:1px solid #ccc;">1</li>
    <li style="float:left; width:50px; border:1px solid #ccc;">2</li>
    <li style="float:left; width:50px; border:1px solid #ccc;">3</li>
    <li style="float:left; width:50px; border:1px solid #ccc;">4</li>
    <li style="float:left; width:50px; border:1px solid #ccc;">5</li>
    <li style="float:left; width:50px; border:1px solid #ccc;">6</li>
</ul>
<div style="clear:left;"></div>
<br>
<ul style="width:300px;list-style-type:none;"> ← width:300px ... <li>は300pxに収まらない
    <li style="float:left; width:50px; border:1px solid #ccc;">1</li>
    <li style="float:left; width:50px; border:1px solid #ccc;">2</li>
    <li style="float:left; width:50px; border:1px solid #ccc;">3</li>
    <li style="float:left; width:50px; border:1px solid #ccc;">4</li>
    <li style="float:left; width:50px; border:1px solid #ccc;">5</li>
    <li style="float:left; width:50px; border:1px solid #ccc;">6</li>
</ul>
<div style="clear:left;"></div>

実行例

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

特徴

  • 隙間を詰めて流し込む事が出来る。
  • リキッドレイアウトとかレスポンシブデザインに多用される。
  • リスト(一次元)方向に関連のあるデータを表現するのに使用する。
  • リストをボックス表示したりするときによく使う。

DIVタグ

ソース

<div style="width:299px;"> ← width:299px ... 300pxだとぴったし収まる。
    <div style="float:left; width:50px; border:1px solid #ccc;">1</div>
    <div style="float:left; width:50px; border:1px solid #ccc;">2</div>
    <div style="float:left; width:50px; border:1px solid #ccc;">3</div>
    <div style="float:left; width:50px; border:1px solid #ccc;">4</div>
    <div style="float:left; width:50px; border:1px solid #ccc;">5</div>
    <div style="float:left; width:50px; border:1px solid #ccc;">6</div>
</div>
<div style="clear:left;"></div>
<br>
<div>
    <div style="float:left; width:50px; border:1px solid #ccc;">1</div>
    <div style="float:left; width:50px; border:1px solid #ccc;">2</div>
    <div style="float:left; width:50px; border:1px solid #ccc;">3</div>
</div>
<div style="clear:both;">
    <div style="float:left; width:50px; border:1px solid #ccc;">4</div>
    <div style="float:left; width:50px; border:1px solid #ccc;">5</div>
    <div style="float:left; width:50px; border:1px solid #ccc;">6</div>
</div>

実行例

1
2
3
4
5
6


1
2
3
4
5
6

特徴

  • 隙間を詰めて流し込む事が出来る。
  • divタグを入れ子にできる。自由度が高い。
  • リキッドレイアウトとかレスポンシブデザインに多用される。
  • データ間の関連の少ない独立したデータを表現するのに使用する。
  • 純粋なレイアウトデザインでよく使う。

参考

WEB+DB PRESS Vol.66

特集1のHTML構造化指南を参考にしてこの文章を作成しています。

なんとなくulやdiv、tableを使っていたので勉強になりました。

WEB+DB PRESS 総集編〔Vol.1~72〕 (WEB+DB PRESS plus)

今から本を入手するならこっちの総集編がおすすめです。

PDFなので気に入った記事を切り出してスマフォで何時でもどこでも読む事ができます。