【CSS】display:tableを使ったナビゲーション

2015/01/13 サイト制作, 技術系 投稿者:竹内

『CSSの小技』第2回の今回はdisplay:tableを使ったナビゲーションの構築です。
今までは古いIEに対応させるべく、「float」で浮かべて、「clearfix」で落とす。とか
display: inline-blockを利用して横並びのナビゲーションを作っていました。
XPのサポート終了により古いIEに対応させる必要が薄くなってきましたので、横並びさせるのに便利な手法としてIE8以降で使用可能なdisplay:tableを今後使っていきたいと思います。
そして、今までIEに苦しめられていた分の工数を、新しい表現にあてることが出来ればより良いWebサイト制作が出来るのではないかなぁと個人的には思います。

display:tableとは

tableと聞いてtableレイアウトを思い浮かべたり、その昔tableだらけでWebサイト制作をしていた頃を思い出したりする人もいるでしょう。それで大体合ってます!
display: tableとは、指定した要素をtableタグとして扱い、その子要素にdisplay:table-cellを指定することによってtdタグと同様の表示をさせる事ができるようになります。

display: tableのメリット

1.vertical-align:middleで縦中央揃えが出来る

ナビゲーションの縦幅に対して文字を中央に配置したい場合、line-hightを用いたり、単純にmargin-topやpadding-topを利用したりしていましたが、
項目名が1行のもの、2行のものが混在すると一気にレイアウトしにくくなっていました。
display:tableであればvertical-align:middleによってこの問題が一気に解決します。

2.ナビゲーションボタンの大きさを均等にする

display:tableでは親要素にtable-layout:fixedとwidthを指定してあげる事により均等幅のナビゲーションボタンを設置することが可能です。
レスポンシブデザイン用途では均等幅の状態でウィンドウ幅に合わせた伸縮を行えます。

3.ナビゲーションボタンの段落ちがない

「firefoxでは大丈夫なのに、IEで段落ちしてしまう」といったことを経験したことは無いでしょうか?tableレイアウトでは一番高い要素に合わせて高さが統一され、横幅もはみ出ないように調整されます。ですのでdisplay:tableでは段落ちしてしまうことはありません。こちらもレスポンシブデザインでは有効でしょう。

使用方法

css2-1

使い方はとても簡単です。親要素(ul等)にdisplay:tableを指定し、子要素(li等)にdisplay:table-cellを指定してあげるだけです。

HTML

CSS

アレンジ1 等幅ボタン

css2-2

上記ナビゲーションでは文字数によってボタンの横幅が違います。table-layout:fixedを使ってボタンの横幅を同じにします。

HTML

CSS

アレンジ2 等幅ボタン+レスポンシブデザイン

css2-3

さらに横幅を「%」で指定することによりウィンドウ幅によって自動的に伸縮するレスポンシブデザイン用のナビゲーションに早変わりです。

HTML

CSS

カレンダー

      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

PRODUCE ネディアプロデュース
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)