CSSの実装方法について
この特集では、CSSとJavaScriptの実装方法を紹介します。CSSの役割については以下の特集にて解説していますので、気になるヒトはみてください。（JavaScriptも特集にて紹介予定です）
【関連記事】第2回：混乱しました「HTMLとCSSとはは何者なのか」②
ここでは、CSSの実装手順については以下になります。
- htmlのheadタグにcssの参照元を記載する
- ファイルを用意する
- ファイル内に記載する
まずは、htmlデータのheadタグに以下のlinkタグを記載します。htmlデータに「style.css」が何者なのかを紹介している内容となります。
<head>
<meta charset="UTF-8">
<title>HTMLをコーディングする</title>
<link href="CSS/style.css" rel="stylesheet">
</head>
そして、CSSフォルダ内にcssファイルを作成し、cssを作成します。基本的な書き方はクラスやIDを指定して、{}内に変更したいデザインを記載していく流れです。
これでCSSが反映されます。
Javascriptの実装方法について
JavaScriptについても同じ流れになります。ただ、記載箇所が少し異なるのに気をつけてください。
- htmlのbodyタグの最後にJavaScriptの参照元を記載する
- ファイルを用意する
- ファイル内に記載する
JavaScriptでは、htmlデータのbodyタグの最後に以下タグを記載します。JsvaScriptということとファイルの場所を紹介している内容となります。
</footer>
<script src="Javascript/sample.js"></script>
</body>
</html>html上の記載箇所について、cssと異なる場所にしていますが、こちらは読み込みを早くするためです。以前にも話した通り、Webページは上から読み込まれていきます。なので、複雑な処理があるJavascriptを冒頭に記載してしまいますと、そのタイミングではページを構成している他のHTML要素の読み込みが終わっていません。
結果、何度も読み込むことになり、通信制限などでページの表示スピードが遅くなってしまう恐れがあるからです。CSSはまだデザインの変更だけなのでそこまで影響がないですが、JavaScriptはいろんな処理を行う分、影響度が高いですからね。
冒頭に記載すること自体は間違っているわけではないですが、ユーザーが使いやすいように記載しておきたいですね。
そして、JavaScriptフォルダ内にjsファイルを作成し、javaScriptを作成します。基本的な書き方はオブジェクト（動かす箇所）を指定して、メソッド（やってほしい動き）とパラメータ（動く内容）を記載していく流れです。
え、オブジェクトって何か？この辺りはオブジェクト指向などの概念の話になってくるので、今回は割愛しますね。とりあえず、”動かす箇所””その動きの主語をなるもの”という認識で大丈夫です。
また、JavaScriptはhtmlデータに直接記載することでも実装できます。ただ、後に修正や拡張をしていく場合、htmlデータとは外にあったほうが把握しやすいので、JavaScriptファイルを用意することをオススメします。
ここまでできたら後は公開するだけです。
次回は公開する手順について紹介します。
コメント