カスタム投稿タイプ用の単一記事テンプレート
デフォルトでは、単一記事のテンプレートは single.php が使われます。 通常の「投稿」と同じテンプレートを使用したいなら、新たに作る必要はありませんが カスタム投稿タイプ専用の単一記事テンプレートを作りたい場合は […]
flexboxで縮めたくない要素には「flex-shrink」
flexboxは便利で使い勝手がいいのですが、たまに横の要素が長くなった影響で、widthを指定していても無理に縮小されてしまうことがあります。 <div class="box"> <h1>ポ […]
FlexBoxで縦に中央揃えさせる方法
FlexBox を使って要素を縦並びかつ、中央揃えさせる方法 <ul class="flexBox"> <li>box1</li> <li>box2</li> […]
CSSでaタグを使ってボックス全体をクリッカブルにする完全ガイド
通常、aタグはテキストにリンクを設定するために使われますが、このタグを使って、ボックス全体をクリッカブルにすることができます。 これは特に、ユーザーインターフェイスが重要なウェブサイトを設計する際に役立ちます。では、具体 […]
clampとビューポート単位の利用
vw, vh, dvh などのビューポート単位を利用することで、画面サイズに応じて滑らかに変化するデザインを実現することができます。 例えば、font-size に vw を利用することで、画面幅に応じたフ […]
子要素が親要素を超えてしまう
PC ベースでスタイリングしていたデザインをモバイルで確認したところ、不要な横スクロールが発生してしまうケースがあります。 body やルートとなる要素に width: 100vw; を指定していても、なお発生する可能性 […]
iOS Safari で 100vh を指定してもはみ出てしまう
iOS の Safari は、スクロールに応じてアドレスバーが伸縮します。一方、100vh は常にアドレスバーが縮んだ状態のビューポートの高さとなるため、アドレスバーが表示されている場合は UI が画面からはみ出してしま […]
box-sizingの意味は？スマホ対応に必須の理由を解説
要素のサイズに対し％指定を使う際にborder-boxを指定すると、paddingやborderのサイズを変更しても要素のサイズは変更されません。 よって要素の％指定が必須のレスポンシブ対応では、border-boxを使 […]
ハンバーガーメニュー
<header class="header"> <div class="wrapper header_wrap"> <h1 class="header_ttl">KATSU portf […]