Labo 237: JavaScript を読み込む
Labo 237: JavaScript を読み込む
モバイル向けレイアウトの時だけ表示される、ナビゲーションの表示・非表示を切り替えるボタンの動作を完成させる
JavaScript プログラムファイルを読み込む <script> タグの位置が重要になる
モバイル向けレイアウトのときに表示されるボタンをタップすると、ナビゲーションの表示・非表示が切り替わる
この動作を実現するために、js フォルダにある次の 2つの JavaScript ファイルを読み込む
JavaScript はブラウザで動作する唯一のプログラミング言語で、ファイルの拡張子は .js
HTML ファイルに読み込んで使用する
JavaScript ファイルを読み込むには <script> タグを使用する
開始タグと終了タグの間には何も書かない
<script src="JavaScript ファイルのパス"> </script>
<script> タグは <head> ～ </head> 内、もしくは <body> ～ </body> 内であればどこに書いても良い
ページの読み込み速度などを効力して、</body> タグの直前に追加するのが一般的
JavaScript ファイルを読み込むのと、レスポンシブデザインで正しく動作するように、一部 style.css を編集する
CSS のスタイルは適用される順序がある
セレクタによって決まる優先順位によっても、適用されるスタイルが変わる
!important は、そうした順序や優先順位を無視して、必ず適用した重要なスタイルに追加する
!important は、適用したい CSS プロパティの値のうしろに、半角スペースで区切って追加する
PC 向けレイアウトで表示しているときにナビゲーションメニューが表示されない場合がある
それを回避し、ナビゲーションが常に表示されるように !important を追加している
!important は、CSS の順序や優先順位を無視して適用されるため、一度使ってしまうと、そのスタイルが不要となった時に上書きが非常に困難になる
更新・修正が難しいソースコードになってしまうので、JavaSceript の処理上でどうしても使わなければならないときなどを除き使わない