ホームページやブログを作成しようと考えたとき、あるいは、htmlとcssの使い方をある程度理解してきたとき、自分のテンプレートを作成したいと思うことがあります。
また、有料で販売、無料で配布されているテンプレートを使用する際にも、全く、htmlとcssを理解せずに使用することはできません。
自分で、オリジナルテンプレートを作成するか否かに関わらず、テンプレートを作成するための知識は学んでおく必要があります。
レスポンシブWebデザイン
Webサイトは、パソコンだけでなく、タブレットPC、スマートフォンからも閲覧されます。
それぞれに対応したページを作成するのは、手間がかかります。そこで、表示されるウィンドウの幅に応じて、適用するcssを変更して、同じhtmlファイルで、それぞれの端末で見やすいレイアウトを実現する手法が、レスポンシブWebデザインです。
CMSを使えば、それぞれの端末に対応したページをそれぞれ動的に生成することも可能ですが、レスポンシブWebデザインの手法で、対応することが一般的です。
新たにWebサイトを作成する場合、レスポンシブWebデザインに対応したWebサイトを作成する事をお勧めします。
サイト内リンクは、相対リンクで
サイト内リンクは、可能な限り、相対リンクで記述します。これは、ドメインを変更する場合、ローカルサイト内で、リンクをクリックしてページを移動する場合に有効に働きます。
しかし、メニューの中に記述する、パンくずリストに記述するリンクは、フォルダ階層によって、リンクの記述が変化するので、ページを作成するたびに、手動でリンクを修正していると記述ミスが起こり、リンク切れが発生します。
htmlエディタでは、自動で相対リンクの記述を変更する機能を持つものが多いです。
テキストエディタでタグ打ちで作成している場合は、修正したマクロを作成し、対応したほうが良いかと思います。
テンプレートを構成する要素
Webサイトのそれぞれのページのデザインは、同じ部分が多く存在します。Webサイト全体で、同じデザインを使用すると、Webサイト全体で一貫性があるイメージを提供することができます。
共通する部分をテンプレートとして独立させ、それぞれのページごとに作成する部分を限定することで、それぞれのページの作成の手間を軽減できるとともに、Webサイト全体で一貫した印象を提供できます。
テンプレートを構成する要素
- ヘッダタグ内の記述
- メニュー構造
- パンくずリスト
- カラム構造
- フッタ
構成する要素をどこから集めてくるか
htmlやcssの定義から、さまざまなデザインを構築できる人もいるようですが、ほとんどの人は、その技能は、持っていません。そこで、どこかの誰かが見つけ出した素敵な見つけ出して、定石のスニペットとして使用させてもらうことになります。
cssフレームワークが一番情報量が多いですが、コードの説明が無いので、直接コードを理解する必要があります。その時の技能水準によっては、コードから読み取ることが難しいので、Webデザインの書籍やcssデザインの書籍で、それぞれのコンポーネントのスニペットを理解することになります。
- Webデザインの書籍のサンプル例
- cssデザインの書籍
- cssフレームワーク
- インターネット上のWebサイトのソースコード
- 無料で配布されているソースコード
- フレームワークのサンプル・サイトのソースコード
cssフレームワークを使用する
cssフレームワークは、有名なものだけでもいくつも存在します。
cssフレームワークを使うと、自分で、css定義をしないでも、html内で、css定義を選択するクラスを指定することで、さまざまなデザインを利用することができます。
コンポーネントのデザインの例を一覧から選び、必要なcss定義が、含まれているクラスを指定します。そのため、指定されるクラスは、複数になるので、なれるまで理解するのが大変です。
一方、多くのデザインに対応したcssが用意されているため、cssファイルサイズが大きいという問題があります。
既に作成サれているcss定義をそのまま使えるので、フレームワークの使い方を理解していれば、cssの定義が必要無い分だけ、素早くテンプレートを作成できます。
また、フレームワークのもともとの目的である複数人でWebサイトを作成する際に発生する、そpれぞれが、cssの定義を追加して、cssがごちゃごちゃになることを防ぐ効果もあります。
そのため、無料で配布、有料で販売されているテンプレートには、Bootstrapなどのcssフレームワークが使われているテンプレートが多く存在します。
Bootstrapの完成したテンプレートも、販売されています。デザインサンプルが提供されているので、それを切り貼りすることで、自分独自のテンプレートを作成することができます。
cssは、クラス名で指定するのですが、クラス名が長い上に、多いので、使い始めは結構たいへんです。
- Bootstrap 4で始めるホームページ作成
- Bootstrapのホームページで提供されているExamplesテンプレートを確認する
- Bootstrap 4のデザインに、フッタとパンくずリストとgoogle検索窓を追加する
フレームワークのサンプル・サイト
Webサイトを作成するために使用するフレームワークでは、その使い方の例として、Webサイトのテンプレートを提示してることが多いです。有効に利用しましょう。
- Initializr
- Easily build user first websites with our templates
AMPのサンプルサイト
- Bootstrap Exanple
Bootstrapのサンプルサイト
HTML5 Boilerplate
Webデザインの書籍を利用する
cssフレームワークのデザインサンプルとクラス名を頼りに、htmlとcssの標記方法を探していくのは大変です。初心者であれば、コードの説明がないとサッパリわからない可能性が高いです。
特に、グリッド・システムの応用である、カラム・レイアウトとメディクエリによるcssの切り替えによって表示するブラウザのウインドウ幅によって適用するcssを切り替えるレスポンシブWebデザインの仕組みは、難解です。
よく理解できない場合、理解するために、Webデザインの書籍を参考にすることをお薦めします。cssフレームワークで紹介されている部品の例とhtmlとcssのコードの解説がされています。書籍で解説のためのサンプルとして使わているテンプレートを改変して、どのように動作が変化するかを確認することで、より理解を深めることができます。
レスポンシブWebデザイン入門 ~マルチデバイス時代のWebデザイン手法~ [小川 裕之]
カラム・レイアウトをフルールドグリッドで実現する方法について、詳しく記述されています。自分でテンプレートを作成する場合、とても参考になります。出版年が少し古いので、フレキシブルボックスについては扱われていません。
