CSSのサンプルコード集

一覧

br要素みたいに要素する方法

CSSでbr要素と同じように改行させるには、\Aとwhite-spaceプロパティを利用します。

dl要素を横並びにする方法

dl要素を横並びに表示するには、dt要素にfloat: leftを適用し、dd要素の左余白を設けます。

pre要素で折り返し改行させる方法

pre要素で折り返し改行するには、white-spaceプロパティにpre-wrapを指定します。

type=rangeのinput要素を上下揃えする方法

rangeの入力フォームを上下揃えするには、vertical-alignプロパティにmiddleを指定します。

表示されるタブの幅を変更する方法

表示されるタブの幅を指定するには、tab-sizeプロパティを利用します。

テキストに影を付ける方法

テキストに影を付けるには、text-shadowを利用します。

テキストを上下で中央揃えする方法

テキストを上下で中央揃えするには、heightとline-heightに同じ高さを指定しましょう。

テーブルの枠線の隙間をなくす方法

border-collapse: collapseを指定すれば、テーブルのセル間の枠線をなくせます。

ホバーした時に回転させる方法

画像などを回転させるには、transformプロパティを利用します。

ホバーした時に透過させる方法

画像などを透過させるには、opacityプロパティを利用します。

リンクの下線を消す方法

リンクテキストの下線を消すには、text-decorationプロパティにnoneを指定します。

リンク色をゆっくりと変える方法

リンク色をゆっくりと変えるには、transitionプロパティを利用します。

三角形を作る方法

CSSで三角形を作るには、横幅、高さが0の要素に幅の厚い枠線を付けます。

URLなど半角英数の途中で強制的に折り返す方法

word-breakプロパティにbreak-allを指定すれば、urlなど半角文字列の途中でも行末で強制的に折り返してくれます。

埋め込みコンテンツをレスポンシブに対応する方法

YoutubeやGoogle Mapsなどの埋め込みコンテンツを、レスポンシブに対応します。

iOSの慣性スクロールに対応する方法

iOSの滑らかに動く慣性スクロールに対応するには、-webkit-overflow-scrollingプロパティにtouchを指定します。

文字の太さを変更する方法

文字の太さを変更するには、font-weightプロパティを利用します。

画像や要素に枠線を付ける方法

画像などに枠線を付けるには、borderプロパティを利用します。

画像や要素の角を丸める方法

画像などの角を丸めるには、border-radiusプロパティを利用します。

計算式で値を指定する方法

%(パーセンテージ)とpx(ピクセル)を混ぜた計算式で、幅などの値を指定します。