2021/2/18 「HTML&CSS辞典」をオープンしました! 是非、ご覧になってください!

[Web用語] CSSとは? 分かりやすく解説します!

CSS

CSSはHTMLで記述された文書に対して、文字の色、文字の大きさ、余白、背景色など文書の見栄えを指定する言語となっています。

CSSはHTML文書だけでなく、XML文書に対してもスタイルを指定できます。

解説

CSSを利用することで文字の色、文字の大きさ、余白、背景色など文書のスタイルを指定することができます。

CSSを利用することでどのようなことが表現できるのでしょうか。

以下はCSSを利用した例となっています。

上記では上から「font-sizeを20pxする」、「backgroundを赤にする」、「colorを青にする」、「marginを20pxする」というようにスタイルを指定しています。

ここでは簡単にCSSを利用してみましたが、CSSを利用すると文書の見栄えを細かく調整することができます。

CSSを利用するメリットは主に2つあります。

文書の見せ方が豊富になる

1つ目は文書の見せ方が豊富になるという点です。

文字の色や下線を引くなどの機能はHTMLにもありますが、CSSと比較して見せ方のバリエーションが少なく、デザインが限られてきます。

また、W3C(World Wide Web Consortium)ではHTMLの機能を利用してデザインを整えるのではなく、CSSを使用することを推奨しています。

複数の文書でCSSを共有できる

2つ目は複数の文書でCSSを共有できるという点です。

CSSはHTMLとは別ファイルに記述してHTMLファイルから呼び出すことができます。

複数のHTMLファイルから同じCSSファイルを呼び出せば、複数のHTMLファイルのデザインを統一させることができます。

CSSを利用することでHTMLファイルを修正することなく、CSSファイルのみを修正するという作業で済みます。

簡単にですが、CSSを利用する例をみていきましょう。

上記のHTMLファイルとCSSファイルの記述は一番始めに見たイメージ図のソースコードとなっています。

このようにHTMLファイルとCSSファイルを別に管理することでソースコードがきれいになり、修正も楽になります。

CSSをもっと学習したい方へ

最後まで読んで頂きまして、ありがとうございました。

CSSをもっと知りたいという方はいないでしょうか。

そこでWeb全般の基礎的な知識を習得するのに「よくわかるHTML5+CSS3の教科書【第3版】 教科書シリーズ」という本がオススメです。

初学者がいきなりCSSに関する専門書を読み始めると挫折することが多いです。

そこで途中で挫折せずに最後まで読み切れて、CSSの全体像を把握するのに便利な一冊になっています。

この本で全体像を理解してから専門書を読むと取り組みやすいかと思います。

もし、CSSに関する入門的な知識を幅広く知りたいと思った方はこちらの本を是非読んでいただければと思います。

コメントを残す

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