はじめに
こちらにまとめたものを動作未確認のものもあります。
またかなり情報少なめかとも思います。
情報にはやくたどりつくためには chromeをお使いのかたは
★[ctrl + F] をおしていただき、目的の情報を検索してください★
情報が見つからなかった場合すみやかにブラウザバックしてください。
目的の情報はおそらくありません。
テキスト(text)
□テキストの配置
左寄せ:
こんにちは
中央寄せ:
こんにちは
右寄せ:
こんにちは
□テキストの字体を変える
太字:
太字こんにちは
細字:
細字こんにちいは
□テキストのサイズを変える
[1,2,3,4]: 4段階 →
こんにちは
背景色を指定する(background)
□背景色の指定
青色の背景色:
width, heightを指定する(横と縦の幅)
widht, heightを親に対して何%かを指定する
※定格値でしか指定できない。たとえばw-20(20%)などは指定できない
□width
25%:
50%:
75%:
100%:
□height
25%:
50%:
75%:
100%:
margin, padding
[pもしくはm][location]-[size] location: t, b, l, r, 横方向ならx, 縦方向ならysize:
[1,2,3,4,5]は
[0.25rem, 0.5rem, 1.0rem, 1.5rem, 3.0rem]を表している
auto
※例:中央寄せ
my-0 mx-auto
フロート(float)
左寄せ:
右寄せ:
ディスプレイ(d-[ ])
表示しない:
ブロックボックス:
インラインボックス:
インラインブロックボックス:
※bootstrapでは文字サイズ変更のdisplayと混同しないように注意
Position(ポジション)
ポジションの指定のみで値は指定できないみたい。
初期値:
自由に動ける:
親を基準にどう動くか:
ボーダー(border)
□ボックスの四辺に線を引く
青色のボーダー:
細い黒のボーダー:
緑色のボーダー:
赤色のボーダー:
オレンジ色のボーダー:
水色のボーダー:
明るい色のボーダー:
黒色のボーダー:
白色のボーダー:
□各辺を指定する消したかったら 0 を指定する
□border-radius(角丸や正円を表現する)
角丸を表現する:
上の2つ:
右の2つ:
下の2つ:
左の2つ:
正円:
グリッド
https://matome.naver.jp/odai/2151575086819147301/2151576510424044103
https://matome.naver.jp/odai/2151575086819147301/2151576524424073603
table
テーブルにする:
ボーダーをつける:
ホバーで変化をつける:
交互に色を変える:
行間の狭いテーブル:
レスボンシブテーブル:
ブレークポイント
[576px, 768px, 992px, 1200px]は[sm, md, lg, xl]というキーワードに対応している
1200px以上で消したい:
992px以上で表示したい:
コツ
ものを動かすときは大きな枠組みから考える
3カラム
https://matome.naver.jp/odai/2151575086819147301/2151576392323738903
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css”
integrity=”sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy”
crossorigin=”anonymous”>
タブメニュー
こんにちは
世界
ul: nav nav-tabs
li: nav-item a: nav-link active
コンテンツ
div: tab-pane active
通常のナビゲーション
class=”container”
https://matome.naver.jp/odai/2151575086819147301/2151582735045651003
https://matome.naver.jp/odai/2151575086819147301/2151582778545852203
containerクラスはbox-containerの高さは見ていないことがわかる
グリッド(等間隔配置?)にできる
colに値を指定しなかったらいくつもかくことができる