【CSS】基本的な書き方やプロパティまとめ #CSS

解説ではなくチートシートのようなものなので、細かい説明は省略しています。
（初心者のため間違いなどあったらすみません）

CSSの書き方（読み込み方）

HTMLファイルで読み込み

HTMLファイル内で、以下のいずれかの方法を使ってCSSファイルを読み込み、スタイルが反映されるようにします。

index.html

1. CSSファイルに記述し、HTMLファイルのheadタグ内でCSSファイルを読み込む（一般的な方法）
<link rel="stylesheet" href="styles.css" type="text/css">

2. HTMLのタグの中に直接記述
<p style="color:blue">テキスト</p>

3. HTMLファイルのheadタグ内に記述
<style type="text/css">
  color: blue;
</style>

CSSファイルの準備

CSSファイルの冒頭には、以下を記述します。

styles.css

@charset "UTF-8";

あと、必須ではないけれど、最初にリセットCSSで各ブラウザに設定されているデフォルトのCSSをリセットしておくと混乱が減る。

よく使うプロパティなど

/* このように記述します */

文字

color: 文字色
font-size: 文字サイズ
font-weight: 文字の太さ（400/normal:普通, 600/bold:太字）
font-family: 文字の種類
letter-spacing: 文字間隔
line-height: 行の高さ
text-align: 文字の左寄せ、中央寄せ、右寄せ
text-decoration: noneで下線を消す
font-style: 文字を筆記体（italic）や斜体（oblique）に

余白・位置

margin: 外側の余白
- (margin: 0 auto; で真ん中寄せ)
padding: 内側の余白
position: ボックスの配置方法の指定
- relative ->相対位置
- absolute ->絶対位置
- fixed ->絶対位置（スクロールしても固定）
top, right, bottom, left: 親要素の端からの距離を指定

要素の大きさ

width: 幅の指定
height: 縦の指定

背景

background-color: 背景色を指定
background-image: url(ここにURLを入れる); ->背景画像を設定
- （以下2つを一緒に指定すると、背景画像をいい感じに設定できる）
- background-size: cover;
- background-position: center;

線

border: 1px（太さ） solid（スタイル） blue（色）; ->線のスタイルを一括で指定
- スタイル...solid（直線）, dashed（点線）
border-bottom: 要素の下のみの線のスタイルを指定（top, right, leftも同様に可能）

表示

display:
- block ->ブロック要素にする（幅と高さを指定できる）
- inline-block ->インラインブロック要素にする（横幅と高さを指定できる。前後の要素と横に並ぶ）
- inline ->インライン要素にする（幅と高さを指定できない。上下の余白を調整できない）
- none ->非表示にする
- flex ->子要素をいい感じに並べる（オプションたくさんあるので詳しくはぐぐる）

その他、よく使う

opacity: 透過（0～1）
border-radius: 丸角にする
box-shadow: 影をつける(左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 (内側指定);)
z-index: 要素の重なり順
overflow: はみ出る部分の指定
transform: アニメーションをつける
transition: アニメーションにかかる時間を設定する

セレクタの指定の仕方

セレクタとは

スタイルを指定する対象のことです。

styles.cs

p(セレクタ) {
 color(プロパティ): blue(値);
}

複数の要素選択や、関係による絞り込み

複数の要素の間に半角スペースを入れると、親要素の下のすべての指定した子要素に適用
ex）sectionの中のすべてのpに適用
「,（カンマ）」を入れると、すべての要素に適用
ex）h2, h3, h4 {... ->h2 h3 h4すべてのpに適用
「>」を入れると、最初の要素の1階層下の要素に適用
ex）section > p {... ->section直下にあるpに適用
「+」を入れると、最初の要素と同一階層で後続に登場する1つの要素に適用
ex）h3 + p {... ->h3と同じ階層で1つ後にあるpに適用
「~」を入れると、最初の要素と同一階層で後続に登場するすべての要素に適用
ex）h3 ~ p {... ->h3と同じ階層で後に出てくるすべてのpに適用

セレクタの擬似クラス・擬似要素

擬似クラスで、リンクに指定

セレクタ:hover ->カーソルが要素の上にある時
セレクタ:visited ->訪問済みのリンク
セレクタ:link ->未訪問のリンク
セレクタ:active ->クリックしている時

擬似クラスで、1部のみに指定

セレクタ:first-of-type ->最初の要素を指定
セレクタ:last-of-type ->最後
セレクタ:nth-of-type(n) ->n番目
セレクタ:nth-of-type(even) ->偶数
セレクタ:nth-of-type(odd) ->奇数
セレクタ:not(n) ->n以外

疑似要素

セレクタ::before ->要素の直前にコンテンツを追加（contentプロパティが必要）
セレクタ::after ->要素の後にコンテンツを追加（contentプロパティが必要）
セレクタ::first-letter ->要素の1文字目を指定
セレクタ::first-line ->要素の1行目を指定

サイズ・単位

ブラウザの高さ・幅に対してサイズを指定

vw（viewport widthの略） ->ブラウザの幅を100vwとしてサイズを指定
vh（viewport heightの略） ->ブラウザの高さを100vhとしてサイズを指定

フォントサイズの単位

px ->絶対値。相対指定。
% ->相対値。親要素を100%としてサイズを指定
em ->相対値。親要素を1emとしてサイズを指定
rem ->相対値。ルート(html)を1emとしてサイズを指定

4年前に初めてコーディングを勉強した頃に書いたメモが出てきたので、まとめてみました。
今でも初心者なので、間違いなどあれば教えていただけると喜びます。（雑すぎて間違いも何もない気もしますが）

フロントエンドエンジニアになりたいと思って勉強をはじめ、気付いたらデザイナーになっていたので、今でも中途半端なまま。。。
コーディングもちゃんと実務レベルまで引き上げたい。頑張る。

【CSS】基本的な書き方やプロパティまとめ