今日は技術的なお話

2013/11/12 技術系 投稿者:竹内

Webサイト担当の竹内です。
今回は最近業務のなかで技術的な問題にぶち当たった際に解決したお話です。
わからない人にはなんのこっちゃわからない話になってしまいますがどうぞお付き合い下さい。

Webサイト作成中、主にグローバルメニューを作成する際、floatで浮かしても良いのですが、
最近は『display:inline-block;』を良く使います。
その際、かならずと言って良いほど、
改行コードが原因によるメニューの『隙間』が発生してしまうのです。
解決方法がいくつかあるのですが、最近発見したやり方はこんなかんじです。

inline-blockを並べた場合に発生する「隙間」を消去するCSS

理屈としてはソース内にリスト並べた際の改行を半角文字のスペースとして認識してしまうため、
その半角スペースのサイズをゼロにしてしまえ!といったところでしょうか。
利点としては、
・HTMLソースに何も書く必要はない。→ソースがすっきり!
・複雑なJavaScript等を使わない。→簡単!
・CSSに二行追加するだけ。→簡単!!!!
詳しくはリンク先のサイトを御覧ください。

他のやり方ですとHTMLソース内の改行の箇所をコメントアウトしたり、
改行を使わずリストを一列に記述したりするのですが、
このやり方はとても簡単でした。
何より、HTMLソースに何も追加する必要が無いのがありがたい。
最近はjQueryやらなんやらでヘッダー部分も肥大していますし、
HTML5で極力ソースをシンプルにすることを目標にしていますので
今のところこのやり方がベストなのではないかなと思います。

そんなこんなで問題にぶち当たった時、
最適な手法をブログ等で掲載して下さっているデベロッパーの方々に感謝する日々でございます。

それでは今日はこのへんで。

カレンダー

    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(エニューム)