GASSY’S BLOG

本業の傍らでプログラミングを習得中の、駆け出しエンジニアのブログです。

CSSの基本①

こんばんは、GASSYです。

最近本業に追われていままでみたいに学習時間を取れていません。

追われてる状態ってあんまりよくないと思ってて、一時的ならいいんですけどあまり長いと色々よくない。

気持ちに余裕なくなりがちですしね。。

そんな時は逆にそういう状態であるかとを意識する方が落ち着いたりするようです。

本業は徐々に落ち着きつつありますので、学習のペースをこれまた徐々に戻していきたいです。

 

さて、今回はCSSの基本について書いていきたいと思います。

私のブログは初学者の方やこれからプログラミングを学んだ方に少しでもわかりやすく伝わることを意識して作成しています。

今回の記事が少しでも誰かのお役にたったならこれ幸いにございます。

CSSって何?

まずCSSって何?って話です。

みなさんが普段見られてるWebページの見た目の部分は、

主にHTMLとCSSの2つのマークアップ言語を使って作られていることが多いです。

HTMLがページの骨格や文書の内容を作ってくれて、CSSはその骨格に色づけを行ってくれます。

昔はHTMLにCSSみたいなスタイル指定もできたみたいですが、

HTML5になってからそれらの機能は無くなってHTMLとCSSでそれぞれ書く仕様になったみたいです。

CSSの基本の「き」

CSSには基本的に3つの要素を使います。

セレクタCSSの内容を反映させたいHTMLのテキストを指定するためのもの

②プロパティ:HTMLに反映させたいCSSの内容(背景の色とか文字の大きさとか)

③値:プロパティで文字のサイズの指定をした場合、その文字の大きさを決めるもの

要は、どのHTMLに、どんな内容のスタイルを、どのくらい反映させたいか、ってことです。

 

ちなみにこんな感じで書きます。

 

p { font-size : 15px }

 

解説すると、、、

p →セレクタです。これから書くCSSを反映させたいHTMLの箇所を指定しています。

font-size→プロパティです。font-sizeはフォントの大きさを指定します。

15px→値です。この場合、フォントの大きさを15pxにすることを意味します。

となります。

 

こんな感じでHTMLとCSSをたくさん組み合わせてWebページを作っていくことができます。

 

ということで、今日はここまで。

次回はCSSにどんなプロパティがあるか紹介させていただきます。

 

ではでは!