はじめに
CSSは一言でいうと、Webサイト上の文字・枠・背景などの見た目やそれらの配置を指定するための言語です。最初は「CSS は見栄えを変えることができるんだ」くらいの認識で構いません。CSS は HTML と合わせて用います。ちなみに CSS はCascading Style Sheetsの略です。
書き方
CSS を用いてスタイルを指定する際には、まずどこをどのような見た目に変更するか決めます。
sample.css
p{font-size:40px;}CSS の基本的な書き方は セレクタ {プロパティ名:値;} という構造になっています。セレクタには変更したい要素の名前を指定します。上の例ではp要素となっています。プロパティ名にはスタイルの種類を指定します。プロパティとは変更するスタイルの種類みたいなものです。例では文字の大きさとなっています。値にはプロパティをどのように変更するかを指定します。上の例では40pxとなっています。
一度に複数のプロパティを指定することもできます。その際、改行をしてもスタイルには影響がでません。コードが見やすくなるので、個人的には改行して書くことをおススメします。
sample.css
/* 改行しない*/p{font-size:30px;color:red;height:80px;}/*改行した*/p{font-size:30px;color:red;height:80px;}基本的なプロパティとその使用例
基本的なプロパティ一覧
| プロパティ | 説明 |
|---|---|
| width | 横幅の指定 |
| height | 高さの指定 |
| color | 文字の色の指定 |
| background | 背景関係をまとめて指定 |
| background-color | 背景の色を指定 |
| margin | 要素外の間隔の指定（余白のようなもの） |
| padding | 要素内の間隔の指定（余白のようなもの） |
| font | フォント関係をまとめて指定 |
| font-size | フォントの大きさ（文字の大きさ）を指定 |
| font-family | フォントの種類の指定 |
| float | 要素を左右に寄せる |
使用例
以下の sample.html を用意しました。（比較し易くなるように予めbackground-colorに黄色を指定しています。）
sample.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Sample</title><linkrel="stylesheet"href="sample.css"></head><body><p>こんにちは！</p></body></html>
このWebページに以下のCSSを適用させてみます。
sample.css
/*背景を黄色、横幅を100px、高さを30pxにして、padding,marginを100px加える*/p{width:100px;height:30px;padding:100px;margin:100px;background-color:yellow;}
Webページが変化しました！
ここで、「margin」と「padding」の違いについて軽く触れておきます。
上のプロパティ一覧表にも書いてありますが、「margin」は要素外、「padding」は要素内に余白を追加します。下図のようなイメージです。
次にfloatを適用させてみます。
sample.css
/*p要素を右に寄せ、さらに背景を青色に変更*/p{width:100px;height:30px;padding:100px;margin:100px;background-color:yellow;/*要素を右に配置*/float:right;}
要素が右に移動しました！
まとめ
- CSS は HTMLで記述した要素のスタイルを指定するための言語である。
- 「margin」は要素外、「padding」は要素内に余白を加える。
- floatプロパティを用いると要素を左右に移動させることができる。