CSSの逆引きリファレンス

投稿日:

アイキャッチ画像

スタイルシートの小技を、初心者向けにまとめてみました。基本的に1年以上前のブラウザバージョンには対応していません。

一覧

項目説明
ゆっくりリンク色を変えるマウスをホバーした時に、じわっと色が変わるリンクの作り方。
リンクの下線を消すリンクに付く下線を消します。
タブの幅を変更するPREタグやTEXTAREAタグなどで、タブの表示幅を調整します。
改行をするbrタグを使わずに、スタイルシートで改行します。
計算式で値を指定する%とpxの値を組み合わせて、要素の幅などをフィットさせましょう。
枠線を付ける画像や要素を強調する枠線を付けます。
角を丸める画像や要素の角を丸めます。いわゆる「角丸」です。
ホバー時に透過させる画像にホバーした時に半透明にします。
ホバー時に回転させる画像をホバーした時に回転させます。
埋め込みコンテンツをレスポンシブにするYoutubeやGoogle Mapsなどの埋め込みコンテンツをレスポンシブにします。
pre要素で折り返し改行する通常は右端で改行されないpre要素を、自動改行にします。
rangeフォームを垂直方向で中央揃えする上部に寄せられてしまうinput要素のrangeを、垂直方向で中央揃えします。