前回はHTMLについて書きましたので、今回はCSSについて学んだことを書こうと思います。
目次
CSSとは
Cascating Style Sheets（カスケーティング・スタイル・シート）といい、Webページの装飾を定義するための言語です。 CSS単体で機能するものではなく、HTMLと合わせて作成するものです。
CSSの基本的な書き方
以下のように書きますが、セレクタ（HTMLの要素名）・プロパティ・値（プロパティと値は複数ある）の順に書いていきます。 プロパティと値は｛｝でくくり、値の末尾には ; （セミコロン）をつけます。 プロパティと値の組み合わせが複数ある場合は、1組1行ごと書きます。
例えば、HTMLのheader要素の装飾を整えたい場合は、
header{
font-size:50px;
font-weight:bold;
}
と書きます。上記例文では、header要素に書かれた文字のフォントサイズを50pxに、文字を太字にします。
プロパティの種類
プロパティでフォントサイズ、文字色、配置などを指定できます。 目的別にたくさんありますが、今のところ自分が学んだプロパティは以下の通りです。
フォント・文字色の変更
| プロパティ | 説明 | 値の例 |
|---|---|---|
| color | 文字色を指定する | black、whiteなど |
| font-size | 文字サイズを指定する | 50px |
| font-family | フォントの種類を指定する | serif |
テキスト
| プロパティ | 説明 | 値の例 |
|---|---|---|
| text-align | 配置を指定する | center（中央揃え）、left（左）、right（右） |
背景
| プロパティ | 説明 | 値の例 |
|---|---|---|
| background-color | 背景色を指定する | black（カラーコードで表すことも可能） |
| background-image | 拝啓の写真を指定する | url(ファイルパス) |
余白の設定
余白設定のプロパティに触れる前に、HTMLのボックスモデルについて書きます。
ボックスモデル
HTMLの要素（画像やテキストなどコンテンツ）は、以下のように四角い領域によって形成されます。
それぞれ、
- margin （要素外側の枠）
- boarder（要素の枠）
- padding（要素内側の余白）
といった構成です。 paddingやmarginの左右上下の割合（値：○%）で余白を調整します。
| プロパティ | 説明 |
|---|---|
| padding-left | paddingの左側の余白調整 |
| padding-right | paddingの右側の余白調整 |
| padding-top | padding上部の余白調整 |
| padding-bottom | padding下部の余白調整 |
要素自身の大きさは、heightとweight（値：○px）で調整します。
| プロパティ | 説明 |
|---|---|
| height | 要素の高さ |
| weight | 要素の幅 |
コード例
前回の記事でHTMLを書きましたが、その体裁を調整するためのCSSは以下の通りです。
※これでどのようなHTMLが表示されるかは、前回の記事を参照してください。
body {
background-image: url(fruit-1655374_1280.jpg);
background-color: rgb(255, 255, 255,0.4);
background-blend-mode: lighten;
background-size: cover;
}
header{
color: black;
font-size: 50px;
font-family: serif;
font-weight: bold;
text-align: center;
}
main{
color: black;
font-size: 30px;
font-family: serif;
text-align: center;
}
footer{
color: black;
font-size: 20px;
font-family: serif;
font-weight: bold;
text-align: center;
}
ul{
padding-left: 0%;
}
最後に
HTMLもCSSも学んだことはまだほんの一部なので、自分が実現したいWebサイトの構成を考えながら学んでいきたいと思います。 理解を深め、もっと見やすいブログにもできればなぁと思います。では今日はこの辺で！
