今日は技術的なお話

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

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

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

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

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

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

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

この記事を読んだ方はこちらも読まれています

海外からの不審な外部リンク（バックリンク）を放置して良いか？『バックリンクを否認する』