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

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

Bootstrap 4で始めるホームページ作成

新規作成日 2017-01-22
最終更新日

ホームページを作成する目的は、ホームページを作成し、情報を発信してホームページに人を集めることです。しかし、ホームページを作成するために必要な知識や情報が膨大なため、いつの間にか、本来の目的が情報発信ではなく技術習得になってしまうことがあります。

それを避ける方法の1つが、既に完成しているテンプレートを元にホームページを作成することです。既に完成しているテンプレートを使用すれば、ホームページのデザインに時間を使うことなく、内容の作成に注力できるので、ホームページを作成するまでの時間を短縮することができます。

ホームページは、通常、情報発信による人集めが目的であるため、既に完成している既存のテンプレートを利用して、淡々と情報を提供するページを作成していくのが正しい姿です。それだけでもかなり大変です。

ホームページの内容を増やし続けるには、いろいろなところで、時間が必要です。

  • 情報を収集、整理して、文章(記事)を作成する。
  • 理解を助ける図表を作成する。
  • 内容の理解を助ける写真を集める。

テンプレートを自作する場合は、更に、デザインの知識や、より細かいところまでのhtml, cssの知識が必要になり、それを学ぶ時間も必要です。本来の目的の「情報発信による人集め」に注力するためには、デザインやhtml,cssの習得に時間を使うより、既存のテンプレートを使って、情報発信を開始したほうが効率的であることは、簡単に理解できると思います。

もちろん、サイトデザインの研鑽を目的にしている人は除きます。その場合は、新しいデザインを実現するhtmlとcssの使い方を学び、素晴らしいデザインのホームページを作成していくことが目的になります。

既存のテンプレート群の1つに、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フレームワークなので、ちょっと困りものです。

ドキュメントを手がかりに、手探りで自分の求める結果を得るための使い方を探していく必要があります。

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

Home Editor Tools Operation TagScript HPSpace

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