
現在のHTMLの仕様にお詳しい方アドバイスを頂けないでしょうか?
タイトルの通りなのですが、HTMLのbody内に<style>~</style>を定義し、そこにstyleの内容を定義していくことは、現在のHTMLの仕様としてありでしょうか?
実際に試してみると、問題無く動作するのを確認しています。
出来れば、CSSの設置してある外部ファイルに記述するのがお作法的には正しいと思うのですが、サイトの構成がパーツごとにincludeされていたり、ほんの少しの、または一時的にCSSを定義する際に、大元のSCSSから書き直して、コンパイルしてCSSに設定して、また戻して…。
とやっていると作業に時間がかなりかかってしまいます。
なので、特定のincludeされているHTML部分に、ちょこっと<style>~</style>を記述しています。
大変便利な方法なのですが、何か問題はありますでしょうか?
HTML5は終わったと伺っています、これからはWHATWGが仕様を管理されると思うのですが、WHATWG的には、このような方法はどうなのでしょうか?
調べてみるのですが、明確な回答が見つけれず…。
この辺りお詳しい方いらっしゃいましたら、ご助言を頂けますと幸いです。
なお、その方法はNGとなる場合、何か簡易的に行える良き代替案は御座いますでしょうか?
宜しくお願いいたします。
No.2ベストアンサー
- 回答日時:
こんばんは
基本的に head 内の記述が原則です。
>調べてみるのですが、明確な回答が見つけれず…。
◇ 5 October 2023 時点の仕様書
https://html.spec.whatwg.org/#the-style-element
◇ 11 September 2023 版の日本語訳
https://momdo.github.io/html/semantics.html#the- …
とは言え、解釈してくれるブラウザも多いと思います。
>何か簡易的に行える良き代替案~~
要素の style 属性に記述する。
有難うございます。
その後、色々と調べた結果、HTML5の段階で一時body内でのstyleを許可されていた時期があるみたいで、その影響かもですが、現在のブラウザでほぼ動作の確認ができますね…。良くない使い方かもですが。
代替案に頂いた、
>>要素の style 属性に記述する。
こちらは逆にHTMLとCSSの分離の観点からどうなのでしょう?
今、javascriptからのしてもありなのかな?などど考えながら調べております。
貴重な情報有難うございます。
No.3
- 回答日時:
私の認識不足でした。
HTML 5.2以降で、body内でstyleの使用が可能になっていました。その後、HTML5は廃止され、WHATWGのHTML Living Standardでは、body内でstyleの使用は認められていません。
「W3CのHTML 5.2」が作成される前に「WHATWGのHTML」が誕生して、別々に発展した結果のようです。
時系列は下記サイトが参考になります。
・どうしてHTML5が廃止されたのか
https://future-architect.github.io/articles/2021 …
HTML 5.2
W3C Recommendation, 14 December 2017
https://www.w3.org/TR/2017/REC-html52-20171214/d …
>Contexts in which this element can be used:
>In the body, where flow content is expected.
https://www.w3.org/TR/2017/REC-html52-20171214/c …
>The following constructions are now valid HTML:
>style within the body.
現在の仕様(WHATWGのHTML Living Standard)で認められていない以上、現在のブラウザで動作可能でも、いつ動作しなくなるかわかりません。
簡単な記述であれば、他の方が回答されたように「要素の style 属性に記述する」で良いと思います。
JavaScriptを使ってhead内に追加するなら下記の記述で出来ます。
document.head.insertAdjacentHTML('beforeend', '<style> ... </style>');
document.head.insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="style.css">');
No.1
- 回答日時:
>HTMLのbody内に<style>~</style>を定義し、そこにstyleの内容を定義していくことは、現在のHTMLの仕様としてありでしょうか?
「なし」です。過去と現在で、body内でstyleの使用は仕様にありません。仮に動作しても、他のブラウザで動作する保証はありません。
styleを使用できるのはhead内です。それなら、すべてのブラウザで動作します。
・ブラウザーの互換性
https://developer.mozilla.org/ja/docs/Web/HTML/E …
有難うございます。
やはり基本はhead内での定義ですよね…。
一旦HTML5の仕様でbody内でのstyle OKになったみたいなので、踏襲されている感じはあります…。相当マニアックなブラウザ以外は動作しますが…。
scriptはどこに書いても行けそうなので、javascriptで書いた方が良いのかもしれないですね。。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript チェックボックスのオン⇔オフに応じて並列の画像の濃さを動的に変化させたい 1 2021/10/31 22:05
- PHP 日付と年月日を選択するコードを書いているのですが、セレクトボックスの中に、「曜日」を表示させたいので 3 2021/12/10 09:20
- JavaScript スクリプト 11 2021/11/10 13:45
- ホームページ作成・プログラミング Nuxtのサイトで、microCMSに入れた画像がレスポンシブにならない 1 2021/12/25 11:13
- HTML・CSS HP作成 作成した画像を動画の上に配置したです。付属画像のような感じにしたいのですが、スマホのフチの 2 2022/02/02 12:22
- HTML・CSS マウスオーバーで画像に効果を入れるCSSの改良 1 2021/10/19 18:43
- JavaScript 付属の写真のようにエラーが出るようにしたいです。 提示したコードだけでは、エラーメッセージ文字が上の 1 2021/11/23 08:27
- JavaScript javascriptとPHPで入力フォームのコードを書いているのですが、 流れとしては、①入力フォー 2 2021/12/02 09:18
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTMLのbody内に<style>~</styl...
-
パワーポイント:テキストボッ...
-
リンク先のURLを別の文字にする...
-
Google Keepで数字に勝手に下線...
-
Excel で下線が消えてしまうの...
-
Word で下線の色の変え方
-
アンダーラインを引くやり方
-
URLが青くならない
-
<FONT TITLE=××>...
-
年度の切り替え方法について@...
-
アンダースコア(下線)のあるメ...
-
強制的に、リンクを飛ばすタグ...
-
ユーザーフォームの表示を追加...
-
ブログの画像の大きさとリンク...
-
【excelの下線(会計)とは】
-
ブログのスキンについてお願い...
-
gooメールでURLリンクを設定す...
-
Excelヘッダーの書式
-
ウェブサイトのアクセスカウン...
-
AUTOCAD文字の下に同じ長さの線...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTMLのbody内に<style>~</styl...
-
iframe
-
<input>タグについて
-
headの部分に書いたCSSがWebペ...
-
テキストブラウザ・『LYNX』の...
-
参照ボタンの名前を変えたい
-
ボタン クリック時にページ ポ...
-
枠線を消したい
-
プログラムの関連性を教えて下...
-
文章をCSSで左揃えにする方法
-
border-style デコらないボコら...
-
バナーを横に並べたい
-
Textareaの幅をブラウザ画面の90%
-
LaTeXにて、1行で左寄せや中央...
-
CSSでインラインフレームを非表...
-
リンクを設定した文字の上にマ...
-
単語の右寄せ配置で1行下がる
-
htmlで、文字に線を囲むには何...
-
Excel で下線が消えてしまうの...
-
リンク先のURLを別の文字にする...
おすすめ情報