一つ上って言ったってそんな大したことじゃない(笑)
ちょっと大げさなタイトルになっちゃった (´・ω・｀)
上下に画像が並んでおり、その間に「空白」「空間」を設けるのに、多くの方が <br> というhtmlタグを利用しているようです。
<br /> や <br/> じゃないですよ。
<br> です。
空要素のスラッシュはxmlやxhtmlの為に使うものですので、htmlでは不要。
<br> による空白行作成は 見た目を整えている わけですから、html的に言うと「よろしくない」ということになるんでしょうかね。
htmlというのは見た目の整いではなくて「意味」「定義」です。
長年の議論対象になっていますけれど、個人的には「んなこと別にどーでもいいじゃん （￣∀￣；）」
と思ってるんです(笑)
それが上手く機能している場面であれば、という但し書きつきですが。
まぁでも、良くないっちゃー良くない。
良くないと思う理由は「自分が困るんでない？ (´・ω・｀)」
という意味です。ワタクシ的には。
「改行」というのは読んで字のごとく「行を終了させて新しい行に移る」ために用います。
ですから基本的には「文章」の為に使うものです。
じゃあ、画像同士の空間だとか、要素同士の空間だとか。
それはどうやって造るのが王道がと言うと、やはり margin あるいは padding でしょうかね。
こんな時困るんでない？
サンプル
こんな感じでバナーなんかが上下に並んでいるとします。
大体この間隔がちょうど良いかな、ってところだとします。
で、上記は margin を利用して間の空白を取っています。
<br> を利用したものが以下です。
ほとんど変わらないですよね。
でもこれ、ちょっと何かすると変わっちゃうんですよ (´・ω・｀)
①
②
①② 共にソース内容は何も変わっていません。
<img src="アドレス" style="width: 300px;" alt=""><br> <br> <img src="アドレス" style="width: 300px;" alt="">
<br> は2回使ってます。
画像は一旦改行しないと横に並んでしまいますのでね。
それが インライン の特徴です。
(インライン・ブロックの別についての説明は割愛)
ですから一つ目の画像の横で一旦改行します。
二つ目の <br> は空白行のためのものです。
記事内であれば Enter/ Return キーによる改行でしょうし、プラグインフリーエリアなどでは <br> と記しているかと思います。
* 注) 正しい改行は Shift + Enter/ Return キーです。Enter/ Return は「改段落」
ここでは主旨から外れますので説明を省きます。
①② 共に自身のソース内容については同一なのに、最初のサンプルと①と②とでは空白の大きさが異なります。
① --- フォントサイズが変わったとき
② --- 行間指定 (line-height) が変わったとき
のそれぞれの様子です。
<br> は font-size や line-height の影響を受けます
例えばね、
記事の文章の文字が小さいから大きくしよう、と思った場合、大抵の方は <body> への font-size指定を変更するんですね。
例えば 13px だったものを 16px とか。
それやると ① が起こりますね (´・ω・｀)
あるいは、
記事の文章間が詰まっているな、と思った場合、こちらも <body> への line-height を変更しますね。
例えば 1.8 だったものを 2 とか(行間の指定は単位をつけないようにしましょう)
それやると今度は ② が起こります。
自分とは全く無関係なところを変更したら、その影響を受けちゃうってことなんです。
だって br空白だってテキスト内容の一部 だもん。
それは困るのではないか (´・ω・｀)
つまり <br> では 確実な見た目にするのは不可能 だ、ってことが言いたいわけです。あきら的にー (´・ω・｀)
margin を利用した空白指定
厳密なやり方というのはみなさん泣きたくなるし、放り出したくなるでしょうから、ごくごく簡単なやり方で。
ソースをこう修正します。
<img src="アドレス" style="width: 300px; margin-bottom: 10px;" alt=""><br>
<img src="アドレス" style="width: 300px;" alt="">
下方向のmarginを指定しています。
新投稿画面では上記のような書き方でOKです。
一枚目の画像の終わりに <br> が付いていますが、画像はボックスモデルがインラインですので改行しないと横に並んでしまいます。
ですから空白行を設けるための <br> ではありません
margin というのは、指定された要素自身の「外側」に空白(距離)を取るCSSプロパティです。
padding は逆に「内側」に距離をとる(実際には「詰め物をする」)プロパティ。
サンプルの場合はどっちでも良いですが、汎用性の高い margin を使いました。
上方向の margin つまり margin-top というのは使い方が難しいんです。
こういう場合には指定したらアカンよ、という場面がありますので、距離は常に下へ下へと付けていくと良いと思います。
例えば画像が5つ上下に並んでいるのであれば、全てに margin-bottom を指定(最後の画像は後続要素に応じて有り・無しを決める)
上下に margin を付けると 相殺 というのが起こって、思うように行きませんので(この説明も今回は割愛)、一方向で常に「下」に付けるようにすれば上手く操れると思います。
marginを利用し、かつ絶対数値のpxで指定しますので、他要素への修正・変更の影響は受けません。
まとめ
根本的に <br> というのはスタイリングの為に用いるものではない んですよね。
ただ、ビギナーさんが手っ取り早く使えるもんですから、私としては否定はしません。
否定はしませんが、使いどころを間違えると自分が困るよ、ということですー。
みんなが <br> でバナー並べてるのに margin使ってやってたらなんかかっこいいじゃん ←
そういう意味でもオススメ。
