＜br＞にclass指定

こんにちは、こんばんは、AKデザインの円盤です。

本日は目から鱗な、これはclass指定は出来ないんだろうとずっと思い込んでいたタグの話です。

みんな大好き<br>

使ってますか？<br>

はい、かくいうわたくしも<br>にはとてもお世話になっております。

楽天RMSとかYahooストアクリエータ内の商品説明欄には<br>が溢れております。

ていうか楽天Yahooの運営側から<br>でマージン調整しろって仕様にしてきたのでどうしようもない感じです。

今回お話するのはwebサイト自体を構築する時のお話で、下記のようなソースが出てくる場面がございました。

HTML

<div class="flex_parent">
<div class="flex_child">
<h2>お客様のご要望にお応えして、今回は500円でご提供させて頂きます</h2>
<p>この商品の効果はとても高く、製造は日本の国内工場で行っております。
限定生産のため、お一人様5箱までとさせて頂きます。予めご了承ください</p>
</div>
</div>

CSS

@media screen and (min-width:980px) {
.flex_parent {
  display: -webkit-flex;
  display: flex;
}
.flex_parent {
  -webkit-flex-direction: row;
  flex-direction: row;
}
.flex_parent {
  width: 100%;
  margin: 0px 0px;
}
.flex_child {
  width: 50%;
  margin: 10px 5px;
}
h2 {
  margin: 10px 5px;
}
}

@media screen and (max-width:979px) {
.flex_parent {
  display: -webkit-flex;
  display: flex;
}
.flex_parent {
  -webkit-flex-direction: column;
  flex-direction: column;
}
.flex_parent {
  width: 100%;
  margin: 0px 0px;
}
.flex_child {
  width: 100%;
  margin: 10px 5px;
}
h2 {
  margin: 10px 5px;
}
}

まぁいつもフレックスボックスで、タブレットスマホでレスポンシブなって、パソコンでは横並びだったのが縦並びになるやつです。

親を2回指定しているとか細かいことは気にしないでください。

h2見出しが長くなる

はい、最初お客さんから貰った原稿では見出しの文章がスマホで見ても１行に収まる内容だったんです。

<h2>ご要望にお応えします！</h2>

これくらいの短文だったんです。

それが打ち合わせを重ねていくうちに、お客さんの担当も変わって、また戻って、やっぱりあーしようこうしようってなっていきまして…

<h2>お客様のご要望にお応えして、今回は500円でご提供させて頂きます</h2>

という感じで、どう考えてもスマホでは２行になってしまう、しかも変な文意のところで見切れてしまう、オーファントとかアイランドとかそういう次元ではない文章になってしまったわけです。

スマホで見に来るお客さんが９割はいますよ！パソコンは誰も見てませんよ！

と説明しても、お客さんはパソコンで表示確認しているという状況。

「ちゃんと表示されてるよ？」というお客さん。

いや、そりゃパソコンは広いから大丈夫だけど、重要なのはスマホですよスマホ。

もう悲惨なレイアウトなってますよ？と言っても意味がわからないらしい。

これは参ったなー、もうお客さんの言う通りそのままにしてしまうかｗってなりました。なりそうでした。

<br>入れればいいんじゃない？

はい、h2の中に<br>入れて文意で改行すればいいわけです。

これで解決です。

SEOとか考えたら見出しを<br>でぶった切るのはＮＧだと思うが、見た目重視なんだから仕方ない。

やったー！と思ったのも束の間、

パソコンでも改行されちゃうからお客さんが「レイアウトおかしくなった！」と言ってくるのは確定的で容易に想像がつく。

じゃあh2を2つ作って、それぞれにclass振って、display:noneでレスポンシブ制御する方法。

多分こっちの方がSEO的にもっとＮＧだろうｗ

だって同じのが2ついることになるわけだからｗ

そこで登場したのが下記の指定方法。

HTML

<h2>お客様のご要望にお応えして、<br class="br_onoff">今回は500円でご提供させて頂きます</h2>

CSS

@media screen and (min-width:980px) {
.br_onoff {
  display: none;
}
}

@media screen and (max-width:979px) {
.br_onoff {
  display: block;
}
}

<br class="任意のclass名">

brにクラス指定してしまうわけですね。

そしてそれをmedia widthでdisplay制御。

こうすることで、

パソコンでは一文に

スマホタブレットでは文意のところで改行されて見た目美しくなる

という表現に！素晴らしい！

でもSEO的なNGは解決していない！

SEO的な解決をしたい場合は、文意でフレックスボックスで区切るとかかしら！

どっちにしろh2が分かれるから微妙そうだ！

というわけでこれ書いてる2021年1月にググったら、

「h1にbr入れたらダメですか？」

的な質問があったので載せておきます。

この投稿が2014年なのでスマホが普及し出だしたころでしょうか。おそらく同じ状況だったのでしょう。

spanでnowrapという技もあるみたいですね。勉強なります。

まぁそんな自己満足シチュエーションがやってくる場合があるんですよ、これが。

レスポンシブ時代の問題ですね。

パソコンとモバイルでhtml自体が完全に分かれていた頃にはなかった話ですね。

htaccessでモバイルサイトに誘導が懐かしいですね！

まとめ

というわけで、<br>にclass指定のお話でした。

案外<br>にclass指定ができること自体を知らない人の方が多かったりします。

知ってても使わない人のが多いのでしょうか。

まぁ方法としては邪道なので<br>使わない方がSEO的にはもちろんいい（らしい）ので、ここぞの奥義にしておくのがいいかと！

<p>の中でももちろん使えるので、どうしてもダサくなってしまう、離れ小島になってしまうなどの状況で使うと便利だったりします。

ではまた！

■ ここからCMです ■

ググってもこれ何書いてるかわからず、知恵袋投稿してもググレカス言われ、独学で学ぶのに限界を感じた！良い師匠も友達も同僚もいなくてマジ無理ゲー！と思ったなら、

ちょっとお金払えば、めっちゃ教えてくれる学校があるので是非どうぞ！

TECH ACADEMY