【Bootstrap4】画面サイズによってスタイルを変更する

Bootstrapにより画面レイアウトが変わったら、適用するCSSも変更したい場面があるので、その方法です。 CSS @media only screen and (max-width: 991px) { /* 幅991px以下 */ body{ background: #0FF; } } @media only screen and (max-width: 766px) { /* 幅766px以下 */ body{ background: #F0F; } } @media only screen and (max-width: 575px) { /* 幅575px以下 */ body{ background: #FF0; } } media only screen … はメディアクエリと言ってCSS3で追加になった記述方法で、デバイスにあった書き分けを行うことができる。 ここでは max-width を指定して、それぞれの画面幅で専用のCSSをオーバーライドしている。 画面幅が1024pxのとき 画面幅が870pxのとき 画面幅が625pxのとき 画面幅が470pxのとき

続きを読む

【Bootstrap4】初期設定と簡単な例

ライブラリの配置 以下のサイトのDownloadhttps://getbootstrap.com/ ダウンロードページの「Compiled CSS and JS」をダウンロードする zipファイルを解凍したらjs、cssのディレクトリをプロジェクトのpublicディレクトリの任意の場所へ配置 (今回はpublic/bootstrap/ 以下に配置) ヘッダー <!-- Viewportの指定 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrapのcss, js読み込み --> <link href="/bootstrap/css/style.css" rel="stylesheet" type="text/css"></link> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"></link> <script src="/bootstrap/js/bootstrap.min.js"></script&…

続きを読む

もっと見る

スポンサーリンク