CSSの便利な使い方・プロパティ逆引きリファレンス

template IT

HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。
ちょっととっても数少ないですが、段々増える予定です。

Advertisements

テキストの装飾

color(文字色)
text-indent(インデント、字下げ)
font-size(フォントのサイズ)
font-family(フォントの書体)
text-decoration(下線、取り消し線、波線など)
background:linear-gradient(文字にマーカー風の線を引く)
list-style-type(箇条書きの点の編集)

背景の装飾

background-color(背景色)
background-image(背景画像)
background-repeat他(背景画像の設定、リピート)
background:linear-gradient(線形のグラデーション)

枠線・影

border(枠線)
border-radius(要素の角を丸める)
box-shadow(影)
overflow(枠からはみ出た要素を非表示)

レイアウト・サイズ

margin/padding(余白を外側・内側に作る)
box-sizing(border、paddingを幅と高さに含める)
text-align(文字の左右配置)
vertical-align(要素横の文字・画像縦位置調整)
position:fixed(要素を画面の決まった位置に固定),2(TOPへ戻るボタン)
position:absolute、relative(要素の位置を指定する、要素を重ねる)
background-attachment(画面スクロールしても背景画像を固定表示にする)
display:inline-block(blockとinlineの中間)
float(要素を画面左右に振り分ける)※ややレガシー
Flexbox(レスポンシブのマルチカラムレイアウト)
column-count(カラム数を指定)
column-width(カラムの幅を指定)
@media(デバイスの画面幅によってレスポンシブに表示を切り替える)

アニメーション・動き・傾き

transform:scale(要素の縮尺を変更)
transform:rotate(要素の傾き、回転)
transform:translate(基準位置から移動)
transform:skew(要素を傾斜させる)
pespective(子要素に3D的に奥行きを与える)
animation-name、duration、@keyframes(要素をアニメーションさせる)

イベント

:hover(マウスカーソルが乗ってる間だけ実行)
:active(クリックしている間だけ実行)

その他

HTMLの本文(body)に直接CSSを記述する
HTMLから読み込み
font-awesomeのアイコンの使い方

実践編

LPトップビュー作成
ヘッダーサイドメニュー作成

Sass

入れ子記述

コメント