floatをスタイルシートで管理する

はじめに

float というCSSでの見た目操作ですが、まず一番に思い浮かべるのは日本語で言うと 回り込み ではないかと思います。そして回り込みといえば組み合わせは 画像 + テキスト ですよね。実際のfloatというのは回り込みでもなければ必ずしも画像と組み合わさるわけでもないのでアレなんですが、今回はそのあたりはうやむやで進めます(笑)

以下のような問題点、その解消に努めるというのが本記事の主旨です。

• コードが古い (旧式の書き方を変えられない人が多い)
• 混乱する (マークアップの仕方が複雑、と感じる人が多い)

まず、旧式マークアップ(コーディング)をずっと続けている方が非常に多い点。最も簡単で最もよく目にするのが以下のような形ですね。

<img src="画像アドレス" width="横" height="縦" alt="代替テキスト" align="right">
文章
<br clear="both">

画像を右、テキストを左にして画像に回り込み、という内容ですね。もうツッコミどころ満載のコーディング。そうは言っても2021年の現在であるからして「ツッコミどころ」となっているのであって、昔はこれでほぼ正しい構文ではあったわけです。このコードを指摘すると

• 「どこから(floatの始まり)」が不明
• align属性は廃止
• clear属性は廃止
• invalid(html構文が正確ではない、エラーがある、という意味)

で、こういうコードを書いている方というのは殆どの場合が「画像は小さめにしておく」「スマートフォンでの見た目は考えていない」という感じです。自分のパソコンのサイズだけを考慮して画像を予め小さく加工しておくというケースが多いですね。そんなことする必要はないです。寧ろ表示させる画像のサイズの実寸は2倍であってほしい(400px表示なら実寸800px)

スマートフォンで画像がぼやける際の対処と画像容量削減

スマホだと画像がぼや〜っと不鮮明になってしまう場合の原因と対策ですー (´・ω・｀) そしてもうひとつ、画像がスキっと表示されずに上からベロベロ〜って感じでゆっくり表示されてしまう場合の原因についても(後者は「ついで」的にですが)...

vanillaice000.blog.fc2.com

とにかく今の時代は スマートフォンでの見た目を意識したスタイリング を行わないといけないので、パソコンのことだけ考えてたらダメです (´・ω・｀)
詳細は以下の記事を参照のこと。本記事は以下の記事内容をスタイルシートで管理して扱おうというものです。

画像のfloatはスマートフォンでの見た目を考えて行いましょう

回り込み と表現されることが多い float (フロート) という手法について。 実際は回り込むのは特定条件下だけなので「回り込み」ではなく「浮き, 浮かせ」がfloatの本来の性質ですが。 そういった薀蓄はさておき、記事内で画像とテキストを並べるのにfloatを使う方もいらっしゃると思います。 そのfloat適用要素、スマートフォンでの見た目をちゃんと確認していますか？ というお話。そしてどう設定すればスマホでも見やす...

vanillaice000.blog.fc2.com

スタイルシート管理のメリット・デメリット

メリット(pros)とデメリット(cons)の比較をしっかりと行って自身で評価・決定を下すべし (∵`)

メリット(pros)

• 簡単な記述で済む
• あまり考えなくて良い
• 一括修正可能

デメリット(cons)

• テンプレートを変更したら無効(CSSの移植が必要)
• ブログを引っ越したら無効(CSSの移植が必要)

いわゆる 独自クラス でしょうか。この表現は実際には違うというか本来はJSとかC言語で利用するものですが日本ではこの表現で通るようなので(違ったら教えてください ^^;)、このまま説明を進めます
やることはとどのつまり「クラス(or アイディー)セレクタのルールセットをスタイルシートに記載する」ということです。「独自」の意味は「このスタイルシートに限る」という意味合いでそう表現するのかな、と思います。つまりAテンプレートのスタイルシートでのみ有効、みたいな。

記事内に直接インラインCSS(style属性)でもって記載したfloatというのはテンプレートを変更しても有効ですが、独自クラス化した場合は無効になりますので、該当スタイルの移植が必須です。でも記事を書く時にはインラインCSSより独自クラスの方が楽だよ、ということで。個人的には「移植」というのは結構忘れがちだし面倒なのでおすすめしません (▪⌔▪)
ただ、インラインCSSの場合は修正したければ個々の記事に対しそれぞれ手を加える必要がありますが、スタイルシート管理の場合は1000記事あろうと2000記事あろうと一括で修正できますので、そこは大きな利点かな、と思います。

テンプレートやサービス変更で無効化される点、実際にYahoo!ブログからのお引越しで「floatじゃなくなってる！」という声が多く聞こえてきました。理由はもうおわかりだと思いますが、Yahoo!ではfloatをスタイルシートで管理していた ため。floatというのは見た目の操作以外の意義というのは無いので、失われたら全く意味が無いわけでー (∵`)

float用 ソースコード

CSS

スタイルシート末尾に記載。

.float_left,
.float-right {
  margin: 30px 0;/* 前後要素との距離, 不要なら削除 */
  overflow: hidden;
}
.float_left p,
.float_right p {
  margin: 0 !important;
}

/* 画像左 */
.float_left img {
  float: left;
  width: 40%;/* スマホの様子を目視確認して決定すること */
  max-width: 300px;/* パソコンでの様子を目視確認して決定すること */
  margin: 0 10px 5px 0;/* テキストとの距離 10pxが画像右側, 5pxが画像下 */
}

/* 画像右 */
.float_right img {
  float: right;
  width: 40%;/* スマホの様子を目視確認して決定すること */
  max-width: 300px;/* パソコンでの様子を目視確認して決定すること */
  margin: 0 0 5px 10px;/* テキストとの距離 5pxが画像下, 10pxが画像左側 */
}

* テンプレート側に img{max-width:100%;height:auto} の指定が行われている、と想定しています。無い場合は追加を。

html

記事を書く際に記載

<div class="float_left">
<img src="画像アドレス" width="横実寸" height="縦実寸" alt="代替テキスト" loading="lazy">
<p>文章</p>
</div>

* loading属性は任意です。

雛形は「画像が左」の場合です。画像を右に配したい場合は float_left を float_right に変更するだけで後は全く同じ内容です。つまり最初のdiv要素のclass属性で 画像を左にするか右にするか を指定してください。

文章は必ずしも p要素 としてマークアップする必要はありません。他の部位、他の文章でp要素を利用していないならば、floatでだけ利用する必要は無いので、雛形から開始タグ <p> と終了タグ </p> を削除してください。

以下が実際のサンプルです。パソコンから閲覧の方はブラウザの横幅を広くしたり狭くしてりして目視確認してください。

画像左
底にさですものももう今日でついにでないまし。よく岡田さんに仕事人格これから意見で行き届いなけれ向うその他彼か話をというお始末たなべくならて、この今日はあなたか頭上流に充たすて、三宅さんののをわがままのこれらをたといご盲従としが私文芸を皆仕事で心得ようにもしお沙汰を渡っですますて、よくついに養成が引き摺り込んだていでものを考えますです。もしくはそれでも今他人が断っ訳はそう不愉快となっですが、その他をは進まですばという辺へしから致しなけれな。

画像右
底にさですものももう今日でついにでないまし。よく岡田さんに仕事人格これから意見で行き届いなけれ向うその他彼か話をというお始末たなべくならて、この今日はあなたか頭上流に充たすて、三宅さんののをわがままのこれらをたといご盲従としが私文芸を皆仕事で心得ようにもしお沙汰を渡っですますて、よくついに養成が引き摺り込んだていでものを考えますです。もしくはそれでも今他人が断っ訳はそう不愉快となっですが、その他をは進まですばという辺へしから致しなけれな。

htmlの雛形は辞書登録、あるいは辞書登録でバイト数超過してしまう場合は以下の記事をご参照ください。

【Clipy】HTMLモードで記事を書くときの強力な助っ人アプリ

FC2ブログの管理画面のデザインが刷新されまして、これまで以上に WYSIWYG(見たまま編集)とHTML編集の選択 がはっきりするようになったのではないかと思います。今回はHTML編集モードでの記事作成に便利なツールをご紹介します。...

vanillaice000.blog.fc2.com

おまけ

「floatした時に画像とテキストの垂直位置を中央にしたい」といった要望が出ることがあります。結論から言うと できません。各サイズがきっちり決定していればなんとでもなりますが、テキスト(文章)というのは折返しなどもあり、本来がそういった性質ではないので通常の方法では無理です。

その前に「回り込み」というのは「見た目にテキストが画像を囲うように配置される」というものなので、そもそもある程度の文章量がなければ、つまりテキストの高さが画像の高さを超えなければ成り立たない、というデザインです。短いテキストの場合はfloatではなくflexやinline-blockなどを利用した方が良いと思います。

まとめ

記事作成時は画像を右左どちらにするか、だけ決めれば良いので非常に楽できると思います。また、テンプレートによっては作者さんが既に入れてくれている場合があるかもしれませんので、事前に確認を行ってくださいね ('0')/