Bootstrap4でサンプルサイトを作ってみた

どうも。みずかず(@mizukazu_1)です。

今回は、タイトルの通りなのですが

CSSフレームワークの「Bootstrap」を使ってサンプルサイトを作ってみましたのでその紹介になります。

自分で1からCSSを書いていくより断然早くWebサイトを制作できるので

とても重宝します。

まして、1人でやっているのでスピードと効率は超大事です。笑

2種類のサイトを作りましたので両方紹介します。

サーバーにはまだアップしていないのでスクショになってしまうのですがお許しください。。。笑

近日中にサーバーにあげる予定です。

1つ目：写真などのポートフォリオサイトをイメージ

こうやって見るとかなりシンプルな作りだな～～って思います。笑

しかもよく見ると左下の画像のサイズが少し違う、、、後で修正しますｗ

こちらのサイトなのですがBootstrap公式サイトのアルバムというデモサイトを参考にしました。

機能に関しても少なく、ほんの数種類のみです。

この4つだけです。

すべてBootstrapのクラスだけで実現できます。

めちゃめちゃ簡単です。

グリッドの考え方が最初は少しつまずくかもしれませんが

慣れてくるとレイアウトがかなり楽に出来るな～と実感できます。

これをベースにして

もう少し凝ったサイトを作っていこうと思います。

2つ目：カフェをイメージしたサンプルサイト

かなり見づらくなってしまい申し訳ありません。

早急にサーバーにあげますので。。。

こちらのサイトはカフェをイメージして作りました。

こっちの方が機能は多いのですが、基本的にそんなに難しいことはしていません。

ざっとこんな感じになります。

この中だとGoogleMapの埋め込みに少し手間がかかりました。

が、調べてみると意外と簡単で拍子抜けしたというかなんというか。笑

アレンジの仕方によってはカフェ以外にも

飲食店のサイトなどに使っていけると思うのでそっちも考えてみようと思います。

あと、カルーセルをそのままヘッダーに使用するバージョンというのも

良いと思うので作成できましたらまたブログの方で紹介します。

Bootstrapはかなりの時短に繋がる

今回は、「Bootstrap」を使用してサンプルサイトを作ってみました。

CSSフレームワークというのは他にも様々な種類があります。

フレームワークを使用することで制作スピードを格段にあげられるのでかなりオススメです。

僕はCSS初心者の方にもフレームワークはオススメだと思います。

もちろん、基本的な事は知っておかなければなりませんが。

って言ってる僕もまだまだなので偉そうなことは言えないんですけどねｗ

ちなみに僕が使っているBootstrapの本がこちらです。

主要な機能のクラス名はもちろん載っていますし、何より本の最後に簡易リファレンスがついてるのが助かります。

Bootstrap4ファーストガイド―CSS設計の手間を大幅に削減!

created by Rinker

• Amazon
• 楽天市場

最後に

フレームワークって偉大だなと改めて感じました。

先人達の知識や技術というのがぎゅっと詰まっているので

触れているだけでかなり勉強になります。

僕も自分のフレームワークを作りたいな～～なんて考えています。

そのためにこれから色々なフレームワークを使用していこうと思います。