HTML・CSS

Bootstrapカラム間のデフォルトのマージンを好きなサイズに調整する各種CSSをご紹介。自作のクラスを追加して、思い通りの幅を設定したり、個別のブロックだけサイズ変更したりする方法を解説しています。最後に手軽に設定できる汎用クラスもご紹介。Bootstrapカラムのガターの成り立ちが、より深く理解できます。

Bootstrapのカラム間のマージンがどのように指定されているのか、画像多めで要点を絞って解説しています。サンプルをあげて説明しているのでわかりやすいです。また縦積みになった場合の挙動も取り上げています。カスタマイズをしたい方は基礎知識としてチェックしてください。

Bootstrapのカラムについて丁寧に解説したうえで、ブレイクポイントごとにカラム数を切り替える複雑な設定をする場合に活躍してくれる、ビジュアルで理解できるジェネレーターを紹介しています。操作は簡単で即コードを出力してくれるので、Bootstrapのカラム割りはどうもよくわからないという初心者さんにこそオススメです。

Bootstrapの機能の中でも最も便利なカラム分けについて解説。よく見かける「大画面で３カラム分割、小画面で１カラムに変化」というレイアウトをサンプルとして実際に作成します。

CSSは記述する場所によって優先度が変わる？その理由と把握しておくべきポイントを図例を用いて丁寧に解説。フレームワークやテーマ改造などで複数CSSを読み込むサイト構築がスタンダートになりつつある今、基本を把握しておきましょう。

CSSで特につまづく優先順位のルールについて例を用いてソフトに解説。セレクタ・詳細度・点数制がピンとこない方はこの記事で概要とポイントがわかります。wordpressテーマやフレームワークのカスタムの為にも知っておくべき知識です

CSSを調整する際、変更したい箇所にマウスを当てるだけでスタイルがわかるChromeの便利機能（デベロッパーツール）をご紹介。確認すべきポイントや手軽に行える変更プレビューについて、画像多めで解説しています。

BootstrapのCSSをカスタマイズする方法をジャンボトロンを例に解説。変更の為には避けて通れない、CSSの優先順位についても説明しています。

Bootstrapでコンテンツを中央に配置する為のcontainer。レイアウトの際、多用するこのクラスについて、使用例や挙動などを詳しく解説しています。

サイトのメイン画像によく使われる、横幅いっぱいのメイン画像をBootstrapで簡単設置。ジャンボトロン（jumbotron）をサンプルで詳しく解説しています。

Bootstrap初心者さんは、最初の導入をネット上のBootstrapファイルを利用するCDNで簡単にすませよう！HTMLファイル一つで実践できるサンプル解説つき！連載第二弾。

CSS初心者でもレスポンシブサイトが作れる！導入がややこしいBootstrapの設定を最小の記述で終わらせて実践方式で触ってみましょう！今回は導入前の予備知識の解説です。