枠線に関するCSSプロパティについて紹介します。
①border
borderは、ボーダーの太さ・スタイル・色をまとめて指定するプロパティです。
border-width、border-style、border-colorの３つの内、設定したいプロパティの値を指定します。
下の例だと、「5px」で「#000000色」の「1本線」を引く、という意味になります。

例

border: 5px[…]

[…]

位置に関するCSSプロパティ－position
positionは、要素の位置を指定するプロパティです。
よく使うのはrelativeとabsoluteという値で、上下左右の方向からの距離をセットで指定します。
① relative
relativeを指定すると、その要素の本来の表示位置を基準にして位置が決まります。

relativeの例

position: relative;
top[…]

余白に関するCSSプロパティ
①margin
marginはborderの外側の余白を指定するプロパティです。
marginは隣り合う要素との距離を調整して、レイアウトを整えることができます。

例

margin: 100px;

②padding
paddingはborderの内側の余白を指定するプロパティです。
paddingは要素の中の余白を広げて、要素の見え方を整[…]

widthとheight
widthは要素の幅、heightは要素の高さを指定するプロパティです。
単位は「px」や「%」などがあります。「%」で指定した場合、親要素に対する割合として計算されて幅や高さが決まります。
▼表示例
height: 300px;
プロパティの値

プロパティ名

値

説明

height

auto

自動 （初期値）[…]

横幅と高さに関するCSSプロパティには以下があります。
widthとheight
widthは要素の幅、heightは要素の高さを指定するプロパティです。
単位は「px」や「%」などがあります。「%」で指定した場合、親要素に対する割合として計算されて幅や高さが決まります。
▼表示例
width: 80%;
プロパティの値

プロパティ名

値

説明

width[…]

background-attachmentは背景画像の固定表示を指定するプロパティです。
※ウィンドウに対する固定表示となるので、注意が必要です。
このスタイルを設定すると、背景画像がスクロールされなくなります。
▼記述例
background-attachment: fixed;
プロパティの値

プロパティ名

値

説明

background-attachm[…]

background-positionは背景画像の表示位置を指定するプロパティです。
▼記述例
background-position: right top;
プロパティの値

プロパティ名

値

説明[…]

background-repeatは背景画像の並び方を指定するプロパティです。
▼記述例
background-repeat: repeat-y;
プロパティの値

プロパティ名

値

説明[…]

background-imageは背景画像を指定するプロパティです。
▼記述例
background-image: url(back.gif);
プロパティの値

プロパティ名[…]

background-colorは背景色を指定するプロパティです。
▼記述例はこちら
background-color: #ffffff;
このコードを指定することで、背景が白になります。
 
プロパティの値[…]

背景に関するCSSプロパティ

プロパティ名

値

説明

background

background-colorの値

背景色を指定

background-imageの値

背景画像を指定

background-repeatの値

背景画像の並び方を指定

backgroun[…]

テキストに関するCSSプロパティは以下2つをご紹介します。
line-height
text-align
－－－－－－－－－－－－－－－－－－－－－
line-heightは、行間を設定するプロパティです。
例えば「1.5」と指定すると、フォントサイズにその数値を掛けた値が行の高さになります。
この場合、「150%」や「1.5em」と書くこともできます。
text-alignは、行の揃え位置を指定するプロパティで[…]

text-decorationは、テキストを装飾するプロパティです。
下線や打ち消し線などをつけることができます。

1
2
3
4

text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;[…]

text-align
水平方向の揃え方を指定するプロパティです。
このプロパティをブロックレベル要素（または表のセル）に指定すると、その中に含まれるインライン要素（テキストや画像等）を左 中央 右などに揃えることができます。
text-align: center;
プロパティの値

プロパティ名

値

説明

text-align

left

左寄[…]

font-style
フォントのスタイル（イタリック体と斜体）を指定するプロパティです。
例）
font-style: italic;
font-style プロパティは、以下の一覧から選択した単一のキーワードで指定し、キーワードが oblique であれば任意で角度を含めることができます。[…]

[…]

font-family
font-familyは、CSSで設定する「文字種類の指定ができる」プロパティになります。 代表的なフォントファミリーは、arial、Times New Roman、メイリオ、游ゴシック、ヒラギノ角ゴシックなどになります。
ユーザーの環境に合わせて、先に書いた順にフォントが適用されます。

1
2

fon[…]

今回は、「font-size」についてお話します。
font-sizeは、文字の大きさを指定するプロパティです。
単位は「px」や「%」、「em」などがあります。

プロパティ名

値

説明

font-size

長さ、%

数値+単位（em 等）またはパーセント

（絶対サイズ）

xx-small

超極小のサイズ[…]

今回は、前回のまとめ記事からプロパティを1つずつ紹介していきたいと思います！

まず今回紹介するのはこちら↓
「color」 
colorは、文字の色を指定するプロパティです。
色の値については、「red」などの色の名前やrgb関数、「#000000」のような16進数のカラーコードで指定しますが、HTMLと同じ指定方法と、CSS独自の指定方法があります。
HTMLと同じ指定方法

#ff0000[…]