今回は、WEBサイトを作る時に最初に用意しておくと便利なテンプレートファイルなどをご紹介します。
大抵の方は、WEBサイトの作成ツールなどを活用して必要なファイルを用意すると思いますが、基本的な構造などを理解するためには、最初は手でファイルやディレクトリなどを作成すると良い練習になります。
サイトの表示結果などをすぐに試したい！という場合に役に立つかなと思います。また、今後PHPなどをいじる場合にも基礎となる考え方になります。
コンテンツ
必要ファイルとディレクトリを用意する
では、実際にWEBサイトを作るために、最低限必要なファイル、ディレクトリなどをテンプレートとして用意していきましょう。
これらのファイルがあると、いつでも、どこでもすぐにサイト作りができる様になりますよ^^
HTML
まずはWEB画面の基本ともなる「HTML」のテンプレートを作りましょう。
HTMLファイル
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> </body> </html> |
ファイルの置き場
ソースを格納するディレクトリのトップに配置しましょう。トップページであれば「index.html」という名前で作成すればＯＫだと思います。
PHPファイル等も考え方は同じ
PHPによってHTMLファイルを書きだす場合も、考え方は同じです。
PHPの場合は「index.php」といったファイル名になると思いますが、置き場などは同じでＯＫです。
※当然ですがPHPの実行環境が必要になります。最近のサーバであれば大抵対応しています。
CSS
次は、レイアウトのスタイリングを行うCSSファイルの準備をしておきましょう。テスト用として簡単なスタイリングコード（h2タグのフォントサイズを20pxに、そして色を赤に設定）も記載しておきます。
CSSファイル
|
1 2 3 4 |
@charset "UTF-8"; h2{font-size:20px; color:red;} |
置き場
cssファイルはhtmlファイルの階層に「css」というディレクトリを作成して、とりあえず、そこに置いておきます。
このcssファイルを読み込むため、htmlファイルには以下の様に記載しておきます。
※style.cssがファイル名です。
|
1 |
<link rel="stylesheet" href="css/style.css"> |
JavaScript
WEB系では今や最重要言語とも言われる様になったJavascript。画面に動作を付ける場合や、HTMLでは実現できない処理を行う場合に使用します。
サイトを作り込もうと思ったら必要になるファイルだと思いますので、こちらもテンプレートを用意しておきましょう。
JavaScriptファイル
|
1 |
document.write("<p>こんにちは！</p>"); |
置き場
Javascriptファイルはhtmlファイルの階層に「js」というディレクトリを作成して置いておきます。jsファイルを読み込むため、htmlファイルには以下の記載をしておきます。
※test.jsがjavasprictのファイル名です。
|
1 |
<script type="text/javascript" src="js/test.js"></script> |
※jQueryを使う場合もhtmlに記述が必要になりますよ^^
全体の結果確認
これまでに作成したファイルを基にして、実際にWEBページを開いてみましょう。ちなみに、これまでの修正点を全てhtmlファイルに加えると以下の様になります。
CSSの内容を確認できる様にbodyの中に必要なタグも追記しました。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>テストh1</h1> <h2>テストh2</h2> <script type="text/javascript" src="js/test.js"></script> </body> </html> |
結果画面
なんてことのない表示画面ですが、cssのスタイリングや、Javascriptの内容も反映されているのが分かるかと思います。
「テストh1」⇒HTML内に記述したテキスト。
「テストh2」⇒HTML内に記述したテキスト。CSSのスタイリングで赤色にしている。
「こんにちは！」⇒Javascriptで出力したテキスト。
まとめ
さて、今回はWEBサイトを作る時に予め作っておくと便利なファイル、ディレクトリなどについてお伝えしました。
非常に簡単な準備なので、誰でもできると思います。でも、一度テンプレートを用意しておくと、その後の作業が非常に楽です。
大事なのは、ここからいかに作り込んでいくか？なのですが、何かアイデアを思い付いた時にテンプレートがあると、すぐに形にする事ができます。
開発ツールなどを使用すれば自動で最低限のコードを生成してくれたりもしますが、この様な簡単なテンプレートを使える様にしておくとどんな環境でもすぐに形にできるのでオススメです。
