• css
  • global.css
  • normalize.css
  • simplegrid.css
  • style.css
• images
• js
  • html5shiv.min.js
  • jquery-1.11.1.min.js
  • main.js
  • modernizr.js
• index.html
• style.css

##説明

grobal.css－ページ全体に共通するスタイルを定義してあります。(見出しタグやフォントのサイズなど)
normalize.css－ブラウザにはデフォルトでスタイルが当てられています。それをリセットするCSSです。
simplegrid.css－スマートフォンで見たときに表示を最適化するためのライブラリです。 Simple Grid
style.css－ここにCSSを記述します。

画像ファイルを使用する場合はこのディレクトリに置いてください

html5shiv.min.js－html5をサポートしていないInternet Explore8で表示が崩れないようにするライブラリです。
jquery-1.11.1.min.js－JSのライブラリである jQuery です。JSより簡単な記述でいろいろなことができます。
main.js－Javascript(jQuery)はここに記述します。
modernizr.js－これも古いブラウザに対応するためのライブラリです。

HTMLをここに記述します。

CSSファイルを一本化するためにcssフォルダにあるファイルを@importを使って読み込んでいます。

htmlはindex.htmlに記述し、CSSはcssフォルダ直下のstyle.cssに書いていってください。

index.html
<!--header-->
ここにコード
<!--header END>

css/style.css
/*Header
**********************:*/
ここにコード

①見出しタグ(h1,h2タグ)、基本となるフォントサイズ、フォントカラーは指定してあるので個別に指定しなくて大丈夫です。

大見出し(h1)と中見出し(h2)の記述の仕方

<h1>About</h1>
<h2><span>Our Mission<span></h2>

②記述例

PC以外のデバイスからWEBサイトを閲覧した時に、そのデバイスに表示が最適化されるデザインをレスポンシブデザインといいます。 この雛形もSimple Grid というCSSライブラリを読み込んでいるのでclass名を指定するだけで簡単にレスポンシブデザインが実現できます。(メニュー除く)　
クラス名の指定の仕方

<div class="grid grid-pad">　<!--コンテンツを中央寄せ&段落回り込み解除-->
  <div class="col-1-2">ここにコンテンツ</div> <!--width:50%;-->
  <div class="col-1-2">ここにコンテンツ</div>  <!--width:50%;-->
</div>

12カラム構成なので、そのうちいくつのカラムを1ブロックに使いたいかを指定します。 たとえば4ブロックを横に並べたい場合はcol-1-4と記述します。 詳しいサンプルはSimple Gridの公式サイト を参考にしてください。
きちんとレスポンシブデザインになっているかどうかはブラウザサイズを縮小することで確認できます。

HTML5リファレンス 　

CSSリファレンス

HTML+CSSによるウェブページ制作例

CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ