hタグや画像をモバイル表示時横幅いっぱいに表示する方法

わかりずらいタイトルですが、そのまんまの意味です。CSS の calc を使うとスマホでの表示時、副題のための h2、h3 タグや画像などを横幅いっぱいに表示することが出来ます。

当ブログも h2 タグがモバイル表示だと横幅いっぱいになります。

定規

やり方

以下の画像のように h タグや画像を画面幅いっぱいにします。

calcで横幅いっぱいに

今回は CSS のみで実装します。JavaScript を使えば完全に自動化できない事もありませんが、CSS を使って実装すべき内容だと思うので、CSS のみで実装します。

ただし CSS だけで実装する分、万能な方法ではありません。下記の注意事項を参考にしてください。

CSS

/*img をする場合*/
img {
    margin-left: -15px; /*30px の半分*/
    width: calc(100% + 30px); /*30px は各自調整*/
    width: -webkit-calc(100% + 30px); /*上と同じpx値に*/
}

/*h3 をする場合*/
h3 {
    margin-left: -15px; /*30px の半分*/
    width: calc(100% + 30px); /*30px は各自調整*/
    width: -webkit-calc(100% + 30px); /*上と同じpx値に*/
}

/*h2 をする場合*/
h2 {
    margin-left: -15px; /*30px の半分*/
    width: calc(100% + 30px); /*30px は各自調整*/
    width: -webkit-calc(100% + 30px); /*上と同じpx値に*/
}

プロパティは全て同じです。img、h3、h2 のセレクタに関しては、コンテンツ部分のみを指定するように各自変更してください。「.content img」などにすれば大抵の場合は OK です。

以下に詳細を書いていきます。

スポンサーリンク

calc

calc を使う事で CSS の値に関して異なる単位のものを算数的に計算できます。今回は calc(100% + 30px) としています。30px は各ブログデザインによって変わるため各自調整が必要な値です。

calc を使わず width:100% のみの指定だと大抵の場合以下のような描画になります。

100%だけだと余白ができる

当ブログの場合、右の余白が「15px」、左の余白が「15px」なので合計で「30px」増やしています。つまり calc(100% + 30px) となります。

また calc の細かい使い方になりますが「+」の両端に半角スペースが必須です。calc(100%+30px)としてしまわないように気を付けましょう。calc は一応最新ブラウザではベンダープレフィクスなしで使えるのですが、念のため -webkit- で webkit 系の対策を入れておきます。

繰り返しになりますが、当ブログは余白部分が15pxでしたが、これは使っているテーマ等で変わります。具体的にいくつにすればいいのかはテーマごとに調整してください。

参考:calc | MDN

margin

calc で幅を増やすだけではピッタリになりません。

左の余白分ひっぱる

上記画像のように左に余白が残るので、ネガティブ margin でひっぱります。引っ張る幅は「30px」の半分のマイナス「-15px」です。この値もテーマ等にって変わります。「半分」の幅であれば真ん中になるはずです。

注意事項

p タグやコンテンツ部分の横幅設定が「95%」など相対値で余白を作る設定になっていた場合、この方法ではうまくいきません。margin や padding で余白を作っている場合のみ上手くいく方法です。

モバイル表示時のみこのCSSを適用したい場合は、メディアクエリなどを使ってレスポンシブ対応をしてください。

画像を横幅いっぱいにする場合は、上記の CSS では全ての画像が適用されてしまいます。特定の画像のみ指定したい場合は専用の class 名などを付けて対応してください。

まとめ

上記の注意事項にも書いた通り、テーマの CSS よっては上手く描画しません。JavaScript で Window 幅などを測れば出来ない事もありませんが、少し面倒くさそうです。

ただ calc を使う事で簡単に実装できてインパクトもある表示方法だと思います。目立たせるにはもってこいの方法ですね。

Top