2024年9月
CSSでaタグを使ってボックス全体をクリッカブルにする完全ガイド
2024年9月1日
通常、aタグはテキストにリンクを設定するために使われますが、このタグを使って、ボックス全体をクリッカブルにすることができます。 これは特に、ユーザーインターフェイスが重要なウェブサイトを設計する際に役立ちます。では、具体 […]
clampとビューポート単位の利用
2024年9月1日
vw, vh, dvh などのビューポート単位を利用することで、画面サイズに応じて滑らかに変化するデザインを実現することができます。 例えば、font-size に vw を利用することで、画面幅に応じたフ […]
子要素が親要素を超えてしまう
2024年9月1日
PC ベースでスタイリングしていたデザインをモバイルで確認したところ、不要な横スクロールが発生してしまうケースがあります。 body やルートとなる要素に width: 100vw; を指定していても、なお発生する可能性 […]
iOS Safari で 100vh を指定してもはみ出てしまう
2024年9月1日
iOS の Safari は、スクロールに応じてアドレスバーが伸縮します。一方、100vh は常にアドレスバーが縮んだ状態のビューポートの高さとなるため、アドレスバーが表示されている場合は UI が画面からはみ出してしま […]
box-sizingの意味は？スマホ対応に必須の理由を解説
2024年9月1日
要素のサイズに対し％指定を使う際にborder-boxを指定すると、paddingやborderのサイズを変更しても要素のサイズは変更されません。 よって要素の％指定が必須のレスポンシブ対応では、border-boxを使 […]
ハンバーガーメニュー
2024年9月1日
<header class="header"> <div class="wrapper header_wrap"> <h1 class="header_ttl">KATSU portf […]