flexboxは便利で使い勝手がいいのですが、たまに横の要素が長くなった影響で、widthを指定していても無理に縮小されてしまうことがあります。 <div class="box">   <h1>ポ […]

FlexBox を使って要素を縦並びかつ、中央揃えさせる方法 <ul class="flexBox"> <li>box1</li> <li>box2</li> […]

通常、aタグはテキストにリンクを設定するために使われますが、このタグを使って、ボックス全体をクリッカブルにすることができます。 これは特に、ユーザーインターフェイスが重要なウェブサイトを設計する際に役立ちます。では、具体 […]

vw, vh, dvh などのビューポート単位を利用することで、画面サイズに応じて滑らかに変化するデザインを実現することができます。   例えば、font-size に vw を利用することで、画面幅に応じたフ […]

ウェブサイトのパフォーマンスにおいて、画像のサイズがボトルネックとなるケースが多いです。   表示画面の小さいモバイル端末では、容量の大きい高精度な画像を表示する必要はありません。   そのため、画面 […]

PC ベースでスタイリングしていたデザインをモバイルで確認したところ、不要な横スクロールが発生してしまうケースがあります。 body やルートとなる要素に width: 100vw; を指定していても、なお発生する可能性 […]

iOS の Safari は、スクロールに応じてアドレスバーが伸縮します。一方、100vh は常にアドレスバーが縮んだ状態のビューポートの高さとなるため、アドレスバーが表示されている場合は UI が画面からはみ出してしま […]

要素のサイズに対し％指定を使う際にborder-boxを指定すると、paddingやborderのサイズを変更しても要素のサイズは変更されません。 よって要素の％指定が必須のレスポンシブ対応では、border-boxを使 […]

img.example { filter: saturate(90%) brightness(85%); } img.example { transition: 0.4s ease; } /* ホバー時のエフェクト */ […]