html5.2ではstyle要素をbody内に書けるようになりました

webのあれこれ

2018/02/09

2022/10/03 2

vanillaice (Akira)

HTML CSS

意味わからへーん！な方とそうでない方といらっしゃると思いますけれども、結構重要だと思いますので記しておきます。

html5.2が既に正式勧告を済ませてますが、追加要素や廃止要素などに加え
style要素をbody内に書くことがinvalidではなくなりました

* invalid (インヴァリッド) = 無効, 正しくないの意

2018.11.21 追記
以下の記事も併せてお読みください。

記事内での装飾がしやすくなります

先に結論を言うと。
記事内でいろんな装飾してるよ、という方にとってCSSは割りと悩みのタネだったのではないかと思います。

記載場所のルール
style属性では疑似要素が使えない
限定的にしか使わない内容でもスタイルシートに常に置かなければならない点

こんなところでしょうかね。
これらの問題点が一応解決というかなんというか。
ルールの緩和と捉えても良いと思います。
ただし個人的にも大手を振った推奨はできません。理由は後述。

CSSを使う3つの方法

スタイルシート(FC2ブログは「テンプレート編集」画面の下段にあります)
htmlのstyle属性(インラインCSS)
head内へのstyle要素(インラインCSS)

最も推奨される方法は「スタイルシートの利用」ですね。
装飾関係を全てまとめて一つのファイルにすることです。
それが大前提です。よほどのことが無い限りはこの推奨方法を守るが吉。

スタイルシート

たださぁ、スタイルシートってのはテンプレートのhtmlとセットです。
でもテンプレートっていくら気に入ってるっつってもやっぱ変えたくなるじゃん (´・ω・｀)
テンプレートを変更するとhtmlはもちろんのこと、CSSも全て別物になります。
ところが「記事内容」というのは固定ですので、記事内で利用していた例えば見出しの装飾ですとかそういったものまでもがクリアされてしまうんですね。
デザインを継続するには関連CSSを移植するという手間が発生します。

style属性

それがめんどうだなぁと思う場合には style属性を使おうか、って選択肢が出てきますね。こういうの ↓ サンプル

style要素

style要素と style属性は全く別のものですので注意。
属性というのは要素に情報を追加する付属品のようなものです。

<style>
h1 {
  margin: auto;
  font-size: 20rem;
}
</style>

例えば上記のようなもの。styleタグで挟まれた内容はCSSそのまんまです。
これが style要素です。

ここが一番の本題なんですけども、これまでは head内にしか書いてはいけないという決まりだったんですね。
ですが実際にはルール違反も多く見られます。
例えば FC2プラグイン。

FC2ブログプラグインのhtml内容というのはテンプレートhtmlとは別で用意されます。
テンプレートhtmlの中に書いてあるわけではありません。当然CSSもそうです。
プラグインだってCSS整形をしなくてはいけませんよね。ではそのCSS内容はどこに書くの？ってことになるんです。
どこに書いてあるかというと、プラグインのhtml内容のすぐ下(笑)
つまりみなさんがプラグインをダウンロードするとそのhtml内容とセットでCSSがstyle要素でもれなく付いてきます。
最近だと「新着記事サムネイルつき」プラグインもそうですね。html内容の下にはstyle要素が書かれています。

ですからこれまではFC2プラグインのほとんどが invalid つまりバリデーションではエラーだったんですね (´・ω・｀)
「head内にしか書いてはいけないものがbody内に書いてあるじゃないか。ダメ！ルール違反！」
ってことです。

そのルールが無くなりましたよ。というのがhtml5.2の改定です。

ただし推奨ではない

これは動作的にもやはり推奨はされないですね。
これまで何度も触れてますが、CSSはレンダリングブロック要因だからです。

CSSというのは通常html解釈・描画の「前」に解析が行われます。
みなさんhtmlだけのページって見たことありますかね。 CSSが読み込まれていない状態ではこんな風にレンダリングされることになります。
CSSが適用されると… 一旦表示されたものがガチャガチャと並び替わったり色がついたりなどしてまともな状態になる。
ですからやはりCSSは先に読ませなければいけないわけなんです。
言い換えると CSS解釈中はhtmlのレンダリングが行われない。

CSSの内容が大きすぎるとページが遅くなるよ、というのはこの仕組があるからです。
で、headは一番最初に作業されるべき部位です。通常はそこにCSSファイルへのリンクなりstyle要素なりが設置されます。
今回の改定でhead外、つまりheadより後に書けるようになったわけですが、bodyの途中にstyle要素があるということは、htmlレンダリングが行われており、途中でstyle要素が現れた場合には htmlレンダリングを一旦中断してCSS解釈に集中します。
描画が中途半端に止まってしまうというわけです。
こういう理由から非推奨。CSSはやはり最初に読ませて後一気にhtml描画してもらった方が良いですね。ホントはね。

まとめ

とはいえ途中にあるCSSが何千行もあるような長大な内容というならともかく、数十行なら過剰に心配することもない (´・ω・｀)
個人的には常に使うわけではない内容でありめちゃくちゃ長い内容ではない場合にはメンテナンス性も考慮して記事内でも使っていけば良いと思いますYO

というわけで、5.2での改定「style要素をhead外に書いても良い」は割りと重要なんじゃないかしら。
たぶんアレだよね。みんなルール無視してやってるしブラウザの性能も昔よりはるかに優れているのでW3C的には「…なんかもういいや。やっても良いってことにするよ。」という感じなのではないか(笑)

オマケ。8ミリフィルム風ボックスのソース
試しに記事内でやってみてねの意味を込めてCSSはstyle要素にしておきます。
スタイルシートに入れる場合はstyleタグを忘れずに外してください。

<div class="cinema">テキスト内容</div>

<style>
.cinema {
  margin: 30px 0;
  width: 300px;
  max-width: 100%;
  background-color: black;
  border: 1px solid black;
  color: white;
  padding: 26px;
  position: relative;
  z-index: 3;
  text-align: center;
}

.cinema:before {
  content: "";
  display: inline-block;
  background-color: black;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgb(240,240,240)), color-stop(.5, transparent), to(transparent));
  background-image: linear-gradient(to left, rgb(240,240,240) 50%, transparent 50%, transparent);
  background-size: 16px 16px;
  height: 10px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

.cinema:after {
  content: "";
  display: inline-block;
  background-color: black;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgb(240,240,240)), color-stop(.5, transparent), to(transparent));
  background-image: linear-gradient(to left, rgb(240,240,240) 50%, transparent 50%, transparent);
  background-size: 16px 16px;
  height: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
</style>

Comments 2

えるくん

2019/06/14 (Fri) 05:56

No title

参考にさせていただきます。ありがとうございます。訳あって、擬似要素を利用したいのですが、スタイル要素が使えない謎の縛りがあって、諦めがつきました。

Akira

2019/06/14 (Fri) 18:25

To えるくんさん

こんにちは。

事の詳細など不明ですがお役に立てたのであれば幸いです :)

コメントに関する注意事項

テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
FC2共有テンプレート一覧ご質問の前に
専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)

管理者にだけ表示を許可する