プログラミングの勉強をすると、最初によく出てくる「HTML」、そしてこの「HTML」にもれなくついてくるのが今回紹介する「CSS」です。
Webページ制作には切っては切れない存在の「CSS」
これからプログラミングの勉強を始めようと思っている初心者の方に、CSSの意味やそのメリット、使い方までわかりやすく紹介していきます。
CSSとは
CSSはカスケーディング・スタイル・シートの略で、Webページのスタイルを決めるための言語です。
スタイルとは文字の大きさや色などの装飾のことで、CSSはWebページの見た目を決める役目を担っていると言えます。
HTMLとCSSの違い
プログラミングの勉強を始めると、CSSのほかにHTMLという言葉が登場します。
Webページ制作には欠かせないこの二つの言葉。
まずは両者の違いから紹介します。
HTML
HTMLとはハイパーテキスト・マークアップ・ランゲージの略で、Webページの文章や画像など複数のコンテンツを関連付けて、結び付ける仕組みのことをいいます。
HTMLでコンテンツである文章や画像に意味づけを行い、Webページ全体の構造を作っていきます。
CSS
CSSはHTMLで作られた中身（構造）に、色やサイズ、配置の仕方などの装飾を行い、Webページの見た目を整えていくことができます。
Webページ＝HTML（構造）+CSS（装飾）
ユーザーが普段目にするWebページは、「HTML」で骨格を作り、「CSS」で化粧を施すことで完成されます。
HTMLやCSSはその片方だけを勉強すればよいというわけでなく、Webページを完成させせるためには両方の知識が必要だと言えるでしょう。
CSSってほんとうに必要？
HTMLはコンテンツに意味づけする役割があります。
この意味付けには、文字の大きさや色を変更するといったCSSで装飾するのとおなじ役割を与えることができます。
そうなると、「Webページを制作するのはHTMLだけで、CSSは不要なのでは？」という疑問が浮かびますね。
CSSを利用するメリット
Webページの作成にHTMLだけを利用するのではなく、CSSを利用するメリットを紹介します。
Webページを「構成」+「装飾」に分けて制作できる
HTMLはコンテンツの「構成」を作る役割がありますが、その「構成」のなかに「装飾」を加えてしまうとWebページ全体の構造が複雑になってしまいます。
「装飾」部分をCSSに任せることで、コンテンツそのものの構造をシンプルでわかりやすいものすることができます。
装飾の修正が簡単
HTML内で装飾を施すと、文字のサイズや色の変更をそれぞれのHTMLファイル上で修正する必要があります。
装飾をCSSファイルに任せれば、共通するひとつのCSSファイルを修正するだけでよく、複数のHTMLファイルを修正する手間がかかりません。
SEO対策ができる
Webページをgoogleなどの検索エンジンに効率よく検索してもらう対策をSEOといいます。
CSSを利用することでこのSEOの対策ができます。
検索エンジンはHTMLファイルの中身を確認して、そこに書かれているコンテンツや構成からWebページを採点します。
最近では、構文を整えることは、SEOにはあまり効果がないともされていますが、速度を上げる＝SEO評価が上がるという意味では、CSSを利用することは意味があります。
CSSを利用しないWebページはすべてのページで、「構成」+「装飾」の情報が含まれるため読み込み時間も遅く、中身も複雑なため評価が下がってしまいます。
ユーザーに合わせて装飾を変更できる
CSSを利用すればユーザーに合せて最適な装飾に変更できます。
ユーザーが利用するデバイスがパソコンなのか、スマホなのかによって装飾の方法を使い分け、誰でも見やすく、わかりやすいコンテンツを提供することができます。
デバイスごとに表示を切り替えるデザインのことを「レスポンシブデザイン」と言われています。
CSSの使い方
CSSの具体的な使い方を紹介します。
CSSを利用すれば、
- 文字の大きさや色を変える
- コンテンツに余白を設ける
などの装飾が可能になります。
CSSはHTMLで作成したコンテンツに対して、「なにを」「どれだけ」「どのように」変更するかを指定するというわけです。
例えば、文章というコンテンツに対して、
- なにを＝文字を
- どれだけ＝12pxに
- どのように＝大きくする
という装飾ができます。
CSSにはこの「なにを」「どれだけ」「どのように」装飾するか指定する文法があります。
セレクト
「なにを」に該当するものをセレクトといいます。
HTML内の変更させたい箇所をセレクトで指定します。
変更内容が「文字を大きくする」であれば、該当箇所の見出し（h2）や段落（p）を指定します。
値
「どれだけ」に該当するのが値です。
文字サイズであればpxやemなどの単位を指定するほか、％値を指定したりsmall、mediumといったキーワードで指定したりします。
プロパティ
「どのように」に該当するのがプロパティです。
文字のサイズや色、コンテンツの余白や幅など100種類にも及ぶプロパティが存在します。
文法を駆使して見た目を整える
CSSではこの「セレクト」「値」「プロパティ」を活用してHTMLに様々な装飾を加えていきます。
文法の使い方を覚えて、見た目に美しくシンプルなWebページを制作できるようになります。
CSSの種類
最後に具体的なCSSをいくつか紹介します。
color
文字の色を指定します。
Webページではカラーコードと呼ばれる色番号を指定することで、1000万種類以上の色を再現することできます。
background-color
背景色を指定します。
文字の色とあわせて指定することで、より効果的な見た目の装飾が可能です。
font-size
文字のサイズを指定します。
見出しだけでなく、段落中の強調したい箇所のみのサイズを大きくするなども簡単に指定できます。
text-decoration
文字の装飾を指定します。
下線や上線を引いたり、取り消し線をつけたりなど文字の装飾が可能です。
margin
コンテンツの外側の余白を指定します。
文章と画像の間の余白を大きくしたり、段落間の余白を狭めたりするなどの指定ができます。
padding
コンテンツそのものの境界までの余白を指定します。
marginとpaddingをうまく利用することで、ユーザーに見やすいコンテンツ作りが可能になります。
border
コンテンツの境界線を指定します。
境界線の色や太さを変えることができ、border-radiusを利用すれば境界線の角を丸くするなどの装飾も付け加えることができます。
まとめ
CSSについて紹介してきました。
CSSはHTMLとあわせてWebページ制作には必須な知識です。
CSSを利用すればHTMLを修正する手間が減るだけでなく、Webページ全体で見た目を統一することも可能です。
装飾が統一できると、ユーザーにも検索エンジンにもやさしいWebページ制作が可能です。
CSSをマスターして、見た目も美しくシンプルでやさしいWebページ作りにチャレンジしてみてください。
