【成長記録②】CSS入門

前回はHTMLについてお話しました！
今回は続きでCSSについてお話しようと思います！

CSSとは

Cascading Style Sheets
(カスケーディングスタイルシート)
HTMLでつくられた文章などにデザインを加えることができる言語です。
例えば、文字の色を指定することができたり、
フォントサイズも指定することができます。

CSSの書き方

CSSの書き方について紹介します！
CSSでは「どこに」「何を」「どうする」の構成で書いていきます。

h1 { color: red; }

CSSの基礎構造はこのようになっています。

h1の部分は「どこに」を示し、この「どこに」の部分のことをセレクタといいます。
セレクタはCSSに適用したいタグを書きます。
今回の場合はHTMLのh1タグをCSSに適用させたいのでこんな形になります。

colorの部分は「何を」を示し、この「何を」の部分のことをプロパティといいます。
今回の場合はh1タグの文字色を指定したいという意味になります。

最後にredの部分は「どうする」を示し、この「どうする」の部分のことを値といいます。
今回の場合はh1タグの文字色を赤にしたいという意味になります。

このように３つのセレクタ・プロパティ・値がそれぞれ指定され、HTMLの文字に装飾が行われます。
これが基礎構造です。
実際のコードでは下記のようになります。

HTML

＜h1＞HTMLとはなにか学習しよう！＜/h1＞
＜p＞まず、HTMLとは「HyperText Markup Language」の略です。＜/p＞

このHTMLにCSSを加えていきます！

h1 {
   color: red;
   font-size: 20px;
}

p {
   color: red;
   font-size: 10px;
}

これで文字の色を赤に、フォントをそれぞれ20pxと10pに指定することができました。
今回は文字カラーとフォントサイズのみ指定しましたが、
他にもフォントの種類や背景色、背景色の大きさ、余白の大きさ指定などたくさんのデザインに関わる指定ができます。
ほとんどのWEBサイトにはHTMLで書いたものにCSSで華やかにしたり、カッコよくしたりして世界観を表現させています。

プロパティの種類

プロパティにはたくさんの種類があります。その一部を紹介します。

margin/padding:余白[数値+単位を、上 右 下 左の順で記述]

background
　■color:背景色[色名/#の後に3桁または6桁の16進数]
　■image:背景画像のパス、またはグラデーションの指定
　■repeat:背景画像のくり返し[repeat/no-repeat]
　■position:背景画像の表示(開始)位置[top/right/bottom/left] 　
　■size:背景画像の大きさ[数値+単位]

border:枠線[線の種類(solid/double/dotted) 線の太さ(数値+単位) 線の色(色名/#の後に 3 桁ま たは6桁の16進数)]
　■top:上辺の枠線
　■right:右辺の枠線
　■bottom:下辺の枠線
　■left:左辺の枠線

width:幅[数値+単位]
height:高さ[数値+単位]
display:表示形式[block/inline/inline-block/table/flex]
float:回り込み[none/left/right]
clear:回り込みの終了[none/left/right/both]
position:ボックスの配置方法[static/relative/absolute/fixed]
color:文字色[色名/#の後に 3 桁または 6 桁の 16 進数]
text-decoration:文字の装飾[none/underline/line-through]
font-size:文字サイズ[サイズ/数値+単位]
line-height:行の高さ[数値]
text-align:行内の水平方向の位置[left/center/right/justify]

まだまだ私の知らないプロパティもあると思うので勉強していきます！