商用サイト向けCSSテンプレート [Cool Web Window]
テンプレートをありがたく利用してます。うちのカメラのページはこちらを流用しています。
Responsive Grid System
こちらのCSSテンプレートを使い、擬制的にレスポンシブな動きをするようにしてあります。
ふたつのテンプレートを掛け合わせるだけでは思うようには動きません。かんたんなスタイルシートの知識があれば作れますが、スタイルシートの知識がなければホームページテンプレート無料配布 [Cool Web Window]のページ右下にある有料テンプレートの購入を勧めます。
ホームページ作りをちょっとやってみようと思い、やり方を考えてみました。
HTML5アプリ作ろうぜ！（11）：Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) – ＠IT
レスポンシブで携帯表示にも対応した便利なテンプレート「プートストラップ」を使うつもりでした。作業を進めてみるといくつかの問題点にぶつかります。ボタンやタブのテンプレートが充実しているのですが、それを呼び出すタグが複雑。クラス指定の名前が長くて、いちどはじめるとやめられない印象を受けました。更新も早くて更新すると以前とはまるで違う仕様になってしまう点が、運用する側の腰が引ける一因となります。
HTMLのタグはなるべくシンプルにしたいものです。使うクラスも最低限にしたいと思い、今回は残念ながらブートストラップは不採用。
結局、カメラのとこで掛け合わせにつかったResponsive Grid Systemを使うことにしました。
今までの常識を覆す!?レスポンシブかつ超軽量なCSSフレームワーク | スマートフォン＆モバイルEC事例ノウハウ集｜モバイルファーストラボ
うちのサイトの例ですと、構造は簡単で子要素の中の（p）タグすらかけずとも表示が崩れません。おおざっぱな仕様が気に入りました。見た目はCSSで自分で追加すれば良くなるでしょう。基本、テキストサイトで時々写真、複雑なレイアウトはしませんからプリセットのスタイル集をそのまま使うことにして、機能が分かったらあとで使えば良いことにします。
Responsive Grid Systemの初期設定のページから、必要な分だけ最低限のスタイルを持ち込んで組み立てています。
見栄えを考えるとカメラのところのようにふたつのテンプレートを掛け合わるとすぐに作業は終わります。タグを睨んで考えてみました。しかし、一時間考えても、どこにどのタグがかかっているのかが分からなくなり修正は断念。見栄えを優先するのはひとまず置いて、まずは枠を作ることにします。そうなると、初期状態でそのままぐりぐり書けるResponsive Grid Systemは最高です。基本セットはヘッダー、フッター、サイドバー付きのメインコンテンツ部分で出来ています。グリッドのことは忘れて便利な型枠だと思っていじらずに使うことにします。
この手のグリッドレイアウトを使ったテンプレートは山ほどでてきます。とりあえず、必要最低限でコードを観てうんざりしなくて済むものを選びました。だいたいこういうときは多機能のものに目がいきがちですが、まず使いこなせない。スタイルシートのコードは限りなく短くて観て分かる程度に収まっているものを選んだほうが楽です。
難しいものを使うとタグが複雑化して管理は難しくなります。私はほとんど手動でタグを書いています。ひとつのフォルダに10ページくらいのミニサイトをつくろうとするたびに、CMSを入れるべきか悩んでしまいます。データベースを使うと大げさですし、wordpressを別個に入れて行くのも無駄に思います。ローカルでムーバブルタイプを動かして静的にHTMLを吐き出す方法もありますが、結局最後エディタでタグの手打ち、FTPアップロードという古い方法がいちばんしっくり来ます。
タグの手打ちにもメリットはあります。単純作業をしながら違うこと考えています。この部分を自動化してもかまいませんが、物を作るときは単純作業はどうしても必要です。単純作業を飛ばして道具を使うことができますが、今度はその道具が使えるかどうかに集中力を奪われるので道具は限りなく簡単にしておきます。
道具について思い悩むぶんの労力を、簡単な道具の反復作業に置換えるのが私のやり方です。ホームページ作りに限らず、おもちゃを作るときにも電動工具よりも手動で材木を切り出してしまいます。電動工具を使わない、パソコンに繋いだCNCや3Dプリンタがなくても、手作業の手順を増やして解決すればいいんです。基本的にノコギリで切るという行為は変わりませんし、造形であれば下準備とか荒取り、治具の利用で案外同じ物ができてしまいます。だから、単純作業は単純作業でやることにして、まずは作ることを優先したほうが欲しい物は手に入ります。