CSS

【メモ】個人的に見落としていたCSSの使い方

More than 1 year has passed since last update.


属性セレクタ

http://codepen.io/mo4_9/pen/PGJRNb

複数の条件で絞り込む

^= 前方一致

$= 後方一致

a[href^='http'][href$='co.jp/'][target='_blank']{

font-size: 2rem;
}


パンくずリスト

http://codepen.io/mo4_9/pen/pEWLWk

:nth-child(n+2) 最初のli要素以外を選択

li:nth-child(n+2)::before{

content:'>';
margin: 0 10px;
}


文章の1文字目だけ大きくする

https://codepen.io/mo4_9/pen/xdPLgz

float: left;で2文字目以降を上寄せにし、

line-heightとpaddingで隙間を調整

.lead::first-letter{

font-weight: bold;
font-size: 48px;
line-height: 14px;
padding: 20px 10px 0 0;
float: left;
}


複数背景画像

http://codepen.io/mo4_9/pen/ORxBjJ

#box{

width: 640px;
height: 360px;
background:
url("http://placeimg.com/320/180/people") no-repeat top center,
url("http://placeimg.com/320/180/animal") no-repeat left bottom,
url("http://placehold.jp/640x360.png") no-repeat center;
background-size: auto 30%, auto 20%, cover;
}


background-clip

http://codepen.io/mo4_9/pen/rrGqkG

背景画像とborderやpaddingの兼ね合いも考慮する

#box{

border: solid 30px rgba(200,100,0,0.5);
background-clip: border-box;
background-origin: border-box;
}


「続きを読む」の ...

http://codepen.io/mo4_9/pen/gwGkWz

.item1{

width: 500px;
white-space: nowrap; // 改行させない
overflow: hidden;
text-overflow: ellipsis; // ...
}


参考

http://www.htmq.com/css3/background-clip.shtml



背景画像はそのまま、テキストの不透明度だけ下げたい

http://codepen.io/mo4_9/pen/xEXmYg

opacityを使うと、背景画像の不透明度まで下がってしまう。

color: rgba(255,0,0,0.5);のようにする


グラデーション

http://codepen.io/mo4_9/pen/VKrqEQ

多いので省略


参考

- 国旗

http://www.standardista.com/CSS3gradients/flags.html

- 壁紙

http://lea.verou.me/css3patterns/



Flexboxの各アイテムの扱い

http://codepen.io/mo4_9/pen/amLXra


親要素

.wrapper{

display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;
}


各Flexアイテムの整列基準を変更

.box:nth-child(1) {

align-self: flex-end;
}


各Flexアイテムの順番を変更

.box:nth-child(2) {

order: 1;
}

IE9にも対応させたいと言われたら、polyfill必須。

とはいえflexibility.jsが使えないことがあったので、IE10以降でないとデバッグ大変になるかも。。

IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利!


参考

http://css3.my-learn.net/example/flex_3column2.php

http://css3.my-learn.net/example/flex_navi.php

http://css3.my-learn.net/example/flex_grid.php



:target擬似クラス

[CSS]知ってると便利!「:target疑似クラス」を使ったスタイルシートのテクニックと注意点


animation-play-state

http://codepen.io/mo4_9/pen/VKydYr

アニメーションの再生runningと一時停止paused


animation-fill-mode

http://codepen.io/mo4_9/pen/VKydKy

アニメーションが終了したときのスタイルを適応する

デフォルトだとアニメーション終了時に、初期のスタイルに戻ってしまう

animation-fill-mode: forwards;


複数アニメーション指定

http://codepen.io/mo4_9/pen/RGxJpJ

#box{

animation:
width_change 2s forwards,
color_change 1s forwards;
}


3D表現

http://codepen.io/mo4_9/pen/kkELzr

perspectiveプロパティは親要素に指定

perspective関数は3Dにしたい要素(子要素)に指定


共通の3D空間

#parent1{

perspective: 300px;
.child{
transform: rotateY(45deg);
}
}


別々の3D空間

#parent2{

.child1{
transform: perspective(300px) rotateY(45deg);
}
.child2{
transform: perspective(300px) rotateY(60deg);
}
.child3{
transform: perspective(300px) rotateY(75deg);
}
}

孫要素にも親要素の3D空間を継承させたい場合は、

子要素にtransform-style: preserve-3d;を指定


孫要素にも3D空間を共有する

#parent3{

perspective: 300px;
.child{
transform: rotateY(15deg);
}
.child1,
.child2,
.child3,
.child4{
transform-style: preserve-3d;
}
}

カードめくりとか、キューブなどの基本表現は以下のサイトに載っている。

http://desandro.github.io/3dtransforms/

https://webkit.org/blog-files/3d-transforms/morphing-cubes.html


単位が違う要素同士の計算をしたい

http://codepen.io/mo4_9/pen/PGRWxo

calc()関数を使用する

#box {

font-size: calc(2rem + 2px);
width: calc(100% - 100px);
}


borderやpaddingでwidthを増やしたくない

http://codepen.io/mo4_9/pen/ALyOwV

box-sizing: border-box;と指定すればborderやpaddingを内包してくれる

(=widthが変わらずキープできる!)


カーニングのモダンな設定

font-feature-settings

文字詰めできるCSSのfont-feature-settingsが凄い! 日本語フォントこそ指定したい自動カーニング

文字詰めできるCSSのfont-feature-settingsプロパティについて検証してみました