画像をfloatさせたい場合、pタグとimgタグどちらに指定するのか
わからない…何も…
みなさん、floatしてますか？
意味、わかりますか？
分からなくても続けますね。
まあ今分からなくても、この記事を読めば分からない人も分かるようになるし、「どの要素に指定するのが最適解か」まで把握できるようになります。きっとね。
記事の最後にははてなブログの人向けにコピペででできるようになるアレ（どれ？）も載せているので、参考にしてくれよな！
ちなみに結論からいうと、floatはpタグに指定しましょう
CSSプロパティ「float」
floatってのは文字通り、要素を"浮かす"ことなんですけど、みなさんお尻ですか？
浮かせて左右に寄せるのがfloatです
お尻の人は飛ばしてください
まあお尻じゃなくても、ブログを書いたりする上で知っておくと記事をカッコよく見せることができて便利。
てかこれだよ、これこれ。今僕の肖像画が表示されてると思いますが、右に寄ってますよね？
コレが floatです。
要素ってのは<p>とか<img>とか、<div>とかのことです。
はてなブログで書いてる人は、html編集で記事見てみると分かると思います。
ブログ始めた当初は見るたび目がチカチカしていたhtml編集も、今では僕にとっての"ヴェルタースオリジナルのような存在"になっています。
この<p>とかの要素にfloatを指定すると、指名した要素を左右に寄せることができ、かつ後ろの要素をその反対側に"回り込ませる"ことができます。
float: left, float: right
試しに以下の画像にfloatを指定してみます。
<p><img src="Seyana.jpg" /></p> <p>うしろのぶんしょうだお！</p>
これが、
<p style="float: right"><img src="Seyana.jpg" /></p> <p>うしろのぶんしょうだお！</p>
こう。
右に寄せたい時は、style="float: right"を記述します
※<p>…「段落」を作る要素。文中の画像は大体これの中にあるんだお！
実際の表示で見てみると、
うしろのぶんしょうだお！うしろのぶんしょうだお！うしろのぶんしょうだお！うしろのぶんしょうだお！うしろのぶんしょうだお！うしろのぶんしょうだお！うしろのぶんしょうだお！うしろのぶんしょうだお！
これが、
うしろのぶんしょうだお！うしろのぶんしょうだお！うしろのぶんしょうだお！うしろのぶんしょうだお！うしろのぶんしょうだお！うしろのぶんしょうだお！うしろのぶんしょうだお！うしろのぶんしょうだお！
こう。
はい。こうです。簡単ですね。
style="float: right"が記述された要素は右に寄り、その後ろの要素は反対側の左へ回り込むような形になっていますね
alignとfloatの違い
--ここは余談なので飛ばしておｋ--
左右に寄せるCSSプロパティには、floatの他に「text-align」というのもあります
<p style="text-align: right"><img src="Seyana.jpg" /></p>
こんな感じ。（ただ、style=よりはalign=rightみたいに書く方が多いと思う。楽（文字数少ないし）だし。たぶんね。ここではfloatとの比較が分かりやすいようにあえてstyle=で書いてます）
そうするとどんな表示になるかというと・・・
うしろのぶんしょうだお！うしろのぶんしょうだお！うしろのぶんしょうだお！うしろのぶんしょうだお！うしろのぶんしょうだお！うしろのぶんしょうだお！うしろのぶんしょうだお！うしろのぶんしょうだお！
こうなる。
floatとの違い、分かる？？？
floatの時は続く文章が""回り込んで""画像の横に表示されていたけど、今は後ろの要素が改行された形で表示されてるよね。
floatは"""浮く""から、浮いた要素の下から後ろの要素が潜り込むイメージ。
text-alignは<p>（段落）の幅と高さは保持されたまま、その中での左右揃えってイメージ。
分かる？？？分かるか？？？分かんなかったらスマン！！！！まあここは余談だから許してくれ！！
エクセルの行揃え思い浮かべてみて。それがalign。
どの要素にfloatを指定するか
本題です。
冒頭でも言った通りfloatはpタグに指定した方がうまく機能するのですが、実際に<img>、<p>それぞれにfloatを指定して見てみましょう。
imgタグにfloatを指定
<p><img style="float: right" src="Seyana.jpg" /></p> <p>うしろのぶんしょうだお！</p>
<img>にfloatを指定すると右に寄りはするんですが、<p>タグはそのまま。
つまり、<p>の中でのfloatになっているんですね。
ちょっとtext-alignに似てるよね。似てるけど、floatのように後ろの要素が回り込んでるな？？？？
左右揃えができる。後ろの要素は回り込んで表示できてる。
え？？じゃあfloatを指定するのはimgタグでもよくない？？？
となるな。うん、なｒ……いや待って。ちょっと待ってくれ。ならない。そう、ならないんだよ。実はならない。ならないからちょっと聞いてくれ。
<img>にfloatを指定すると、実はこういう不具合が発生することがあるんです
これは極端な例ですが、<p>の行の幅を普通よりも多く設定していた場合に起こる不具合？です
<img>はfloatしてるけど、<img>を内包している<p>の幅（と高さ）はそのままだから、行の幅の分だけ、次の要素が始まるのも後ろになっちゃうってことなんですね
<p><img style="float: right" src="Seyana.jpg" /></p> 行の幅は、上<p>のmargin-bottomとして設定されている。ここが広い分、下<p>が始まるのも後ろになる。 <p>うしろのぶんしょうだお！</p>
まあ正直この状態になることはあまりないとは思いますが、いざという時に想定した通りに動いてくれないのは困ります。
pタグにfloatを指定
それでは<p>にfloatを指定して見てみましょう
<p style="float: right"><img src="Seyana.jpg" /></p> <p>うしろのぶんしょうだお！</p>
なんということでしょう。
<p>は画像サイズと同じになり、後ろの文章の前には何の障害物もなく、綺麗に「うしろのぶんしょうだお！」が始まっているではありませんか。
ということで、floatは<p>に指定しておきましょう
コピペで使えるfloat指定
html <p class="img-float-left"><img src="Seyana.jpg" /></p>
css p.img-float-left{ float: left; margin-right: 10px; width: 30%; } p.img-float-right{ float: right; margin-left: 10px; width: 30%; }
うおおおおおおおおおおおおおおオレモfloatしてええええええええええええってなったはてなブロガーの人は、上の「css」の中に書いてるやつを
デザイン>カスタマイズ>デザインCSS
の中にコピペしてください。
で、使う時は記事のhtml編集かmarkdown編集で、<img>が入ってる<p>の中にclass="img-float-right"を記述すればおｋ
width: 30%;のとこは、記事の幅に対して表示させたい割合に適当に変更していいお
ふええ…class="img-float-right"なんてフレーズ忘れちゃうよぉ……ていう人は、Clipyに登録しておくと便利です。
Windowsの人は！！！スマン！！！！！！
では解説
floatを指定する方法は2通りあります
1つは今まで書いてきたように style="float: right"で記事中にインラインで指定する方法
もう1つは、class名で指定する方法
実際にfloatを使う場合は、記述するのはfloatだけではありません。
なぜなら、floatした後に記事としての体裁を整えなければならないんですね。（marginとか画像のwidthとか）
例えば、大きめの画像をfloatしたい時に、floatだけしか指定しないとこうなります。
これだと画像がでかすぎて見えないし、画像と文字の幅にmarginがないのでちょっと見にくいですね
なのでwidthとmarginを指定しよう！って感じなんですけど、毎回インラインに書いてたら無駄に文字数が多くなってしまうし、見づらいしメンテが大変です。
しかしclass名で指定すれば、楽。
上の「css」の中身です。
これをインラインでやろうとすると、
html <p style="float: left;margin-right: 10px;width: 50%"><img src="Seyana.jpg" /></p>
となり、長いですね。
例えば1記事中にfloatさせたい画像が10枚ある場合は10回floatさせる記述が必要ですが、
●インラインで指定する場合
style="float: left;margin-right: 10px;width: 50%"
●class名で指定する場合
class="img-float-left"
を追記しなければなりません。
記述量が全然違いますね。
しかもこれを10枚分（10回）繰り返す必要があるので、
10回×文字数＝あああああああああああああああああああああああああああああああああああああああ
全然違いますね。
おわり
これは実際に僕が「どっちに指定したらいいんだ…？」となってやってみたらア〜〜〜〜〜ナルほど〜〜〜〜〜ってなったやつです。
めちゃくちゃニッチな問題？というかみんな全く悩まずに<p>をfloatさせてるのかもしれませんが、自分的にスッキリしたので共有します。
おわり
