解説ではなくチートシートのようなものなので、細かい説明は省略しています。
（初心者のため間違いなどあったらすみません）
CSSの書き方（読み込み方）
HTMLファイルで読み込み
HTMLファイル内で、以下のいずれかの方法を使ってCSSファイルを読み込み、スタイルが反映されるようにします。
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ファイルの冒頭には、以下を記述します。
@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: アニメーションにかかる時間を設定する
セレクタの指定の仕方
セレクタとは
スタイルを指定する対象のことです。
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年前に初めてコーディングを勉強した頃に書いたメモが出てきたので、まとめてみました。
今でも初心者なので、間違いなどあれば教えていただけると喜びます。（雑すぎて間違いも何もない気もしますが）
フロントエンドエンジニアになりたいと思って勉強をはじめ、気付いたらデザイナーになっていたので、今でも中途半端なまま。。。
コーディングもちゃんと実務レベルまで引き上げたい。頑張る。