Programing beginner by koala

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

Bootstrapの導入~使い方の基礎の基礎については、下記の記事に書きました。

【Bootstrap】の使い方①初心者向けの画像&動画付き「過保護説明」

今回はBoostrapの要である「グリッドシステム」について、説明したいと思います(^^)

これ、めちゃくちゃ便利ですっ!!!動画を見てから読むと、分かりやすいかと思います。

Contents

グリッドシステムとは?

グリッドシステムとは、レイアウトをブロックごとに配置し、無駄なくすっきりとデザインする方法のこと。

Boostrapでは、横幅を12等分してデザインしていくシステムを導入しています。

まずはスキームを覚えよう!

Container(箱)の中に、row(行)とcol(列)があるという感じです。Colについては12列と決まっています。

また、ブレークポイントごとに、Containerのサイズも決まっています。

特に、レスポンシブデザインでは、横並びや横幅に苦労しますが、横が12列と決まっているため、ブロックを配置するように、簡単にデザイン出来ちゃいます♪

上記に出てくる用語を一つづつ確認していきますね!

Container

読んで字のごとく、箱のことですね!この中に、rowとcolを組み立てていく感じです。

row

行のことです。そのまんまですね!下に並んでいきます。

colum

列のことです。Bootstrapでは12等分し、この数を指定することで、横幅を決めて行きます。

Breakpointとは?

次に、ブレークポイントについて、簡単に説明します。

ブレークポイントとは、レスポンシブデザインにおいて、画面が切り替わるポイントのこと。例えば、PC画面が、スマホ画面に切り替わるポイント。

このブレークポイントは、Bootstrapでは、すでにサイズが5段階と決まっており、下記の通りになります。

通常だと、pxで数値を細かく設定しないとですが、Boostrapでは、上記のそれぞれの画面幅になった時に、箱と幅がすでに計算された、コミコミパックになっています。

ブレークポイントの記述には、xs、sm、md、lg、xlが使用されます。

コードをこのまんま覚えてしまおう!

スキームのデザイン(Containerの中に、rowとcolがある)のイメージそのまんまのコードになります。これはもう、そういうものだと覚えてしまうといいかと思います。

上記3番目の「colの部分」の記述の説明は、下記のようになります。

通常のhtmlの書き方とちょっと異なる点と言えば、colとブレークポイントとサイズの間が、”ー(半角ハイフン)”であることでしょうか。

また、シンプル過ぎるくらいシンプルなので、逆に戸惑うかもしれません(^_^;)

marginとpaddingの記述方法

ブレークポイントと同じ要領なのですが、例えば、margin-topは「mt」、padding-bottomは「pb」など、シンプルにそれぞれの頭文字を取っただけです( ゚Д゚)

※指定なしのmarginは「m」、paddingは「p」です。

記述方法は、colと同じで、下記の通りになります!

ちなみに、このサイズというのも、Bootstrapでは決まっておりまして、0~5の5段階となっています。

0 0 0
1 1rem 約10px
2 2rem 約20px
3 3rem 約30px
4 4rem 約40px
5 5rem 約50px

サイズの記述方法

ここまで来たら、もうお気づきかもしれませんが、width(幅)とheight(高さ)も、頭文字で指定していきます。

width(幅)

こちらものサイズも、Bootstrapでは決まっておりまして、25%、50%、75%、100%、autoの5種類になります。

height(高さ)

幅と同じく、25%、50%、75%、100%、autoの5種類になります。

サイズに関しては、「Documentation」→「utilities」→「sizing」にて、記載方法が紹介されていますので、是非参考にしてみてください(^^)

色の記述方法

色の指定は、通常の記述ではなく、上記のように「primary=blue」だったり、Boostrap内での定義があります。

公式サイトの「Documentation」→「utilities」→「color」にて、カラーやデザインの見本と、記載方法が紹介されていますので、是非参考にしてみてください(^^)

まとめ

とりあえず、Bootstrapの基礎は、こちらの記事とこの記事で十分かなと思います。

レスポンシブデザインが、各段に楽になるので、これらだけでも、是非使いこなしてみてください!

以上です「!

About me

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

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

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

>>続きはこちら

今日の名言

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

 

今日の名言

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