CSSについて

こんにちは。いつもブログを見ていただきありがとうございます。
今日はCSSについて解説していこうと思います。

CSSとは？

CSSとは、「Cascading Style Sheets」の略です。
CSSの主な役割は、Webページの文字の色や配置などを整えてWebページにスタイルをつけることです。スタイルをつけることで、華やかで見やすいWebページが作れます。多くのWebサイトは、CSSが一般的に使用されます。

CSSでできること

CSSでできることを4つご紹介します。

●Webページの装飾

一つ目は装飾です。
HTMLだけで作成したWebページは、ただ単にテキストや画像が並んだ素っ気ないものとなります。これでは大変読みづらく、ユーザビリティの低いWebページになってしまいます。
しかし、CSSで装飾することで、メリハリのある読みやすいWebページに変えられます。

CSSにある、代表的な装飾機能は以下の通りです。
・文字を太字にする
・文字の色を指定する
・フォントを指定する
・背景色を指定する
・ボタンを配置する
上記で挙げた装飾は、プロパティを設定することで可能です。

●アニメーションの作成

二つ目はアニメーションの作成です。
複雑なアニメーションはJavaScriptやPHPといったプログラミング言語で作成する必要がありますが、簡単なものだったらCSSでも対応できます。

CSSでアニメーションを作成する場合、使用するプロパティは2つです。
・animation : アニメーションの自動再生やループなどの設定が行える
・transition : マウスオーバーなどのアクション時にアニメーション設定が行える
上記の2つのプロパティを駆使することで、文字が遅れて表示されたりマウスオーバーすると画像が動いたりといった、アニメーションを適用出来ます。

●外部ファイルの活用

三つ目は外部ファイルの活用です。
HTMLとCSSはどちらもWebページを構成するものですが、一般的に別ファイルで記述します。ファイルを分け、CSSを外部ファイルとしてHTMLから呼び出すことで、Webページ読み込み時の負担を軽減することができます。

同じWebページの表示であっても、パソコンやスマートフォンなど表示端末は多岐に渡ります。そのためHTML内に全ての表示端末に対するCSSを記述すると、読み込みに時間がかかってしまうのです。こういった事態を避けるにも「パソコン表示用のCSS」や「スマートフォン表示用のCSS」とファイルを分け、HTMLからそれぞれの表示端末に合わせてCSSの外部ファイルを読み込みます。

●共通パーツの制作

四つ目は共通パーツの制作です。
CSSでファイルを作成することで、Webサイト全体に適応する共通パーツが制作できます。
Webサイトの統一感を出すため、全てのWebページに同じスタイルを適応する必要があります。1ページずつスタイルを適用すると大変ですが、CSSで共通パーツを作り、それぞれのHTMLから呼び出すことで簡単に同じスタイルを適用できます。
また、共通パーツのCSSを制作しておくことでメンテナンスも楽になります。共通パーツのCSSを変えるだけで、そのCSSを適用している全てのWebページに対して変更を加えられるためです。

CSSとHTMLの関係性

Webサイトを作るうえで、CSSとセットで学習されることが多いのが「HTML」です。その理由は、CSSはHTMLを装飾するための言語だからです。

HTMLとはWebページを構成するベースとなる言語で、見出しやタイトル、文章といったWebページの枠組みを形成します。HTMLだけでもWebページを作ることは可能ですが、ただ単に文字や画像が並んでいるというとでも簡素なものになってしまいます。それに対してCSSでスタイル付けすることで、文字の色などが変わり見た目が良くなります。

※HTMLについてはこちら

このようにHTMLはWebページの骨格を作るためのもので、CSSはWebページを飾るためのものと明確に役割が異なります。そのため、CSSとHTMLのファイルを分けることが一般的です。

CSSの書き方

CSSを書くときは「セレクタ」と「プロパティ」、「プロパティの値」の3つの項目を意識します。
3つの項目の、具体的な書き方は以下の通りです。

セレクタ　{
プロパティ ： プロパティの値　；
}

まずは、どの要素にCSSを適応するかセレクタに指定します。次に何の項目を変更したいのかプロパティに指定し、最後にプロパティの値を指定して終わりです。
※ここで注意することは、プロパティとプロパティの値を「{}」で囲むことです。囲むことで設定したプロパティが、セレクタの範囲に適応されます。

CSS構文のルールと基本文法

●セレクタ

セレクタにはHTMLのどの部分に設定したプロパティと値を適用するか指定します。
セレクタには、HTMLのタグやdivタグで設定したclass名/id名の記述が可能です。例えばWebページの大見出しにプロパティと値を適用したい場合、セレクタに「h2」と記述します。

●プロパティ

プロパティには、何の項目を変更するのか指定します。
よく使われるプロパティは以下の通りです。

○width・・・・・横幅を変更する
○height・・・・・高さを変更する
○color・・・・・文字の色を指定する
○position・・・・・配置場所を指定する
○font-family・・・・・フォントを指定する
○font-weight・・・・・文字の太さを変える
○background-color・・・・・背景色を指定する

●プロパティの値

プロパティをどのように変更するか、具体的な値を設定します。例えば文字の色やどんなフォントにするかなどです。
プロパティによって、設定する値は異なります。

さいごに

CSSは、HTMLで作成したWebページにスタイルを付けるための言語です。CSSでスタイルを付けることで、ユーザにとって見やすい綺麗なWebサイトを作ることができるので気になった方は学習してみてください！

クローバーグラフィックでは、コーディング代行・ホームページ制作など幅広くやっていますのでお気軽にご相談ください。
また、スマートフォンに対応していない、お問い合わせが少ないなど、ホームページのリニューアルをご検討しているお客様もお気軽にご相談ください。お待ちしております。