CSS (Cascading Style Sheets) CSS ボックスモデル CSS テキスト装飾 CSS 画像を装飾 CSS レイアウト CSS 要素「重なり、位置」

position 要素位置「position」 1. fixed：表示の固定 2. 位置の指定 top：上から bottom：下から left：左から right：右から 位置指定の基準 static：指定なし。デフォルト値 relative：表示位置左上を基準にして位置指定(相対位置) absolute：親要素(rela…

レイアウト 要素を横に並べる 1. display: inline、display: inlinne-block 2. float 3. display: flex 「flex-box」利用 flex-box 親要素に指定 「display: flex;」した親要素で囲む ※インライン要素：display: inline-flex; 方向「flex-direction」 横並び…

画像の表示方法 トリミング「object-fit」 ボックスの角丸 画像の表示方法 トリミング「object-fit」 画像サイズ：100*100 object-fit: contain; ←縦横比を維持 background: green; ←背景色 width: 200px; ←トリミング height: 150px; ←トリミング ボックス…

テキスト装飾 文字装飾 color：文字の色 font-size：文字サイズ font-weight：文字の太さ normal：普通 bold：太い lighter：親要素より細い bolder：親要素より太い 100~900の数値 ※400が基準 text-decoration：文字の装飾 一括指定 none：装飾なし underli…

操作 プロパティ 幅・高さ「width・height」 単位 最大値・最小値「min-height・max-height」「min-width・max-width」 はみ出し要素の表示方法「overflow」 要素の境界線「border」 まとめて設定 線のスタイル 線の太さ 種類のborderプロパティ 位置のborde…

CSS CSS 記述方法 1. インラインstyle 表示イメージ 2. styleタグに記述 表示イメージ 3. CSSファイルを読込む 表示イメージ セレクタ 要素セレクタ classセレクタ 表示イメージ idセレクタ 表示イメージ 全称セレクタ 複数のセレクタ 子セレクタ・子孫セレ…