本文の幅を変えず、1行の背景だけを左右へ広げるCSSです。要素を100vwにするとスクロールバー幅やpaddingの影響で横スクロールが出ることがあります。この例は背景と同じ色の影を左右へ伸ばし、上下をclip-pathで切り取ります。
動く見本
見本は枠の幅で背景を止めています。画面幅まで広がるかは設置先の親要素によります。親にoverflow:hiddenやclip-pathがある場合は、その位置で切り取られます。
貼り付けるHTMLとCSS
対象ブロックの追加CSSクラスにwaza-wide-bandを指定します。HTMLで配置する場合は次の例を使います。CSSは子テーマのスタイルシートまたは追加CSSへ貼り付けます。
<p class="waza-wide-band">コピーライトなどのテキスト</p>.waza-wide-band {
background: #344c45;
color: #fff;
padding: 0.6em 1em;
box-shadow: 0 0 0 100vmax #344c45;
clip-path: inset(0 -100vmax);
}背景色を変更するときはbackgroundとbox-shadowの色をそろえます。copyrightなどテーマ共通のクラスを直接指定せず、適用したい要素だけへ追加クラスを付けてください。この見本は本サイトのフッターを変更しません。
確認と戻し方
PCとスマホでページ全体に横スクロールが出ないこと、長い文章の折り返し、左右の背景、隣接する要素との重なりを確認します。影の部分はレイアウト上の幅を持ちません。リンクを入れる場合はキーボードフォーカスが切れないかも確認してください。
影を切り取る都合で上下にはみ出す装飾には向きません。背景と一緒に画像やボタン自体を全幅へ広げたい場合は、テーマの全幅ブロックを使います。戻すときは追加CSSクラスと、このクラスのCSSを削除します。旧100vw版とは方式が異なるため、両方を重ねて適用しないでください。
