Programing beginner by koala

【初心者必見】サイトの組み立て方Bootstrap編~画像&動画付き「過保護説明」

下記、6回に渡り、1サイトを完成する流れをご紹介しました!

☆サイト作成の大まかな流れ、それぞれの回でやることをまとめています↓
【保存版】超初心者のためのサイトの組み立て方!画像&動画付き「過保護説明」

今回は、上記のサイトにBootstrapを導入する方法をご紹介したいと思います(^^)

ちなみに、Bootstrapに関しても、下記記事にて紹介しているので、是非参考にしてみてください。

【Bootstrap】の使い方①初心者向けの画像&動画付き「過保護説明」
【Bootstrap】の使い方②便利なグリッドシステム!画像&動画付き「過保護説明」
Bootstrapって実際のサイトではどうやって使うの?的な話。画像&動画付き「過保護説明」

では早速行ってみましょう!

Contents

まずは、Bootstrapを簡単に復習!

Bootstrapとは、無料で使える「フレームワーク」です。「フレームワーク」とは、簡単に言うと、テンプレート、ひな形のようなものですね(^^)

例えば、Wordで履歴書を作ろうと思ったら、そのテンプレートが出来上がった状態で用意されていて、コピペだけで無料で使うことが出来ます。ちょっと変えたいところは変えることも可!

こんな感じで、すべてがすでに作られて「セット」になっているものを、無料で、コピペだけで使用できるサービスです。

どこに書き込むの?

基本的にはhtmlに書き込み、細かいデザインをCSSで行っていくという感じです。

だいたいこうやって使います!

Bootstrapには、サイトを構成する部品、例えば、buttonのデザインやformのデザインなど、様々なテンプレートが用意されています。

ただ、いろいろなサイトを見ていると、使用しているのは「グリッドシステム」の部分のようですね。

特に、最近は、スマホ検索が非常に多くなってきたので、レスポンシブデザインは必須です。そのレスポンシブを、超・簡単な記述で実現したのがBootstrap!!!

これはやっぱり神的に便利な部分だと思います。

早速、サイトに書き込んでいきます!

というわけで、今回のサイトに使用する部分も、やはり「グリッドシステム」の部分になります!

また、Bootstrap導入の部分はブログ記事では割愛しますので、上記ブログ、もしくは動画の方をご覧くださいm(_ _)m

どこにBootstrapを導入するか?

Bootstrapを導入する上で、考えないといけないのは「どこに導入するか?」という部分かなと思います。

今のところ、私の結論としては、下記の2つの条件をクリアあるところかなと考えています。

●横並び要素があるところ
●画面サイズによって表示が変わるところ

これ以外のところに、やたらとBootstrapを使っても、逆にめんどくさいなーと言った感じです(^_^;)

ですので、今回のサイトですと、使えるところは、下記の部分と、

リストが4つ横並びになっている部分かなと思います。

ただ、この部分に関しては、レスポンシブの際にdisplay: none;になりますので、表示が変わるわけではなく、どちらでもいいのかな?といった感じもあります(^_^;)

4つ並びの部分のコードはこちらです!

※上記の3つ並びの部分に関しては、下記のブログでご紹介しているので、参考にしてみてくださいm(_ _)m

Bootstrapって実際のサイトではどうやって使うの?的な話。画像&動画付き「過保護説明」

その他覚えておくとちょっぴり便利なコード2つ!

私が上記のサイトにて、Bootstrapを使用したのは、上記の2つの箇所だけですが、覚えておくと便利なコードもシェアしておきますね(^^)

2つの要素を両端に横並びする

例えば、上記のようにfooterの部分において、2つの要素を、両端に横並びにしたい場合に便利です!

その際には、下記の記述を加えます。

実際のコードにおいては、下記のように記入します。

ちなみに、この部分には、アイコンを回り込ませたりと、他の位置指定などもしていますので、その状態でBootstrapを導入すると、若干ズレます(^_^;)

微調整をお願い致しますm(_ _)m


※クリックすると大きくなります。

※この部分は「Bootstrap3」では、col-md-offset-6でしたが、「Bootstrap4」にて記述方法が上記のように変更になっているので気を付けてください!

画面幅いっぱいに広げる

Bootstrapでは、containerのサイズがすでに決まっているということがありました。

ですので、この回のサイトのように、横幅いっぱいを使っているヘッダーの部分において、上記をそのまま利用しても、下記のように収まらないといったことがあります。
※青い部分がcontainerのサイズになります。


※クリックすると大きくなります。

そんなcontainerを横幅いっぱいに広げるのが、fluidです。

使い方は簡単で、containerの後ろにfluidを追加するだけですね!

実際の記述は下記のようになります。

横幅いっぱいに広がりました(^o^)/
※分かりやすく、bg-primaryで背景色を追加しています。


※クリックすると大きくなります。

今回思ったこと

グリッドシステムは非常に便利ですが、サイトを作る際に、「この場所はBootstrapを使おう!」と決めてから始めるといいですね!

やはり、floatdisplay: flex;とは異なるので、後から入れようと思うと、デザインに若干のズレが生じてしまい、すべてやり直し。。という事態になりかねません。

今のところ、私がこれからも利用したい!と思うのは、やはりグリッドシステムの部分ですが、他の部分も少しづつ取り入れて行けたらなーと思います(^^)

以上です!

人気記事【保存版】超初心者のためのWordPressテーマ自作方法!画像&動画付き「過保護解説」

About me

IT業界6年目にして、プログラミングの勉強を始めたkoalaです。

プログラミング用語が難しすぎる!ということで、初心者が初心者に解説するという型破りなブログを開設してみました。

専門用語少な目、分かりやすくをモットーにしています。

>>続きはこちら

今日の名言

クリックすると、あなたの心に響く誰かの名言が表示されます♪

 

今日の名言

 
※あなたの名言募集しています!詳細はこちら