Q&A
質問一
添付画像は、Google Chromeのブラウザの右クリックメニューの「検証」をクリックして表示したHTML要素のDOMツリーの内容の<head>部分及び<body>部分の▼をクリックして展開したものですが、2行目（<DOCUTYPE html>の記述の下)の<html class="no-js seed-csp4" lang="en">をみると、プログラミング知識のない方がその記述部分だけを見れば、「ブラウザのJavaScriptが無効の時だけseed-cspを表示するならば、ブラウザのJavaScriptが有効ならば、seed-csp4を表示しないのだろう」と考える方がいると思うのです。
この場合、プログラミング知識のない方に『ブラウザ側の JavaScript の有効/無効に関係なく「メンテナンス中」の画面（seed-csp4）が表示される』ことを理解していただくには、添付画像のDOMツリーの内容のどの部分（以下のA,B,C）を指し示して理解していただけばよいのでしょうか？
あるいは、以下に記した「D:ソースコードの<head>の中の </style>部分」の中の.seed-csp4 h1, .seed-csp4 h2, .seed-csp4 h3, .seed-csp4 h4, .seed-csp4 h5, .seed-csp4 h6を説明し、それらの記述が「<!-- Coming Soon Page and Maintenance Mode by SeedProd」であることを理解していただくしか方法が無いのでしょうか？
質問二
最下部に記した「Modernizrでno-jsを削除」に関する各サイトにかかる一、二、三、四のリンク先のページで説明することによって、2行目の（<DOCUTYPE html>の記述の下)の<html class="no-js seed-csp4" lang="en">の内容が、「ブラウザのJavaScriptが有効、無効にかかわらず、seed-cspのcoming-soon pageを表示する」ことを理解していただけるでしょうか？
A:添付画像のDOMツリーの内容の下から5～6行目
<!-- Coming Soon Page and Maintenance Mode by SeedProd. Learn more: http://www.seedprod.com -->B:添付画像のDOMツリーの内容の７行目から１１行目
<!-- Bootstrap and default Style --> <link rel="stylesheet" href="http://monopowers.com/profile/wordpress/wp-content/plugins/coming-soon/themes/default/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="http://monopowers.com/profile/wordpress/wp-content/plugins/coming-soon/themes/default/style.css">C:添付画像のDOMツリーの内容の13行目から２２行目
<!-- JS --> <script src="http://monopowers.com/profile/wordpress/wp-includes/js/jquery/jquery.js"></script> <script src="http://monopowers.com/profile/wordpress/wp-content/plugins/coming-soon/themes/default/bootstrap/js/bootstrap.js"></script> <script src="http://monopowers.com/profile/wordpress/wp-content/plugins/coming-soon/themes/default/js/script.js"></script> <!-- Modernizr --> <script src="http://monopowers.com/profile/wordpress/wp-content/plugins/coming-soon/themes/default/js/modernizr.min.js"></script>D:ソースコードの<head>の中の </style>部分
<head> <meta charset="utf-8"> <title>Nothing found for Wp Archives 166493</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap and default Style --> <link rel="stylesheet" href="http://monopowers.com/profile/wordpress/wp-content/plugins/coming-soon/themes/default/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="http://monopowers.com/profile/wordpress/wp-content/plugins/coming-soon/themes/default/style.css"> <style type="text/css"> /* calculated styles */ /* Background Style */ html{ height:100%; background: #fafafa; } .seed-csp4 body{ height:100%; background: transparent; } /* Text Styles */ .seed-csp4 body{ font-family: Helvetica, Arial, sans-serif } .seed-csp4 h1, .seed-csp4 h2, .seed-csp4 h3, .seed-csp4 h4, .seed-csp4 h5, .seed-csp4 h6{ font-family: Helvetica, Arial, sans-serif } .seed-csp4 body{ color:#666666; } .seed-csp4 h1, .seed-csp4 h2, .seed-csp4 h3, .seed-csp4 h4, .seed-csp4 h5, .seed-csp4 h6{ color:#444444; } .seed-csp4 a, .seed-csp4 a:visited, .seed-csp4 a:hover, .seed-csp4 a:active{ color:#27AE60; } </style>「Modernizrでno-jsを削除」に関する各サイト
一、「第68回 Modernizr.jsでCSS3やHTML5を条件分岐」http://coding-factory.com/cm/cm68.html
二、「Modernizr（モダナイザー）とは」https://qiita.com/puripuri_corgi/items/912c4a8171866fe6089d
三、「JavaScriptを使用せずにJS無効時用のCSSを適用」（https://iwb.jp/javascript-noscript-css/）
四、「スクリプトが無効の場合のスタイル」（https://terkel.jp/archives/2012/07/styles-for-noscript/）
●10月2日 追記致します。宜しくお願い致します。
「Custom Build」バージョンの Modernizr については "no-js" の置き換えは行われない事を解説していただき、ありがとうございます。
長い間引っかかっていた事を解明していただき、感謝の気持ちで一杯です。
以下のA～Cの疑問があるのですが、何卒宜しくお願い致します。
質問A
<html class="no-js seed-csp4" lang="en">の記述の中の「seed-csp4」はあくまでCSSの表示のスタイルを表すクラス名であり、極端な話、どの様なクラス名でも任意で付けることが可能だから、<html class="no-js seed-csp4" lang="en">の記述のみをもって、「メンテナンス中」の画面（ワードプレスのメンテナンスモード）が表示されていることを説明することは出来ないとの解釈で正解でしょうか？質問B
もし、質問Aの解釈が正解なら、このウェブページがワードプレスのメンテナンスモードを使用している事を簡潔に説明するのに、以下の①（質問文の中の「D:ソースコードの<head>の中の </style>部分」の/* Background Style /の下の記述）及び②(h1 id 及びdiv id)を使って説明するしかないと思いますが、この考えは正解でしょうか？（厳密に説明するならば、/ Text Styles */の下のフォントの種類やh1～h6の見出しタグも説明する必要がありますが、簡潔に説明する為にそれらの説明を省き、①の説明には「bodyのheightを100％にしても広がらない」
【https://at.sachi-web.com/blog-entry-1369.html】を使用）
①
/* Background Style */
html{
height:100%;
background: #fafafa;
}
.seed-csp4 body{
height:100%;
background: transparent;
}
②
<div id="seed-csp4-content"> <h1 id="seed-csp4-headline">メンテナンス中</h1> <div id="seed-csp4-description"><p>長期メンテナンス中です</p> </div>質問C
質問Bの様に、上記の①及び②を使って説明するとすれば、「background: transparent」 が、以下の例の様に「HTML」のtransparent指定や、「CSS」のbackground-color: transparent;の様に指定されていないので、質問文の中の「D:ソースコードの<head>の中の </style>部分」の中の「background: transparent」の記述が無意味になっていると思いますが、如何でしょうか？
ソースコード中の「background: transparent」の記述には何の意味があるのでしょうか？
例：
「HTML」
<p class="tp">テキスト（transparent指定）</p>「CSS」
tr1 p.tp{
background-color: transparent;
}
回答1件
0
ベストアンサー
html class="no-jsの意味 Modernizr
Modernizr について改めて確認してみました。
Modernizr の使われ方の１つとして、JavaScript の有効/無効で "no-js" の部分を書き換える、という機能があるですが、
今回話題になっている 503 ページで使われていた、Modernizr については「Custom Build」というバージョンで、上記の機能は含まれていませんでした。
つまり、JavaScript の有効/無効に関係なく "no-js" のままです。
以下は Custom Build 版の使用例です。
■ modernizr v2.7.1 custom build バージョン
"no-js" ⇒ "js" に書き換わることを想定していたが書き換えが行われていない。
以下は通常版の使用例です。
■ modernizr v2.7.1 通常版（CDNで提供されているバージョン）
"no-js" ⇒ "js" への書き換えが行われている＋クラス名が沢山列挙されている。
少しややこしい話になりますが、
Modernizr は、機能が多い為、以下のように利用したい機能だけを選択して、Custom Build というバージョンを作ることが出来るようです。今回使われているのはこのバージョンになります。
■ modernizr v2.7.1 custom build バージョン
質問一
<html class="no-js seed-csp4" lang="en">の記述だけをうまく説明して、『ブラウザ側の JavaScript の有効/無効に関係なく 「メンテナンス中」の画面（seed-csp4）が表示されることを理解していただきたいとの考えです。）
先ほどの説明の通り、今回の 503 ページで使われている「Custom Build」バージョンの Modernizr については "no-js" の置き換えは行われません。
したがって JavaScript 有効/無効に関係なく クラス名は "no-js seed-csp4" のままです。つまり、同じ CSS（スタイル）が適用されます。
ちなみに、
「メンテナンス中」の画面 ＝「seed-csp4」
という意味ではありません。
「seed-csp4」の部分は「クラス名」と言い CSS と呼ばれる表示のスタイル（文字の大きさや色、位置など）を指定する際の分類名のようなものです。
CSS 自体の説明は、探せば入門記事が多くあるかと思いますのでそちらを参照下さい。
「メンテナンス中」の文字が JavaScript が無効な場合にも出力される理由ですが、
・ブラウザを右クリックで「ページのソースを表示」を選んだ場合は、JavaScript が実行する前の HTML
・ブラウザを右クリックで「検証」を選んだ場合は、JavaScript が実行された後の HTML
が、表示されます。（上記は使用ブラウザが Chrome の場合の説明になります。）
したがって、ブラウザを右クリックで「ページのソースを表示」とした場合に表示される HTML に「メンテナンス中」の文字があることから、
JavaScript が無効な場合でも「メンテナンス中」が表示されることが分かります。
<div id="seed-csp4-content"> <h1 id="seed-csp4-headline">メンテナンス中</h1> <div id="seed-csp4-description"><p>長期メンテナンス中です</p> </div>
なお、ここに出てくる「seed-csp4」は、クラス名ではなくIDになります。
ID は、プログラムなどから特定の部品に対して何かしたい場合に付けられる ID になります。
単に同じ製品（プラグイン関連）で使っている部品であることを示すためにこの名前を使っていると考えられます。
質問二
最下部に記した「Modernizrでno-jsを削除」に関する各サイトにかかる一、二、三、四のリンク先のページで説明することによって、
2行目の（<DOCUTYPE html>の記述の下)の<html class="no-js seed-csp4" lang="en">の内容が、「ブラウザのJavaScriptが有効、無効にかかわらず、
seed-cspのcoming-soon pageを表示する」ことを理解していただけるでしょうか？
質問一の回答でも説明しましたが、今回の 503 ページで使われている「Custom Build」バージョンの Modernizr については "no-js" の置き換えは行われません。
単純に説明するのであれば、
・JavaScript が無効な場合「メンテナンス中」が表示されます。
・JavaScript が有効の場合、クールな「メンテナンス中」画面が表示されます。
ただし、現状、スライドショープラグインの表示画像の設定などが行われていない為、
JavaScript が無効/有効に関わらず、シンプルな「メンテナンス中」の文字だけが表示されています。
投稿2021/09/30 17:50
編集2021/10/01 15:44
総合スコア4648
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/10/01 15:24
2021/10/02 11:10
2021/10/02 12:32
2021/10/02 20:21
2021/10/03 02:05
2021/10/03 12:46
2021/10/03 13:10
2021/10/03 13:35 編集
2021/10/04 16:09