ウェブサイトのざっくりとした構成

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

インターネットで見られるウェブサイトは、画像以外全て文字の組み合わせでできています。

その組み合わせを紐解いていきます。

まずこのページで右クリックでソースを表示してください。かなり複雑なソースが出てきます。
これだとわかりづらいので、シンプルにしたものが以下になります。

HTML


<!doctype html>
<html>
<head>
    <title>ページのタイトル</title>
<body>
<div>
    <h1>デモページ</h1>
    <p>シンプルなソースです。</p>
</div>
</body>
</html>

<!doctype html>     ・・・ HTML5の宣言。何も考えずコピペでOK。
<html>〜</html> ・・・ 全体を囲う決まりになっている。何も考えずコピペでOK。
<head>〜</head> ・・・ 画面には出ない設定の部分。タイトルやページの説明などを書くような場所。何も考えずコピペでOK。
<body>〜</body> ・・・ 画面に反映する部分。何も考えずコピペでOK。

大枠としてはこの4つのタグでできています。ご覧の通り、何も考えずコピペでOK。
これに少し肉付けしたものを「テンプレート」として持っておけばそれを毎回使い回せばOKです。

まずは最低限のテンプレートを用意する。

上記のHTMLはあくまで基本のものなので、もう少し汎用的というか勉強できそうなテンプレートを用意しました。
以下をテンプレートとしてどこか適当な場所に一旦保存してください。
こちらからDLしてください。

[DL] template ver.1

まずはこちらを解凍し、どこかに保存してください。そしてindex.htmlをエディタで開いてください。
エディタはSublimeText3などの高機能エディタを利用してください。他のものでもなんでも良いので、「HTML エディタ おすすめ」などググって良さそうなものを使ってください。

HTMLなどを書くエディタはwindowsのメモ帳のようなものでも動きますが、文字コードやBOMなどという謎の概念により文字化けや予期せぬトラブルが起こることがあるためおすすめしません。
ちなみにSublimeText3に関しては基本有料ですが、永遠に無料で使えます。たまにポップアップで金払いませんか?と出てくるのでいいえすればOKな仕様なのでおすすめです。

解凍すると、ファイル構造は以下のようになっています。

template ver.1のファイル構造


[template] 
 ┣━ index.html
 ┗━ [common]
	┃
	┣━ [css]
	┃	┣━ reset.css
	┃	┣━ layout.css
	┃	┗━ style.css
	┣━ [js]
	┃	┣━ jquery.min.js
	┃	┗━ common.js
	┗━ [images]
		┗━ logo.png

※ [・・・]はフォルダ

[common]というフォルダが出てきました。commonというのは「共通」という意味合いで、このフォルダ以下はサイト全体で共通して使われるものですよという意味合いが強いです。

ただし、あまり厳密ではなく画像やjs、cssなどの静的ファイル(という言い方をしたりします性的ではありませんミスタイプ注意)をまとめて入れておく場所と考えても差し支えありません。
そういう意味ではcommonではなく、assetというフォルダを作る場合もあります。

ていうかルート直下にimagesとかcssとかフォルダをそのまま作ることもあります。
そのままcssとかのフォルダをおくと、フォルダ構造が煩雑になり整理しづらくなりがちなので、静的ファイル用のフォルダを作ってその中にまとめるのをおすすめします。

今回は[common]とします。

内容の概要をざっくり説明

上記フォルダ構造にはcssやjsも含まれています。一つずつ解説します。

/index.html

htmlファイルです。とりあえず適当なHTMLを書いておいたので、ブラウザで確認して見てください。
ついでにレスポンシブになっています。
ちなみにこれ文字を書き換えて、FTPでサーバにアップすれば全世界に公開されます。簡単ですね!すごい!
ソース内の意味を以下に書きましたのでさらっと確認してください。

<body>のcssの例


<!doctype html>
<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
headタグに色々ついてますが、今時のSNSに対応した書き方だと思ってください。実質よくわかりませんがこれでいいのです。
<meta charset="UTF-8">
文字コードの宣言。文字コードについては歴史があってめんどくさいので今は世界的にUTF-8で良しとされているとだけ覚えてください。なのでこれも固定です。
<title>title</title> <meta name="description" content="">
このページの概要です。googleの検索結果やsnsのshare時に反映したり、検索順位にも直結します。なのでなくてもいいけど大抵のページは必須です。
ついでに<meta name="keywords" content="aaa,bbb,ccc〜">というのもありますが、yahooとgoogleは無視するので基本不要と考えてますがクライアントによっては入れろと言われます。
<meta name="viewport" content="width=device-width,user-scalable=yes">
レスポンシブ時の挙動についての設定です。一旦これでよしとして置いてください。別エントリーにまとめます。
<link rel="stylesheet" href="./common/css/reset.css" type="text/css"> <link rel="stylesheet" href="./common/css/layout.css" type="text/css"> <link rel="stylesheet" href="./common/css/style.css" type="text/css">
これは、別ファイルで用意したスタイルシートのファイル(*.css)をこのページに適用させるためのおきまりの書き方です。
</head> <body> <header id="header"> <div class="logo"><img src="./common/images/logo.png" alt="LOGO"></div> <p>〜 テンプレート ver.1 〜</p> </header>
ページのヘッダーですね。<header>というHTMLタグがあるので大抵はこれを使います。(<header>はヘッダー以外にも使えるタグです)
<div class="main"> <section class="section"> <h2 class="title1">.title1</h2> <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。</p> <article> <h3 class="title2">.title2</h3> <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。</p> </article> <article> <h3 class="title2">.title2</h3> <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。</p> </article> <article> <h3 class="title2">.title2</h3> <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。</p> </article> </section> </div> <footer id="footer"> <div class="copy">© TEMPLSTE ver.1</div> </footer>
ページのフッターですね。たまにフッーという人がいますが、フッターですね。<footer>というHTMLタグがあるので大抵はこれを使います。(<footer>はフッター以外にも使えるタグです)
<script src="./common/js/jquery.min.js"></script> <script src="./common/js/common.js"></script>
これは、別ファイルで用意したJavascriptファイル(*.js)をこのページに適用させるためのおきまりの書き方です。
</body> </html>

/common/css/reset.css

HTMLタグには、<html>など必須のものから<div>や<li>、<section>などいくつか種類がありますがそれぞれに実はあらかじめcssが適用されています。たとえば<body>タグは

<body>のcssの例


body {
    display: block;
    margin: 8px;
}

というcssが「Google Chrome」ではあらかじめ当てられています。
ただ、別のブラウザだと全然違うスタイルが当たってたりします。
そうなると、このような既存のスタイルがあると、様々な環境で同じデザインを再現することができませんね?なので、これら既存のスタイルを「リセット」してあげて、何にもナシにしてしまってからCSSを自分でくみなおそうという考え方が生まれました。
これを実現するのがreset.cssの役目です。なので、基本コピペというか、このテンプレートをずっと使い回す形であと数年はいけます。
慣れてきたら書き換えるのも有りだし、そもそもどこかのプロい人が「これ最強のリセット!」として配布しているやつを流用するのが一般的です。基本的にこのreset.cssもどこかのプロい人が配布していたやつを持ってきました。どこか忘れたけど。
なのでコピペです。

/common/css/layout.css

ウェブサイトというものは、LPなどを除くと基本的には複数ページから成り立っているのが一般的です。
そして複数ページで全く同じスタイルを適用させる箇所が通常ありえます。
ヘッダーやフッターなどがこれに該当しますね。こういう共通パーツ系のスタイルを記述するのが「layout.css」になります。

(つまりlayout.cssに記述するようなHTMLには「ID」をつけても問題ないことが多いです。IDについては別途記載します。)

/common/css/style.css

ページ固有のCSSや、汎用的なCSSを書いたりします。なので、まずはlayout.cssで大枠を作ってしまえばあとはこのstyle.cssしか触らないということが結構有ります。
小・中規模サイトでは全ページに渡って固有のスタイルを全部style.cssに記述していくのが一般的です。つまり、たとえばabout.htmlというページ用のcssもstyle.cssに書くし、product.htmlというページのcssもこれに書いちゃいます。お互いに全く不要なスタイルが読み込まれるのことになりますが、特に干渉しないように書いて入れば問題ないといわけです。

逆に、style.cssとproduct.cssという「ページ固有のCSS」を読み込ませるというパターンも存在します。
その場合、style.cssには汎用的なスタイル、例えば汎用的なタイトルのCSSだったり、ボタンのレイアウトだったりを書いておくという使い方になります。
慣れてくればそういう使い方も有りですが、これは複数人で構築する場合や大規模サイト向けのやり方(と個人的に思っている)です。
最初はファイルが増えると煩雑になりがちなので、style.css内にてコメントアウトで「/* ここからproduct用CSS */」とかわかるように書いておくと良いでしょう。

/common/js/jquery.min.js

デザイナーさんにもおなじみjqueryの本体です。スライダーとかそういう動きのあるやつ作るときに使うJavascriptのライブラリの一つです。
これは別のエントリーにまとめます。

/common/js/common.js

jQueryプラグインの設定を書いたり、スムーズスクロールを実装したりするのにここにjsをまとめて書きます。ファイル名はなんだっていいです。commonなので、サイト全体で共通なスクリプトを書くイメージですね。固有のも突っ込んだりしても全然いいですが。これも別エントリーでまとめます。とりあえずjsは一旦わすれて、テンプレートのものを読み込んでおくだけにしておけばOKです。

専門用語解説

/

説明のなかで、ファイル名の頭に「/」が付いている時があります。これは何を意味するのかというと、ドキュメントルート(後述)を意味しています。別の言い方をすると、「スラッシュからの絶対パス」です。相対パスと呼ばれることもありますが、スラッシュ始まりは絶対パスに分類されます。

絶対パス・相対パス

別エントリーにまとめます。(まだ書いてない)

レスポンシブ

ご存知レスポンシブです。もし万が一わからない場合はググってください。

index

「index.html」が出てきました。indexはファイル名、.htmlは拡張子ですが、このindexというファイル名だけは特別な意味合いがあり、あるURLの「フォルダ」を開いたときに、そこにあるファイルの中でindex.htmlやindex.phpなどのindexが付くファイルがあれば、ファイル名をURLに打ち込まなくても表示されます。つまり、ファイル名を省略してもウェブサイトが開くということです。

ルート直下

フロントエンド(HTMLコーダー)界隈でいうところの「ルート」とは、ドキュメントルートのことをさします。ドキュメントルートというのは簡単にいうと「そのサイトのTOPページのhtmlが置いてある階層」のことをいいます。ドメイン直下とかTOP階層とかと同じ意味合いですね。

今回のドキュメントルートはつまり、
/Users/<USER_NAME>/Documents/<FOLDER>/template
ということになります。

長々色々書きましたが、全て簡単な基本的なことです。
まだよくわからない箇所があったとしてもなんとなく理解してもらえれば大丈夫です。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*