h2 ~ p { 

　　　　　　　　　color: red

　　　　　　　　}

• 疑似クラスセレクタ：「 :名前」で指定する。特定の状態や位置にある要素を選択します！例えば、「:hover」はマウスが要素の上にある時を指している。

　　　　　a:hover { 

　　　　　　　　　color: red

　　　　　　　　}

他にも便利なセレクタが存在します。必要に応じて調べたいと思います！

CSSのプロパティ

セレクタで指定した部分にしたい装飾内容をプロパティを用いて記述します。

CSSのプロパティはたくさんあるので、適宜調べていきたいです。

CSSのボックスモデル

ウェブ上の要素がどのように配置されるか理解するために必要な概念です！

ボックスモデルの概要

ボックスモデルとは、要素が「コンテンツ」、「パディング」、「ボーダー」、「マージン」の4つの領域から構成されているという概念です。

• コンテンツ：要素の実際の内容が表示される領域です！！幅と高さを持ちます！

• パディング：コンテンツとボーダーの余白の領域です！背景色や背景画像がつく！

• ボーダー：コンテンツとパディングを囲む線(境界線)です！太さ、スタイル、色を指定することができます！

• マージン：要素とそのその要素との間の空白領域です！他の要素との間隔を調整するために使用されます！

https://commons.wikimedia.org/wiki/File:Box-model.svg

ボックスモデルの活用

ボックスモデルを活用することで、要素のサイズや配置を細かく制御することができます！

パディングの設定方法

要素のパディングは「paddingプロパティ」を使用して設定します！上下左右全てのパディングを20pxに設定する場合は以下のように記述します！！

.box {

    padding: 20px;

}

マージンの設定方法

要素のマージンは「marginプロパティ」を使用して設定します！！上下左右全てのマージンを20pxに設定する場合は以下のように記述します！

.box {

    margin: 20px;

}

CSSの一般的なレイアウト方法

浮動による回り込み(float)

要素を左または右に浮動(float)させることにより、テキストや画像を回り込ませることができます！clear fix(クリアフィックス)の理解も必要です！！

clear fix：flaot要素は親要素は子要素の高さを認識できなくなるという問題があります！この回り込みに対処するための方法です！

ポジション指定(position)

•  static: 指定なし(デフォルト)

•  relative: 通常の位置を基準として指定した相対位置に配置

•  absolute: 最も近い position:relative 以外の祖先要素を基準として指定した絶対位置に配置

•  fixed: ビューポートを基準として指定した絶対位置に固定される

•  sticky: スクロール位置に合わせて固定表示されたり通常の位置に戻ったりする

 フレックスボックスレイアウト

コンテナ要素にdisplay:flexを指定すると、子要素をメイン軸方向に並べることができます。子要素の配置・サイズ・方向を細かく制御可能。

グリッドレイアウト

コンテナ要素にdisplay:gridを指定すると、フレックスボックスレイアウトよりも細かく、行と列によるグリッド状のレイアウトを実現できます。

レイアウトについては、少し難しいのでこれからCSSを実際に動かしながら理解をしていきたいと思います！！

まずは、HTMLとCSSを身につけ、自作サイトを作れるようにしていきたいです！！

-----------------------------------------------

G!FIT公式Instagram：https://www.instagram.com/gfit_gdn/

G!FIT公式Twitter：https://twitter.com/gfit_gdn

メンバー紹介ページ：https://guardian.jpn.com/member/tomoya_matsuki/