どんな時にスタイルシートを使い、どんな時にインラインCSS(style属性)を使うのか

便宜上のカテゴライズは以下の通り。

• 初級 --- 新投稿画面(デフォルト)利用, 旧投稿画面でもツールバーが無ければ作業できない
• 中級 --- 旧投稿画面利用, 指南さえあればhtmlを手打ちできる, リアルタイムプレビューが必要
• 上級 --- 旧投稿画面または新投稿画面(HTML)利用, 手引無しでhtmlを手打ちできる, リアルタイムプレビュー不要

スタイル適用の仕方は大きく分けて2種類

• スタイルシート(1つのファイル)としてまとめる
• 各要素のhtml要素内style属性に記す(インラインCSS)

スタイルシートの利用

FC2ブログの場合は ブログひとつにつきひとつのスタイルシート が提供されます。ページ種単位で分けるようにはできていません。基本的には。

基本的というのは以下のような形がデフォルトですよね。

下の段が「スタイルシート」で、ここに書いた内容は一つのCSSファイル(拡張子 .css)としてまとめられます。そのファイルが「スタイルシート」ですね。

一つのテンプレートにつき一つのhtmlと一つのスタイルシートがワンセットで、スタイルシート内部ではページ単位の切り分けはできない(FC2独自エリア変数の利用不可)、という形です。

ただこれは ファイル です。FC2はご存知の通り、様々な拡張子のファイルをアップロードできるのですから、当然cssファイルの作成も可能。例えば 個別記事でしか利用しないCSSをまとめたファイル を作成し、個別記事でのみデータの取得をさせる、という方法もあります。それはhtml側での操作(外部CSSファイルの読み込み, html内ではエリア変数が有効です)になり、あくまでも「テンプレートの内容」としてセット管理できるのは 1htmlファイル + 1CSSファイル ということです。

ことのついでにYahoo!ブログからお引越しされた方による「画像のアップロードが面倒、直接記事内に貼り付けて欲しい」という声が非常に多い。Yahoo!ではアップロードできるファイルが画像のみに限定されていましたので、「記事内に直接貼り付け」で事が足りていたんですが、FC2では ファイルは画像とは限らない わけですから、直接記事に貼るなんてことはできないんですね。今話題にしているcssファイルもしかり。記事に貼り付けるという用途で用いるものではありません。ここをご理解頂けると良いのだけれど。

話を戻しまして、テンプレート編集画面の下段にCSSを書き込む、あるいはCSSファイルを作成する、これは htmlとCSSを完全に分離させる 方法で、推奨はこちらの方法 です。html5の目的は「構造とスタイルの分離」ですから、分けるのが最も良い形とされています。

html --- 記事編集画面に記載

<div class="test">
  あいうえお かきくけこ
</div>

CSS --- スタイルシートに記載

.test {
  padding: 1em;
  background: red;
  color: white;
}

スタイルシートは…
・htmlとCSSが完全分離
・ひとつのファイルでまとめて管理

インラインCSS

スタイルシートの利用はhtmlと完全分離ですから、htmlをCSSを別の場所で処理する必要が生じます。htmlは「記事編集画面」での作業ですし、CSSはテンプレート編集ページの「スタイルシート編集」での作業ですよね。

一方インラインCSSとは htmlとCSSが一体化させる という方法。全く逆のアプローチです。

インラインCSS(html要素のstyle属性にCSSを書く)

<div style=" padding: 1em; background: red; color: white;">
  あいうえお かきくけこ
</div>

この方法ではhtml要素に対しCSSをダイレクトに指定していますので、同じ場所での作業、つまり記事編集画面内で全てが完結します。

ただし こちらは非推奨の方法 です。コンピュータにとって最も大事なのは見た目ではなく構造や意味付けなので、htmlはそれに徹してくれ、ということですね。またそれだけではなく 描画のスピード にも関わってきます(後述)

インラインCSSは…
・htmlと一体
・使用は独立している(htmlを書く都度記述)

とまぁここまでがザッとの説明です。自分が記事を書く時に「どっち使ったらええねん？」ってことですよね。問題は。

それぞれのメリット・デメリット

htmlのメンテナンス性

例えば以下の内容を作成するとして。

スタイルシート併用(CSSはスタイルシートに別途記述)

<div class="box1"></div><div class="box2"></div><div class="box3"></div>

インラインCSS

<div style="display: inline-block; width: calc(100% / 3); height: 40px; background: red;"></div><div style="display: inline-block; width: calc(100% / 3); height: 40px; background: yellow;"></div><div style="display: inline-block; width: calc(100% / 3); height: 40px; background: blue;"></div>

記事編集画面内で目にするhtml です。スタイルシートを利用する場合は別途記す必要がありますがここでは省略。あくまでも「記事編集画面がどうなっているか」です。

スタイルシートを使う場合は各html要素に クラス属性(あるいはid属性)さえ付いていればスタイリング対象要素の特定が可能です。

一方インラインCSSの場合は各要素にその都度スタイルを充てる必要がありますので非常に長ったらしいコードになり見た目が複雑化します。

また、旧投稿画面の「改行の扱い『HTMLのみ』」に設定した場合はコード間の改行をして入れ子の様子を視覚化したりインデントを使うことも可能になりますが、上記サンプルコードのように display: inline-block を利用する場合は横に繋げて書かなければいけません(inline-block独自の挙動で描画後の要素間に隙間ができるため)
となれば見た目にかなりわかりづらくなってしまいますね。

蛇足とは思いますが念の為、旧投稿画面でも「改行の扱い『自動』」に設定している場合はソース間改行及びインデント不可です。

記事内でhtmlを使う方は「改行の扱い」指定に注意が必要

これまでも何度か注意喚起をしております。FC2ブログエディターと改行の関係 についてです。記事内でエディターツールで利用できるもの「以外」のhtmlを「使うことがある」という方はこの点が非常に重大な意味を持ちますので是非お読みください。...

vanillaice000.blog.fc2.com

優先度

通常は「優先度」という表現を用いますが、ピンと来ないかもしれませんので「強制力の強さ」だと考えてください。

style属性のインラインCSSというのは非常に優先度が高い指定の仕方です。例えば

<p class="xxx" style="color: black;">あいうえお</p>

インラインCSSで文字色が black に指定されています。その一方で仮にスタイルシート内に

.xxx {
  color: red;
}

こうして red の文字色が指定されていた場合。指定内容の重複になりますが、CSSは場合によって重複や上書きが発生するケースは少なくありません。この場合「あいうえお」は優先度の高い黒で表示されます。

優先度が高いということはよく考えて使う必要があるということ です。強制力が強いのですから打ち消すのに苦労する場合があるよ、ということです。

CSSのメンテナンス性

例えばこれまで白背景に青い字で記していたテキストがあるとします。背景はテンプレートの背景だと思ってください。

ところが気分が変わって背景を黒に変更したとします。

めちゃくちゃ見づらい (´・ω・｀)
もしこの「青字」の指定がスタイルシートで操作していたものならば、

.xxx {
  color: 新しいカラーコード;
}

こうしてカラーコードを変更すれば同じクラス名を持つ要素の文字色はブログの総ページ数が百であろうと5千であろうと一括で修正が完了します。が、インラインCSSの場合はそうはいかない。

【このパターンはセーフ】

<div class="xxx" style="background: black; color: blue; padding: .5em;">あいうえお かきくけこ</div>

インラインCSSですが幸いにも class属性 が付いています。この場合はスタイルシート側に

.xxx {
  color: 新しいカラーコード !important;
}

前章で述べたようにインラインCSSの優先度は非常に高いため、こうして !important による最優先指定を行わなければ変更できません。上書き可能とはいえ強い指定をさらに強い指定で書き換える、というなんともすっきりしないやり方になります。

!important指定の多用は総合的なコントロールが効かなくなる可能性が出てきますので、なるべく避けたいところです。

【このパターンはアウト】

<div style="background: black; color: blue; padding: .5em;">あいうえお かきくけこ</div>

クラス属性 (またはid属性) がありませんので 対象要素の特定ができません。classやidというのはスタイリング指定とその対象との結びつけに用いますので、これが無ければ対象特定ができません。

このパターンにハマった場合は一括修正はできませんので、全て手作業で書き換えるかあるいはJSを利用してカラーコードを強制的に変更するか、という悪手に頼るしかなくなります。

新・旧エディターのツールバーを利用した装飾はインラインCSSであり、class属性も付きません。
エディターでの装飾は簡単なんですが、実は迂闊に使うと後で自分の首をしめることに繋がることも。インラインCSSを使う時は「その場で処理、その場で完結」のつもりで行うわけですから、大抵の場合class属性を「つけない」ことの方が多いです。スタイルシートを使わないつもりでやってるんだから当たり前。

あとついでに「青系」「黄系」のテキストは背景色反転で視認性が著しく落ちる代表色です。青や黄を採用するときはよく考えてから。背景色を変えることなど無い、と思っていても先のことはわかりません。「絶対変えない！」なんてブログ背景色程度で自分に枷をはめる必要も無いですしね。

テンプレートレベルのメンテナンス性

スタイルシートに追加した内容はテンプレート変更時に移植しないとスタイルが失われます。あとで個人的な推奨・非推奨はまとめますが、スタイルシートでのスタイリングよりもインラインCSSを勧めたいものの一つに float (フロート) があります。

Yahoo!から移転された方で「画像とテキストの並びがぐちゃぐちゃになった…」という方が多いんですが、これはfloatのスタイリングが失われたことが原因であり、理由は「float指定に用いていたclass属性及びCSSが失われたから」です。つまりYahoo!のスタイルシート管理でfloatを行っており、お引越しの際にはYahoo!スタイルシートは移設対象ではありませんのでスタイルが消失した、ということです。インラインCSSであれば活きていたはず。いずれにしても(インラインCSSも)Yahoo!のエディターを鑑みるに無理だったとは思います。

この「CSSの移植作業」が結構面倒なんですよねぇ (´・ω・｀)
コピペを繰り返しているうちに記号が失われてしまったり、ビミョーに異なる内容になってしまったり。なのでスタイル消失しては困るようなものは思い切ってインラインCSS、というのもアリかな、と思います。

あとfloatのインラインCSS個人的に勧める理由はもうひとつあって、floatというのは 見た目の調整 に他ならないんですよね。それ以外の目的というのは無いわけです。その見た目をやりくりしているのに リアルタイムプレビューに反映されないのは辛いだろう と思う(笑)

ここで リアルタイムプレビュー の仕組みについて。リアルタイムプレビューで見ていた記事の見た目とプレビューあるいは実際に投稿した後のページの見た目が異なっている、というパターンに遭遇したことがあると思います。

何故かというと、テンプレートのスタイルシートは記事作成中の画面には適用されていませんので、作成中のリアルタイムプレビューは UAスタイルシート (ユーザーエージェント スタイルシート) に倣っています。つまり ブラウザのデフォルトの見た目 を投影しています。

独自クラス などはテンプレートに付加されている内容ですから、テンプレートスタイルシートを読み込まなければ反映されません。

その点インラインCSSというのは「その場でスタイルを処理する」という方法ですから、記事作成中リアルタイムプレビューで見た目の確認をしながら作業ができる、ということですね。

floatなどは画像と組み合わせることが多いので、画像の大きさやテキストとの余白など微調整が発生する可能性が高いですよね。その場合にはすぐに目視確認ができるようにインラインCSSを選択するのもアリだと思います。

描画速度

上記はページが描画されるまでに必要な作業工程図ですけれども、各作業の「所要時間」や工程の「(DOM, CSSOMの)正確な処理順序」は示していません。時間や順序を説明するのはまた別の機会・別の説明になります。で、今回重要なのは htmlとCSSが分業になっている 点ですね。

分業でそれぞれ一気に仕上げる方が効率が良いわけなんですが、インラインCSSというのはhtmlの中に含まれているCSSですからhtmlの解釈中にCSSを処理する必要が生じ、結果「作業効率」面で劣ります。スピードに大きく影響するかどうかはなんとも言えませんが、例えばテンプレートのスタイルシート内容を全てインラインCSSにすれば目に見えて差が生じるはず。つまり 遅くなる。

ここで言うインラインCSSは style要素のことではありません。style属性とstyle要素は全く違いますので念の為。

ブラウザの効率面でよろしくない点、そしてhtml5では構造とスタイルの分離を謳っていますので、その点でもよろしくない。というわけでインラインCSSは非推奨です。ただ使いどころによっては非常に有効なのは事実なので、適所で利用すれば良いと思います。その適所の見極めの話を今しているわけだけど。

インラインCSSの有効な使い方

もう既に表の中に書いてあるんですが、基本はスタイルシートの活用 だとして。

コードが複雑になりすぎない場合

例えばテキストの一部を色変更する場合など

ここは黒いテキスト<span style="color: red;">赤色のテキスト</span>ここは黒いテキスト

これならそう複雑とは言えませんのでササっとその場で処理した方が話が早い。ただしテキストの色変更は後々のことをよく考えて行うが吉。インラインで指定してしまうと変更が容易ではありませんよ、というのも既に述べました。

頻出でないスタイル

例えば記事で「見出し」を毎回使っている、という場合これは頻出と言って良い内容ですから独自クラス化しておけば作業が迅速です。要は使い回さない内容・その場限りの内容はインラインCSSにしておいた方が良いかもしれませんね。スタイルシートは事前に説明したように「全ページ共通」ですから全く無関係なページ種でも読み込まれます。過去にたった一度しか使っていないCSSも毎回読み込まれるわけです。

微調整が必要なスタイル

先に述べた「float」などですね。これは各個人の感覚にもよります。リアルタイムプレビューが無くても調整できるという方ももちろんいらしゃるはず。

スタイルシートの指定に逆らいたい

テンプレートに既にスタイリングが含まれており、それを破棄したい場合はインラインが有効です。なにせ優先度が高い。頻繁に逆らうのなら素直にスタイルシートの方を変更してください(笑)

例えばこういう使い方も有効です。

独自クラスで整形していますが左寄せですね。普段はこれで良いとしてたまにこれを中央にしたい場合など、いつもの内容にstyle属性で margin: auto を追加・明示。

全部スタイルシート、全部インラインCSS、と二極化させる必要はありませんので、その都度柔軟な対応をすればヨシ。不確定要因だけはスタイルシートに記さない、という方法も良いかもしれませんね。位置揃えや上下のmarginなどが対象になりそうです。
* サンプルの動画はレスポンシブなのでスマートフォン閲覧時には全く同じ見た目です。目視確認はパソコンで行ってください。すみません。

インラインCSS利用時の注意

テキストの色指定は気をつけないといけませんよ、と繰り返し書いているのですが、背景色を同時に指定できる場合 がありますよね。この場合はテンプレートの背景色に左右されることがありませんので有効。

このパターンで多いミスは 背景色だけ指定して文字色指定を怠る ことです。テンプレート背景が「白」の時は自動でその反対色(黒系)でテキスト表示されますが、テンプレート背景が「黒」に変更された場合はテキスト色は同じくその反対色、今度は「白系」で表示され読めなくなります。背景色をつけたら同時に文字色の指定を忘れない。特にインラインCSSで背景色を指定していると即ちクラス属性なしがほぼ確定しますので、対象ページを開いて文字色追加、というなんとも痛い結果に。

クラス名をつけることの重要性

記事内でhtmlをよく利用する、という方は、その要素にクラス名を書く というのを癖づけされた方が良いと思います。 つまり本記事内容は クラス名付与のススメ ( ﾟДﾟ)ﾉ...

vanillaice000.blog.fc2.com

インラインCSSで処理するにしても、内容が込み入っていたり、スタイル変更の可能性がありそうなものへはクラス属性をつけておくと良いと思います。インラインCSSはスタイルシートを使わないことを前提にしていますのでそういう意味で難しいかもしれませんが、やっておけば後でなんとかなる… かもしれない(笑)

まとめ

「どちらか一方を選ぶ！」なんて極端になる必要はありません。その都度選択すれば良い話。その選択をする際にはそれぞれの特徴や注意点を踏まえておくことが大切です。

* 本記事は予約投稿です。