posted on 2019.7.23
CSSとはCascading Style Sheets（カスケード・スタイル・シート）の略で、プログラムで表現される文書の構造とデザインを分離させるという理念のもと提唱されたスタイルシート言語の、具体的な仕様の一つです。スタイルシートはワープロソフトのようなオフィスソフトにおいても広く使用されていて、構造化された文書に対して、デザインや見た目の装飾を施すための言語です。スタイルシート言語の中で、ウェブ上で広く使われているHTML文書にたいしてデザインや装飾を設定するのがCascading Style Sheets（カスケード・スタイル・シート）、CSSになります。HTMLがコンテンツの構造と意味を定義する為に使用されるのに対し、CSSはスタイルとレイアウトのために使用されます。例えば、コンテンツのフォント、色、サイズ、余白の変更や複数の列に分割などに使用され、最近ではcssだけでアニメーションさせる機能も強化されています。
ホームページを作る上でCascading Style Sheets（カスケード・スタイル・シート）、CSSは学ばなければならない必須の技術です。ここでは、CSSの構文、CSSの記述場所、記述方法などについて記事にしていきます。
セレクタとCSS構文
CSSはHTML文書の中のどの要素に対してどんなスタイルをどう適用するかを指定します。例えば、すべての<p>要素のテキストの色を青色に設定したい場合以下のように記述します。
|
1 |
p{color:blue;} |
css構文としてpが「selector(セレクタ)」、colorが「propaty(プロパティー)」、blueが「value(バリュー)」という呼び名が付けられていて、propatyとvalueのセットをcss宣言（declareation）と呼び、セミコロンはひとつの宣言の終了を意味します。{}で囲われた領域は宣言ブロックと呼ばれ、ひとつのselectorに対してcss宣言を複数設定できます。上の記述例をプログラム的に単純に解釈すると「pセレクタに対して、colorプロパティーをblueという値に設定することを宣言します。」といった感じになると思います。
よく使う基本CSSセレクタ
CSSで使用できる基本的なセレクタは数種類あるので紹介しておきます。
・要素セレクタ
HTMLタグを指定するおなじみのセレクタです。
|
1 2 3 4 |
p{ color:ghostwhite; background:hotpink; } |
・idセレクタ
HTMLタグ内に記述したid属性を使用して特定の要素を選択します。特定のIDを持つ要素を選択するには、ハッシュ（＃）文字とそれに続く要素のIDを使用します。
|
1 2 3 4 |
#your_id{ color:ghostwhite; background:hotpink; } |
・classセレクタ
HTMLタグ内に記述したclass属性を使用して特定の要素を選択します。特定のクラスを持つ要素を選択するには、ピリオド（.）文字とそれに続くクラス名を使用します。
|
1 2 3 4 |
.your_class{ color:ghostwhite; background:hotpink; } |
・グループ化セレクタ
同じCSSを定義する複数のセレクタはグループ化することができます。セレクタをグループ化するには、各セレクタをカンマで区切ります。
|
1 2 3 4 |
h1,h2,h3,p,ol,ul{ padding: 0; margin: 0; } |
ここで紹介した基本セレクタにCSSに用意されている結合子や擬似要素などの仕組みを使うと、より効率的に多くの要素を選択できるようになります。複雑なセレクタに関したはまた記事にしたいと思ってますが今回は初心者向けホームページの作り方のひとつの記事として書いていますので基本CSSセレクタの紹介にとどめておきます。
CSSの記述場所と記述方法
CSSをHTML文書に適用する方法はインラインスタイル、内部スタイルシート、外部スタイルシートの3つになります。ここでは、それぞれの記述場所、記述方法を解説していきます。
インラインスタイル
インラインスタイル はHTMLタグ内のstyle属性に記述するCSSの宣言方法です。記述したHTML要素のみにスタイルが適用されます。セレクターという概念からは少し外れることになるので注意が必要です。
テキストの色を青、背景色を黄色に設定するcssのインラインスタイルでの記述は以下になります。
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title>css インラインスタイル</title> <meta charset="UTF-8"> </head> <body> <h5 style="color: blue; background-color: yellow;">Hello World!</h5> </body> </html> |
HTMLとCSSの関係のみを考えた場合、現在ではこの方法はあまり使用しないと思いますし、保守性が低く、手間がかかる為、お勧めの方法とは言えません。ただ皆さんがJavaScriptのプラグインなどを使用するようになった場合、JavaScript側からインラインの形で設定されているものもあるので覚えておく必要はあると思います。
内部スタイルシート
内部スタイルシート は外部ファイルを利用せず、HTML文書内の<head>タグ内に<style>タグを記述し、その中にCSSを配置します。
テキストの色をghostwhite、背景色をperuに設定するcssの内部スタイルシートでの記述は以下になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <title>css 内部スタイルシート</title> <meta charset="UTF-8"> <style> h5{ color:ghostwhite; background: peru; } </style> </head> <body> <h5>Hello World!</h5> </body> </html> |
レンタルブログやレンタルECサイトなどは以前はこの形が多かったと思います。どうしても外部ファイルと切り離しておきたいcssが少しある場合や、cssをむやみにいじる必要のない簡単な同じフォーマットのファイルが複数ある場合はこの形のコピペで良いと思います。
外部スタイルシート
.css拡張子が付いたcss専用のファイルをHTML文書とは別に準備して、HTML文書とCSSを完全に分離する方法です。外部cssファイルを<link>要素で参照します。
テキストの色をghostwhite、背景色をhotpinkに設定するcssの外部スタイルシートでの記述は以下になります。
html files
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title>css 外部スタイルシート</title> <meta charset="UTF-8"> <link href="style.css" rel="stylesheet" type="text/css"/> <!-- link要素のhref属性にスタイルシートファイルへの参照を記述して rel="stylesheet" type="text/css"を定番的に記述します --> </head> <body> <h5>Hello World!</h5> </body> </html> |
css files
|
1 2 3 4 5 6 7 8 9 |
/* Created on : 2019/07/24, 16:26:45 Author : 藤沢市、茅ヶ崎市、鎌倉市 ホームページ制作 over */ h5{ color:ghostwhite; background:hotpink; } |
ホームページのつくり方の中では、一番ポピュラーな方法です。3つの方法の中で一番汎用性に優れているので、ホームページ作りが複雑になった時にその効果を感じることができると思います。
今回はホームページの作り方【初心者向け】の流れの中でCSSの基本的な知識を記事にしました。いかがだったでしょうか。CSSについてはDOMに関した内容など覚えていた方がウェブをより理解できるような知識がありますが、今回はCSS初心者向けの記事なので省かせてもらってます。おいおい記事にしていこうと思っているのでまた見にきてください。それではまた。
