様々な要素が追加・削除され、HTML4以前とは大きく環境が変化すると話題のHTML5。そこで、HTML5とHTML4を比較し、変更される点などをこれから数回に分けてご紹介していきたいと思います。今回はレイアウト要素編です。header要素、footer要素一般的なレイアウト手法に従ってレイアウトされたサイトには、ヘッダとフッタと呼ばれる本文とは別の部分が存在します。ヘッダはサイト上部に位置し、主に...続きを読む

floatを使った際の表示の崩れを正すためによく使われるclearfixですが、それを使わずともfloatを簡単に解除する方法をご紹介します。HTMLviewsourceprint?1<divclass="sampleBox">2    <divclass="boxLeft">3    &nbs...続きを読む

画像のロールオーバーに関するまとめ記事を更新しました。下記リンクよりご覧ください。【比較】覚えておきたいロールオーバー画像切替え5つの手法（CSS？JS？onmouseover？）通常、ロールオーバーで画像を変化させて強調する場合には、ロールオーバー前の画像とロールオーバー後の画像、2種類を用意しなければなりませんが、そんな手間をかけずとも、CSSだけで画像を変化させて強調するテクニックがあります...続きを読む

背景を重ねたり、画像文字に使用したりと、何かと便利な透過PNGですが、実はIE6には対応していません。そこで今回は、CSSのみを使って透過PNGをIE6で表示させる方法をご紹介します。HTMLviewsourceprint?1<divclass="sampleBox">2    <p>サンプルテキストサンプルテキストサンプルテキストサ...続きを読む

画像のロールオーバーに関するまとめ記事を更新しました。下記リンクよりご覧ください。【比較】覚えておきたいロールオーバー画像切替え5つの手法（CSS？JS？onmouseover？）画像ボタンなどでロールオーバーをしようとする際に、画像を読み込む一瞬のラグでボタンがちらついてしまうことがあります。そのちらつきを防ぐための方法をご紹介します。HTMLviewsourceprint?1<divcl...続きを読む

写真をfloatさせてテキストを廻りこませたら、IE6だけ写真の位置が違う！なんて経験ないでしょうか。これは特定の条件が揃った際に起こるIE6のバグなのですが...はてさてその発生条件とは。発生条件このバグはスタイルシートで次のような指定がされているときに発生します。viewsourceprint?1.bug01{2       ...続きを読む

一行目の見出し項目を目立たせるために、二行目以降の文字を字下げすることを「ぶら下がりインデント」と呼びます。これをスペースなどで表現するのではなく、CSSで表現する際の方法をご紹介します。サンプルコードHTMLviewsourceprint?1<pclass="sampleIndent">見出し項目ですサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサン...続きを読む

世の中には多種多様なブラウザが存在しますが、それぞれのブラウザごとに、デフォルトのスタイルが異なる場合があります。特に、CSSでデザインしていく上で、この異なるスタイルのせいで困ってしまうことがあります。代表的なものとしては、body要素が持つデフォルトの余白を、FireFoxやIEはmargin属性で再現しているのに対し、Operaはpadding属性で再現しているという点などが挙げられます。そ...続きを読む

ネガティブマージンを使うと、余計な要素を押し出して消すと言うことが可能になります。今回はそれを使い、パンくずリストを作る方法です。まず、サンプルとして、以下のようなパンくずリストのコードがあるとします。カテゴリ同士をつなぐ「>」の記号は、背景画像で表すとします。HTMLviewsourceprint?1<ulclass="sampleList">2  &nbs...続きを読む

IE6のバグの一つとして、floatしたのと同じ方向にmarginを指定すると、その値が2倍になってしまうという物があります。例として、viewsourceprint?1.sampleBox{2    float:left;3    margin-left:10px;4}この場合だと、margin-leftが2倍に換算...続きを読む