1から書くHTML(外部ファイル編)

第二回、ありました。
今回は、外部ファイルの使い方についてです。
HTMLファイルは、実はそのファイル1つで見た目も動きも決められます。
ですが、それではメンテナンス時に苦労をするのはあなたです。
一つのファイルの中に様々なシンタックスの言語が混ざるのは、個人的に好きではないので、ファイルは切り分けましょう。
f:id:ShoutaWATANABE:20171011172606j:plain

CSS

カスケーディング・スタイルシート(Cascading Style Sheet)とは、Cascading=滝のように連鎖的に、スタイルが適応されていくためにこのような名前がつけられています。
親要素のスタイルが子要素にも適応される、という意味で、具体的には、

<body>
    <div>
        最終的に<span>表示される</span>ページ
    </div>
</body>
html {
    color: #F00;
}
div {
    font-size: 200%;
}
span {
    text-decoration: underline;
}

このようなHTMLファイルとCSSがあるとするならば、

  • htmlタグのスタイル

    最終的に表示されるページ

  • divタグのスタイル

    最終的に表示されるページ

  • spanタグのスタイル

    最終的に表示されるページ

が、連鎖的に適応されるので、
最終的に表示されるページ
となります。

javascript

今日のwebページは単にコンテンツを表示させておくだけでなく、様々な動きを見せます。
例えば、クリックするだけでページ内をスクロールする、という動きはjavascriptを使っています。
javascriptにはフレームワークと呼ばれる追加機能が数多くあり、中でもjQueryというフレームワークは、動的にページ内の要素を変えるためによく使われます。
今回は一番カンタンで、デバック等でもよく使うconsoleメソッドをご紹介します。

console.log("hoge")

これは、ブラウザのコンソールに文字や計算結果を表示するメソッドです。
使用しているブラウザがgooglechromeであれば、windowsならF12、macであればcommand + alt(option) + iでdeveloper toolが開くので、そのなかからconsoleを開いて確認します。
javascriptのエラーはこのコンソールに表示されるので、スクリプトが上手く動いているかどうかはここを確認するようにしましょう。

外部ファイルの指定

では、上記で紹介した2つの種類の外部ファイルを実際にHTMLファイルの中で指定してみましょう。 まずは、2つのファイルを名前をつけて保存します。
保存する場所は、HTMLファイルと同じフォルダにstyleフォルダとscriptフォルダを作って、その中に保存しましょう。

index.html
style
  |
  --style.css
script
  |
  --script.js

その場合は下記のように指定します。

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style/style.css">
    </head>
    <body>
        <div>
            最終的に<span>表示される</span>ページ
            <script type="text/javascript" src="script/script.js"></script>
        </div>
    </body>
</html>

このような構成にすることによって、このHTMLファイルにcssファイルとjavascriptファイルを指定することができます。
文献によってはscriptタグをheadタグの中に書いているものもあるかと思いますが、ファイル読み込み順序が関係して、ページの表示が遅くなってしまうので、最近はbodyタグの中の一番下で読み込むのがbetterとされています。
また、href属性とsrc属性はどちらもファイルの場所を指定しているのですが、今回は相対的(index.htmlを規準にしたファイルの場所)で記述しています。
http://〜〜といったURLを完全に記述しても指定できることを覚えておいてください。
これによってサーバ内に保存してあるファイル以外を指定することもあります。

まとめ

今回は外部ファイルの指定の仕方についてまとめました。 これでhtml・cssjavascriptを書くための準備が整いました。 いよいよ内容を書いていくわけですが、それは次回のお楽しみです。 次回も書きたいですね笑

  • cssはページの見た目を決める
  • javascriptを用いるとページを動的に変化させることが出来る
  • cssはhead、javascriptはbodyタグ内に指定する。