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
CSS 画像のぼかし、補正 CSSのfilterを使って簡単な画像補正が可能です。何がどう調整できるのかサンプル一覧を作りました。 フォトショップを使わずにCSSでも画像の補正がかなりできるようになりました。 たくさんの種類があるので、どんなことができるのか並べてみましょう。 画... 2019-07-30 22:28:24
CSS ヘッダー固定 ヘッダーやフッターなど、バナーやメニューを簡単に固定できるCSSのposition:stickyのサンプルです。 以下のようにヘッダーにdiv要素で画像やメニューなどを簡単に固定できるスタイルの紹介です。 以前はこのようなことがやりたくてもz-indexやfixedで表現して... 2019-07-28 13:37:32