Webの勉強をしよう！Web制作の技術やサービス情報を発信します。
投稿日：
メインビジュアルを画面幅すべてを使って表示させたい時があります。
Bootstrap4では、以下のように簡単に実現可能です。
[1行目]
画面幅全てを使うので「container」では無く「container-fluid」クラスを設定します。
[3行目]
colの隙間を無くすため「no-gutters」クラスを設定します。
※CSSを参照してください。
[4行目]
画像をレスポンシブにするために「img-fluid」クラスを設定します。
「col」の余計な空白を取り除くためのクラス「no-gutters」を作成します。
「no-gutters」についてはこちらで説明しています。
Bootstrap4は、色々なレイアウトに対応できますので、是非習得しておきたいですね。
コード変更や、大きな画面でみたい場合はこちらから。
執筆者：sasaki
関連記事
Bootstrap4 ブロック要素の左寄せ・右寄せ・中央寄せ（センタリング）
Bootstrap4では、ブロック要素の左寄せ・右寄せ・中央寄せができるクラスが用意されています。 そのクラスを追加することで、ブロック要素を寄せることができます。 サンプルも作りました。 ブロック要 …
Bootstrap4 上部固定メニューヘッダを作るサンプル（fixed-top）
スマホ用のサイトを作成するときに固定メニューはよく使いますよね。 Bootstrap4でもクラスを追加するだけで固定メニューを作ることができます。 サンプルも作ってますので参考になると嬉しいです。 H …
Bootstrap4 colの隙間（padding、margin）を削除する（サンプル付き）
Bootstrap4でデザインを忠実に再現したい時に、colの隙間（padding）が邪魔なときがあります。 この邪魔な隙間を無くしてしまおう！というのが今回の趣旨です。 サンプルも作りました。 CS …
Bootstrap4 PCでは2カラムで、スマホ画面では1カラム（サンプル）
Bootstrap4で画面サイズによってレイアウトのカラム数を変えたい場合のサンプルを作成しました。 画面サイズに対応したクラスを追加してあげるだけで、簡単に実現可能です。 サンプルを作成しましたので …
Bootstrap4 画面幅一覧表 Bootstrap4のブレークポイントを覚えられないのでメモしておきます。 xsやxlはあまり使わない気がしますね。 実際はPCとモバイルの2種類しか作らない人が多 …
2019/02/11
2019/02/11
Python3 for文で添え字（index）を取得する方法（enumerate関数）
2018/11/10
gulp.js コンパイル時にエラーになっても中断させない（gulp-plumber）
2018/11/04
JavaScript 一定時間後に処理を実行させるサンプル（setTimeout）
2018/11/03
JavaScript クリックイベントをJavaScriptで実現するサンプル
2018/10/21
2018/10/13
Bootstrap4 上部固定メニューヘッダを作るサンプル（fixed-top）
