CSS

【入門】CSSの役割を知る【サンプルコード・図解付き】

どうも、つよぽんです!

今回はCSSの役割について理解することを目的とした記事になります。

実際にCSSを書き始める前に、そもそも「CSSで何が出来るのか」「HTMLとCSSの役割とは何か」を理解することで、次回以降解説するCSSの解説記事の内容がより理解できるようになるでしょう。

今回の記事は次のような方に向けて書きました。

想定読者
  • CSSで何が出来るか知りたい方
  • HTMLとCSSの役割を正しく理解したい方

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
CSSの役割を知るCSSを使うことでWebページのスタイルを変更することが出来ます。実際にHTMLのみのコードとHTMLにCSSを加えたコードを比較して、Webページがどのように変化するか見ていきます。...

今回の内容は以下のとおりです。

今回の内容
  • HTMLとCSSの役割の違いを知る

 

HTMLとCSSの役割の違いを知る

この章では、HTMLとCSSの役割の違いを解説していきます。

解説なかで画像を使ってサンプルコードを使っていますが、画像をクリックして拡大してもコードが読みづらい場合は以下のリンクからコードを確認していただけたらと思います。

HTMLの役割

以前、「【入門】HTMLの構造を基本から理解する【初心者・未経験者向け】」という記事でもHTMLの役割について解説しましたが、CSSの役割をわかりやすくするためにこちらでもあらためて解説します。

あわせて読みたい
【入門】HTMLの構造を基本から理解する【初心者・未経験者向け】HTMLがどのような構造で作られているか?htmlタグ、headタグ、bodyタグの役割はなんなのか?今回の記事はこれからWeb開発を学ぼうと思っている人、HTMLの基本的な仕組みを知りたい人が学習する際に最初に知っておくと良いことをまとめています。...

HTMLの役割は「Webページの構造」を定義することです。

次の画像はHTMLのコード(右側)と、コードの出力結果(左側)を表したものです。

HTMLの役割HTMLの役割

HTMLは意味ごと「h1タグ」「ul・liタグ」など異なるタグを使います。

そして使われているタグに応じて予め用意された表示がされます。例えば「h1タグ」を使った場合は「太字で文字が大きい」、「ul・liタグ」の場合は「箇条書き形跡」といった感じです。

出力結果を見るとわかるかと思いますが、文字の色も全て黒で背景色も無いのがわかるかと思います。それは、HTMLの役割はWebページの構造の定義のみで、スタイル(見た目)変更の役割を持たないからです。

それでは、スタイルの変更の役割は「誰が」持つのでしょうか?それが次に紹介する「CSS」となります。

CSSの役割

CSSの役割は「Webページのスタイル」を定義することです。

次の画像は、「HTMLの役割」の章で使ったHTMLのコードにCSSを組み合わせたものです。

CSSの役割CSSの役割

CSSを使うことで、次のようにスタイルの変更を行うことが出来ています。

CSSで行った変更
  • 文字色の変更
  • 背景色の変更
  • 見出し文字(h1, h2タグ)を左揃えから中央揃えに変更
  • 箇条書きの先頭を「イロハ」に変更

上記はあくまでも参考までに行った変更で、CSSを使えばデザインされたページは基本的にどんなものでも作り上げることが出来ます

もっと洗練されたHTMLとCSSの例

前の章で使ったHTMLとCSSのサンプルコードは簡単なものだったので、ここではもっと洗練されたHTMLとCSSを使ったWebページを紹介したいと思います。

次の画像を見てください。左側がHTMLだけを使ったときの表示で、右側はHTMLとCSSを組み合わせたときの表示になります。

左がHTMLだけを使った場合、右側がHTML+CSSを使った場合左がHTMLだけを使った場合、右側がHTML+CSSを使った場合

上の画像で使われているHTMLとCSSのコードを確認したい場合は以下のリンクからご確認いただけます。

このように、HTMLとCSSを分離することで、HTMLを記述するときは「Webページの構造の定義」だけに集中して作業を行い、CSSを記述するときは「Webページのスタイルの定義」だけを考えてコーディングすることが出来るようになります。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • HTMLはWebページの構造の定義を行う
  • CSSはWebページのスタイルの定義を行う
  • CSSを使うことでデザインできるものは基本的にどんなスタイルも実現することが出来る

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
CSSの役割を知るCSSを使うことでWebページのスタイルを変更することが出来ます。実際にHTMLのみのコードとHTMLにCSSを加えたコードを比較して、Webページがどのように変化するか見ていきます。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です