《The Book of CSS3》学習ノート

一. ブラウザプレフィックス

E{
    -moz-name : value;      /* Firefox */
    -ms-name : value;       /* IE */
    -o-name : value;        /* Opera */
    -webkit-name : value;   /* WebKit */
    name : value;           /* 将来の標準に対応する方式 */
}

二. メディアクエリ

1. メディアクエリを使用する 3 つの方法

head 部分

<link href="css.css" rel="stylesheet" media="mediaType and (expr)" />

css ファイルの先頭行

@import url("css.css") mediaType and (expr);

スタイルルール内

@media mediaType and (expr) {
    /* styles */
}

2. mediaType の値

all（意味なし、追加しない方が良い）、screen、print のみがブラウザベンダーによって広くサポートされています。オプション値には以下もあります：

braille：点字
embossed：点字印刷
handheld：携帯デバイス、あまり良くない
projection：プロジェクションデバイス
speech：スピーチ
tty：等幅フォントを表示するデバイス、例えばテレタイプ端末
tv：テレビ

したがって、前述の 3 つの広くサポートされているものを含めて、合計 10 のオプション値があります

3. expr の値

最も一般的なのは min-[device-]width と max-[device-]width です。例えば：

@media screen and (min-width : 800px) {
    /* ブラウザウィンドウの幅>=800px の場合にこのスタイルを適用 */
}
/* 
 * 一般的な境界値：
 * 480px 以下 ~ スマートフォンブラウザ
 * 800px 以上 ~ デスクトップブラウザ
 * 480px から 800px ~ タブレットブラウザ
 */

さらに orientation 方向、device-aspect-radio 縦横比、device-pixel-radio 画素比などの他のプロパティもあります。詳細情報は前端観察：media type と media query をご覧ください

4. 複雑な式の構築

and と only を使用して複雑な式を構築できます

(expr1) and (expr2)：AND
only (expr)：メディアクエリをサポートしていないが Media Type をサポートするデバイスに対してスタイルシートを隠すため。詳細情報は博客園：Media Queries 詳解をご覧ください
mediaType1 (), mediaType2 ()：OR

5. サポート状況

[IE9+] は CSS3 標準をサポートしますが、device-pixel-ratio などの非標準プロパティについては、IE11 は部分的にのみサポートしています。その他のサポートの違いについては Can I use をご覧ください

三. ウェブフォントの使用

最も安全なフォント導入方法：

@font-face {
    font-family : "font";
    src : url("font.eot");
    src : local(" "),   /* 注意：引用符でスペースを囲む（他の単一文字でも可） */
          url("font.woff") format("woff"),
          url("font.ttf") format("truetype"),
          url("font.svg#font") format("svg");
}

類似の方法もあります。詳細は Fontspring をご覧ください

便利な @font-face ジェネレーター があり、フォント形式を変換して CSS コードを生成できます。詳細は Fontsquirrel をご覧ください

四. テキストエフェクト

1. 立体効果

主に text-shadow プロパティで実現します。[IE10+] でサポートされており、構文は以下の通りです：

text-shadow : xOffset yOffset blur-radius color;

具体的なコード：

.shadow1 {
    text-shadow : 
        0 -2px 3px #fff,
        0 -4px 3px #aaa,
        0 -6px 6px #666,
        0 -8px 9px #000;
}

.shadow2 {
    color : #fff;
    text-shadow : 
        0 2px rgba(0, 0, 0, 0.4),
        0 4px rgba(0, 0, 0, 0.4),
        0 6px rgba(0, 0, 0, 0.4),
        0 8px 0 rgba(0, 0, 0, 0.4);
}

.shadow3 {
    background-color : #565656;
    color : #333;
    text-shadow : 0 1px 0 #777, 0 -1px 0 #000;
}

例：

span.shadow1 { text-shadow : 0 -2px 3px #fff, 0 -4px 3px #aaa, 0 -6px 6px #666, 0 -8px 9px #000; } span.shadow2 { color : #fff; text-shadow : 0 2px rgba(0, 0, 0, 0.4), 0 4px rgba(0, 0, 0, 0.4), 0 6px rgba(0, 0, 0, 0.4), 0 8px 0 rgba(0, 0, 0, 0.4); } span.shadow3 { background-color : #565656; color : #333; text-shadow : 0 1px 0 #777, 0 -1px 0 #000; } .show { background-color : #fafafa; display : block; font-weight : bold; font-size : 60px; padding : 0.2em; }

shadow1：黯羽軽揚 shadow2：黯羽軽揚 shadow3：黯羽軽揚

P.S. 超大号のフォントは立体効果が良好で、小さい文字の影効果は見えにくいです

2. テキスト溢れの制御

text-overflow : clip/ellipsis ~ 切り取り/省略記号（...）、例えば：

p {
    /* 1 行で省略記号を表示するには、以下の 3 つのプロパティが不可欠です */
    text-overflow : ellipsis;
    white-space : nowrap;
    overflow : hidden;
}

サポート状況：[IE8+] でサポート

3. 長い単語の自動改行の制御

word-wrap : normal/break-word ~ 改行しない（コンテナを破壊する）/ 自動改行

サポート状況：[IE6+] でサポートされています。ただし、英単語にのみ有効で、中国語には無効です

五. 境界線スタイル

border-radius：[IE9+] でサポート
border-image：効果は魅力的ですが、[IE11+] でサポートされています。JQ プラグインで無理やりサポートできます��、効果も無理やりです。詳細情報は [張鑫旭ブログ：CSS3 border-image 詳解、応用及び jQuery プラグイン](http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image 詳解、応用及び jquery プラグイン/) をご覧ください
box-shadow：[IE9+] でサポート。具体的な使い方は W3School：CSS3 box-shadow プロパティをご覧ください

六. 透明度

opacity : 0.0 - 1.0; [IE9+] でサポート、IE8 は部分的にサポート
color : rgba(r, g, b, a); [IE9+] でサポート

七. グラデーション

線形グラデーション/放射状グラデーション、[IE10+] でサポート。具体的な使い方は CSS-Tricks をご覧ください

八. トランスフォーム、トランジション、アニメーション

いくつかの類似したプロパティがあります。違いは以下の通りです：

transform：トランスフォーム。2D/3D トランスフォーム、平行移動、回転、傾斜、拡大縮小
translate：平行移動。2D トランスフォームのサブプロパティ
transition：トランジション。hover、active などのイベントによってトリガーされます
animation：アニメーション。keyframes を定義し、animation でアニメーションを適用します

これらのものを使用して一般的なクールな効果を実現できます。例えば：

トランジションにより単純なアニメーションを滑らかに行えます。例えば、マウスホバー時にリンクテキストが右に「流れる」、div の幅が指定値までゆっくり拡大するなど
3D トランスフォームで背面を表示できます。例えば、マウス進入時に画像の反転効果を表示
トランスフォームでリボン効果を実現できます。例えば、右上に斜めに fork me on github を配置。具体的な実装は博客園：ブログに「Fork me on Github」リボンを追加をご覧ください

九. flex レイアウト

非常に強力な完全チュートリアルがあります：前端開発ブログ：CSS3 弾性ボックスモデル flexbox 完全チュートリアル

十. オンラインリソース

Can I Use：[IE8+] および他のブラウザの CSS/HTML5 プロパティサポート状況
Modernizr：ブラウザの HTML5 と CSS3 機能サポートを検出する JS ライブラリ。グレースフルデグラデーションに最適
コード生成ツール：
- CSS3Please：ブラウザプレフィックスを自動充填、CSS3 効果のオンラインテストも可能
- CSS Gradient Generator：グラデーションを迅速生成
無料フォント：Fontsquirrel：大量の無料でダウンロード可能な英字体
CSS3 チュートリアル/ドキュメント：CSS3 Info、海外フォーラム、記事の更新は遅く、衰退しつつあるようです
CSS3 新技術：MDN、ソースコードはログインなしでダウンロード可能

参考資料

《THE BOOK OF CSS3》
先輩のブログ記事若干