Q&A
クラスを分けた場合はどうでしょう
前提
現在HPを作成しており、noscript対応を行いたく、CSSにてdisplay制御によって表示分けを行おうとしております。
動作の確認中に疑問に思った挙動が認められたため質問させていただきました。
発生している問題
以下「該当ソースコード」をブラウザにて表示すると、H1タグとPタグがinlineとなってしまい横に並んでしまいます。想定としてはH1とPのdisplay：initial；すると、初期化されてblockにある想定でした。
W3C規定ではinlineとなっているのでしょうか（※情報見つけられませんでした。）
もしそうであればブラウザ仕様によりH1のスタイルがオーバーライドされており、display: initial;によってブラウザスタイルが効く前の状態に戻っているということでしょうか。なんにせよ良い対応方法が思いつかないので助力を願いたいです。
なお当該クラスにより、初期block要素やinline要素のdisplayがそれぞれ初期化されることを望んでいますので、例えばnoscript内にてdisplay:block;を指定することは望んでいません。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <style> 8 .test { 9 display: none; 10 } 11 </style> 12 <!-- <noscript> 動作確認中のためコメントアウト--> 13 <style> 14 .test { 15 display: initial; 16 } 17 </style> 18 <!-- </noscript> --> 19</head> 20 21<body> 22 <main> 23 <h1 class="test">testH1</h1> 24 <p class="test">testParagraph</p> 25 </main> 26</body> 27 28</html>
試したこと
一度display:none;することは関係がないようです。
単純にdisplay: initial;にしただけでも発生します。
動作確認環境
MAC OS X
- Google Chrome 78.0.3904.97
- Safari 13.0.3
回答ありがとうございます。
なるほどです。inlineとblockで別クラスにする方法ですね。
欲を言うと使い分ける実装はあまりしたくないのですが、しかたないんですかね。。。SEOのこと考えるとマークアップもあんまり変えたくないですし・・・
回答2件
0
ベストアンサー
初期block要素やinline要素のdisplayがそれぞれ初期化されることを望んでいます
そういう指定は出来ないと思います。
【initial - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/initial
CSS の initial キーワードは、要素にプロパティの初期値 (または既定値) を設定します。初期値をブラウザーのスタイルシートで指定された値と混同しないでください。
【Visual formatting model】
https://drafts.csswg.org/css2/visuren.html#propdef-display
Note that although the initial value of 'display' is 'inline', rules in the user agent's default style sheet may override this value. See the sample style sheet for HTML 4 in the appendix.
投稿2019/11/16 05:08
総合スコア69596
0
解決策:DIVで囲んでDIVごと非表示
とりあえずこれでいきます。もっといい方法があったら教えて下さい。
・ 表示制御対象をDIVブロックで囲み、classを指定。
・ 表示制御対象のDIVにmargin:0;padding:0;を指定し、表示崩れを防止。
・ 表示制御対象のDIVのdisplay:block/noneにて切り替え。
※ DIVタグであればロボットの検知対象外のためSEOにも影響がない。
※ noscript時のレアケーススタイルは通常時の通信量を考慮し外だしするほうが良さげ。
※ ブラウザスタイルが効いているタグはinitialしない。というかinitialは微妙？
所感
そもそもnoscriptってコンテンツ表示する必要ある？実装も大変だしアフィやってる人だと収益も入らないし。
でもやっぱ情報系サイトだと対応したほうがいいのかな・・・
投稿2019/11/16 08:18
総合スコア5
あなたの回答
tips
プレビュー
