カテゴリー:CSSテクニック

リスト表示へ

これで決まり?な画像置換 - DKIR

2009年12月 7日 12:13

こんな記事を書いておいてなんですが・・アクセシビリティ的にはあまり画像置換自体が推奨されていないようです。
ただ、個人的な意見を言うと、あくまで理想は、だと思っています。
管理側の問題などもあるでしょうし、どのサイトも 100% WCAG 2.0 に適合しないといけない、というわけでもないと思います。複合的に考えて、最適な策を取ることが望ましいのではないかと。

ただ、使用する上ではそういった問題があるということは知った上で使うべきだと思います。アクセシビリティに関してはこちらの 画像置換とアクセシビリティ を参考にしてみてください。n

ちなみにマウスオーバーによる効果だけを実装したい場合は、手軽に画像のロールオーバー効果を実装するJavaScript を参考に、JavaScript を使っての実装もありです。(というか個人的には大体 JS でやっちゃってます)

DKIRのイメージ

前回の記事で告知したように、DKIR という画像置換手法について解説したいと思います。
この手法のメリットは、"画像OFF、CSS ONでも問題なく内容が表示される" というところでしょう。

今までの画像置換の問題点をおおむね解決している手法となります。
(SEO 的にどうなの? というのは議論しても解決する問題でもないので触れません)
また、IE6 を含めたほとんどのブラウザでも対応可能です。 この記事の後に ピュアCSSで実装するDKIRを応用した画像ボタンのロールオーバー効果 という記事を書きました。こちらは画像置換ではなく、ただの画像ボタンのロールオーバーの紹介なので、画像置換は・・という人は参考にしてみてください。

IE6でもCSSのみでmax-widthを実現する

2009年11月11日 00:55

IE6でもCSSのみでmax-widthを実現している図

今回も CSS Play でのテクニックの紹介です。
タイトル通り、IE6 には対応していないはずのmax-widthをハックなしの CSS のみで実現する方法が書かれています。n

ただ、多少 HTML を工夫しないといけない箇所があり、まったくの CSS のみ、とは違うかもしれませんが、div 要素を 2 個ほど追加するだけなので、それでデザインの制限がはずれるなら積極的に採用してもいいと思います。n

こちらの件はコリスさんの [CSS]ハック無しでIE6でmax-widthを実現するスタイルシート でも紹介されていました。n

さて、今回もこのテクニックをひも解いていってみましょう。このテクニックの肝は、overflow: hiddenの意外な使い方にあります。(結構当たり前? でも自分は結構最近知りました・・)n

実際の demo は以下にあります。それぞれ、コンテンツをセンタリングさせたもの、左寄せ、右寄せとなっています。n

ハックやJavaScriptを使わず、クリーンHTMLでIE6にも対応したプルダウンメニュー

2009年9月30日 18:11

まことさんからコメントをいただきましたが、ul.sub li の overflow: hidden; がなければIE7(IETester)でも動きましたよー。とのことでした。まだこちらで検証していないんですが、もし問題が出ている人がいたら、こちらを試してみてください。

コメントを頂いて気づいたのですが、IE7 ではどうやらうまく動いていないようです・・。CSS Play のほうではうまく動いているので、こちらのサンプルの不備だと思われます。改善するまでは概念の理解にとどめておいてください・・。

最近紹介ばかりな感じがしますが・・。
ちょっとテクニックの発想に感動したので、解説も踏まえて紹介したいと思います。
ちなみにこのテクニックの元になったのはこちらの CSS Play で紹介されているものです。

まず最初に、概念図を見せます。(クリックで拡大)
クリーンHTMLのプルダウンメニュー概念図

クリーン HTML のプルダウンメニュー デモ

サンプルダウンロード

ネガティブマージンとパディングで余白を相殺

概念図を見てもらうと分かりますが、通常のメニューに対して margin-top にネガティブマージンを、 IE6 で対応している数値いっぱいに設定し、かつ同様の値を padding-top にも設定します。
"モダンブラウザの場合はこれはなくても大丈夫なのですが、IE6 の場合、隠れているプルダウンメニュー部分が隣の要素と重なる、という不具合があるのでこれで解消しています。"

メニューに固定幅と overflow: hidden を設定

そしてリスト要素に対して表示させたい固定幅を指定しつつ、overflow: hiddenではみ出した部分を非表示にします。ここがまずポイント 1 です。

メニューとプルダウンメニューを float で配置

続いて、リスト内の a 要素を左に float させ、プルダウンでマウスオーバー時に表示させたい要素も左に float させます。
これで、なにもしていなければ、単純に最初の a 要素とリスト要素が横に並ぶ状態になります。

ここでポイント 1 が生きてきます。固定幅と overflow: hidden によって、float で並んだ要素のうち、a 要素のみが表示されます。2 カラムのサイトで、右カラムだけ overflow: hiddne で隠れているのを想像すると分かりやすいと思います。(イメージはこんな感じ↓)
overflow: hidden で消えているイメージ図

:hover でボックスのサイズを変更

ここがポイント 2 です。そして秀逸。
:hover 擬似クラスは IE6 の場合、a 要素以外には対応していません。
無理やり対応させる方法がなくはありませんが、その場合は HTML 的に invalid になってしまいます。
しかし、今回はタイトルの通りクリーンな HTML 実装されているため、しっかりと a 要素に :hover 擬似クラスを使います。

では使われているポイントを見てみましょう。

しっかりと a 要素に :hover 擬似クラスが使われています。
ここで指定されているmargin-right: 1pxは、プルダウンメニューの親(マウスオーバーしたらメニューが表示される部分)の右マージンを拡大する、という処理です。

ではなぜ、こんな処理をしているのでしょうか。
答えは、これを追加することによって、上で書いた overflow: hidden で隠れているリスト要素を "カラム落ちさせる" ことです。
ぴったりと計算したカラムの場合、1px でも width なり margin なりが違うとカラム落ちしてしまいますよね。
これを "あえて" 実行しているわけです。

さて、カラム落ちしたリストはどうなるでしょうか。
overflow: hidden で隠れるのは、幅の部分のみなので当然、カラム落ちしたリスト要素は、マウスオーバーした a 要素の下に来ます(カラム落ち)。

まさにプルダウンメニューが表示されたように見えますね。
しかし、これだけではリスト部分にマウスを移動した瞬間、a 要素のmargin-right: 1pxがなくなってしまうため、また元の位置に戻ってしまいます。

ここが秀逸な部分です。
リスト部分にマウスを持っていくと、当然その先もリンクになっています。
リンクということは a 要素ですよね。
そして、この a 要素にも同じようにボックスのサイズが変わる処理をしておきます。
こんな感じです↓

すると、親に当たる a 要素からマウスが離れても、今度は子要素に当たる a 要素の幅が変わるため、結果的にプルダウンで表示された部分にマウスを移動してもプルダウンしたままになる、というわけです。

さらに秀逸な点

さて、これでテクニックの肝は説明しましたが、このサンプルにはさらに秀逸な点があります。
それは "クリックしてプルダウンを固定することができる" ということです。

上の CSS を見て気づいている人もいるかもしれませんが、ul.sub a:focusul.sub a:activeにもmargin-right: 1pxが設定されているため、クリックした際にも margin-right: 1px が反映されます。

そのため、クリックするとプルダウン状態が維持される、というわけです。
これを応用すると、クリックで表示させるメニューも簡単に作れそうですね。

注意点

このテクニックの注意点というか、対応できない点として、リストの幅が固定でないといけないため、2 階層以上あるようなプルダウンメニューは作成できません。そのため、ちょっとしたプルダウンなどに使うことが望ましいです。

ドロップシャドウを含む背景の、影の幅だけを無視させてレイアウトするテクニック

2009年8月10日 10:48

ドロップシャドウ。いまや web デザインにはなくてはならない要素ですよね。
Firefox や webkit 系ブラウザなんかでは box-shadow が実装されはじめていますが、ないブラウザの場合はどうしても画像で用意しないといけません。n

しかしその場合、コンテンツの幅は影の幅を含んだものになってしまいます。
全体を覆う背景がそれであれば、ただ余白の数値を多めにすればいいだけですが、例えば影がある要素とない要素が縦に並んでいる場合、そのまま並べたのでは視覚的に影の分だけずれたように見えてしまいます。n

↓こんな感じでずれが生じてしまいます。
ドロップシャドウ分のずれを説明している図

今回はこの影の部分のずれを CSS で解消してデザイン通りの幅を確保するテクニックの紹介です。n

ドロップシャドウを含む背景の、影の幅だけを無視させてレイアウトする デモ

サンプルダウンロード

テクニック詳細

ネガティブマージンを使う

このテクニックにはネガティブマージンを使います。
上記 CSS のmargin: 0 -8pxの部分です。n

この -8px というのが影の部分の幅です。なので、影の具合によってこの数値は適宜変わることになります。
こうしてマイナス値のマージンを与えることで、(感覚的に)影の幅の分だけコンテンツ領域が縮小したことになります。n

これにもともと想定していた(影の部分を加算しない)幅をボックスに与えてます。
float して左右に分けているマルチカラムでも、ネガティブマージンによってカラム落ちするのを防ぎます。n

最後に、このままだとテキストなどのコンテンツ内容が影の部分にかぶってしまうので padding で適切に余白を取ることによってドロップシャドウを使ったデザインをすっきりと見せることができます。n

このテクニックを使うことで、マルチカラムなどのデザインをする際にボックスを意識してあらかじめ小さくボックスを作る、というようなデザインを殺すことがなくなります。n

IE 対策

IE の場合、ネガティブマージンを指定すると思ったような表示がされない場合があります。
その場合は "IE6で背景が表示されない際にチェックすること" で紹介している「背景が表示されない要素に「position: relative;」を指定」を利用します。n

これで IE 含め、ドロップシャドウの部分だけを無視させてデザイン通りに表示することができるようになります。n

各ブラウザで先行実装しているCSS3プロパティまとめ

2009年6月22日 15:35

[10/03/03]
Opera10.50 がリリースされました。それに伴って、Opera10.50 で新しく実装されたプロパティを追加しました。
[10/01/25]
-moz-linear-gradient, -moz-radial-gradient の項目を追加しました。
[10/01/22]
-webkit-border-radius について若干補足を追加しました。

色々と記事を書いてきて、いざ CSS3 を使ってサンプルを作ってみよう、って思ったときに微妙にプロパティ名とかを忘れていたのでまとめてみる。ちなみにまだ草案のものもあるのでちょこちょこ更新予定。

漏れているものもあると思うので、もしなにかあったら連絡もらえると助かります。

WebKit 系

(*) は CSS3 で定義された値

項目をクリックすると、詳細が表示されます。

すべて開閉

  • -webkit-background-size

    [使い方] -webkit-background-size: 40px 20px;

    背景画像のサイズを指定します。横 縦の順で記述します。

  • -webkit-background-origin

    [使い方] -webkit-background-origin: padding;

    上記の background-size で % を指定した場合の、算出方法を指定します。使える値は以下の通り。

    • border (ボーダーまで含めたボックスサイズで算出)
    • padding (パッディング領域まで含めたボックスサイズで算出)
    • content (コンテンツ領域のみのボックスサイズで算出
  • -webkit-background-clip

    [使い方] -webkit-background-clip: padding;

    背景画像を描画する際、border 領域の下から描画するか、padding 領域から描画するかを指定します。border に対して、透過のある画像や、透明度のある色を指定した際に背景が border の下に表示されると問題がある場合などに使うといいと思います。

    • border (ボーダーまで含めたボックスサイズで背景画像を描画)
    • padding (パッディング領域まで含めたボックスサイズで背景画像を描画)
  • Multiple background

    [使い方] backgorund-image: url(sample.png), url(sample2.png)...;

    CSS3 では背景画像を複数指定することができるようになりました。
    カンマ区切りで列挙することで、前面から背面への画像指定が可能です。
    繰り返し処理や配置箇所なども同じようにカンマ区切りで指定します。(それぞれ書かれた位置が画像と対応します)

  • -webkit-border-image

    [使い方] -webkit-border-image: url(sample.png) 4 4 4 4 [round|repeat] / 4px [,4px 4px 4px];

  • -webkit-border-radius

    [使い方] -webkit-border-radius: 5px;

    ボーダーの角を丸くするプロパティです。個別に四隅の値を設定することもできます。
    CSS Backgrounds and Borders Module Level 3 の勧告案を受けてか、Google Chrome4 では -webkit- のプレフィクスがなくても動作するようになっています。

    • -webkit-border-top-left-radius: 5px;
    • -webkit-border-top-right-radius: 5px;
    • -webkit-border-bottom-left-radius: 5px;
    • -webkit-border-bottom-right-radius: 5px;
  • -webkit-box*

    [使い方] display: -webkit-box;

    この display を指定された要素内のブロック要素(p や div など)は、自動的に横並びになり、かつ最大の高さを持つ要素の高さにすべてが追従する。

  • -webkit-box-flex

    [使い方] -webkit-box-flex: 1;

    display: box を指定された要素内に配置されたブロック要素(※)の幅の状態を指定します。(flex は "フレキシブル" の意味です)
    (※)の要素のうち、box-flex で指定された数値の合計に対する割合が算出幅となります。

    つまり、box-flex: 1, box-frex: 2 というふたつの要素が存在した場合、前者は親要素の 1/3 の幅を閉め、後者は 2/3 の幅を占めることになります。

  • -webkit-box-ordinal-group

    [使い方] -webkit-box-ordinal-group: 1;

    display: box 内に配置されたブロック要素に指定します。
    指定できるのは数値で、設定した数値の順番にコンテンツが表示されます。
    (HTML の記述順序に関わらず出現順序を変更したい際に使用します)

  • -webkit-box-shadow

    [使い方] -webkit-box-shadow: 2px 2px 5px black;

    左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。

  • text-shadow

    [使い方] text-shadow: 2px 2px 5px black;

    左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。box-shadow と異なり、文字自体に影を付けます。

  • -webkit-text-stroke

    [使い方] -webkit-text-stroke: 2px blue;

    テキストにアウトラインを設定します。アウトラインの太さ、幅を指定します。また、以下のプロパティを使うことで個別に設定できます。
    ※ちなみにこれは W3C に提案されている段階なので、CSS3 の規格には取り込まれていません。

    • -webkit-text-stroke-width
    • -webkit-text-stroke-color
  • -webkit-text-fill-color

    [使い方] -webkit-text-fill-color: white;

    テキストの塗りつぶし色を指定します。color と同義ですが、こちらの値を transparent に指定することで、アウトラインのみを表示することが可能になります。
    ※ちなみにこれは W3C に提案されている段階なので、CSS3 の規格には取り込まれていません。

  • -webkit-box-sizing

    [使い方] -webkit-box-sizing: content-box [,border-box];

    ボックスの生成するルールを設定します。content-box は、通常の CSS の仕様に沿ったボックスを生成し、border-box は IE6 の後方互換モードで代表される、width 値に border や padding が含まれるボックスを生成します。

  • -webkit-transition-property

    [使い方] -webkit-transition-property: color, background-color;

    transition を適用するプロパティを設定します。all を指定するとすべてが対象となります。

  • -webkit-transition-duration

    [使い方] -webkit-transition-duration: 0.5s;

    transition の変化をどれくらいの時間で表現するかを設定します。単位は s です。

  • -webkit-transition-timing-function

    [使い方] -webkit-transition-timing-function: ease-in-out;

    transition の変化の具合を設定します。指定できる値は以下の通りです。

    • default
    • linear
    • ease-in
    • ease-out
    • ease-in-out
    • cubic-bezier() 4つの数字をカンマ区切りで指定
  • -webkit-gradient()*

    [使い方] background-image: -webkit-gradient(linear, left top, left bottom, from( white ), color-stop( 0.3, gray ), to( black ) )

  • -webkit-box-reflect

    [使い方] -webkit-box-reflect: below [0px -webkit-gradient()];

    生成されたボックスなどを反転表示させます。また、透過 PNG 画像や、-webkit-gradient() を使用することで反転した要素にマスクをかけることもできます。

    指定する値は、「above(上)、below(下)、left(左)、right(右)」で位置を、続く px で離れる距離を、最後に PNG 画像の URL か、もしくは -webkit-gradient でマスクを指定します。

  • -webkit-mask-box-image

    [使い方] -webkit-mask-box-image: url(mask.png);

    透過 PNG 画像を指定することで、ボックスにマスクをかけることができます。

  • -webkit-transform

    [使い方] -webkit-transform: rotate(45deg);

    生成されたボックスを変形(transform)させます。
    指定できる値は次の通り。

    rotate(deg)回転(deg で指定。30deg など)
    rotateX(deg)
    rotateY(deg)
    横(縦)回転。-webkit-transform-style、-webkit-transform と組み合わせて使うことで 3D 的表現が可能。(deg で指定。30deg など)
    scale(xy[x,y])拡大・縮小(数値を指定。1 や 0.5 など)
    skew(deg)スキュー(シアー)(degで指定。30deg など)
    translate(xy[x,y])移動(px で指定。30px など)
    perspective(deg)遠近感(数値で指定)
  • -webkit-transform-style

    [使い方] -webkit-transform: preserve;

    上で書いた -webkit-transform の変形の仕方を、2D 表示にするか、3D 表示にするかを指定します。
    指定できる値は次の通り。

    • flat (2D 表示)
    • preserve-3d (3D 表示)
  • -webkit-transform-origin

    [使い方] -webkit-transform-origin: X Y Z;

    transform の基準点を指定します。

  • -webkit-backface-visibility

    [使い方] -webkit-backface-visibility: hidden;

    rotateX などで裏返ったときにコンテンツの裏側を表示するかどうかを指定。

  • @font-face

    [使い方] @font-fase{ font-family: myFont; src: url(font.otf) format('opentype');

    サーバにアップしたフォントを指定し、そのフォントがインストールされていない環境でもフォントが見えるようにする指定です。
    font-family で任意の名前をつけ、src でフォントファイルのパスを指定します。
    ちなみに利用する場合は、任意に付けた名前を指定することで利用できるようになります。
    使用する場合は、ライセンスなどの問題を確認した上で使うよう注意する必要があります

Mozilla 系

  • -moz-max-content(etc.)

    [使い方] width: -moz-max-content

    幅(width)の算出方法を指定するプロパティの値です。新しく追加されたのは以下の通り。

    • -moz-max-content (コンテンツが取り得る最大幅)
    • -moz-min-content (コンテンツが取り得る最小幅)
    • -moz-available (表示に利用可能な幅)
    • -moz-fit-content (内容にフィットさせた幅)
  • -moz-border-image

    [使い方] -moz-border-image: url(bg_pickupbox.gif) 4 4 4 4 / 4px round;

    ボーダーに画像を指定するプロパティです。ちょっと英語なので解釈が合っているか分かりませんが、どうやら仕様が変更になったようです。そのため、若干 webkit 系と指定方法が異なるので注意が必要です。
    [参考:mozilla developer center]

  • -moz-border-radius

    [使い方] -moz-border-radius: 5px;

    ボーダーの角を丸くするプロパティです。個別に四隅の値を設定することもできます。(webkit 系と指定方法が異なるので注意)

    • -moz-border-radius-topleft: 5px;
    • -moz-border-radius-topright: 5px;
    • -moz-border-radius-bottomleft: 5px;
    • -moz-border-radius-bottomright: 5px;
  • -moz-linear-gradient*

    [使い方] background-image: -moz-linear-gradient(-90deg,rgb(237, 237, 237) 0%,rgb(204, 204, 204) 40%,rgb(0, 134, 224) 100%)

    線状のグラデーションを指定する値です。(webkit 系と指定方法が異なるので注意。こちらの方が仕様に則した指定方法です)
    参考URL: https://developer.mozilla.org/en/CSS/-moz-linear-gradient

  • -moz-radial-gradient*

    [使い方] background-image: -moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%)

    円状のグラデーションを指定する値です。(webkit 系と指定方法が異なるので注意。こちらの方が仕様に則した指定方法です)
    参考URL: https://developer.mozilla.org/en/CSS/-moz-radial-gradient

  • -moz-background-inline-policy

    [使い方] -moz-background-inline-policy: bounding-box;

    インライン要素の背景画像の繰り返し方を指定します。指定できる値は以下の通り。

    • bounding-box (インライン要素全体に対して背景画像を繰り返し表示する)
    • each-box (行ごとに背景画像を繰り返して表示する)
    • continuous (前の行の繰り返しを引き継いで背景画像を表示する)
  • -moz-box*

    [使い方] display: -moz-box;

    この display を指定された要素内のブロック要素(p や div など)は、自動的に横並びになり、かつ最大の高さを持つ要素の高さにすべてが追従する。

  • -moz-box-flex

    [使い方] -moz-box-flex: 1;

    display: box を指定された要素内に配置されたブロック要素(※)の幅の状態を指定します。(flex は "フレキシブル" の意味です)
    (※)の要素のうち、box-flex で指定された数値の合計に対する割合が算出幅となります。

    つまり、box-flex: 1, box-frex: 2 というふたつの要素が存在した場合、前者は親要素の 1/3 の幅を閉め、後者は 2/3 の幅を占めることになります。

  • -moz-box-ordinal-group

    [使い方] -moz-box-ordinal-group: 1;

    display: box 内に配置されたブロック要素に指定します。
    指定できるのは数値で、設定した数値の順番にコンテンツが表示されます。
    (HTML の記述順序に関わらず出現順序を変更したい際に使用します)

  • -moz-box-sizing

    [使い方] -moz-box-sizing: content-box [,border-box];

    ボックスの生成するルールを設定します。content-box は、通常の CSS の仕様に沿ったボックスを生成し、border-box は IE6 の後方互換モードで代表される、width 値に border や padding が含まれるボックスを生成します。

  • -moz-transform

    [使い方] -moz-transform: rotate(45deg);

    詳細については -webkit-transform を参照してください。

  • -moz-transform-origin

    [使い方] -moz-transform-origin: X Y;

    transform の基準点を指定します。

Opera 系

  • Multiple backgrounds
  • -o-background-size

    [使い方] -o-background-size: 50% 50%;

    背景画像のサイズを指定します。横 縦の順で記述します。

  • background-origin

    [使い方] background-origin: padding;

    上記の background-size で % を指定した場合の、算出方法を指定します。使える値は以下の通り。

    • border (ボーダーまで含めたボックスサイズで算出)
    • padding (パッディング領域まで含めたボックスサイズで算出)
    • content (コンテンツ領域のみのボックスサイズで算出
  • background-clip

    [使い方] background-clip: padding-box;

    背景で塗りつぶす領域を変更できる。padding のエッジからまたは border のエッジからのどちらかを選択できる。

    • padding-box (padding のエッジから開始)
    • border-box (border のエッジから開始)
  • border-radius

    [使い方] border-radius: 10px;

    ボーダーの角を丸くするプロパティです。個別に四隅の値を設定することもできます。
    CSS Backgrounds and Borders Module Level 3 が勧告候補になったため、Opera10.50 では -o- のプレフィクスがなくても動作するようになっています。

  • border-image

    [使い方] border-image: url(bg_pickupbox.gif) 4 4 4 4 / 4px round;

  • box-shadow

    [使い方] box-shadow: 2px 2px 3px #999;

    左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。
    現在は W3C の CSS3 の草案からは一端消去されている仕様となります。
    また、まだ草案の段階ですが Opera ではベンダープレフィクスが取れています。

  • text-shadow

    [使い方] text-shadow: 2px 2px 5px black;

    左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。box-shadow と異なり、文字自体に影を付けます。

  • -o-transform

    [使い方] -o-transform: rotate(45deg);

    詳しくは -webkit-transform を参照してください。

  • -o-transition-property

    [使い方] -o-transition-property: color, background-color;

    transition を適用するプロパティを設定します。all を指定するとすべてが対象となります。

  • -o-transition-duration

    [使い方] -o-transition-duration: 0.5s;

    transition の変化をどれくらいの時間で表現するかを設定します。単位は s です。

  • -o-transition-timing-function

    [使い方] -o-transition-timing-function: ease-in-out;

    transition の変化の具合を設定します。指定できる値は以下の通りです。

    • default
    • linear
    • ease-in
    • ease-out
    • ease-in-out
    • cubic-bezier() 4つの数字をカンマ区切りで指定

その他

  • rgba

    [使い方] background-color: rgba( 0,0,0,0.5 );

    透明度を持った色を設定します。左から RGB 値を指定し、最後に 01 の間で透明度を指定します。(0 で完全な透明になります)

参考にした記事

builder by ZDNet Japan より

The Art of Web より

装飾用divを劇的に減らせるCSS3プロパティとテクニック

2009年6月20日 09:55

div イメージ

以前の記事の HTML5で組んでみた に続いてサンプルがまったく一緒ですがw
タイトルの通り、HTML5+CSS3 を使ってできるだけ無駄な HTML 要素(主に div)を使わずにどこまで思い通りのデザインが実現できるか実験してみました。⇒[DEMO]

結果、使用した div はわずかに 3 つ。ちなみに実際のブログトップで使用している div を数えたところ、54 個も使ってました。(一概に減らせばいい、というものでもありませんが)n

ただし、今回の実験はまだ草案の段階のものなどを多く含んでいるため、またそれらに対応しているブラウザが webkit 系(Safari や Google Chrome など)のみということもあり、正常に表示されるのは webkit 系だけとなってます。n

無駄なHTML要素がどこまで減らせるか実験してみた デモ

今回の実験の説明

個人的にアツイと思った CSS3 プロパティ・値

  • border-image: ...
  • display: box
  • box-flex: 1
  • background: ...
  • box-shadow: ...
  • box-sizing: border-box

CSS3 の草案で定義されているプロパティなどについては、各ブラウザで先行実装しているCSS3プロパティまとめ でまとめています。n

簡単に説明すると、n

HTML5 の新要素により、div を使う機会が減った

まず、header 要素や footer 要素、nav 要素など、今までは<div id="header">などとして定義していた箇所が、そのまま要素名として使えるようになったため、div を使う必要がなくなりました。n

border に画像が使用できる「border-image」

ひとつの画像を指定した値で区切って上下左右、それからボックス四隅へ適用するプロパティです。これのおかげで、ひとつのボックス要素にこれを指定するだけで、角丸などの複雑な囲みでも簡単に実装することができます。n

つまり、これを ul 要素などに使えば、装飾用に新しく div を追加する必要がなくなる、というわけです。n

簡単にカラム同士の高さを揃えられる「display: box」

こちらはプロパティではありませんが、CSS3 で新しく定義されている display プロパティの新しい値です。
display: box を指定された要素の子要素であるブロック要素は、自動的にカラム配置となり、さらにどのカラムも最大の高さを持つカラムに追従して高さが確保される、という特徴があります。n

そのため、メイン・サブカラムの高さを揃える JS を使ったり、はたまた背景を使ったトリッキーな方法で高さを揃える、という必要がなくなるため、これもまた div 要素を削る要因となります。n

それのおかげで、div をほとんど使わずにサンプルの左右のカラムの高さがそろっている、というわけです。n

背景画像を複数指定できるようになった CSS3

現在策定中の CSS3 では、背景画像を複数指定することができるようになりました。
指定したい数だけ、カンマ区切りでそれぞれ指定します。n

上のようにカンマ区切りで指定すると、それぞれの配置や繰り返し内容を列挙することができます。n

これにより、アイコンと画像ボーダー、のように複数の画像を指定することが可能なため、余計な div などの要素を追加する必要がなくなります。n

100% の要素内でも固定幅を持ったように要素を配置するテクニック

ここの気づきも、div を減らす要因になりました。
以下の HTML と CSS を見ていただくと分かりますが、heade 要素は横幅 100% に設定されているにも関わらず、内包している h1 などの要素がメインのコンテンツと同じ 830px の幅に収まっています。n

このテクニックの肝は、float,position,marginの 3 つです。n

設定する値は上記を参考にしてもらうとして、なにをやっているか、を説明すると、float させた要素に対し、position: relative を指定します。n

こうすることで、続く left などの値が反映されるようになります。
そしてこの left に 50% を指定すると、指定された要素の左端は画面中央に来ます。n

最後に、margin にマイナス値を設定し、数値をコンテンツ幅の半分に指定することで、まるでコンテンツ幅が固定されているような位置に配置される、というわけです。n

つまり、いったんコンテンツを画面中央に移動させたのち、マイナス方向に要素を移動することで、意図した固定幅の範囲にコンテンツが収まるようになる、というわけです。n

今回のサンプルでは、RSS feed のアイコンが右側にあるので、同じように左右を入れ替えて値を設定すれば、右寄せにコンテンツが表示される、というわけです。n

まとめ

以上の、border-image,background,display: boxと、HTML5 の新要素、および上記のテクニックを使うことによって 54 個も使っていた div を、3 つまでに抑えることができました。n

まだ CSS3 の草案段階のプロパティだったりしますが、早くすべてのブラウザに実装してもらいたいものですね。n

親要素の幅を越えてボックスの幅をブラウザいっぱいに広げるテクニック

2009年6月16日 17:52

更新履歴

[09/06/17]
Opera でも問題なく動作するよう修正を加えました。
[09/06/16]
すっかり min-height の存在を忘れていました(;´д`)
今回の場合、まさに min-height が適任でしたね・・。

ということで、min-height を使用したバージョンをアップしました。(ただ、あまりないとは思いますがコンテンツ幅が動的に変わる、なんて場合は前バージョンのほうが応用が利くかもしれません)

これに伴って、完全対応ブラウザに IE6, 7 が追加されます。(相変わらず Opera はスクロールバーが出ませんでした・・)n

このブログのメニューのように、メニューだけブラウザ領域いっぱいに配置する、というデザインはよく見かけると思います。

しかし、コンテンツ全体をひとつの div で括ってしまうと横幅が固定のデザインの場合、例えメニューに対して width: 100%;などとしても div で設定されている横幅いっぱいに広がるのみで、ブラウザ領域いっぱいまでには広がりません。今回のテクニックは、そんなときでもメニューを横幅いっぱいに広げるテクニックです。

固定幅のボックスに配置したメニューをブラウザいっぱいに広げるテクニック デモ

Firefox Google Chrome Safari Opera IE

※ただし、ver1.0 では IE6, 7, Opera については、ブラウザをコンテンツ幅より小さくしてもスクロールバーが表示されません。

ブロック要素を内容量に応じて自動で上下左右にセンタリングさせるトリック

2009年6月 7日 15:37

ブロック要素を内容量に応じて自動で上下左右にセンタリングさせるトリック サンプル画像
このトリックの発案の元になったのはヨモツネットさんの CSS で簡単に上下中央揃えを実現するという記事です。

各所で色々記事が出ていますが(このブログでも 2 回ほど取り上げていますが)、今回は表示するボックスのサイズによらず、(margin などの相殺を使わず)上下左右にボックス要素をセンタリングさせるテクニックの紹介です。

そのため、内容量に応じて高さが変わる状況でも垂直方向へのセンタリングが可能になります。

ブロック要素を上下左右(垂直)にセンタリングさせるトリック デモ

今回のテクニックには、IE6, 7 向けに余分な要素を挿入する必要があります。
IE6, 7 をターゲットとしない場合は、HTML もすっきりと書くことができます。

サンプルダウンロード

ダウンロードされるファイルには、デモで使用しているものがそのまま入っています。
デモのような使い方をしたい場合は、ダウンロードされた style.css 内の#blockCenteringの width, height, padding あたりを修正することでそのまま応用できるかと思います。

IE8だけに適用させるCSSハック

2009年5月12日 13:04

IE8 がリリースしてしばらく経ちました。
現状では、CSS2.1 への準拠が一番、と言われていますが、正直 CSS3 に対応してくれないと使い物にならない、ってのが正直な感想です。

ただそれでも、以前の IE たちに比べるとずいぶんとお利口になったようで、あまりレイアウトが崩れる、というのがないのではないでしょうか。
しかしながら、まだたまにおかしな挙動をする部分があり、しかもそれが IE8 だけ、なんてことになるとハックの出番かな、なんてことになります。

そんなこんなで、IE8 対策が必要な場合に備えて、ハックを調べてみたらいくつか見つかりました。備忘録的にもエントリーしたいと思います。(ハックは 2 種類あります)

参考サイト

IE8 だけに適用させる CSS ハックデモ

CSS ソース

HTML ソース

CSS ソース概要

今回のサンプルで、実際に使いやすいのは sample02 ではないかなと思います。
そのものズバリを適用させることができるので。ということで、順番前後しますが sample02 から説明したいと思います。

sample02 の説明

見てもらうと分かりますが、注意点は 3 箇所。
まず最初に、html>/**/bodyと、子セレクタを使いつつ、>bodyの間に/**/と、空のコメントを入れます。
これを入れないと、IE7 でも適用されてしまうようです。

次に、プロパティの後ろに/***/を入れます。(サンプルではcolor /***/
これに関しては、この表記がなくても IE6,7, Firefox2,3, Safari4, Opera9, Google Chrome で確認したところどれも適用されませんでした。Mac では確認していないので Mac 向けの指定かもしれません。念のため。

最後に、値の後ろに9を追加します。
他のプロパティも指定したい場合は、9がないときと同じように行末に;をつけて、次のプロパティからは/***/なくても大丈夫なようです。

sample01 の説明

続いて sample01 の説明です。
sample01 は 3 行からなります。サンプルソースのコメントに書いてありますが、1 行目が IE6, 7 用、2 行目が IE8 用、最後がモダンブラウザ用となります。

最初の 1 行目は通常の指定ですね。このままであれば、全ブラウザに適用されるスタイルになります。
続いて 2 行目。これは間接セレクタを使った指定です。ただこの指定だけだと間接セレクタを正常に解釈できるモダンブラウザにも適用されてしまうために、これを打ち消すために最後の 3 行目が必要なわけです。

そして最後の 3 行目、IE8 は CSS3 の対応があまいく、not 疑似クラスに対応していないため IE8 を除いたモダンブラウザ向けにスタイルが適用できる、というわけです。これが打ち消しの 3 行目です。

ちなみに、2 行目の指定でコメントが途中入っているのは IE7 対策です。
このコメントがないと IE7 にもスタイルが適用されてしまうためこのような記述があります。

合わせて読むと役に立つかもなエントリー

IE6,7で、疑似要素を指定した要素に隣接するスタイルがおかしくなる件

2009年5月 8日 14:00

Yahoo!知恵袋を覘いていて、ちょっと興味深いものを発見したのでエントリー。n

概要を書くと、":first-letterなどの疑似要素を指定した要素に隣接する要素のスタイルが崩れる" というもの。(タイトルまんまですね)n

まずは以下のサンプルを、IE6,7 で見てみてください。n

見ていただくと分かりますが、2 つ目以降のテキストが、ボックスからはみ出しているのが分かると思います。
ボックスがずれているならまだしも、はみ出すのは完全にバグですよね。n

サンプル 01 がなんの対策もしていないもの、サンプル 02 が対策をしたものになります。n

これは推測ですが、おそらく IE の場合、疑似要素を適用すると hasLayout が false にでもなるのではないでしょうか。そのために、隣接する要素のスタイルに影響が及ぶと。n

試しに、隣接させないよう <br /> など別の要素を入れるとテキストはボックスからはみ出さずに正常に表示されるようになります。n

hasLayout ではないか、と思った要因は、hasLayout を ture にするプロパティを指定すると(サンプルでは zoom: 1;)この問題が改善されるためです。n

今回のサンプルでは:first-letterでしたが、:first-lineでも同様の現象が発生しました。そのため、問題は "疑似要素ではないか" と思ったわけです。n

とりあえず、疑似要素を指定した要素の前後で問題が発生した場合はzoom: 1;を追加することで問題は回避できそうです。n

CSS ソース

HTML ソース

前の10件 1  2  3  4  5  6  7  8  9  10