プログラミング初心者にオススメ

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

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

 

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

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

 

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

とても重宝します。

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

 

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

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

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

 

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

 

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

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

 

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

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

 

  • ジャンボトロン
  • カード
  • ページネーション
  • グリッド

 

この4つだけです。

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

めちゃめちゃ簡単です。

 

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

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

 

これをベースにして

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

 

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

 

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

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

 

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

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

 

  • ジャンボトロン
  • ナビゲーションバー
  • カルーセル
  • カード
  • グリッド
  • GoogleMapの埋め込み

 

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

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

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

 

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

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

 

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

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

 

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

 

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

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

 

みずかず

今気になっているのはYahooの「pure」

 

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

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

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

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

 

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

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

created by Rinker
¥3,520 (2021/06/11 04:39:41時点 Amazon調べ-詳細)

 

最後に

 

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

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

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

 

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

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

 

 

みずかず

Webサイト制作の依頼・相談・お問い合わせ随時お待ちしております!

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です