Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

一つ上って言ったってそんな大したことじゃない(笑)
ちょっと大げさなタイトルになっちゃった (´・ω・`)

上下に画像が並んでおり、その間に「空白」「空間」を設けるのに、多くの方が
<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を指定しています。
最初の画像の横では一度改行がありますが、まぁそれはいいじゃん ←
もっと厳密にやりたい (brを使いたくない) という方はコチラ ↓

<img src="アドレス" style="display: block; width: 300px; margin-bottom: 10px;" alt="">
<img src="アドレス" style="display: block; width: 300px;" alt="">


ここまでやる必要は無いと思いますが。

margin というのは、指定された要素自身の「外側」に空白(距離)を取るCSSプロパティです。
padding は逆に「内側」に距離をとる(実際には「詰め物をする」)プロパティ。
サンプルの場合はどっちでも良いですが、汎用性の高い margin を使いました。

上方向の margin つまり margin-top というのは使い方が難しいんです。
こういう場合には指定したらアカンよ、という場面がありますので、距離は常に下へ下へと付けていくと良いと思います。
例えば画像が5つ上下に並んでいるのであれば、全てに margin-bottom を指定(最後の画像は後続要素に応じて有り・無しを決める)
上下に margin を付けると 相殺 というのが起こって、思うように行きませんので(この説明も今回は割愛)、一方向で常に「下」に付けるようにすれば上手く操れると思います。

marginを利用し、かつ絶対数値のpxで指定しますので、他要素への修正・変更の影響は受けません。



まとめ


根本的に
<br>
というのはスタイリングの為に用いるものではない んですよね。
ただ、ビギナーさんが手っ取り早く使えるもんですから、私としては否定はしません。
否定はしませんが、使いどころを間違えると自分が困るよ、ということですー。

みんなが
<br>
でバナー並べてるのに margin使ってやってたらなんかかっこいいじゃん ←
そういう意味でもオススメ(笑)
関連記事
最終更新日2017-09-22
Posted by
TipsCustomize

Comments 8

There are no comments yet.
hige  
<br>の話、お待ち申し上げておりました!

 色々htmlに関するネット上の記事を拝見していますと、<br>の事に関して書かれてまして、文章と文章の間の空白行には<br>タブ タグを使ってはいけないという記事も多いです。
 <p>タグで区切ってmarginで空白行を設定するという記事には、なんだか作った規則に縛られてがんじがらめという理不尽さと、所謂こちこち技術者の曰く、だから素人はとか、技術者でないとhtml文を書くなと言う昔ながらの風潮を感じました。
 めんどくさくて空白行を<br>以外で書く気が起こりません。
 と、おじんの素人が反論してみます。
 でもhtml言語としての規則という話はあるので素人の歯ぎしりでしょうが。
 で、以前ですねぇ、Akira氏が空白行をどうされているのか、ソースを見るという機能で覗かせて戴きました。しっかり<br>が書かれてましたので安心しました。
 いつも思うのですが、こんなweb上の言語って、ブログを書く人口も増えてますから、そのどれくらいの人がそんな規則を知って書いているのかと云うことも重要だと思います。
 Akira氏が啓蒙されている事は私のようなずぶの素人が少しずつ勉強していくステップになってとてもありがたい。
 最近エディタを本格使用しだしたのですが、マークアップという言語?が眼につきます。
 こういうアプローチは多数の人たちが特定の言語など判らなくてもweb上で表現手段を得られる手段なのかも知れません。
 あれま よく判らない話題に話を広げすぎました。
 申し訳ありません。

 で、次は改行や改段落とか shift+enter とかのお話を伺いたいです。(以前、少し書かれてましたが)
 昔、改行の話で 0dh 0ah キャリッジリターンとラインフィードのことを思い出しました。

2017/03/28 (Tue) 23:59 | EDIT | REPLY |   
Akira  
To higeさん

こんばんは (●'0'●)/

そうだったんですね ^^;
br論争はもうね、めんどくさいったらありゃしません(笑)
break というのはhtmlの定義は「改行」なわけなので、pを使えbrは使うな、というのはちょっと乱暴かなぁ、と思います。
break は英単語の意味でも「改行」です。
テストなんかでも「Add line break when you need a new paragraph」
新しい段落を書くなら改行しなさい。
ってフツーに書いてありますよ。
文章でさえbr使っちゃいけないならbrの存在意義って何(笑)

ただ、基本は行末に使うものですよね。
「空白行」というのはセンテンス的には意味が無いわけですよ。
単なる見た目の問題だけで。
ちょっと開いてた方が読みやすいだろう、とかそういったこと。
だったらその「空間・空白」についてはpタグのmarginでやれ、ってことが言いたいのだとは思います。

あとですね、やっぱりパソコンで文章作業していると、パソコンでの見た目優先になっちゃうんですよね。
ちょっと横に文章が伸びた時には一旦改行しておこうか、とか。
本来は「見た目ではなく文章の区切り」に留意してpで囲う、という作業をした方がスマホでは読みやすいです。
スマホって画面が狭いわけですから、任意で入れた改行が思わぬところでされてしまったり。

大きな距離をbrで設けるだとか、要素間の距離を保つのにbrを使う、というならばやっぱり良くないと思います。
コントロールできないという意味で。

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

こういうの ↑
ここまで来るとあきらかにナンセンス。
素直に margin-bottom: 40px; とかやった方が早い。逆に(笑)
でも記事内だけに関しては私もやってますよ。
コピペで済むもん!(笑)
文章間なら必要以上に気にしなくて良いんじゃないかなぁ、というのが私の逃げ口上です(笑)

Shift+Enter は、FBをご利用の方はフツーに使いこなしてるんですよね。
パソコンからFBにコメント投稿する時は Enter だけだと投稿してしまいますもので。
ところがこれがブログとなるとなかなかできんの。
なんでかわかんないけど、できないの(笑)
とりあえず、新投稿画面では Shift+Enter 必須と思っておくと良いと思います。
brにしておきたいのならば、という但し書きつきで。
この意味はまた記事にしますね (o'ω')ノ

2017/03/29 (Wed) 00:22 | EDIT | REPLY |   
あっちゃん  
ありがとうございます。キレイに表示されました。

おはようございます。
Akiraさん、お忙しい中こんなにも早くご対応いただけて、すごくすごくうれしいです。
ステキなテンプレートDLさせてもらって、それに伴いピンタレストなども挿入したくて、自分であれやこれやして、ぜんぜんうまくいかなくって、もう頭の中がこんがらがってました。

すごくわかりやすくて、もうめっちゃ納得しました。
うまく表示がされないのは、100%自分が間違ってるのは、わかっていたのですが、^^;
ほんとにほんとにありがとうございました。

ピンタレストの表示は、欲張りかな?と思い、(笑
まずは、レシピブログのセンタリングだ!って思っていました。
細かいところまで、見ていただきほんとにありがとうございました。
大事に使わせていただきたいと、思います。
ありがとうございました。

2017/03/29 (Wed) 07:51 | EDIT | REPLY |   
Akira  
To あっちゃんさん

あら。こちらにもコメント頂いてました。
もう一つの方にまとめます(笑)

2017/03/29 (Wed) 21:32 | EDIT | REPLY |   
hige  
shift+enter 誰も教えてくれないPC の事

 shift+enter => <br> ということ、Akira氏のこのブログを見て初めて知りました。その時は何のことと思ってました。
 最近エディターを使用し出しました。
 以前紹介戴いたエディターを使ったりして、今はAtom というエディターを使ってます。
 エディター上での記事の編集でshift+enter はすごく便利です。
 Atom上の標準では<br>をshift+enter では挿入してくれなくて、どこかに追加機能した・・・・。
 
 この改行の動作、MS Word でも固有の動作になるようですね。
 あと、PC版では skype やLINE でも投稿にならず文章の改行になりますねぇ。

 すごい びっくり!

2017/03/30 (Thu) 17:46 | EDIT | REPLY |   
Akira  
To higeさん

これはですね〜、エジンバラ大学のPC講義(パソコン黎明期(笑))で教授が
「改行はShift + Enter やぞ。」
って教えてくれたんです ^^;
それだけ覚えてる。
あと何も身についてない。
それどころか単位落とした… ( ̄∀ ̄;)(3回しか出席してないから当たり前)
パソコンなんて絶対使わない、と思ってたのにずっと後になって目覚めるなんて人生って不思議

教授ありがとう〜。あきらちゃんと覚えてたよ ╭( ・ㅂ・)و

2017/03/30 (Thu) 23:22 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/09/02 (Sat) 22:36 | EDIT | REPLY |   
Akira  
To 画像が表示されない件 内緒さん

こんばんは (●'0'●)/

修正漏れです。
教えて頂かなければたぶんずっと気づかなかった(笑)
ありがとうございますー!
こちらこそとても励みになります

2017/09/03 (Sun) 01:55 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い