CSS 幅固定レイアウト gridを使って横幅を固定した要素と、残りを可変で埋めるレイアウトのサンプルです。 例えば、画像とテキストを横に並べたい時にfloatやflexを使うことがありますが、gridでも簡単に表現できます。 floatやflexを使うと結構悩むのが次のようなレ... 2020-03-16 23:26:20
CSS tableを使わないgridの表 display:gridを使って、テーブルを使わない表組みを作るサンプルです。 グリッドはレスポンシブ対応などでよく耳にしますが、表を作る時にも便利です。 静的に書かれたtableタグの場合、列を消したり、人マス消すのは一苦労です。... 2020-03-11 23:27:24
CSS デバイスの高さまで縦を広げる CSSのvhの単位を使ってデバイスやブラウザの高さを要素にセットするサンプルです。 100vhを指定するとデバイスの縦幅いっぱいの高さとなります。 以下の親要素(破線の部分)の高さは300pxを指定しています。 height:100%; height... 2019-12-01 16:00:37
CSS デバイスの横のサイズを扱う CSSのvwを使ってデバイスのサイズをデザインで扱うサンプルです。 viewportが「width=device-width」のとき、デバイスの横幅のサイズはユーザの端末次第となります。 その設定の場合、横幅をデザインで扱いたい時vwという単位... 2019-11-16 12:53:42
CSS 画像をフィルターするアニメーション 切り抜いた画像を重ねて移動することで、画像の一部をフォーカスしたような演出をするサンプルです。 ぼかしている画像の一部が鮮明に見える表現です。 実際は、ぼかしている画像の上に切り抜かれた画像が置かれており、切り抜く部分をアニメーションで変化させ... 2019-11-15 17:47:52
CSS 文字の縦書き 文字を縦書きにするスタイルの活用事例です。 CSSでは縦書きができるようになっています。 原稿用紙や雑誌のような縦書きレイアウトも簡単に作ることができます。 行の向きも右から左 一... 2019-11-08 15:52:32
SCSS スタイルをまとめて一つにする SCSSで細分化したCSSをまとめて一つのCSSにするサンプルです。 ホームページを運用していると、いくつも同じようなデザインを流用することがしばしばあります。 長いこと続けていると、CSSがとても肥大化して運用しづらく... 2019-11-08 14:53:35
CSS 要素の可変の制御 要素の大きさや縦横のサイズをCSSで変更するサンプルです。 トリミングしたり、ユーザーがカスタマイズするような場面で、要素を可変にしたいときがあるとします。 そんなときはCSSで制御できます。 以下の画像の右... 2019-10-29 16:00:46
css3 計算した値をスタイルに使う CSSのcalcを使って計算結果の値でデザインするサンプルです。 CSSで値を記入する際、レスポンシブを意識してパーセントで書くことがよくあります。 例えば「左右に余白をとりたい」とき余白もパーセントでします。 そ... 2019-10-29 15:35:02
CSS 画像の切り取り 画像をCSSで四角く切り抜くサンプルです。 画像の編集ソフトは不要です。 CSSの「clip」を使います。 加工した画像と切り抜いた画像を重ねると目を引く演出ができます。 CSS下記にまとめて記... 2019-08-22 15:46:12