::selection
選択したところを変化させる。
選択したところを背景を赤に、文字色を白にするときサンプル
文字を選択すると、そこの背景色が変わります。文字を選択すると、そこの背景色が変わります。文字を選択すると、そこの背景色が変わります。文字を選択すると、そこの背景色が変わります。文字を選択すると、そこの背景色が変わります。文字を選択すると、そこの背景色が変わります。文字を選択すると、そこの背景色が変わります。文字を選択すると、そこの背景色が変わります。文字を選択すると、そこの背景色が変わります。文字を選択すると、そこの背景色が変わります。
:target
リンクで飛んだ先のスタイルを指定する
飛んだ先のpタグの背景を変える。:targetを指定している先をCSSで指定するサンプル
ここをクリックすると、下のボックスに背景が付きます。ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ここの背景が変わります。ここの背景が変わります。ここの背景が変わります。ここの背景が変わります。ここの背景が変わります。ここの背景が変わります。ここの背景が変わります。ここの背景が変わります。ここの背景が変わります。ここの背景が変わります。ここの背景が変わります。ここの背景が変わります。
リセット:nth-child
○○番目の要素だけにCSSを指定する…なんてことができる。
liタグの4番目に対して背景色を赤に変える。サンプル
- 1番目の<li>
- 2番目の<li>
- 3番目の<li>
- 4番目の<li>
- 5番目の<li>
tr:nth-child(even){ background-color:#333333; color:#ffffff; }
サンプル
| テーブル1行目 |
| テーブル2行目 |
| テーブル3行目 |
| テーブル4行目 |
| テーブル5行目 |
| テーブル6行目 |
| テーブル7行目 |
multi column text
コラムテキストを作成する
３カラムでpタグを作成する。※このプロパティにはプリフィックス（接頭辞）が必要/*カラム数*/
column-count:3;
-moz-column-count:3;/*prefix for ff*/
-webkit-column-count:3;/*prefix for safari*/
/*カラム幅*/
column-width:10em;
-moz-column-width:10em;/*prefix for ff*/
-webkit-column-width:10em;/*prefix for safari*/
/*カラムマージン*/
column-gap:2em;
-moz-column-gap:2em;/*prefix for ff*/
-webkit-column-gap:2em;/*prefix for safari*/
/*カラム間の仕様*/
column-rule:solid 2px #333;
-moz-column-rule:solid 2px #333;/*prefix for ff*/
-webkit-column-rule:solid 2px #333;/*prefix for safari*/
}
サンプル
マルチコラムテキストの例です。マルチコラムテキストの例です。マルチコラムテキストの例です。マルチコラムテキストの例です。マルチコラムテキストの例です。マルチコラムテキストの例です。マルチコラムテキストの例です。マルチコラムテキストの例です。マルチコラムテキストの例です。マルチコラムテキストの例です。マルチコラムテキストの例です。マルチコラムテキストの例です。マルチコラムテキストの例です。マルチコラムテキストの例です。マルチコラムテキストの例です。マルチコラムテキストの例です。マルチコラムテキストの例です。マルチコラムテキストの例です。マルチコラムテキストの例です。マルチコラムテキストの例です。マルチコラムテキストの例です。マルチコラムテキストの例です。マルチコラムテキストの例です。マルチコラムテキストの例です。
box-shadow
ボックスに対して影をつけることができる。
divボックスに対して、2pxずつの黒い影をつける※プリフィックスが必要border:1px solid #eeeeee;
box-shadow:2px 2px 2px #000;
-moz-box-shadow:2px 2px 2px #000;
-webkit-box-shadow:2px 2px 2px #000;
}
サンプル
transform
回転、拡大、移動などが要素に対して行える。（position:absoluteに似ている）
p要素を90度回転させる。※プリフィックス必要デフォルトでは回転位置が中心なので、左下に設定する。
border:1px solid #eeeeee;
/*基点の設定*/
transform-origin:0,100;
-moz-transform-origin:0,100;
-webkit-transform-origin:0,100;
/*実際の回転*/
transform:rotate(90deg)
-moz-transform:rotate(90deg)
-webkit-transform:rotate(90deg)
}
サンプル
pタグで囲まれたこの要素が回転します。
@font-face
サーバ上にあるフォントをそのまま使うことができる。
サーバ上に○○.ttfというフォントがあるときの設定/*書体の名前を記載*/
font-family:"○○○"
/*ソースの読み込み*/
src:url("http://www.hogehoge.com/font/○○.ttf") format("truetype");
} p{ font-family:"○○○"; }
サンプル
abcdefghijklmnopqrstuvwxyz
transition
指定した秒数で変化させる
マウスオーバーをしたときに(hover)色を変化させる。p{
width:250px;
height:100px;
background-color:#fff;
border:1px solid #f0f0f0;
}
p:hover{
background-color:#ff000;
}
サンプル
マウスオーバーで色が徐々にかわります。
transformとtransition
動きをつけるものに対して、transitionで変化時間を設定する
マウスオーバーで回転させる.move{
transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
}
img:hover{
transform-origin:50% 50%;
transform:scale(2,2) rotate(360deg);
-moz-transform-origin:50% 50%;
-moz-transform:scale(2,2) rotate(360deg);
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(2,2) rotate(360deg);
}
サンプル
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
transformとtransition その2
動きをつけるものに対して、transitionで変化時間を設定する
マウスオーバーで拡大縮小を加えて、陰（shadow）を追加。⇒フォトギャラリーなどで使えそう。li{
padding:10px;
float:left;
list-style-type:none;
}
.move{
transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-webkit-transition:all 0.2s ease-in-out;
}
img:hover{
transform-origin:50% 50%;
transform:scale(1.05,1.05);
box-shadow:5px 5px 10px #333;
-moz-transform-origin:50% 50%;
-moz-transform:scale(1.05,1.05);
-moz-box-shadow:5px 5px 10px #333;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(1.05,1.05);
-webkit-box-shadow:5px 5px 10px #333;
}