HTMLにスクリプトを組み込む：html step22
前回は、リストボックス・ファイルの選択・項目のグループ化の作成方法につきまして、ソースコードを交えながら記載いたしました。
どれも頻繁に使うソースコードではない為、忘れがちなHTMLだと思いますが、使用することができると断然便利な内容になりますので、しっかりと理解を深めテンプレート化して保存しておくことをおすすめします。
実際の制作機会に出くわした際、あわてることなくチャッチャッと作成できることが良いように思います。
という事で、それでは今回はッ、
・スクリプト実行不可の場合の内容を記載
上記について記載していこうと思います…。
HTMLにスクリプトを組み込む
<script src=”URL”> ～ </script>
script要素は、HTML文書内にスクリプトを記述する場合に使用し、スクリプト言語はこの要素の範囲内に記述します。
この要素は<head> ～ </head>と<body> ～ </body>の範囲内の任意の位置に記載することができます。
src属性は、スクリプトを別ファイルに記述しておいて、それを呼び出して使用する場合の記載方法になります。
※src属性でスクリプトを読み込む際は、一般的には<head> ～ </head>内で読み込む場合が多くなりますが、ページの表示速度を考慮する場合、また、ファーストビューに関係のないスクリプトの場合は、</body>の直前に記載することをおすすめします。
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>HTMLにスクリプトを組み込む</title>
<script>
function func1() { window.alert(“イケてるブログ！”) }
</script>
</head>
<body>
<input type=”button” value=”ダイアログボックスを開く” onClick=”func1()”>
</body>
</html>
スクリプト実行不可の場合の内容を記載
noscript要素は、スクリプトが実行できない場合にだけ表示させるコンテンツを入れておく要素です。従いまして、スクリプトが実行可能な場合には、noscript要素の内容は表示されません。
この要素の内容としては、「スクリプト対応のブラウザで見てください」というものではなく、スクリプトが利用できる場合と同等かそれに近い内容、または、そのようなページへのリンクを入れるように指定します。
<p>
スクリプトが利用できない場合は、
<a href=”sample.html”>シンプル版</a>
をご利用ください。
</p>
</noscript>
という事で今回は、HTMLにスクリプトを組み込む方法とスクリプト実行不可の場合の内容をサンプルコードと共に記載いたしました。
script要素を組み込む方法は、<head> ～ </head>と<body> ～ </body>の範囲内の任意の位置と比較的柔軟に記載することが可能ですが、jQueryを組み込んだ際の記載の順序や、ページの表示速度を気にする場合には、記載箇所に注意が必要になる事と思います。
特にページの表示速度につきましては、ページ制作者に取りましてはコーディングの際、常に注意をおこなう要素になる事と思いますので、最後にPageSpeed Insights – Google Developersのリンクを記載しておきます。
上記で作成サイトの分析をおこないますと、script要素などの注意点などが表示されることと思いますので、ぜひとも参考にされることをおすすめします。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
