CSSのプロパティー
10/3 2023
デザイン演習Ⅰ・Ⅱ
文字の装飾
| プロパティー名 | 説明 | 指定方法 | 説明 |
|---|---|---|---|
| font-size | フォントの大きさを変える | 数値 | 入力した数値に単位をつける。主にpx |
| fomt-family | フォントの変更をする。 | フォント名 | フォントの名前を記述。日本語名やフォント名にスペースが含まれる場合は’や”で囲う。 |
| font-weight | フォントの太さを変える | 数値 | 1～1000の任意の数字 |
| line-height | 行の高さの変更 | normal | ブラウザーが判断した行の高さで表示 |
| 数値（単位なし） | フォントサイズとの比率で指定 | ||
| 数値（単位あり） | 単位で数値を指定。 | ||
| text-align | 文章をそろえる | left | 左揃え |
| right | 右揃え | ||
| center | 中央揃え | ||
| justify | 両端揃え | ||
| text-decoration | テキストに飾りをつける | none | 飾りなし |
| underline | 下線をつける | ||
| overline | 上線をつける | ||
| line-throgh | 打消し線 | ||
| blink | 点滅 | ||
| letter-spacing | 文字の間隔を指定 | 数値 | 入力した数値に単位をつける。 |
| color | 文字色の変更 | カラーコード | #から始まる3桁か6桁のカラーコードを指定。 |
| 色の名前 | redやblueなどの決められた色の名前を指定 | ||
| RGB値 | RGBの順で書き込む。,で区切って指定。 | ||
背景関連
| プロパティー名 | 説明 | 指定方法 | 説明 | background-color | 背景色の変更 | カラーコード | #から始まる3桁か6桁のカラーコードを指定。 |
|---|---|---|---|
| 色の名前 | redやblueなどの決められた色の名前を指定 | ||
| RGB値 | RGBの順で書き込む。,で区切って指定 | ||
| background-image | 背景に画像を設置 | url | 画像ファイルの指定 |
| none | 背景画像を表示しない | ||
| background-repeat | 背景画像の繰り返し表示。 | repeats | 縦横に繰り返して表示 |
| repeat-x | 横に繰り返して表示 | ||
| repeat-Y | 縦に繰り返して表示 | ||
| no-repeat | 繰り返さない | ||
| background-size | 背景画像の大きさを指定 | 数値 | 単位で数値を指定。 |
| background-position | 表示する位置を指定 | 数値 | 単位で数値を指定。 |
高さ・幅
| プロパティー名 | 説明 | 指定方法 | 方法 |
|---|---|---|---|
| width | 幅のサイズを指定 | 数値 | 単位で数値を指定。 |
| auto | 関連するプロパティーの値によって自動設定 | ||
| height | 高さのサイズを指定 | 数値 | 単位で数値を指定。 |
| auto | 関連するプロパティーの値によって自動設定 |
余白
| プロパティー名 | 説明 | 指定方法 | 説明 |
|---|---|---|---|
| margin | 要素の外側の余白を指定 | 数値 | 単位で数値を指定。 |
| auto | 関連するプロパティーの値によって自動設定 | ||
| margin-top | 要素の外側・上部分の余白を指定 | 数値 | 単位で数値を指定。 |
| auto | 関連するプロパティーの値によって自動設定 | ||
| margin-bottom | 要素の外側・下部分の余白を指定 | 数値 | 単位で数値を指定。 |
| auto | 関連するプロパティーの値によって自動設定 | ||
| margin-left | 要素の外側・左部分の余白を指定 | 数値 | 単位で数値を指定。 |
| auto | 関連するプロパティーの値によって自動設定 | ||
| margin-right | 要素の外側・右部分の余白を指定 | 数値 | 単位で数値を指定。 |
| auto | 関連するプロパティーの値によって自動設定 | ||
| padding | 要素の内側の余白を指定 | 数値 | 単位で数値を指定。 |
| auto | 関連するプロパティーの値によって自動設定 | ||
| padding-top | 要素の内側・上部分の余白を指定 | 数値 | 単位で数値を指定。 |
| auto | 関連するプロパティーの値によって自動設定 | ||
| padding-bottom | 要素の内側・下部分の余白を指定 | 数値 | 単位で数値を指定。 |
| auto | 関連するプロパティーの値によって自動設定 | ||
| padding-left | 要素の内側・左部分の余白を指定 | 数値 | 単位で数値を指定。 |
| auto | 関連するプロパティーの値によって自動設定 | ||
| padding-right | 要素の内側・右部分の余白を指定 | 数値 | 単位で数値を指定。 |
| auto | 関連するプロパティーの値によって自動設定 |
margin・paddingの書き方
| 書き方 | 例 |
|---|---|
| margin: 4辺; | margin: 10px; |
| margin: 上下 左右; | margin: 10px 20px; |
| margin: 上 左右 下; | margin: 10px 20px 30px; |
| margin: 上 右 下 左; | margin: 10px 20px 30px 40px; |
線
| プロパティー名 | 用途 | 指定方法 | 説明 |
|---|---|---|---|
| border-width | 線の太さを指定 | 数値 | 数値に単位をつけて指定 |
| border-style | 線の種類を指定 | none | 線を非表示 |
| solid | 1本の実線 | ||
| double | 2本の実線 | ||
| dashed | 破線 | ||
| dotted | 点線 | ||
| groove | 立体的な谷型の線 | ||
| ridge | 立体的な山形の線 | ||
| inset | 囲まれた部分が凹んで見える立体的な線 | ||
| outset | 囲まれた部分が浮き上がって見える立体的な線 | ||
| border-color | 背景色の変更 | カラーコード | #から始まる3桁か6桁のカラーコードを指定。 |
| 色の名前 | redやblueなどの決められた色の名前を指定 | ||
| border | 線に関するプロパティーをまとめて指定 | プロパティー | border-width,border-style,border-colorの値を指定 |
| border-top | 要素上部の線に関するプロパティーをまとめて指定 | プロパティー | border-width,border-style,border-colorの値を指定 |
| border-bottom | 要素下部の線に関するプロパティーをまとめて指定 | プロパティー | border-width,border-style,border-colorの値を指定 |
| border-left | 要素左の線に関するプロパティーをまとめて指定 | プロパティー | border-width,border-style,border-colorの値を指定 |
| border-right | 要素右の線に関するプロパティーをまとめて指定 | プロパティー | border-width,border-style,border-colorの値を指定 |
リスト
| プロパティー名 | 用途 | 指定方法 | 説明 |
|---|---|---|---|
| list-style-type | リストマーカーの種類を指定 | none | リストマーカーを非表示 |
| disc | 黒丸 | ||
| circle | 白丸 | ||
| square | 黒四角 | ||
| decimal | 数字 | ||
| decimal-leading-zero | 0を入れた数字（01、02など...） | ||
| lower-roman | 小文字のローマ数字 | ||
| upper-roman | 大文字のローマ数字 | ||
| cjk-ideographic | 漢数字 | ||
| hiragana | ひらがな | ||
| katakana | カタカナ | ||
| hiragana-iroha | ひらがなのいろは | ||
| katakana-iroha | カタカナのイロハ | ||
| lower-alpha,lower-latin | 小文字のアルファベット | ||
| upper-alpha,upper-latin | 大文字のアルファベット | ||
| lower-greek | 小文字の古典的なギリシャ文字 | ||
| hebrew | ヘブライ数字 | ||
| armenian | アルメニア数字 | ||
| georgian | グルシア数字 | ||
| list-style-position | リストマーカーの表示位置を指定 | outside | ボックスの外側に表示 |
| inside | ボックスの内側に表示 | ||
| list-style-image | リストマーカーに使う画像を指定 | url | 画像ファイルのパス |
| none | 画像を表示しない | ||
| list-style | リストマーカーに関するプロパティーをまとめて指定 | プロパティー | list-style-type,list-style-position,list-style-imageの値を指定 |
レイアウト組み
| プロパティー | 用途 | 値 | 説明 |
|---|---|---|---|
| display | flexboxを使って子要素を並べる | flex | - |
| flex-direction | 子要素の並ぶ向きを指定 | row | 子要素を左から右に配置 |
| row-reverse | 子要素を右から左に配置 | ||
| column | 子要素を上から下に配置 | ||
| column-reverse | 子要素を下から上に配置 | ||
| flex-wrap | 子要素の折り返し方法を指定 | nowrap | 子要素を折り返さず、1行に並べる |
| wrap | 子要素を折り返し、複数行に上から下に並べる | ||
| wrap-reverse | 子要素を折り返し、複数行に下から上に並べる | ||
| justify-content | 水平方向の揃えを指定 | flex-start | 行の開始位置から配置。左揃え |
| flex-end | 行末から配置。右揃え | ||
| center | 中央揃え | ||
| space-between | 最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置。 | ||
| space-around | 両端の子要素も含め、均等に間隔をあけて配置。 | ||
| align-items | 垂直方向揃えを指定 | stretch | 親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置 | flex-start | 行の開始位置から配置。左揃え |
| flex-end | 行末から配置。右揃え | ||
| center | 中央揃え | ||
| baseline | ベースラインで揃える | ||
| align-content | 複数行にした時の揃えを指定 | stretch | 親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置 | flex-start | 行の開始位置から配置。左揃え |
| flex-end | 行末から配置。右揃え | ||
| space-between | 最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置。 | ||
| space-around | 両端の子要素も含め、均等に間隔をあけて配置。 |
レイアウト組み（CSSグリッド）
| プロパティー名 | 用途 | 値 | 説明 |
|---|---|---|---|
| display | CSSグリッドを使って子要素を並べる | grid | |
| grid-temolate-columns | 子要素の幅を指定 | 数値 | 数値に単位をつけて指定 |
| grid-temolate-rows | 子要素の高さを指定 | 数値 | 数値に単位をつけて指定 |
| grid-gap | 子要素同士の余白を指定 | 数値 | 数値に単位をつけて指定 |