CSSの基本を押さえよう!書き方からレイアウト例まで紹介

ホームページやWebアプリケーションの開発を行う上で欠かせないのがCSSの基本的な知識です。


とはいえCSSが何をするものかが分からない。
他の言語と何が違うの?

と思う方も多いのではないでしょうか。CSSはHTMLとセットで使用することで、Webページのレイアウトを思い通りにカスタマイズするための言語です。

本記事ではCSSの具体的な使い方から、実践的なレイアウトの組み方まで、CSSの基本を詳しく解説します。

初心者の方でも分かるようにかみ砕いて解説しますので、まだCSSを触ったことがない方もぜひ参考にしてみてください!

CSSの基本的な役割

WEBデザイン

CSSの基本的な役割

CSS(カスケーディング・スタイル・シート)はWebページの色やテキストの配置場所といったレイアウトを調整するための言語です。

ページに背景色を付けたり、テキストに下線を引いたりといったレイアウト調整は全てCSSによって行われています。

Web制作には必須の知識なので、HTMLを勉強する場合はセットでCSSも学んでおきましょう。

なぜCSSファイルが必要か

基本的にWebページの土台はHTMLとCSSで構成されています。

HTMLは主にテキストや画像といった要素を配置する目的のみで使用されるので、CSSがなければ色味のない単調なレイアウトになってしまいます。

サイトに色味を持たせてユーザーを引き付けたり、ブランドの雰囲気に合わせたレイアウトにしたりとCSSファイルはページの見た目を整える上で重要な役割を持っています。

基本的なCSSの使い方3パターン

CSSには主に3種類の書き方が存在します。

詳細なCSSの指定方法については後ほど説明しますので、まずはそれぞれの使い方と特長を見ていきましょう。

タグに直接指定する

1つめはHTMLのタグに直接指定する方法です。

タグにstyle属性を付与して、その中にCSSのコードを記述します。(CSSの詳しい内容は後ほど説明します。)

■HTML

テキスト

 

この方法はHTMLファイルのみで完結します。

しかしこの書き方はデメリットが多い書き方です。

  • HTMLファイルのコード量が多くなってしまう。
  • 複数の要素にそれぞれCSSを記述する必要がある。
  • CSSファイルに同じプロパティの記述がある場合、タグのスタイルが優先される。

コードの見づらくなったり予期せぬ挙動を引き起こしたりと問題が起こりやすいため、タグに直接指定する書き方はおすすめできません。

HTMLファイルに直接書く

2つめはHTMLにstyleタグを用意して記述する方法です。

■HTML

テキスト

 

 

HTMLにstyleタグを配置し、その中にCSSを記述します。

タグに直接指定する方法よりも格段に見やすくなりました。

styleタグに記述をまとめたことで、pタグが複数存在する場合にそれぞれのタグにCSSを指定する必要がなくなりました。

しかし全てをHTMLファイルに記述すると、どうしてもコードが読みづらくなってしまいます。

また複数のHTMLファイルが存在する場合に、このstyleタグを全てのHTMLファイルにコピーする必要があります。

特定のページ限定で使うこともできますが、全体的なCSSの管理が難しくなるためこちらの方法もおすすめできません。

CSSファイルを用意する

3つ目はHTMLファイルと別にCSSファイルを用意する方法です。

この方法はHTMLファイルとは別にCSSファイルを作成する必要がありますが、他の2つの方法に比べてコードの管理がしやすいため、基本的にはCSSファイルを作成する書き方をおすすめします。

今回はstyle.cssというCSSファイルを作成して、HTMLファイルと同じ階層に配置してみます。

まずは下記のコードをHTMLのheadタグのに記述し、CSSを読み込みましょう。

■HTML


CSSのファイル名や配置場所は任意なので、読み込みの際にHTMLから見た時のCSSファイルの場所をhrefのパスに指定してください。
読み込みが完了したら、コードの本体部分を記述していきます。

■HTML

テキスト

 

■CSS

p {
  color: RED;
}

CSSファイルを用意すると、HTML・CSSで明確に分けて書くことが出来るのでメンテナンス性が向上します。

また新規でHTMLファイルを作成する場合もCSSファイルを読み込むだけで良いので非常に楽です。

CSSの基本文法

次にCSSの基本的な記述方法を見ていきましょう。

CSSを使う際に覚えておくべき項目は下記の3つです。

  • セレクタ
  • プロパティ

実際のソースを例にしてみると、

■HTML

p {
  color: RED;
}

pがセレクタ、colorがプロパティ、値がREDということになります。

「セレクタ・プロパティ・値」は「どこに対して・何を・どのように」レイアウト調整するかを表します。

それぞれ詳しく見ていきましょう!

セレクタ

セレクタは「どこに対して」を意味する部分です。

■HTML

p {
  color: RED;
}

今回であれば「p」がセレクタに当たるため、pタグのデザインを変更するという意味合いになります。

仮に「p」と指定してあるセレクタを「body」に変更すると、bodyタグの中身全体にデザインの変更が適用されることになります。

セレクタにはタグ以外にもid名やclass名を指定できます。

プロパティ

プロパティは「何を」を意味する部分です。

■CSS

p {
  color: RED;
}

今回は「color」がプロパティに当たるため、テキストの色を変更するという意味合いになります。

他にも文字のサイズを変えたい場合は「font-size」、背景色を変えたい場合は「background-color」など目的に応じて様々なプロパティが存在します。

値は「どのように」を意味する部分です。

■CSS

p {
  color: RED;
}

今回であれば「RED」が値になるため、赤にするという意味合いになります。

値は使用するプロパティによって指定方法が異なり、今回はプロパティが「color」であるため、値は色を意味する「RED」となります。

仮にプロパティが「font-size」の場合は、文字の大きさを表す「10px」などの数値が入るため、プロパティに応じた値を記述する必要があります。

CSSの基本の書き方:レイアウト調整で実践してみよう!

webデザイン

CSSの基本の書き方

ここまでひととおり基本的なCSSの書き方を解説しました。

次は実際にさまざまパターンのレイアウトをページに適用してみましょう!

背景色を指定する

まずは背景色を変更してみましょう。

背景色を変更する場合はbackgroug-colorプロパティを使用します。

■HTML

ボックス

 

■CSS

.box {
  background-color: green;
}

class名がboxの要素に緑色の背景色が適用されました。

次に横幅いっぱいに伸びたボックスのサイズを調整していきましょう。

ボックスのサイズを調整する

次にボックスのサイズを調整します。

先ほどの背景色はそのままにして、幅と高さを持たせるCSSを追記します。

■HTML

ボックス

 

■CSS

.box {
  background-color: green;
  width: 200px;
  height: 200px;
}

幅はwidth、高さはheightというプロパティで指定しました。

それぞれ200pxずつにしたため、正方形のボックスが完成しました。

サイズの単位にはpx(ピクセル)の他にも、%(パーセント)やem(エム)などさまざまな指定方法があるのでそれぞれの単位による動作の違いも確認してみると良いでしょう。

左右中央寄せにする

次にこのボックスを左右中央寄せにします。

先ほどの背景色・高さ・横幅は適用したままで、中央寄せのCSSを追記します。

■HTML

ボックス

 

■CSS

.box {
  background-color: green;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

margin: 0 auto;を追記したことで、ボックスが左右中央に移動しました。

0は縦の余白、autoは横の余白を示しているため、autoによって左右の横幅だけ自動で調節されることで左右中央寄せになっています。

上下も中央寄せしたい場合はmarginでは不可能なため、positionプロパティなどを使用する必要があります。

横並びにする

最後に複数のボックスを横並びにしてみましょう。

HTMLは色違いのボックスを1つずつ追加し、全体を一つのdivで囲みました。

CSSは背景色・高さ・横幅は適用したままでmarginのみ削除し、代わりに横並びのCSSを追記しています。

■HTML

 

ボックス1

 

ボックス2

 

 

■CSS

.wrap-box {
  display: flex;
}
.box {
  width: 200px;
  height: 200px;
}
.box1 {
  background-color: green;
}
.box2 {
  background-color: pink;
}

display:flex;を使用したことで、ボックス1とボックス2が横並びになりました。

横並びにもさまざまな方法がありますが、今回のようにflexを使った方法をフレックスボックスと呼びます。Web制作の現場でも使う機会が多いので覚えておくと非常に便利です!

横並びを覚えると2カラムや3カラムといった複雑なデザインのレイアウトも構築できるようになります。

まとめ

CSSの基本は理解できましたでしょうか?

CSSを使うとサイトを思い通りのレイアウトにカスタマイズできるので非常に楽しいです。

Web制作には必須の知識なので、ぜひ押さえておきましょう!

侍エンジニアは「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。
サービスページはこちら

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI ENGINEER Plus

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら