ウェブネタ

CSS

何気にずっと頭を悩ませてた問題。display: inline;display: inline-block; で要素をインライン化したときに、改行が半角スペースになり、隙間となる問題。あれがスッキリ解消できました。

HTMLでこんな感じ↓にしてる人は必見です。

<ul><li>list item</li><li>list item</li></ul>
  
<ul><li>
  list item
</li><li>
  list item
</li></ul>
  
<ul><!--
  --><li>list item</li><!--
  --><li>list item</li><!--
--></ul>

ウェブページのレイアウトで、適度に余白を入れるのは重要ですね。そして、余白を作るためにCSSのmarginプロパティを指定するのが一般的です。

でも、marginプロパティって意外とやっかいだったりします。marginの相殺を念頭に入れないと、想定したよりも大きい余白や小さい余白が出来ちゃったりするんですよね。

IE7をサポートする場合、hasLayoutによって、marginが相殺されたり、されなかったりします。

そこで、marginの相殺自体を起こらなくする方法を紹介します。

Web制作時に画像置換してますか?画像置換とは通常表示される文字列などの代わりに画像を表示するためのテクニックです。

画像置換は個人的には必須のテクニックだと思っています。なぜに必須なのかと言えば「コンテンツはHTML、デザインはCSS」だからです。

コンテンツとデザインを完全に分離させるために避けて通れないのが、コンテンツでありデザインでもある文字列の扱いです。

情報として文字列は表示すべきだが、見た目はきれいにデザインしたいという場合、現在、正式に勧告されているCSS2.1のプロパティだけでは役不足です(CSS3が正式に勧告されてブラウザがきちんと対応すれば改善されるでしょう)。そこで画像置換というテクニックが必要になります。

念のため自分の考えを言っておきますが、画像置換はスパム的なテクニックではなく、要は使う側の使い方次第だと思ってます。なぜなら、画像を表示するために使用されるimg要素のalt属性(代替文字列)にどんな文字列を入れるのかも、使う側の使い方次第だからです。

img要素を使うこと自体がスパム的だと言う内容を見たことがありません。が、画像置換がスパム的だとする内容は多くあります。ただ、それは画像置換する際に配慮が欠けているってだけのことです。

つまり、ユーザーやHTMLを利用したプログラム(サーチエンジン等)を騙すのが目的ではなく、様々なケースを想定して、問題なく情報が取得できるよう配慮すれば、画像置換すること自体に問題はないと考えています。

では、問題なく情報を取得できるよう配慮した画像置換の方法を解説していきたいと思います。