独自クラスによるfloatを勧めない理由(Yahoo!からの引っ越し記事が崩れる理由)

独自クラスによるfloatを勧めない理由(Yahoo!からの引っ越し記事が崩れる理由)

カスタマイズ
2019/03/11 2
vanillaice (Akira)
vanillaice (Akira)
初心者向け トラブル対処 HTML CSS 引っ越し Yahoo!

以前から「floatの独自クラスはテンプレートに含めない方が良い」と考えています。

2019年3月現時点で Yahoo!ブログ終了に伴うYahoo!ブロガーのFC2へのお引越し が多いですね。Yahoo!ブログで書いた記事をFC2に複製している方も多く見られます。そしてレイアウトが大崩している方も非常に多い。それが 独自クラスのデメリット です。

本記事の主旨・意図

「独自クラスは害になるから使うな」ということではないんです。使うなら 意味を理解して使え・自己責任で使え という意味です。

「自己責任」という言葉は「マズいことが起こってもあなた自身の責任ですよ。他者を責めないでくださいよ。」という意味合いで使われることが多いんですが、その「マズいこと」が何なのか理解していなければ話になりません。

クラス属性とは

htmlには class属性 id属性 というのがあります。これは主にスタイリングを適用する際の要素特定のために使います。id属性は同ページ内で単一でしか使えませんので上級者向けだと思います(ページ全体の要素を把握する必要があるため)
なので以降は「クラス」の方に的を絞った説明を行います。

例)

<p class="xxx">あいうえおかきくけこ</p>
<p>さしすせそたちつてと</p>
<p class="xxx">なにぬねのはひふへほ</p>
.xxx {
  color: red;
  font-weight: bold;
  text-align: center;
}

緑色がクラス属性です。クラス名 xxx のついたp要素はCSSによるスタイリングが適用されます。以下が実際のレンダリングです。

あいうえおかきくけこ

さしすせそたちつてと

なにぬねのはひふへほ

クラス名を付けるメリット

htmlが複雑化しない

特定のスタイリングをすぐさま適用出来る点ですね。例えば先程のhtmlをクラス属性を使わずに書く、つまりスタイルシートを利用せずに書く場合には以下のような形になります。

<p style="color: red; font-weight: bold; text-align: center;">あいうえおかきくけこ</p>
<p>さしすせそたちつてと</p>
<p style="color: red; font-weight: bold; text-align: center;">なにぬねのはひふへほ</p>

style属性 に直接CSSを書く インラインCSS という方法です。実に長ったらしいですね。スタイリングが複雑になればなるほど冗長になっていきます。それに比べクラス名を利用した場合には記述量が最小限で済みます。

スタイルの変更や修正が楽

スタイルシート内容を変更すれば同じクラス名を持つ要素は全て一括で修正できます。インラインCSSは一括修正ができません。

レンダリングの最適化, セマンティクス

htmlのパースは上から順に行われます。途中でstyle属性を見つけると、そのCSSをその場で処理します。スタイルシートにCSSを書いた場合には、まず最初にCSSを読み込んでおきhtmlは上から一気にパースされます。htmlの描画を考えると後者の方が効率が良いですよね。

また、現在のweb標準である html5 はhtml(セマンティクス, 意味論)とCSS(ボックスモデル, スタイリング)を分離させるというのが基本理念です。それ故に旧htmlの <center> <marquee> など見た目を操作するためだけのhtml要素が 廃止 されています。

クラス名を付けるデメリット

理念上のデメリットというのは無いんですが、実際にブログやサイトを運営する際にデメリットとなり得る特徴として。

テンプレート変更時にCSS内容の移植が必須

ここから実務レベルの話になります。ブログテンプレートというのはいくら気に入っていてもいずれ飽きるものです。テンプレートを変更した際にサンプルとして利用したセレクタ .xxx のCSSを移植し忘れると以下のようになります。

html内容

<p class="xxx">あいうえおかきくけこ</p>
<p>さしすせそたちつてと</p>
<p class="xxx">なにぬねのはひふへほ</p>

実際の描画

あいうえおかきくけこ

さしすせそたちつてと

なにぬねのはひふへほ

クラス名 xxx は書かれていますがCSS内容がありませんので「赤字」「太字」「センタリング」のスタイルが失われています。クラス名(クラス属性)が無意味化、スタイリングが無効化されてしまった例です。

独自クラスの「独自」の意味

「独自」ってどういう意味なのさ (´・ω・`)
テンプレートの作者はよくこの「独自クラス」という表現を用います。意味は このクラス名とこのクラス名に付帯するスタイリングが無ければ機能しませんよ ひいては このテンプレートで「だけ」使えますよ という意味です。

クラス名というのはhtmlコーダー(あるいはCSSデザイナー)が 任意で付ける名称 で、つまり創作名称なんですね。乱暴に言えばコードを書く人が勝手に付ける名前です。勝手に付けるのですから他者が製作するテンプレートでの「名称・目的と用途」が合致することの方が稀。そういう意味の「独自」です。

Yahoo!からの移転で記事レイアウトが崩れている件

デメリットをお伝えしました。で、今Yahoo!ブロガーさんが記事の移設をしていて画像なんかのレイアウトが大きく崩れているんですが、推測するにそれはもともと float を利用して並べていたものではないかと思います。ちょっと私やってみたんですが、Yahoo!のエディターにこういうのありますよね ↓

「中央」「挿入」「左寄せ」「右寄せ」の項目。これが何をやるためかというと、float用独自クラスの付与 です。画像のimg要素に直接付くのではなく、span要素で囲ってそのspanに対して alignLeft というクラス名が付き、スタイルシートの方に

.alignLeft {
  float: left;
}

と、こうしてスタイルが定義されています(実際のCSSはもう少し複雑です)
ところがFC2ブログに内容を複製する際、画像などはアップロードし直しになり、その際にクラス名が失われてしまいます。そして当然ですが .alignLeft は独自クラスですからどのテンプレートを選んだところで同じスタイル定義があるはずもなく。

仮にクラス名が残っていればFC2ブログのテンプレートにCSSを当てれば良いだけなのでセーフですが、引っ越し時にクラス名自体が消えてしまいますので対処不可なんですね。残念ですが。対象要素の特定ができないとどうにもなりません。

画像やテキストの位置がバラバラになっているのは「改行のせい」とかまことしやかに書かれている記事もいくつか拝見しましたが、そうではなくて「独自クラスのCSSが消失したせい」です。

どうすれば良いか

とりあえずYahoo!お引越し組さんのfloat崩れは修正困難なので諦めてくださーい (´・ω・`) ←←
とはいえ今後の方針は決めておかれると良いですね。

私のテンプレートでも独自クラスは入っています。例えば「画像にドロップシャドウを付ける」だとか「見出しを装飾する」といったもの。これらは仮にスタイルが失われてもどうということはないというか。まぁ割り切れる類の装飾だと思います。ですがfloatはCSSが失われると見た目がトンデモなことになってしまう場合が多いため、ユーザーさんから「floatの独自クラスを入れて欲しい」というご要望が届いてはいますが、やらないのはこういった理由です。

Yahoo!のようにエディターでできると簡単便利なんですけどもね。他サービスにお引越しをした時に泣きを見るのも実はこの「簡単さ」のせいだったりします。Yahoo!のwiki文法もそうですし、他サービスに於ける「マークダウン」なんかも同じことが言えるでしょう。

スタイルが失われると困るものはインラインCSSで書く 方が良いかもしれませんね。htmlが冗長ですしアレコレとデメリットも生じますが、少なくともインラインCSSで書いておけばテンプレートを変更してもスタイルが無くなることは無いですし、ブログの引っ越しでもインラインCSSが消されることはまず無いと思います。

Yahoo!ブログは記事内でエディターにあるもの以外のhtmlを使おうと思えばhtmlファイルを作成してローカルからコピーするしか方法が無かったのではないかと思います。そして今もうCSSはレベル4から5へという時代ですがYahoo!で使えるのはCSS2まで(ユーザーの場合はです, 運営はレベル3も使ってます)

まとめ

本当は「崩れてしまったfloatレイアウトを修正する手順」をYahoo!ブロガーさんにお伝えできれば良かったのですが。クラス名自体が消されてしまっては手が出せませんね (∵`)

最近Yahoo!関連記事ばかりでFC2ブロガーさんへは申し訳ないです。ただfloatについてはどこのブログでも同じです。仮に独自クラスを使うのならば今実際困っているYahoo!ブロガーさんの例を知っておくのと、テンプレート変更などに左右されないよう自身でしっかり管理することです。

floatのソースコードは以下のページを参照のこと。

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

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

 2

There are no comments yet.
そふぃあ
じみ~に直しています(笑)

こんにちは。いつも勉強になります。
私もYahoo!から引っ越し組ですが、過去記事にリンク貼ろうと思って崩れているのを見つけると、その都度地味に手直ししています。
画像を貼り直せば良いものはまだマシで、途中からYahoo!さん、写真表示が文字ばかりになっている時代もあって、手直ししようとするとかなり面倒です。(;^ω^)

だけど、Akiraさんがコツコツと何か月も掛かって作成テンプレートの手直ししているのを拝見していたので、自分のものだからがんばろう!って思えたんですよ。いつもありがとうございます。

2019/03/11 (Mon) 16:28
vanillaice (Akira)
Akira
To そふぃあさん

そふぃあさん、こんばんは ('0')/

そうなんです。やらなきゃしょうがないんですよっ(笑)
ただこれらはYahoo!のせいだとかFC2のだとかではなく、使っている間は便利だったでしょうし、別サービスなのだからシステムが違って当たり前なんですよね。

原因や理由がわかれば対策ができるかもしれませんので、何故why?を知ることは結構大事じゃないかと思います。めんどくさいけど(笑)

2019/03/11 (Mon) 21:23

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

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

カスタマイズ