サイト制作をしたいと考えている方は、CSSコーディングについて知る必要があります。
サイト制作を経験したことがない方の中には、
と疑問を抱く方がいるでしょう。
そこで今回は、CSSコーディングの
・書き方
について説明していきます。
目次
CSSコーディングの意味
CSSとは
CSSは、「Cascading Style Sheets」を略した言葉で、サイトを作るために使う言語です。
CSSには、コンテンツの領域の指定や、文字の色を変えるといった役割を持つプロパティがあります。
プロパティに値を指定することで、スタイルが適用されます。
コーディングとは
コーディングとは、コンピュータに指示を出すプログラミング言語を使ってコードを記述することです。
サイトを作るのに使われるプログラミング言語は、CSSの他にもありますが、注意して欲しいのがHTMLとCSSはプログラミング言語ではないと言う事。
HTMLはマークアップ言語、CSSはスタイルシート言語という分類があり、プログラミング言語とは異なるので注意しましょう。
しかしCSSなどの言語を理解しないと、コーディングができないので、覚える必要があります。
デザイン通りweb上で動作させて閲覧できるように、コーディングする方のことをwebコーダーと言います。
CSSコーディングするために必要なもの
HTML
HTMLは、webページを作るのに使う言語です。
ブラウザを開いていつも観ているサイトは、HTMLで作れるものばかりです。
サイトを作る手順は、まずwebページを作成するためにHTMLを使います。webページができたら、CSSでスタイルを指定していきます。
HTMLのコードを書くファイルがHTML文書で、CSSのコードはスタイルシートに書いていきます。
HTML文書内に直接スタイルを書き込むこともできますが、情報量が多いと書いたコードが分かり難くなりますよ。
コーディングに使うHTMLエディタ
ソースコードを作成するためには、プログラミング言語を記述するソフトを使う必要があります。
使うソフトの名前をHTMLエディタと言います。
テキストエディタをHTMLの編集しやすいように、機能を強化させたものが、HTMLエディタです。
因みにテキストエディタとは、メモ帳などテキストを書けるソフトのことです。
HTMLエディタには、HTMLやCSSのコードを途中まで入力したら、残りの文字列を自動で入力するサポートや、ソースコードで間違いがあったときエラー表示をするといった機能があります。
HTMLエディタというソフトは、数多くあるので、利用する方によってHTMLエディタの使い勝手も変わってきます。
CSSコーディングしてみる
HTMLエディタにまずHTMLをコーディングしていきます。
次に、HTMLのコーディングをしたwebページにCSSでスタイルを適用させていきます。
スタイルを適用させる前と後でどれほど違うのか見比べてみましょう。
まずHTMLをコーディング
まずHTMLで中見出しと、文章を表示するコードを記述します。
See the Pen
htmlをコーディング by 吉井大輝 (@DaiW)
on CodePen.
CSSでスタイルを適用
HTMLでコーディングしたものに対して、CSSのコードでスタイルを適用させていきます。
See the Pen
cssでスタイルを適用 by 吉井大輝 (@DaiW)
on CodePen.
HTMLのコーディングをしたwebページと比べて、CSSでスタイルを適用させたwebページは違ったもの見えるでしょう。
CSSのコーディング次第で、魅力的なデザインに変えられます。
CSSでよく使われる5つのプロパティ
数多くあるプロパティの中から、よく使われる5つのプロパティをご紹介します。
それぞれのプロパティには、どのような意味があるのか見ていきましょう。
marginプロパティ
意味
ボックスの外側の余白に対して設定をするプロパティです。指定する値によって、ボックスの位置を変えられます。
利用できる値
| 値 | 説明 |
|---|---|
| length | 余白を長さで使うpxやemなどの単位を使って指定します。 |
| percentage | パーセントを使って余白を指定します。 |
| auto | autoを指定すると、他の要素に応じて余白が変わります。 |
paddingプロパティ
意味
ボックスの内側にあるパディング領域の余白を指定する際に使います。パディング領域に余白を作ることで、ボックスの中の要素の位置やサイズを変えられます。
利用できる値
| 値 | 説明 |
|---|---|
| length | パディング領域の余白を作るのにpxやemなどの単位を使います。 |
| percentage | パーセントを指定すると、ブロックの幅に応じてパディング領域の余白が変わります。 |
widthプロパティ
意味
要素の幅を変えられるプロパティです。指定する値によって、要素の幅を変えます。
利用できる値
| 値 | 説明 |
|---|---|
| length | 要素の幅をpxやemなどの単位で指定します。 |
| percentage | 値をパーセントにした場合、親の要素の幅に応じて変わります。 |
| auto | 他の要素の幅に応じて、自動で設定されます。 |
heightプロパティ
意味
要素の高さを変えられるプロパティです。指定する値で要素の高さを調整できます。
利用できる値
| 値 | 説明 |
|---|---|
| length | pxやemなどの単位を使って高さを指定します。 |
| percentage | パーセントの単位を使うと、親要素の高さに応じて高さが変わります。 |
| auto | 他の要素の高さに応じて、自動で設定されます。 |
background-colorプロパティ
意味
背景に色を指定するときに使うプロパティです。見えなくなっている領域に色をつけて見えるようにしたり、サイトの印象を変えるときなどで利用できます。
利用できる値
| 値 | 説明 |
|---|---|
| カラーネーム | whiteやblackといった名前で色を指定します。 |
| 16進数 | #の後ろにアルファベットや数字組み合わせた6桁の文字列で色を指定します。 |
| RGB | R（赤)、G（緑）、B（青）それぞれに数値を入れて色を指定します。 |
まとめ
いかがでしたでしょうか？
今回、CSSコーディングの意味や使い方についてご紹介しました。
CSSコーディングを知らない方にとって、難しいところもあると思いますが、その分できるようになったときの喜びは大きいです。
サイトを作ろうか考えている方の役に立てれば幸いです。
