CSS 目次

目次 CSS

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

2023-06-01

CSS 要素「重なり、位置」

CSS

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

2023-06-01

CSS レイアウト

CSS

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

2023-06-01

CSS 画像を装飾

CSS

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

2023-06-01

CSS テキスト装飾

CSS

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

2023-06-01

CSS ボックスモデル

CSS

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