※本ページにはプロモーション(広告)が含まれています
CSSとはどんな特徴があり何の目的で使われるかご存知ですか。HTMLと非常に関係性が深く、WEBサイトを作る上で重要な役割を担います。HTMLだけでWEBサイトを作ると非常に殺風景なものとなりますが、CSSも使うことで見やすくわかりやすいものができあがります。
CSSとはどのような意味・特徴を持ち、どんな書き方をするのか。ここでは、CSSの基礎的な知識について紹介しています。特に、最近プログラミングの勉強を始めた方や興味を持ち始めた方は、参考にご覧ください。
目次
1.CSSについて
CSSとはどのような意味があり、どんな目的で使われるのでしょうか。ここでは、CSSの意味や目的、必要とされる理由について見ていきましょう。
1.CSS(Cascading Style Sheets)
CSSとはCascading Style Sheetsの略であり、HTMLと組み合わせて使用するプログラミング言語のことです。CSSを使うことでHTMLのWEBサイトのデザイン性を高めます。
2.CSSでできること
CSSを使用すればHTMLだけだと殺風景なテキスト表示に、色を付けたり、フォントの種類を変えたり、背景色を入れたりでき、見栄えを良くすることができます。そのため、HTMLとCSSはセットで使われるのが一般的です。HTMLがWEBサイトの構造を組み立てるのに対し、CSSはデザインの役割を担います。CSSなしでHTMLだけでWEBサイトを作成しようとすると非常に殺風景なものができあがります。
3.スタイルシートが必要な理由
文書のスタイルを指定する技術のことをスタイルシートと言います。HTMLにスタイルシートを適用することで、WEBサイトの複数のページデザインを良くし、統一することができます。
2.CSSで重要な3要素
CSSは「セレクタ」「プロパティ」「値」の3つの要素により構成されています。セレクタは「どの部分を変えるか」、プロパティは「何を変えるか」、値は「どのように変えるか」をそれぞれ指定します。いずれも複雑なように見えますがシンプルな構造であり、すぐに使えるようになります。また、これら3要素を使って「セレクタ{プロパティ;値}」という書き方をします。
1.セレクタ
セレクタには「どの部分のデザイン変更をするのか」適用先を書きます。代表的なものでは下記のようなものがあります。
- p{color:◯◯;} 要素セレクタ HTMLのページにあるすべてのp要素が◯◯の色になります
- *{color:◯◯;} 全称セレクタ HTMLのページすべての要素が◯◯色になります
- #id名{color:◯◯;} idセレクタ idで指定した要素が◯◯色になります
2.プロパティ
プロパティとは、セレクタで指定された部分の「何を変えるか」を決めます。p{color:◯◯;}であれば「color」部分がプロパティであり、この場合はセレクタで指定された部分の「色」を変えることを指定しています。たくさんのプロパティがあり、下記はその一部です。
- font-size フォントのサイズ
- font-style フォントのスタイル
- line-height 行の高さ
- text-decoration 文字の装飾
- word-spacing 単語の間隔
- color 文字色
- background 背景関連まとめて指定
- background-color 背景色
- background-repeat 背景画像の並び方
- border 境界線関連まとめて指定
- border-width 境界線の太さをまとめて指定
- border-style 境界線のスタイルをまとめて指定
- display 表示形式
- clip 切り抜き
- list-style-position マーカーの位置
- table-layout 表のレイアウト方法
- outline アウトライン関連をまとめて指定
3.値
値は「どのように変更するのか」を指定します。p{color:◯◯;}であれば「◯◯」の部分になり、redであれば赤色へ変更、blueであれば青色へと変更できます。プロパティと値は{}で囲み、「;」でつなぎます。
3.CSSの書き方
CSSの書き方・場所は大きく3つの方法があります。「外部CSSから読み込む」「HTMLファイルにstyleタグ」「HTMLタグの中に書く」です。それぞれ特徴があるため、自分のやりやすい方法でCSSを書くようにしましょう。
1.外部のCSSファイルに書いて読み込む
1つ目の方法は外部のCSSファイルに書いて読み込む方法です。つまり、CSSファイルを別に作って、HTMLファイルから読み込みを行います。外部CSSを使う方法は、WEBサイトを作る際に最も一般的な方法です。
- ①テキストエディタを使いCSSファイルを新しく作ります
- ②文字化けを防ぐために<@charset “UTF-8”;>をCSSファイルの頭に書きます
- ③CSSを書き保存します
- ④CSSファイルの読み込みを行うHTMLファイルを開きます
- ⑤外部CSSを読み込みするために<link rel=”stylesheet” href=”ファイル名.css”>をheadタグの中に書きます
これにより、外部CSSのファイルがHTMLに読み込まれます。1つのCSSファイルを複数のHTMLファイルで読み込めるため便利です。特にページ数が多い場合は他のやり方だと毎回1からCSSを書く必要があり非常に大変ですが、この方法であればラクに対応できます。
2.HTMLファイルにstyleタグを作ってCSSを書く
HTMLファイルにstyleタグを書いて、その中にCSSを書くことも可能です。
- ①HTMLファイルを開きます
- ②headタグの中にstyleタグ(<style></style>)を書きます
- ③styleタグ内に書いたSCCが適用されます
この方法の場合、CSSを別のHTMLファイルで適用できませんが、そのHTMLファイルにしか適用されないため、他のHTMLファイルを気にすることなく作ることができます。
3.HTMLタグの中にCSSを書き込む
HTMLタグの中にCSSを書く方法です。タグの中にCSSを書く場合は<タグ名 style=”CSS”>と書いていきます。HTMLタグの中にCSSを書き込む場合は外部CSSを変更する必要がないため一部のデザインだけを簡単に変更できます。
しかし、他の方法とは違い、タグの中に書いたCSSはそのタグでしか適用されません。そのため、複数のタグにCSSを適用したい場合はそれぞれ一つひとつ書くことが必要です。まとめてデザインを変更したい時には向いていない方法です。
まとめ
CSSを使うことで、HTMLで骨組みを作ったWEBサイトにデザイン性が加わり、見やすくわかりやすいものができあがります。文字色や背景色、フォント種類など、サイトの内容に合ったデザインや自分の好きな雰囲気に変えることができます。CSSはセレクタ・プロパティ・値の3つの要素で構成されており、「どの・何を・どのように」変えるか指定でき「セレクタ{プロパティ;値}」が基本の形です。
外部CSSを作りHTMLファイルに読み込みしたり、HTMLファイルにstyleタグを作ってCSSを書くなど、書き方・書き場所も複数あります。興味がある人は、ぜひ参考書やサイトなどを使ってCSSを勉強してみましょう!