【今日学んだこと】HTML CSS Webデザイン

今日も、Webデザインの勉強をしました。

重要だと思ったポイントをまとめていきます。

★重要だと思ったポイント

CSSはセレクター、プロパティ、値と呼ばれる3つの部品を組み合わせて、「どの部分の、何を、どう変えるか」を指定。

セレクターは、どの部分を装飾するのかを指定。

プロパティは、セレクターで指定された部分の何を変えるのかを指定。

値は、その見た目をどのように変えるのかを指定。

〇CSSを書く時のルール

・半角英数字で書く。

・大文字と小文字の区別はない。

・複数のセレクターに同じ装飾を指定するときは「,」でセレクターを区切る。

・1つのセレクターに複数の装飾をしたい場合は、値の最後に「;」を加えてプロパティを区切る。

・文字サイズや、幅、高さなどを指定するときは、値が「0」の場合を除き、単位も一緒に書く。

・複数のセレクターを半角スペースで区切ると、してした要素の中にある要素を指定できる。

font-sizeプロパティは、文字のサイズを指定。

ジャンプ率とは、見出しと本文の文字サイズの比率のこと。

font-familiyプロパティは、フォントの種類を指定する。複数のフォントを指定でき、フォントン種類を「,」で区切って、先に指定したものから優先的に適用される。

〇フォントの種類

明朝体…丁寧でかしこまった印象

ゴシック体…どんなデザインにも合わせやすい

装飾系フォント…「見せる」ためのものなので、本文には使わない

font-weightプロパティは、フォントの太さを指定。キーワードで指定するのが一般的。

line-hightプロパティは、行の高さを指定。綺麗に見えるおすすめの数値は、1.5～1.9の間。

text-alignプロパティは、テキストをそろえる位置を指定。日本語の場合、デフォルトでは左揃え。

Webフォントとは、フォントファイルをWebサーバー上から持ってきて使うことができる技術。

〇CSSで色を指定する3つの方法

・カラーコードで指定する

・RGB値で指定する

・色の名前で指定する

カラーコードやRGB値を調べるには、カラーピッカーを使うとよい。

colorプロパティは、文字に色をつけるプロパティ。

background-colorプロパティ背景に色をつけるプロパティ。

色は、色相・明度・彩度の3つの要素から成り立っている。

色相は、色の違いのこと。

明度は、色の明るさの度合いを表す。

彩度は、色の鮮やかさの度合いを表す。

暖色は、赤を中心とした色相。

寒色は、青を中心とした色相。

中性色は、緑や紫など温度を感じない色相。

無彩色は、白、黒などの色味がない色相。

色を見ることで、人は様々なイメージを連想する。

国や人種、文化によっても色の印象は異なってくる。

トーンとは、明度と彩度を合わせた概念。同じ色相でもトーンによって印象は大きく変わる。

色をどの比率で組み合わせるかは、とても重要。そこでポイントとなるのが「ベースカラー」「メインカラー」「アクセントカラー」の割合。

ベースカラーは、デザインの基盤になる色。Webサイトでいうと背景色。

メインカラーは、デザインの中で最も見てほしい色。

アクセントカラーは、デザインを引き締め、メリハリをつけるためのワンポイントとなる色。

オススメのバランスは、ベースカラー70%、メインカラー 25%、アクセントカラー 5%。

使う色が多くなった場合は、メインカラーを分割すると全体的にスッキリとおさまる。

CSSの場合は、「/*」と「*/」で囲めばコメント表示ができる。

以上です！