Web制作を学ぶDay7【CSSの基本を学ぶ】

上質な情報発信を続けてお役に立てるようサイト運営費用を賄うために、Googleアドセンス・アフィリエイト等を利用しており本記事はプロモーションを含みます。

タック

CSSの理解を深めていくよ

Baby panda

可愛いデザイン作れるようになるかな〰💕

この記事で学べること

【復習】初心者でもCSSの基本がわかる

CSSの基本の形って覚えているでしょうか？

【セレクタ｛プロパティ：値；｝】の順で基本的には並びます。過去の記事で詳しく説明しているので見ていない方はそちらを先に見てください。

セレクタ
どこの？の部分に当たります。HTMLのどの部分を指しているかを指定します。

プロパティ
何を変更するか？ということです。HTML内でセレクタで場所を指定したら、その文字をどのように変更するのかを指定します。

値（バリュー）
どのように？ということです。プロパティが【Color】でしたら、それを何色に変更するかを指定します。

あとは、プロパティ後ろには（：コロン）、値の後ろには（；セミコロン）を打つんでしたね。この入力も忘れないでください。前回記事の写真ですが貼り付けておきますので復習として見てください。

CSSをHTMLと繋げる方法

次にCSSのファイルとHTMLのファイルVSコードで繋げる必要があります。下記のコードをHTMLの<head>内に書き込むことで繋がります。是非一度やってみてください。

※この際にフォルダーのファイル名などにスペル違いがあるとWeb上では反映されませんので、もしうまく反映されていない場合は確認してください。また、過去の記事に「VSコード内でのフォルダの作り方」も合わせて確認ください。

こちらのコード<link rel=”stylesheet” href=”./css/style.css”> ですが、【rel属性】はrelationで関係という意味を持っています。hrefで指定したファイルはstylesheetですよという事ということです。【href属性】はhypertext referenceの略でフォルダを指定する時に使います。hrefの後に（./）が入っていると思いますがこれは階層を表します。下記のファイルの作り方ですと（./)がなくてもCSSが反映されるますが、デイトラで学んだのは上記の例でしたのでこちらを説明しました。ちなみに（../)ですと一つ上の階層という意味を表します。

▼次にCSSファイルのstyle.css内にこちらを書き込みます。

h1{color: red;} ←こちらのコードを書き込み

タック

ファイルの指定について少し深堀りするよ

絶対パスと相対パス

何度も同じコードを出しますが、<link rel=”stylesheet” href=”./css/style.css”> こちらの黄色マーク部分は指定したファイルになります。これはフォルダー内にありますという事を意味しています。ちなみにこれが【相対パス】といいます。基本的にこれから何かを指定する場合はこちらを使います。
また、【絶対パス】というものもあります。これは何かというとWebでよく見られる（httpやhttps）で始まるURLを直接指定するものもです。図で説明します。

タック

ファイルのパス指定は間違えるとうまく表示されないので注意してね

class属性とid属性の解説

CSSの基本の説明に行く前にCSSのセレクタの部分によく記述する【class属性】と【id属性】について説明していきます。この属性は、文章の一部分文字の色・大きさを変更したい場合などに使うことができるのでよく使うものになります。

【class】【id】の名前入力時のルール

✓空白を入れてはいけない

✓一文字目のみ半角英字で記入する。数字は使えない

Baby panda

名前のルールを守らないとエラーが出るから注意だね

よく使う５つのCSSを学ぶ

CSSにもたくさんの種類があります。ここではすべて紹介はしきれないのでよく使うものに絞って紹介していきます。CSSがわかるようになるとWeb制作が楽しくなります是非しっかり学んで次に進みましょう。

とはいえすべて覚える必要は全くありません。HTMLタグと同様にわからない事、やってみたい事が見つかればそのたびにネットで検索すればほとんど丁寧に解説してくれています。一つずつ学んで使いこなせるようになることが大切です。

今回学ぶ5つのCSS

文字の大きさを変更
文字の色を変更
文字の種類を変更
背景の変更・画像の設定
余白の調整

１，文字の大きさを変更

文字の大きさを変更するにはプロパティに【font-size】を入力します。次に値に自分の考える数値と単位を書き込みます。今回は値を3つ紹介していますが他にも【mm】単位があったりと様々あります。表示したいものによって選ぶ単位数はご自身で選ぶとよいと思います。まずはいろいろと試してみましょう。

２，文字の色を変更

文字の色を変更するにはプロパティに【color】を入力します。次に値に自分の考える色を書き込みます。基本的には図の3種類の値の使い方をします。Googleのカラーピッカーというパレットがありますのでそちらも活用してみてください。これからWeb制作やデザインをする方にとっては色についても学んでおくとサイトづくりにとても役に立ちます。

３，文字の種類を変更

文字の字体を変更するにはプロパティに【font-family】を入力します。次に値の部分に自分の入力したい字体を書き込みます。たくさんのフォントがあるのでWeb上で使いたいフォントをまずは探すといいと思います。

ここだけは覚えてほしいのですが、字体入力は基本の書き方があります。フォント種類はブラウザによっては表示されないものがあるからです。ですのでフォントを指定する際に１つでなく複数使うのが一般です。例えば下記の図に【font-family: serif,sans-serif;】とありますが、これは2つ指定しています。前にあるものが優先されますが、もしブラウザにより使えないフォントだったとするとその次に書いてあるものを使うという考え方です。ちなみに【sans-serif】は全てに対応したものになるので必ず最後には入れるようにしましょう。

あとゴシック体で使用した【”hiragino Maru gothic Pro”】ですが、文の始まりと終わりに（”）を入れ無いと認識されません。というのもスペースがあったり日本語を使用するものは（”）を使用するという決まりがありますので必ず覚えてください。また、2つ以上指定する場合はフォント名間で（,）を入れる必要もあります。

４，背景変更・画像設定

まずは背景色の変更です。こちらのプロパティは【background-color】を指定します。下記の図では【body】で背景全面を指定しています。又、HTML内の<p>タグだけ背景を変えたい場合はCSSで【 p{background-color:red;}】と入力すればその部分だけ背景色が変わります。

次に背景に画像を貼り付けます。

プロパティには【background-image】を使います。値には画像を指定します。しかしこれだけだと画面いっぱいに同じ画像が連続して表示されてしまいます。そこで使うのが【background-repeat】です。これはどのように表示させるかを指定するものです。図で紹介しているものは【no-repeat】で繰り返さないというものを指定しています。もし柄で繰り返し使いたい。でも横方向だけで良いという場合【repeat-x】、縦方向だけの場合【repeat-y】を指定すればその方向だけになりますので使い分けてください。

５，余白の調整

私達は普段気にせずにWeb上で文章を読んでいますが、実はすべての文章や画像には細かく分けると４つのボックスに囲まれています。普段は目には見えないのですが【content・padding・border・margin】の4つに分かれています。これをブロックボックスと言います。まずは図もくは画像を見てください。