【h1】レスポンシブの見出しのスタイル【h3】

レスポンシブでパソコンでもスマホでも見出しを表示すると、スマホの場合、見出し内に文字が収まりきらないことが多いです。

なぜなら、スマートフォンは横幅が短いからです。
ではどうすればスマホでも見出しをきちんと表示できるのでしょうか。

CSSで見出しを折り返して表示する

余った見出しの文字を折り返して表示します。
例えばこんな感じです。
見出しが端に行ったところで折り返されています。

見出しにデザインが適用されていて、折り返す時と折り返さない時で高さが違う場合は、min-height を指定することで、見出しにスタイルを適用することができます。

【スマホの見出し】

/* スマホ用の見出し例 */ @media screen and (min-width:0px) and (max-width:899px) { h1{ font-size:16px; width:95%; min-height:30px; margin:30px 0px 15px -10px; padding:0px 0px 10px 35px; border-bottom:2px #eee dotted; background:url(画像ファイルへのURL) no-repeat; } }

【PCの見出し】

/* PC用の見出し例 */ @media screen and (min-width:899px) { h1{ font-size:20px; width:90%; min-height:35px; padding:0px 0px 5px 45px; margin:30px 0px 25px 0px; border-bottom:2px #9d9d9d dotted; background:url(画像ファイルへのURL) no-repeat; } }

見出しからはみ出す部分を非表示にする

見出しからはみ出した部分を ・・・で置き換え、非表示にすることができます。
この方法ですと、見出しの高さは変わりません。

でも、・・・で非表示にする文字が増えると、読んでいる方には何が書かれていたのかわかりづらくなります。

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

このスタイルを見出しの中に入れてあげることで、見出しの端からはみ出す文字を全て・・・に置き換えることができます。

【力技】見出しからはみ出さないように頑張る

見出しからはみ出さないように、力技で頑張ります。
見出しの字数の自主制限を行います。

ページ数が多くなれば、なかなか見出しからはみ出さないように見出しをつけることも難しくなってくると思いますので、ページ数が少ない時はこれでもよいと思いますが、ページ数が多い場合は、別の方法が良いように思います。

見出しからはみ出した文字は非表示

見出し枠からはみ出したら非表示にします。
↓の２つのスタイルを指定すれば、はみ出した文字は全て非表示にしてくれます。

overflow: hidden;
white-space: nowrap;

/* スマホ用の見出し例 */ h1{ font-size:16px; width:95%; height:30px; margin:30px 0px 15px -10px; padding:0px 0px 10px 35px; border-bottom:2px #eee dotted; background:url(画像ファイルへのURL) no-repeat; overflow: hidden; white-space: nowrap; }

この方法の場合、・・・ がありませんので、非表示になっているのかどうかわかり辛いのが難点です。
また、文字の真ん中で切れる場合は、あまり見た目がよくないです。

ちなみに、この場合は折り返しのCSSの指定を解除してあげないといけません。
折り返しを入れた上で、はみ出した部分だけ非表示にするとこんな感じになります。

折り返しの解除には、white-space:nowrap; を入れてあげます。
これがないと折り返されてしまい、段落ができてしまいます。
そして、下にはみ出した部分が消えます。