ホームページを作成する目的は、ホームページを作成し、情報を発信してホームページに人を集めることです。しかし、ホームページを作成するために必要な知識や情報が膨大なため、いつの間にか、本来の目的が情報発信ではなく技術習得になってしまうことがあります。
それを避ける方法の1つが、既に完成しているテンプレートを元にホームページを作成することです。既に完成しているテンプレートを使用すれば、ホームページのデザインに時間を使うことなく、内容の作成に注力できるので、ホームページを作成するまでの時間を短縮することができます。
ホームページは、通常、情報発信による人集めが目的であるため、既に完成している既存のテンプレートを利用して、淡々と情報を提供するページを作成していくのが正しい姿です。それだけでもかなり大変です。
ホームページの内容を増やし続けるには、いろいろなところで、時間が必要です。
- 情報を収集、整理して、文章（記事）を作成する。
- 理解を助ける図表を作成する。
- 内容の理解を助ける写真を集める。
テンプレートを自作する場合は、更に、デザインの知識や、より細かいところまでのhtml, cssの知識が必要になり、それを学ぶ時間も必要です。本来の目的の「情報発信による人集め」に注力するためには、デザインやhtml,cssの習得に時間を使うより、既存のテンプレートを使って、情報発信を開始したほうが効率的であることは、簡単に理解できると思います。
もちろん、サイトデザインの研鑽を目的にしている人は除きます。その場合は、新しいデザインを実現するhtmlとcssの使い方を学び、素晴らしいデザインのホームページを作成していくことが目的になります。
既存のテンプレート群の１つに、Bootstrapがあります。このテンプレートの使い方や提供されるデザイン部品について理解を深めるとともに、運営しているホームページのデザイン変更について考えてみたいと思います。
正確には、Bootstrapは、テンプレートではなく、cssフレームワークです。ホームページのデザインを表現するためには、htmlとcssの両方を考えながらテンプレートを作成する必要がありますが、Bootstrapなどのcssフレームワークを使用すると、cssは予め作成されているものを使用するので、htmlだけを考えれば、ホームページが作成できます。ホームペーでよく使用する部品のhtmlの書き方と、対応するcssを指定するクラス、Javascriptが、ドキュメントで紹介されているので、うまく活用するとホームページの作成に使用する時間を大幅に短縮することができます。
日本語の情報を集める
Bootstrap は、英語で情報発信されています。
Bootstrap 4 ドキュメントの和訳
Bootstrapを使ってみようと情報を集めてみましたが、最新バージョンのBootstrap 4の日本語での情報がありません。
Bootstrap 3とBootstrap 4は、かなり変化しているようなので、今から覚えるなら、Bootstrap 4から始めたほうがいいような気がします。ということで、ドキュメントを訳してみることにしました。
Bootstrapに触ってみる
Bootstrapは、人気のあるcssフレームワークですが、初めて扱うときは、どうやって使えばよいのか考えてしまうと思います。ドキュメントは、詳しく書かれているものの、htmlやcssをそれなりに使いなれていと使い方を見つけることができません。
htmlとcssだけでも、かなりのことが行える技術です。それをより簡単に使うための仕組みが、cssフレームワークなので、ちょっと困りものです。
ドキュメントを手がかりに、手探りで自分の求める結果を得るための使い方を探していく必要があります。
Bootstrapのホームページで提供されているExamplesテンプレートを確認する
Examplesテンプレートで、どうやって使うかを確認し、可能であればできるだけそのままで使える記述を使って、自分のサイトで使うテンプレートに活用したいものです。 クラスごとのcssの記述を確認したり、試行錯誤でhtmlタグの利用方法を考えずに使えるとよいのですが...。
Mobirise
無料のWebサイトビルダー。cssフレームワークのBootstrapを使ったサイトを構築するためのWebサイトエディタ
