box-sizing は魔法のコトバ!もうpaddingやborderを含めた幅の計算はヤメヤメ

CSS3 の box-sizing プロパティがかなり便利です。

あるのは知っていたのですが実際何案件か使ってみてやっぱり便利でした。

CSS覚えたての頃よくやった横幅や高さを指定する時のミスがなくなります。

「あれ、なんで崩れるんだろ?」

「padding と border 分マイナスするの忘れてた~」

ってのがよくありました。(今もたまに。。)

それが魔法のコトバ「box-sizing」を唱えれば、マイナスすることなく横幅や高さを指定することができます。

これはものすごい効率化になりますね!

box-sizing の書き方

box-sizing プロパティでボックスサイズ(width, height ) の算出方法を 指定します。

指定できるのはこちらの2種類です。

  • content-box … 【デフォルト値】padding と border を要素の幅と高さに含めない。
  • border-box … padding と border を要素の幅と高さに含める。

ベンダープレフィックスもつけて box-sizing を指定します。

.boxSizing {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

box-sizing の使い方

1)box-sizing 用のクラスをつくる

例えば「.boxSizing」というクラスをつくって、使いたい要素に都度指定するという使い方です。
このやり方が一番表示速度など考慮した方法になるかなと思います。

2)div などの主要なブロック要素のみ指定する

box-sizing の使用頻度が多くなりそうなら主要なブロック要素にこんな感じで直接指定してしまえば楽ですね。
リセットCSSを指定しているところに追加しちゃうのも手だと思います。

div,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,ul,li,form,input,textarea,button,table,tr,th,td,article,aside,footer,header,hgroup,nav,section{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

3)ユニバーサルセレクタで全指定する

もう全要素やったれ~い!っていう場合は、ユニバーサルセレクタ(全称セレクタ)でしょう。読み方はアスタリスクではないので注意!

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

ユニバーサルセレクタがいいのか、主要なタグを指定するタイプセレクタがいいのかは個人の考え方によりますが、box-sizing のみならどちらでも大きな影響はないかと思います。
ユニバーサルセレクタでリセットCSSを指定だとフォームまわりに影響がでるようですが、どこで調整するかデフォルトの指定のまま使うのかなど状況と考え方次第ですかね。

改めてユニバーサルセレクタについて調べていたら、色々まとまった記事があって面白かったです。
ユニバーサルセレクタ(全称セレクタ)が結局使いやすい。

box-sizing のブラウザ対応

IE7 では非対応ですが、それ以外のブラウザなら現状ほぼ問題なさそうです。(IE6のことは忘れましょう)

大枠のブロック要素に使う時に注意さえしていれば、多少崩れるくらいでコンテンツ自体が見えなくなるような致命的な問題はないと思うので、
個人的には積極的に使って行きたいなと思っています。

[参考サイト]
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定
レスポンシブWebデザインに使うグリッド・システムには、box-sizing: border-boxがいいんじゃなかろうか?

Pocket
article clipper box sizing は魔法のコトバ!もうpaddingやborderを含めた幅の計算はヤメヤメ

CSS3のbox-shadowを使ってデザイン性の高いシャドウをつくる場合の注意点

@cappeeです。

よく見かける紙が浮いたようなシャドウをデザインして、それをコーディングする場合、今までは画像置換でシャドウ用のdivをひとつ増やしていましたが、CSS3の box-shadow を使えば画像なしで実現できます。

box shadow effect CSS3のbox shadowを使ってデザイン性の高いシャドウをつくる場合の注意点

デモ:Creating Different CSS3 Box Shadows Effects

詳しいコードサンプルはこちらをご覧ください。

[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ

box-shadowを使う場合の注意点

上記を参考にCSS3のbox-shadowを使用してシャドウをつけようと思ったのですが、コードを見てみるとサンプルに  z-index と position: absolute が指定されているものがあります。

z-index: -1;
position: absolute;

z-index: -1

z-index: -1 が指定されていると、例えばコンテンツ全体の背景に白い画像をセンタリングで表示していた場合、シャドウがその後ろに隠れて見えなくなってしまいます。
ただし、こちらは画像を指定しているコンテンツのIDに z-index: 1 など指定すればなおります。

position: absolute

position: absolute をボックスに指定すると高さがとれないため、高さが可変のボックスに対してはつけることができません

box-shadowを使ってデザイン性の高いシャドウを実現するには縦横のサイズを固定する必要があります。

画像置換でシャドウをつけるサンプルコード

画像置換でボックスの下に丸みのあるシャドウをつける場合(上記デモのEffect6)のサンプルコードも記載しておきます。

シャドウ用の画像を書きだしてください。こちらを右クリックでダウンロードしていただいてもOKです。

シャドウ用の画像

shadow CSS3のbox shadowを使ってデザイン性の高いシャドウをつくる場合の注意点

HTML

<div class="shadow">
 <p>シャドウ用のボックス</p>
 </div>

CSS

.shadow{
 background: url("/images/shadow.jpg") no-repeat 50% 100%;
 padding-bottom:10px;
 }

padding-bottom には作成したシャドウの画像の高さを入力してください。

Pocket
article clipper CSS3のbox shadowを使ってデザイン性の高いシャドウをつくる場合の注意点

1つの要素にCSSだけで二重ボーダーをつける3つの方法

@cappeeです。

ひとつのdivに対して、CSSだけで簡単に二重のボーダーをつけることができます。

double border 1つの要素にCSSだけで二重ボーダーをつける3つの方法

box-shadow

CSS3の box-shadow を使えば1行で二重のボーダーをつけることができます。最初に内側のボーダー、次に外側のボーダーを指定します。外側のボーダーは内側を合わせた数値を記述してください。
対応ブラウザですが、~IE8は表示されません。ただ、もうIE6と7の需要は少ないですが、IE8をどこまで対応させるかの判断になると思います。あと、JavaScriptやPIEなどを使うか。

.doubleBorder {
 box-shadow: 0 0 0 3px #CCC, 0 0 0 4px #999;
}

CSS3の対応状況はこちらの「CSS3プロパティ&ブラウザ対応一覧」を参考にしてください。

borderとoutline

border と outline で二重ボーダーをつけます。
IE8にも対応しており、~IE7も border の方は正常に表示されるので背景色と同じ色でなければ一応枠線は見える状態ですし、こちらの方が安全といえば安全です。
また、二重のボーダーをつけてさらにボックスにシャドウもつけたい、なんてワガママもこちらの指定+ box-shadowで実現できます。

.doubleBorder{
 border: solid 3px #CCC;
 outline: solid 1px #999;
}

ひとつ注意ですが、もしoutlineを使った二重ボーダーの枠に、ポジションを使ってリボンなどのアイコンを配置する場合、Operaではz-indexを使ってもoutlineの方が優先されてアイコンと線がかぶってしまいます。そういった使い方をする場合は、box-shadowを使用し、IE6~8はCSSハックで1つのボーダーのみ表示させるなどの対応が必要になります。

疑似要素

:before や :after の擬似要素を使えば二重線だけでなく三重線も実現出来ます。
ただし、幅と高さを固定してpositionでボーダー分ずらすというやり方なので高さが可変の場合には不向きです。
(下でさらに擬似要素をつかった可変対応バージョンも紹介しています。)

.tripleBorder{
position: relative;
background: #FFF;
border: 1px solid #999;
width: 300px;
height: 300px;
}
.tripleBorder:before {
position: absolute;
content: '';
border: 1px solid #FFF;
width: 298px;
height: 298px;
}
.tripleBorder:after {
position: absolute;
top: 1px;
content: '';
border: 1px solid #CCC;
width: 296px;
height: 296px;
}

もうひとつ、高さが可変の場合でも使える擬似要素でのやり方があります。
こちらもpositionを使ってますがz-indexとmin-height:100%;の指定により高さを可変にしています。

.doubleBorder{
    border: 1px solid #CCC;
    position: relative;
    z-index: 1;
}
.doubleBorder:before{
    content: "";
    display: block;
    position: absolute;
    top: -2px;
    left: -2px;
    border: 1px solid #999;
    width: 500px;
    padding-bottom: 2px;
    min-height: 100%;
    z-index: 10;
}

(2013.3.1追加)

[参考サイト]
[CSS]高さが可変のボックスに二重のボーダーを適用するテクニックのまとめ 
Quick Tip: Multiple Borders with Simple CSS

Pocket
article clipper 1つの要素にCSSだけで二重ボーダーをつける3つの方法

[Dreamweaver]スニペットに登録して作業効率が上がるCSS3まとめ

@cappeeです。

Dreamweaverのスニペットって便利ですよね。私はzen-cording+スニペットのショートカットを使うのがコーディングは一番早いと思っています。

そこでDreamweaverのスニペットに登録してあるCSS3の記述をまとめました。1.2倍は間違いなく早くなると思います。

角丸

 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 -o-border-radius: 3px;
 -ms-border-radius: 3px;
 border-radius: 3px;

グラデーション

background: -webkit-linear-gradient(top, #FFF, #CCC);
background: -moz-linear-gradient(top, #FFF, #CCC);
background: -o-linear-gradient(top, #FFF, #CCC);
background: -ms-linear-gradient(top, #FFF, #CCC);
background: linear-gradient(to bottom, #FFF, #CCC);
background: #CCC;

テキストのシャドウ

text-shadow: 0 1px 0 #FFF;

※text-shadowはベンダープレフィックスは必要ありません。

ボックスの黒シャドウ

 -moz-box-shadow: 1px 1px 5px #999;
 -webkit-box-shadow: 1px 1px 5px #999;
 -o-box-shadow: 1px 1px 5px #999;
 -ms-box-shadow: 1px 1px 5px #999;
 box-shadow: 1px 1px 5px #999;

ボックス内側の光彩(グロー)

 -webkit-box-shadow: inset 0 0 5px 0 #DDD;
 -moz-box-shadow: inset 0 0 5px 0 #DDD;
 -o-border-radius: inset 0 0 5px 0 #DDD;
 -ms-border-radius: inset 0 0 5px 0 #DDD;
 box-shadow: inset 0 0 5px 0 #DDD;

ボックス垂直にぼかしなしシャドウ

 -moz-box-shadow: 0 1px 0 #FFF;
 -webkit-box-shadow: 0 1px 0 #FFF;
 -o-box-shadow: 0 1px 0 #FFF;
 -ms-box-shadow: 0 1px 0 #FFF;
box-shadow: 0 1px 0 #FFF;

こちらも参考にご覧ください。

【CSS3】ドロップシャドウやグロー(光彩)をCSSで(box-shadow)
今から始めるCSS3プロパティ text-shadow

ベンダープレフィックスについて

今かなりのスピードで各ブラウザがバージョンアップをしている関係で、新旧幅広く対応させるならベンダープレフィックスはまだなくさない方がいいんじゃないかなという個人的見解です。ぜひ以前の記事もご覧ください。

最新FirefoxとOperaではCSS3のシャドウと角丸はプレフィックスいらないよ

Pocket
article clipper [Dreamweaver]スニペットに登録して作業効率が上がるCSS3まとめ

最新FirefoxとOperaではCSS3のシャドウと角丸はプレフィックスいらないよ

こんにちは、@cappeeです。

コーディングしていた時に最新のFirefoxとOperaでシャドウがかかってませんでした。

あれって思って調べたら、-moz-や-o-のプレフィックスって最新だと逆に効かないんですね。

どうやら角丸もそのよう。

幅広く古いバージョンにも対応させるならこのように書くってことですね。

シャドウ

box-shadow: 1px 1px 5px #999;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
-o-box-shadow: 1px 1px 5px #999;
-ms-box-shadow: 1px 1px 5px #999;

角丸

border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;

 

こちらに色々と検証した記事がありますのでぜひ。

box-shadow,border-radiusを書くときにCSS3のベンダープレフィックスは要らない

 

Pocket
article clipper 最新FirefoxとOperaではCSS3のシャドウと角丸はプレフィックスいらないよ

話題のWindows 8で搭載されてるIE10はプレフィックスのないCSS3グラデーションが使えるってさ

こんにちは、@cappeeです。

話題のWindows 8がでてウルトラモバイルPCを買おうか迷ってます。

とりあえず電気屋さんに行って触ってこよう。

そんなWindows 8に搭載されているIE10ですが、やっとこIEもCSS3に対応してきて嬉しいなぁなんて思ってたらやっぱり一癖あるのですね。

CSS3グラデーションの記述方法で変更があったのは2点。

プレフィックスなしでの記述

今までは -ms- というプレフィックスを記述してIEでもCSS3のグラデーションが表示されるようにしてきたわけですが、IE10からプレフィックスのない形式でサポートされるそう。

でも、2011 年2 月の W3C 草案にあるプレフィックスありの記述もサポートしているみたいなので一応従来通り記述していれば問題無さそう。

top/bottom/left/right といったキーワードの変更

これが厄介になりそうですね。

2011年7月まではキーワードだと(top, #FFF, #CCC) 、角度だと(-90deg,#FFF, #CCC) と書いてました。

ただし、それ以降では to キーワード が追加されて、top→to bottom、left →to rightに変更になります。

そこで問題なのが話題のWindows 8で搭載されてるIE10はtoキーワードありのみに対応していること。

かつ、 -ms- のプレフィックスも無視します。

なにっ

また、Operaの新バージョン12.50でもIE10同様プレフィックスなしのtoキーワードのみ対応するそうな。

新しいCSS3グラデーションの書き方

こういうことで合ってますかね?

background: #CCC; /* CSS3グラデーション未対応ブラウザ用 */
background: -webkit-linear-gradient(top, #FFF, #CCC); /* webkit用 */
background: -moz-linear-gradient(top, #FFF, #CCC); /* mozila(Firefox)用 */
background: -o-linear-gradient(top, #FFF, #CCC);  /* 旧opera用 */
background: -ms-linear-gradient(top, #FFF, #CCC);  /* IE9用 */
background: linear-gradient(to bottom, #FFF, #CCC);  /* IE10とOpera12.50用 */

ご指摘お待ちしております。

さらにIE10からコンディショナルコメントを廃止

コンディショナルコメントとは、

<!-[if lt IE 6.0]> IE6用のCSS <![endif]->

のように記述するとIEの特定のバージョンに限定してCSSを読みこませるというもの。

上記の -ms- プレフィックスを削除してIE9用のコンディショナルコメントを用意してもいいということですね。

でもIE10からは使えないということで、標準規約に準拠してまっせという意気込みを感じます。

逆にIEは遅れを取り戻さないとコンディショナルコメントを廃止したことでまたIT界隈の辛口コメントが増えそうですねぇ。

 

今回参考にさせていただいた記事にもっと詳しく掲載されているのでぜひご覧ください。

Pocket
article clipper 話題のWindows 8で搭載されてるIE10はプレフィックスのないCSS3グラデーションが使えるってさ