CSSってなに？
まずは基礎から覚えておこう！
前回までは主にHTMLについて解説していきました。
今回はホームページの見栄えに関わってくるCSSについて解説していきます！
CSSとは
CSSはホームページの装飾を行うための言語で「カスケーディング・スタイル・シート（Cascading Style Sheets）」を略してCSSと呼びます。
「style.css」といった別ファイルに記述し、HTMLで呼び出して使用するのが主な使用方法になります。
HTMLの中にCSSを記述する方法もありますが、命令文がでたらめになってしまいSEOで好ましくない評価に繋がります。
HTMLの中にCSSを記述するのは避けましょう。
CSSを使う３つのメリット
メリット1．SEO対策
「CSSとは」でもお伝えした通り、SEOの評価に繋がります。
検索エンジンに命令文が正しく理解されなければ、正しい検索結果は得られません。
HTMLとCSSを分けて記述することで、でたらめな命令文になる事を防ぐ事ができます。
また、画像に含まれた文字は検索対象外となってしまいますが、CSSを使用して背景に画像を置いて、その上に文字を配置することで検索対象になる文字入り画像を演出することもできます。
メリット2．更新・修正がしやすい
CSSは一つの記述で、複数個所に反映させることができます。
そのため、コンテンツ追加のたびに新たに記述していく必要がありません。
もちろん別の装飾を施す場合は、新たに記述する必要があります。
HTMLにCSSを組み込んだ場合は、追加のたびに記述が必要になります。
メリット3．オリジナル性があるデザインが作れる
CSSには様々な命令文があるため、思っている以上に色々なデザインを作る事ができます。
「色が変わるボタン」や「背景の斜めカット」「ハンバーガーメニュー」もCSSで作る事が可能です。
他と一味違うホームページを作りたいのであればCSSは必須と言えるでしょう。
CSSの書き方
CSSの記述ルールは実はそれほど複雑ではありません。
早速見てみましょう。
p {
color: #FFFFFF;
background-color: #000000;
}
上記のCSSはHTMLのPタグに対して、「フォントカラーを白」「背景の色を黒」にする命令を与えています。
1行目の「p」が場所の指定になります。
HTMLでclass名を指定している場合は、class名を指定することもできます。
その後ろの「{ ～ }」で囲われている部分が装飾の記述です。
ここの記述ルールは「何をするか: どう変えるか;」となります。
何をするかの後ろには必ず「:（コロン）」が入り、どう変えるかの後ろは「;（セミコロン）」で締めます。
上記の「color」はフォントカラーの変更、「background-color」が背景色の変更を指定する記述になります。
日本語にすると下記のような感じですね。
装飾する場所 {
何をするか: どう変えるか;
} 先ほどのCSSを日本語にしてみると
Pタグの {
フォントカラーを: 白に変える;
背景色を: 黒に変える;
} と、なります。
「何をするか」は複数指定できるので、その都度追加しながら思い描いた装飾・演出を作り上げていきます。
この塊を複数作って、ホームページ全体の装飾を行っていきます。
このように装飾1つ1つを分けて記述していくので、整理しながら記述することを心掛けていれば、どこのCSSなのか把握しやすいと思います。
最後に
CSSの命令文は数多く存在し、色々な組み合わせで一つの装飾を作るため、全てを覚えるのは無理です。
私も全部は覚えていません。
始めはどういう装飾や演出をしたいのか命令文を調べ、アレンジしながらよく使う物を覚えていくと良いでしょう。
使う機会が多いCSSは別の記事でご紹介します。