Home > TagScript > html,cssテンプレート

ベクトルドロー・レベルゼロ

自分でテンプレートを作成する

新規作成日 2017-02-08
最終更新日

ホームページやブログを作成しようと考えたとき、あるいは、htmlとcssの使い方をある程度理解してきたとき、自分のテンプレートを作成したいと思うことがあります。

しかし、タグ辞典で、htmlやcssの使い方を覚えても、少しもホームページやブログのテンプレートが作成できるような気にならないと思います。

cssフレームワークを利用する

Webサイトで使われるそれぞの部品は、htmlとcssによる定型表現です。ほとんどの定型部品は、cssフレームワークとして用意されています。

特に、複数人でWebサイトを作成する場合は、独自にcssをつくるより、cssフレームワークをもとにして、共通のcssを使ってデザインを作成したほうが良いと言われています。

cssフレームワークを使った優れたデザインのテンプレートが、有料や無料で提供されているので、そのまま利用したり、自分で作成するテンプレートの参考にすると良いと思います。

Webデザインの書籍を利用する

cssフレームワークのデザインサンプルとクラス名を頼りに、htmlとcssの標記方法を探していくのは大変です。初心者であれば、コードの説明がないとサッパリわからない可能性が高いです。

そんなときには、Webデザインの書籍を参考にすることをお薦めします。cssフレームワークで紹介されている部品の例とhtmlとcssのコードの解説がされています。書籍で解説のためのサンプルとして使わているテンプレートを改変して、自分のテンプレートを作成することも良い方法かと思います。

その時のスキルや知識量によってわかりやすい書籍は、変化します。書店や図書館で実際に確認してから、その時の自分に合った書籍を選択することをお薦めします。

Bootstrapを使ってテンプレートを作成する

Bootstrapは、人気のあるcssフレームワークの1つです。

Bootstrapの完成したテンプレートも、販売されています。デザインサンプルが提供されているので、それを切り貼りすることで、自分独自のテンプレートを作成することができます。

cssは、クラス名で指定するのですが、クラス名が長い上に、多いので、使い始めは結構たいへんです。

Bootstrapでは、Webデザインを構成するそれぞれのデザインには、名前が付いています。

  • メニュー: スマホなどの小さい画面になった時には、ボタンを押してリストが表示されるようにする。
  • レイアウト: フルールド+固定幅の2カラムデザイン
  • スクロール・スパイ:項目をサイドバーに表示し、呼んでいる位置の項目の色が変化するスクロールスパイ(Scrollspy)に対応する
  • 色:暗色系デザイン。明色系デザインは、目が疲れます。

htmlとcssで、テンプレートを作成する

cssフレームワークは、高機能ですが、Webサイトのデザインによっては、それほど高機能である必要はありません。込み入ったデザインを駆使してWebサイトを作成するのでなければ、cssは、あまり大規模なものにはならないので、htmlとcssの学習の意味も含めて、cssテンプレートを使わずにテンプレートを作成するのも1つの方法です。。

テンプレートを作成する際に役に立つhtml、css表現

テンプレートを自分で作成したいときは、必要なデザインを表現するためのhtml、cssの組み合わせを見つけていく必要があります。

このエントリーをはてなブックマークに追加

Home Editor Tools Operation TagScript HPSpace

Copyright (C) 2011-2018 Horio Kazuhiko(kukekko) All Rights Reserved.
kukekko@gmail.com
ご連絡の際は、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません。」