HTML5+CSS3サイトの作成手順

趣旨

MT(Movable Type)で製作した古いサイトでもう更新する予定はない。
だけど、そのままweb上に置いておきたい！・・けどこのまま古いCMSで放置するのは心もとない。
そうだ！HTML5+CSS3の静的サイトに作り直そう！
ついでにマルチデバイス対応にしたい！
なんて勢いで作り出しましたが、いかんせん面倒でたまりません。。
手抜きできるところは手抜きして、、できるだけ見栄えのするサイト作成を目指します！！

ちなみに・・旧サイトデザインはこんな感じです。

HTML5+CSS3デザインテンプレートを使おう！

この世には『個人、商用問わず好きに使っていいですよ。』と無料のテンプレートを配布してくれるなんともお心優しい方がいらっしゃいます。
まずはそういう方々に感謝をしつつ、有り難く使わせていただきましょう＾＾

今回使用するのは「CoolWebWindow」さんが無料配布している「HTML5デザインテンプレート」の＜No.001＞です。
シンプルな1カラム（シングルページ）なので、カスタマイズしやすそうですね。
テンプレートデザイン

デザイン

とてもシンプルでスッキリしたデザインなので基本このままでもいいかな？w

トップページにはグリッドレイアウトを入れたいなぁ。。
グリッドレイアウトにフィルタ機能が欲しいなぁ。。
商用は有料になっちゃいますが、「Isotope」がいいかな？

と、設計方針？はこんな方向で・・ ^^;

ちなみに、フィルタ機能でカテゴリの選別を実装しようかと思ってます。
そうしたらカテゴリページを作らなくて済むかな？と。。

トップページ作成

まずはヘッダーとフッターを編集

<head>内の title と meta要素を編集。
次に<h1>などの見出し部分を編集。
最後に<footer>内のCopyrightを編集。

Isotopeを設定

ダウンロードした「isotope.pkgd.js」ファイルをjsフォルダに設置。

jsファイルにリンクを貼る。

<script type="text/javascript" src="js/isotope.pkgd.js">

とりあえずのデモコンテンツを挿入

<div class="grid"> 
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item">...</div>
</div>

jQueryを使用した初期化

$('.grid').isotope({
  // options
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});

cssファイルを作成
広告を適宜挿入したいので広告サイズに合わせて300x250のサイズで固定します。
```
.grid-item {
  float: left;
  width: 300px;
  height: 250px;
  background: #e6e5e4;
  margin:5px;
}
.grid-item--width2 { width: 610px; }
.grid-item--height2 { height: 510px; }
```
site.css の body要素を width:780px; → width:940px; に変更しています。（@media screen もね^^）
ブラウザを940px以上の幅に広げたら３列カラムになるはず。

ざっとこんな感じです。
作成中デザイン01

フィルタの設定

isotopeのフィルタでフィルタでカテゴリ分類をするので、フィルタ要素を追加していきますよ。

jまずはscriptの部分。
scriptって例示されてても、正直どこにどう入れたらいいのかわかんないので今回は<script>内を全部載せてます。

<script>
$(function(){
   $('html').smoothscroll({easing : 'swing', speed : 1000, margintop : 30, headerfix : $('nav')});
   $('.totop').scrollshow({position : 500});

   // init Isotope
   var $grid = $('.grid').isotope({
     // options
     itemSelector: '.grid-item',
     layoutMode: 'fitRows'
   });
   // filter items on button click
   $('.filters-select').on( 'click', 'button', function() {
     var filterValue = $(this).attr('data-filter');
     $grid.isotope({ filter: filterValue });
   });
});
</script>

コントロールパネル。
<ul>リストでボタンを配列していきます。

<ul class="filters-select">
<li><button data-filter="*">　ALL　</button></li>
<li><button data-filter=".server"> サーバー構築 </button></li>
<li><button data-filter=".mysql">　MySQL　</button></li>
<li><button data-filter=".php">　PHP　</button></li>
・・・省略・・・
</ul>

データ。
クラス名にフィルタを追加していきます。

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item server">...server...</div>
  <div class="grid-item php">...php...</div>
  <div class="grid-item server">...server...</div>
  <div class="grid-item mysql">...mysql...</div>
・・・省略・・・
</div>

で、こんな感じです。わかりにくくてごめん。
作成中デザイン02

データを挿入

それでは雰囲気を出すためにもデータを入れちゃいましょう！

・・２つデータを挿入したところでデザインを整えないと・・これでは全く雰囲気が出ません＞＜。
作成中デザイン03

css補正

まずはscriptで調整されている<header>の margin-top 。
これが .grid-item の <article> 内の < header> にも作用してしまうので「js/script.js」ファイルを編集します。

「js/script.js」ファイルの９行目付近

    $('header').css({'margin-top':navHeight + headerMarginTop});

の $('header') に「body > 」を追加。

    $('body > header').css({'margin-top':navHeight + headerMarginTop});

body要素の子要素にあたるhaeder要素だけに作用するように変更してます。
そうすることで、body要素直下以外のheader要素（<article> 内の < header>）に対しては無効になります。

あとはcssで .grid-item 内のデザインを設定すればOK!!

ひとまず、こんな感じでいいかな？
作成中デザイン04

ページ作成

ここが一番めんどくさい。。

MTで作成したページ数がざっと100ページくらいあるかな？

MTは更新ごとに再構築をしてページを静的生成するので、ページ自体はもう出来ています。
これを編集して不要なファイルを削除する工程が必要なわけで・・・。

地道にコツコツ・・・・・。

投稿日：2015年11月01日