はじめてのコーディング③ 〜CSS基礎知識編〜

「はじめてのコーディング」は4部構成です！

CSSの基礎知識

CSSの基本形

CSSの基本的な形は以下の通りです。セレクタでスタイルを当てる箇所を指定して、プロパティと値を入力することによって、HTMLの見た目を変更することができます。

<用語解説>セレクタ

CSSのセレクタとは、画像のようにCSSでスタイルをどこに当てるかを指定するものです。ここでは、要素セレクタとclassセレクタを理解しておきましょう。HTML要素を直接指定する場合は要素名を書きます。class名を指定するときは、class名の前に「.」を入れます。

ユーザーエージェントCSSとリセットCSS

ユーザーエージェントCSSはブラウザにデフォルトで指定されているCSSです。通常はこのユーザーエージェントCSSを打ち消してからコーディングします。打ち消すためのCSSをリセットCSSと言います。リセットCSSはインターネット上にいろいろな種類のものが配布されています。

ボックスモデル

Webサイトを作るときに、余白の指定方法としてmarginとpaddingがあります。

marginは要素の外側の余白、paddingは要素の内側の余白です。また要素の境界をborderで指定することもできます。
要素と余白の関係は以下の図のような関係になっています。これを「ボックスモデル」と言います。

marginは「すきま」、paddingは「pad=詰め物」と理解しておくと良いです！

以下のツイートのように、marginは「距離」、borderは「服」、paddingは「脂肪」と覚えておいてもいいかもしれません笑

【ボックスモデルの乱暴な説明】
paddingは脂肪、borderは服、marginは隣の人との距離。

太らせたければpaddingを使い、距離を取りたいならmarginを使う。

width,height,line-height,font-sizeなどが骨格を構成する。

— PENGIN Inc.｜Web制作/SEO対策/マーケティング支援 (@pengin_company) February 13, 2020

displayプロパティ

HTML要素のdisplayプロパティの初期値は大きく2つに分かれます。

それが、block（ブロック）とinline（インライン）です。（厳密に言えばもっと細分化されますが、とりあえず覚えるのは2つで良いです）

以下の表でblockとinlineの違いを解説しています。ざっくりと理解しましょう。

	block	inline
横幅	親要素いっぱいに広がる	コンテンツの幅に合う
改行	下に並んでいく（改行されていく）	横にならんでいく（改行されない）
余白	marginもpaddingも指定できる	縦の余白は指定できない
主なタグ	header,main,footer,section,div,h1,pなど	span,a,img,inputなど

displayプロパティによる挙動の違いを理解することがコーディングを理解する上で非常に重要です！

要素のセンター寄せ

コーディングをする際に最も基本的な技術の一つが要素をセンター寄せすることです。ここでは大きく2つの場合について解説します。

<参考>CSSでのセンター寄せ

CSSを使用したセンター寄せについて以下の記事でも解説しています。まずは、text-align: center; とmargin: auto; の使い分けをしっかりと理解しましょう！

次のステップへ！