Programing beginner by koala

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

Bootstrapについては、下記に2記事で、基礎の基礎を説明してみました。

【Bootstrap】の使い方①初心者向けの画像&動画付き「過保護説明」
【Bootstrap】の使い方②便利なグリッドシステム!画像&動画付き「過保護説明」

私も早速使ってみよう!と思ったところ。。。

「で、実際のサイトではどうやって使うの?」という疑問が湧き、悩みました(-_-)

いろいろ調べて、なんとなく分かってきたので、備忘録としてまとめておきますね(^^)

一応、文章でも書きますが、これは断然、動画の方が分かりやすいかなーと思います!

Contents

結局どうやって使うの?

結論としては、使い方②にあるように「グリッドシステム」というのを大いに活用するのがいいようです!っていうか、みんなそのために使っているようですね。(←今さらながらっ!笑)

なので、ここでは、グリッドシステムの、実際のサイトへの取り入れ方について説明していきます。

グリッドシステムのおさらい!

まずは、グリッドシステムを軽くおさらいしてみます(^^)

下記の図のように、「大きな箱(container)」の中に、「行(row)」と「列(colum)」があるという考え方でした。

そして、コードの書き方も、上記のイメージ通りで、

containerの中に、rowと、columを書いていくということでしたね!そのイメージで進めていきましょう(^o^)/

まずは、Containerを決めます!!

私の練習サイトで説明していきたいと思います!まずは、サイトの中で「Container」を決めます。どこをグリッドシステムでデザインしていくか?っていうことですね。

今回は、この部分を「container」で包みたいと思います。

コードを確認してみます!

上記の部分のコードは下記の通りになっています。それを、上記の3点セットで囲んであげます!

黄色い部分が、Container、row、columの箇所になります。

今のcolumの指定としては、「画面サイズがMediumの時に4列にする」となっています。

早速レスポンシブにしてみよう!

では、画面サイズが、Xtra-smallになった時には、列を12列(1行づつ)にするとしてみましょう!

黄色い部分に「col-xs-12」を追加しました!そうするとどうなるかというと、下記のように1列(横並びではない状態)になりました(^o^)

Bootstrapでやること、CSSでやること!

上記のように、ものすごく簡単にレスポンシブが出来てしまうのですが、初心者の私がちょっと悩んだのは、どこをBoostrapで設計して、どこをCSSで設計するか?という部分でした。

まぁ、頑張れば、Bootstrapですべて完結っていうのも出来るんでしょうけど、「これからはBootstrap一筋でサイト作成!」っていうのでなければ、とりあえずBootstrapでグリッドシステムをいじれるようになりつつ、CSSで自由にデザインっていうのがいいかな?と思いました。

例えば、色でも「青=primary」などを徹底的に覚えても、Bootstrap以外では使えないですからね(^_^;)

というわけで、私が思う、Bootstrapでやること、CSSでやることをまとめてみました!

Boostrapでやること

まずBootstrapでやることですが、皆さんが言うように、とりあえずは「グリッドシステム」だけでいいかなーという気がしないでもないです。

つまり、containerを設定して、その中の配置をどうするか?っていう、フレームのデザインだけっていう感じですね!

で、もちろんのこと、グリッドシステムだけで、レスポンシブも可能なので、最初はこれだけで十分ではないかと思うのです。

CSSでやること

その他、細かいデザインですね!例えば、文字を「中央寄せ」するとか、文字の色とか大きさとか、余白とか、その他もろもろですね。

上記の私の練習サイトでは、まさに、文字の中央寄せや、padding、margin、文字の色や大きさは、CSSにてデザインしています!

結論!

やっぱり結論としては、Bootstrapを使いこなすには、ある程度のhtmlとCSSの知識が必要だと感じました。

でもそれが分かると、Bootstrapを使ってのレスポンシブデザインは「なんて簡単なんだ!」と思えます。

便利はものは、基礎が出来てから使うに限りますね(-_-)

以上です!

About me

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

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

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

>>続きはこちら

今日の名言

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

 

今日の名言

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