要素の後ろにアイコンを付ける
- 2016.10.24
- アイコン
aタグに付ける別窓指定アイコンなど、要素の後ろに画像を入れたい場合に用いる。 span { position: relative; &:after { background: url(../images/common/icon-window.png) no-repeat; @include background-size(cover); bottom: 50%; content: ''; […]
css/sass
5/5ページ
リストスタイルのまとめ
- 2016.10.24
- まとめ
■最初のみ li:first-child ■最後のみ li:last-child ■リストが1つだけの時に適応 li:only-child ■交互に変更 li:nth-child(2n) { /* 偶数番目(2,4,6……番目) */ color: red; } li:nth-child(2n+1) { /* 奇数番目(1,3,5……番目) */ color: green; } ■特定のリストを変 […]
position: absoluteしている要素を中央寄せにする
- 2016.10.24
- absolute
.element { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
position: absoluteしている要素を上下中央に寄せる
- 2016.10.24
- absolute
.element { position: relative; top: 50%; transform: translateY(-50%); }
boaderにグラデーションを使う
- 2016.10.24
- グラデーション
左右向きのグラデーションを設定する。 要素の『before』でグラデーションを上に、 要素の『after』でグラデーションを下に設定する。 #content{ &:before{ content:""; display:block; height:1px; background: linear-gradient(to right, #ffffff 0%,$mainColor 60%,#ff […]
ページが印刷出来ないようにする（印刷時にページを白くする）
プリント機能を制御するのではなく、ページを真っ白にして対応する方法。 印刷時にはbodyの中身をdisplay: noneする。 @media print { body { display: none !important; } }
リストのマークを任意のテキスト（記号）に変更する
ul.circleList { padding-left: 1.5em; li {text-indent: -1.5em; list-style-type: none; margin-left: 1.5em; &::before { content: "●"; margin-right: 0.5em; } } }
IE8+max-widthで画像が縦長に見える
画像に対してハックをかけることで対応する img { width: inherit9; max-width: 100%9; height: auto9; }