個人的CSS文法メモ

個人的文法メモ

個人的HTML文法メモ

個人的に利用するCSS文法をコピペできるようにまとめておく記事です。

文字

font-size: 文字サイズ;
color: 文字色;
font-weight: 文字の太さ;
text-decoration: 装飾線;
font-family: フォント;
font: 文字の一括設定;
text-decoration: 装飾;

font-size:で文字サイズを変更できます。サイズ指定にはピクセル単位や”small”など文字指定もできます。

color:で文字色を変更できます。色指定にはカラーコードの他に色文字も利用可能です。

font-weight:で文字の太さを変更できます。数値で指定することも可能ですが、一般的には”bold”で太字指定します。

text-decoration:で装飾線の設定ができます。”underline”で下線、”overline”で上線、”line-through”で取り消し線になります。
次いで文字色、線の種類を指定することもできます。

font-family:でフォントを変更できます。指定にはフォント名やフォントの種類が利用できます。

font:で文字の一括設定ができます。斜体の有無、文字の太さ、文字サイズ、行間、フォントを指定できます。

text-decoration:でテキストの装飾ができます。下線、上線、取り消し線などがあります。

text-align: 配置;

text-align:で配置の設定ができます。

“left”で左揃え、”center”で中央揃え、”right”で右揃え、”justify”で両端揃えになります。

background-color: 背景色;
background-image: url(背景画像);

background-color:で背景色の設定ができます。

background-image: url()で背景画像が設定できます。url()内に画像ファイルのパスを記述します。

width: 幅;
height: 高さ;

width:で幅を指定できます。
height:で高さを指定できます。

border: 枠線;
border-top: 上枠線;
border-left: 左枠線;
border-right: 右枠線;
border-bottom: 下枠線;

border:で枠線を表示させることができます。
線種、太さ、色の順に指定します。
線種には”solid”(実線)、”double”(二重線)、”dotted”(点線)などが利用できます。

線ごとに違う設定をすることも可能です。

padding: 内部余白;
margin: 外部余白;

padding:で内部余白が設定できます。

margin:で外部余白が設定できます。

どちらもtopやleftなどを指定することで違う設定にすることも可能です。

display: flex;
justify-content: 揃え位置;

display: flex;でフレックスボックスを利用することができます。

justify-content:でコンテナ内の揃え位置を指定することができます。”center”でセンター、”space-between”で間を均等割り付け、”space-around”で両端を均等割り付けします。

私がより美しいページを作れるようになるとこの記事が更新されます。