前回は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の要素（画像やテキストなどコンテンツ）は、以下のように四角い領域によって形成されます。

f:id:amarelo-n24:20200418122500p:plain

それぞれ、

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サイトの構成を考えながら学んでいきたいと思います。理解を深め、もっと見やすいブログにもできればなぁと思います。では今日はこの辺で！

amareloのブログ（仮）

IT系勉強会で感じた想いや知見をメインに書いていきます。

CSSでの背景設定や余白調整など

目次

CSSとは

CSSの基本的な書き方