HTML CSSのno-jsについて

前へ 次へ
このQ&Aのポイント
  • HTML CSSのno-jsとは、JavaScriptが無効になっている状態を示すクラス名です。通常、class="no-js"はIEのバージョンによって仕様を場合分けするために使われます。
  • class="no-js"は、主に古いバージョンのInternet Explorerをサポートするための対策として使われます。
  • class="no-js"が必ず書かれなければならないわけではありませんが、古いバージョンのIEをサポートする場合には書くことが推奨されています。
回答を見る
  • ベストアンサー

html CSSにおけるno-jsとは何ですか？

wordpressを用いてサイト作成の勉強をしています。 ヘッダー部分に以下のようなコードがありました。 <html <?php language_attributes(); ?> class="no-js"> <?php language_attributes(); ?>　は <html lang="ja">と同じ意味と分かりましたが、 class="no-js"　はどういう意味なのでしょうか？ 検索すると、IEのバージョンによって仕様を場合分けしたい時に <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="ja"><![endif]--> のように使うみたいですが、class="no-js" は絶対に書かないといけないのでしょうか？ よろしくお願いします。

  • PHP
  • 回答数2
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • tracer
  • ベストアンサー率41% (255/621)
回答No.1

>class="no-js"　はどういう意味なのでしょうか？ 名前から見て分かるように、一般的には、「javascriptがない」ときに作動する仕組みをつくる際に用いられますが、どういう目的で使用するかは人それぞれですし、決まりでもなんでもないので必須ではありません。 >class="no-js" は絶対に書かないといけないのでしょうか？ そのページが完全自作なら書く必要はありませんが、自分以外が作ったwordpressのテーマやプラグイン、あるいはjQueryのプラグインを使用する場合は、必要になるケースはあります。

ifonesapp
質問者

お礼

ありがとうございます。 javascriptの有無についての記述だったのですね。 よくわかりました。

その他の回答 (1)

  • tracer
  • ベストアンサー率41% (255/621)
回答No.2

#1です。 説明が足りなかったかもしれないので補足します。 class='no-js'は一般的にこのように使われます。 # CSSの例 .no-js #message{ display: none; } 上記CSSがある場合、no-js #messageは非表示になります。 そこで、javascriptを用いてno-jsというクラスを削除します。 こうすることで、javascriptが有効なときは「表示」し、無効なときは「非表示」の仕組みをつくることができます。もちろん、これはdisplay:noneだけでなく、何にでも応用できます。

ifonesapp
質問者

お礼

ありがとうございます。 実用的な例を示していただいてより深く理解できました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. PHP

関連するQ&A

  • HTML文について

    下記の★印の意味を教えてください。 　 <!DOCTYPE html> ★<!--[if lt IE 7]><html class="no-js ie lt-ie9 lt-ie8 lt-ie7" lang="ja"><![endif]--> ★<!--[if IE 7]><html class="no-js ie lt-ie9 lt-ie8" lang="ja"><![endif]--> ★<!--[if IE 8]><html class="no-js ie lt-ie9" lang="ja"><![endif]--> ★<!--[if gt IE 8]><!--> <html class="no-js" lang="ja"> <!--<![endif]-->

    • ベストアンサー
    • HTML
  • ソースコードについて

    あるサイトのソースを参考に勉強中なのですが <!DOCTYPE html>の下に、 <!--[if lt IE 7]> <html lang="ja" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html lang="ja" class="no-js lt-ie9 lt-ie8 ie7"> <![endif]--> <!--[if IE 8]> <html lang="ja" class="no-js lt-ie9 ie8"> <![endif]--> <!--[if gt IE 8]><!--> <html lang="ja" class="no-js"> <!--<![endif]--> とかかれてまして この意味/効果がわからないので教えてください。 また、このようなソースコードの意味が書かれてるサイトがもしあるなら教えてください。

  • コンディショナルコメントの書き方で理解できない部分

    以下のサイトで http://www.nemuchan.com/css3/ie01.html 以下のようなコンディショナルコメントの書き方がされていました。 ------------------------------------------------ <!--[if lt IE 7]><html class="ie6" lang="ja"><![endif]--> <!--[if IE 7]><html class="ie7" lang="ja"><![endif]--> <!--[if IE 8]><html class="ie8" lang="ja"><![endif]--> <!--[if IE 9]><html class="ie9" lang="ja"><![endif]--> <!--[if (gt IE 9)|!(IE)]> <!--> <html class="" lang="ja"> <!--<![endif]--> ------------------------------------------------ これについて、 6行目の <!--> 8行目の <!--<![endif]--> がなぜそのような形になるのかがどうしても理解できませんでした。 これはなぜこのようになるのでしょうか。 また、「コンディショナルコメントは、IE以外では認識しない」と思うのですが、 !(IE)とわざわざ指定する意味はあるのでしょうか。 色々調べてみたのですが、お手上げ状態です。 ご教授の程よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • html5.jsを使うと、IE8以下で真っ白になる

    html5で作成したもので、ie8以下に対応させるため、 <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> を使用しましたが、ＩＥでの開発モードで、標準、互換モードともに、ie8以下真っ白になってしまいます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <title>～</title> で書いています。 <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> の部分をなくすと、ie8以下では、html5を無視した形で表示されます。 この原因は何でしょうか。エンコードを疑いましたが、どうやらこのjsのようなのですが。

    • ベストアンサー
    • HTML
  • DreamweaverでIE用Java反映されない

    Dreamweaver でWebを作成しているのですが、IE用に作ったJavascriptが反映されません。テンプレートに書き込みブラウザで確認するとOKなのですが、そのテンプレートを使用したほかのページにはうまく反映されません。どうしてでしょうか？ 他の文字情報やDivなどはテンプレートに応じ自動で変更されるのですが、IEに関する部分だけ反映されません。 見よう見まねで作っているところがあるので基本的な知識が足りないので、分かりやすくご説明いただければ本当に助かります。 使用環境　Dreamweaver5.5 <head>の上に <!--[if lt IE 7]><html class="ie ie6" lang="ja"><!endif]--> <!--[if IE 7]><html class="ie ie7" lang="ja"><!endif]--> <!--[if IE 8]><html class="ie ie8" lang="ja"><!endif]--> <!--[if (gte IE 9)|!(IE)]><!--><html lang="ja"><!--<![endif]--> 参考書には、全ての行は　<![endif]-->　で終わるように書いてあるのですが、そうするとなぜかテンプレートを更新できません。 <head>内に <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <script src="js/ie.js"></script> <link rel="stylesheet" href="../css/ie.css" type="text/css"> <![endif]--> ie用のJavascriptには下記を記入 (function($){ $(function() { $(".list-2column li:nth-child(2n)").addClass("child2n"); $(".list-3column li:nth-child(3n)").addClass("child3n"); $(".list-4column li:nth-child(4n)").addClass("child4n"); }); })(jQuery); 是非よろしくお願いいたします。

    • 締切済み
    • CSS
  • <!--[if IE 9 ]>

    <!--[if IE 9 ]> <html class="ie ie9" lang="ja"><![endif]--> と <!--[if (gt IE 9)|!(IE)]><!--> の意味を教えてもらえますか？ とあるサイトのソースに入ってました。

    • ベストアンサー
    • HTML
  • IE5.5 element.attributes

    IE5.5 で、要素の属性のリストを取得する方法を教えて下さい。 element.attributes を試してみましたが、全然違うものが返ってきて、どうしようかと悩んでいます。 <div id="sample" style="color:red;" class="" lang="ja"></div> こういう要素があったら、例えば、 { id:'sample', style:'color:red;', class:'', lang:'ja' } というような一覧を作れるようなリストが欲しいということです。

  • HTML5について

    ものすごく初歩なことをたずねたいのですが、 ＩＥ8以前にに新しい要素を認識させる方法として <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> があると知ったのですが、 これを＜head＞内に記述すると、当然きちんと認識されるのですが、 画面を見た時に一番上に<!--[if lt IE9]> <![endif]--> と表示されてしまいます。 ・・・この文字は消せないのでしょうか？

  • CSSによる簡易な複数言語対応について

    現在日本語で公開されているＨＰを英語でも公開するにあたり、 HTMLとCSSのみで2言語対応したいと思っています。 対応するというのは、 ・同じHTMLファイル上で英語と日本語を併記 ・ユーザーのブラウザが日本語なら日本語表示（英語は表示しない） ・日本語以外なら英語表示 とします。 なお、FireFoxでは以下のやり方でできましたが、 IEはlang属性が未対応とのことで、うまくいきません。 htmlファイル <html> <head> <link rel="stylesheet" href="global.css" type="text/css"> <link rel="stylesheet" href="local.css" type="text/css"> </head> <body> <div class="ja" lang="ja"> <p>日本語のテキスト</p> </div> <div class="en" lang="en"> <p>English text</p> </div> </body> </html> global.css *[lang='en'] { display: block; } *[lang='ja'] { display: none; } local.css.ja *[lang='ja'] { display: block; } *[lang='en'] { display: none; } また、divタグでの判定であれば htmlを以下のようにして <div class="ja" ・・・ cssファイルの *[lang='ja']　を　div.ja　などに 置き換えることで、 IEも含めうまくいくのはわかっているのですが すでに日本語で作成済みのため、これからclass名を 日本語と英語で別にしていくのはさけたいと思っています。 シンプルに対応できないものでしょうか。 JAVAスクリプトは使用しないようにしたいと考えています。 また、まったく違う簡単な方法があれば教えていただけないでしょうか よろしくお願いします。 (注：上記コードはコンテント・ネゴシエーション可能なサーバー上でのみ稼働とのこと。)

    • ベストアンサー
    • HTML
  • js 引用符

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>サンプル</title> </head> <body> <div id="a"></div> <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="moment.js"></script> <script src="fastclick.js"></script> <script> $(function(){ var retinaSwitch = window.<span class="searchword">devicePixelRatio</span>; if(retinaSwitch == 1) { $('#container').html('Retinaディスプレイではありません'); } else if(retinaSwitch == 2) { $('#container').html('Retinaディスプレイです'); } }); </script> </body> </html> javascriptのコードなのですがWebサイトからコピペした文章が上手く反映されません。引用符関係のイージーミスだとは思うのですが、ちょっとドツボに嵌っているので、ご指摘頂ければと思います。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する