見出しなどに背景画像を指定して表示させる場合、paddingなどで垂直方向の文字の位置を調整してセンタリングをしていませんか？それよりももっと簡単な方法があります。HTMLviewsourceprint?1<h2class="sampleTxt">これは見出しです。</h2>CSSviewsourceprint?1.sampleTxt{2   ...続きを読む

何気なくCSSを記述していて、あるとき途端にCSSが効かなくなったという経験はないでしょうか。スペルなどは間違っていないのに、スタイルが適用されない...という場面も多々あると思われます。実はCSSには優先順位があり、記述の方法によってその優先順位が変動し、順位の高いものが優先的に読み込まれるようになっています。そこで今回は、CSSの優先順位についてご紹介します。基本的な優先順位についてCSSは、...続きを読む

ボックス要素の右下にバナーやボタンなどを配置したい場合、paddingやmarginなどで間隔を空けるよりもよりよい方法があります。HTMLviewsourceprint?1<divclass="sampleBox">2    <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト<...続きを読む

dl内のdt要素やdd要素を横に並べる方法です。HTMLviewsourceprint?1<dlclass="sampleList">2    <dt>dt要素です。</dt>3    <dd>dd要素です。サンプルテキストサンプルテキストサンプルテキストサンプルテキスト...続きを読む

th間やtd間のボーダーに余白が空いた、すこしおしゃれなデザインのテーブルを見たことがあると思います。そのコーディング方法をご紹介します。HTMLviewsourceprint?01<tablewidth="300"class="sampleTable">02<tr>03    <thwidth="100">サンプルテキス...続きを読む

ulやolを使った際に表示されるリストマーカーがありますが、もしもデフォルトとは違う色を使う必要が出てきた場合、わざわざ画像を用意して表示させたりしていませんか？そんなことをしなくとも、簡単にリストマーカーに色を付ける方法をご紹介します。HTMLviewsourceprint?1<ulclass="sampleList">2<li><span>サンプルサンプルサ...続きを読む

text-indent:-9999px;を使って表示されているテキストを非表示にし、タグの内側を背景画像で置換するという方法について、ご紹介します。※text-indet:-9999px=スパムというイメージを持たれる方がいらっしゃいますが、背景画像に書かれている文言と同じテキストをtext-indentで非表示にすることは問題ありません。ユーザに見えている画像の文字と全く関係のないテキストをte...続きを読む

CSSで背景をいくつか利用して角丸を表現しようとする際に、div要素をいくつか重ねると、IE6などでdiv間に隙間が空いてしまう場合があります。その改善方法です。ただし、今回紹介するコーディング方法は中身のないタグ要素、すなわち空要素を使っているHTMLが対象であり、空要素を使うことはコーディングのルールとして間違っています。あくまでそういったコーディングがなされた既存のサイトを改善する、という前...続きを読む

要素の横幅を指定し、その中の文字列にリンクを設定すると、文字数によっては中途半端な部分で折り返され、2行にわたってリンクが表示されてしまう場合があります。それを防ぐテクニックです。HTMLviewsourceprint?1<ulclass="sampleBox">2<li><ahref="#">サンプルテキスト</a></li>3<...続きを読む

リストで項目に上下のborderを指定する際、リスト内項目の最初と最後のborderだけ表示させないテクニックです。HTMLviewsourceprint?1<ulclass="sampleList">2    <li>Menu01</li>3    <li>Menu02...続きを読む