Bootstrapを極める！Bootstrap4の基本(5) 〜display/position系のクラス名〜 【入門・初心者向け】
【contents】
■Bootstrapを極める！ Bootstrap4の基本(1) 〜準備編〜 【入門・初心者向け】
■Bootstrapを極める！Bootstrap4の基本(2) 〜グリッドシステムと基本ルール〜 【入門・初心者向け】
■Bootstrapを極める！Bootstrap4の基本(3) 〜グリッドシステム系のクラス名〜 【入門・初心者向け】
■Bootstrapを極める！Bootstrap4の基本(4) 〜サイズ・余白系のクラス名〜 【入門・初心者向け】
■Bootstrapを極める！Bootstrap4の基本(5) 〜display/position系のクラス名〜 【入門・初心者向け】
今回はBootstrap4のdisplay系classと、justify content、positionなどのコンテンツを位置調整するclassについて解説します！
◆displayプロパティ系class
class名 プロパティと値 prefix
---------------+---------------------------------+-------------------------
d-none display: none !important; d-{prefix}-none
d-inline display: inline !important; d-{prefix}-inline
d-inline-block display: inline-block !important; d-{prefix}-block
d-block display: block !important; d-{prefix}-block
d-table display: table !important; d-{prefix}-table
d-table-row display: table-row !important; d-{prefix}-table-row
d-table-cell display: table-cell !important; d-{prefix}-table-cell
d-flex display: -webkit-box !important; d-{prefix}-flex
display: -ms-flexbox !important;
display: flex !important;
d-inline-flex display: -webkit-inline-box !important; d-{prefix}-inline-flex
display: -ms-inline-flexbox !important;
display: inline-flex !important;
・スマートフォン幅の時に改行する例
以下の例では、d-inlineとd-sm-noneクラスを使用し、小さい画面サイズでのみ <br> タグが適用されるようになっています。
ブレークポイント sm 以上では <br> タグを隠す (d-sm-none) ことで、スマートフォン表示でのみ改行が反映されます。
【コード例】
<p>
スマートフォン幅の時に改行する例です。
<br class="d-inline d-sm-none" />
スマホの画面サイズの時は任意の位置で改行します。
</p>
◆flex-direction系class（配置する方向）
【記述例】 ＊Flexコンテナー（親要素）に記述
<div class="container flex-row"></div>class名 プロパティと値 flexアイテムの配置
----------------------+--------------------------------+------------------
flex-row flex-direction: row; 左から右へ
flex-row-reverse flex-direction: row-reverse; 右から左へ
flex-column flex-direction: column; 上から下へ
flex-column-reverse flex-direction: column-reverse; 下から上へ
◆flex-wrap系class（子要素の折返し）
【記述例】 ＊Flexコンテナー（親要素）に記述
<div class="container flex-wrap"></div>class名 プロパティと値 flexアイテムの配置
----------------------+--------------------------------+------------------flex-nowrap flex-wrap: nowrap; 改行しない
flex-wrap flex-wrap :wrap; 改行する
flex-wrap-reverse flex-wrap: wrap-reverse; 下から上に改行
◆justify content系class（横の配置）
【記述例】 ＊Flexコンテナー（親要素）に記述
<div class="container justify-content-center"></div>class名 プロパティと値 意味
-------------------------+----------------------------+---------------------
justify-content-start justify-content: flex-start; アイテムの左寄せ
justify-content-end justify-content: flex-end; アイテムの右寄せ
justify-content-center justify-content: center; アイテムの
左右中央揃え
justify-content-between justify-content: space-between; アイテムを
両端から均等に並べる
justify-content-around justify-content: space-around; アイテムを等間隔に並べる
◆align-items（縦の配置）
【記述例】 ＊Flexコンテナー（親要素）に記述
<div class="container align-items-center"></div>
class名 プロパティと値 意味
-------------------------+----------------------------+---------------------
align-items-stretch align-items: stretch; 隙間なく配置
align-items-start align-items: flex-start; 上寄せ
align-items-end align-items: flex-end; 下寄せ
align-items-center align-items: center; 中央寄せ
align-items-baseline align-items: baseline; ベースライン揃え
◆align-content（複数行にした時の配置）
【記述例】 ＊Flexコンテナー（親要素）に記述
<div class="container align-content-center"></div>
class名 プロパティと値 意味
-------------------------+----------------------------+---------------------
align-content-stretch align-content: stretch; 隙間なく配置
align-content-start align-content: flex-start; 上寄せ
align-content-end align-content: flex-end; 下寄せ
align-content-center align-content: flex-center; 中央寄せ
align-content-between align-content: space-between; 均等割り付け
align-content-around align-content: space-around; 等間隔の余白
◆positionプロパティ系class
class名 プロパティと値
---------------------+-------------------------------------------
position-static position: static !important;
position-relative position: relative !important;
position-absolute position: absolute !important;
position-fixed position: fixed !important;
position-sticky position: -webkit-sticky !important;
position: sticky !important;
◆Z-index 予約値
Bootstrapでは z-index を特定のコンポーネントのために予約しています。
また、 1,2,3 は要素の状態(ホバー、アクティブ、フォーカス)の表示カスタマイズのために用いられています。
現在、Bootstarpが使用している z-index は次の通りです。
Z-index 使用目的(コンポーネント)
---------+------------------------------------------------------------------
1,2,3 要素状態(ホバー、アクティブ、フォーカス)の表示効果用
1000 ドロップダウン
1020 上端張り付き (ナビゲーションバー)
1030 上端固定 / 下端固定 (ナビゲーションバー)
1040 バックドロップ (モーダル背景)
1050 モーダル
1060 ポップオーバー
1070 ツールチップ
◆表示・非表示系class
class名 意味
------------------+--------------------------------------------------------
.visible-{prefix} ブロックレベルもしくはインライン要素として
表示させます
.hidden-{prefix} 要素を非表示にします
今回はここまでです！次回はその他のクラスについても紹介します。
Twitterではブログに書いていないこともつぶやいているので、ぜひフォローしてください。
https://twitter.com/HAMA3san
ストリートアカデミーで毎月講座を開催中。
https://www.street-academy.com/steachers/198346
webデザイナーもくもく制作サロンへの招待について
https://note.mu/hamasan918/n/ne4d98f9db9ec
もくもく制作サロンを開講しました。
サロンでは勉強会を開催して質問を受け付けています。
月額500円となります。
#プログラミング #Webデザイン #JavaScript初心者 #Vue_js
#app
この記事が気に入ったらサポートをしてみませんか？