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

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

この記事の監修者

粟飯原匠 |プロデューサー

マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。

PENGIN
PENGIN

前回はHTMLを使用して文書のマークアップをやったね!今回はCSSの基礎知識を抑えよう

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

CSSの基礎知識

CSSの基本形

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

Image from Gyazo

<用語解説>セレクタ

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

Image from Gyazo

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

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

  • ユーザーエージェントCSS:各ブラウザがデフォルトで持っているCSS
  • リセットCSS:ユーザーエージェントCSSを打ち消すためのCSS。インターネット上でいろいろな種類のものが配布されている。

ボックスモデル

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

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

Image from Gyazo

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

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

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つの場合について解説します。

  • inline・テキストのセンター寄せ:親要素のブロックに対して、text-align: center; を指定する
  • blockのセンター寄せ:幅を指定してmargin: auto; を指定する

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

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

次のステップへ!

PENGIN
PENGIN

CSSについての基礎知識はこれくらいにしておきましょう!次回はコーディングの続きをやっていくよ!実践を通して理解を深めよう★