【Day3】CSS

けけ丸

chapter1 : まずはCSSが反映されるように準備

エディタ(僕はVScode使ってます)に
index.html / style.css / あとついでにimgのファイルをそれぞれ作る。

『vscodeって何？』の方はこの蟹みそハゲ太郎さんの解説をご覧ください。


chapter2 : HTMLからCSSを読み込めるようにする

エディタのindex.htmlで「！(半角)」を入力し、Tabキーまたはエンターキーを押してみてください。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
</body>
</html>

するとこんな感じのコードが現れるはずです。
2行目が<html lang="en">になっている人は<html lang="ja">に変更しましょう。(en→english / ja→japanese)

で、<head></head>内に以下のコード追加します。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <link rel="stylesheet" href="./css/style.css"> ←このコード
</head>
<body>
</body>
</html>

link rel="stylesheet"→このファイルはスタイルシートで
href="./css/style.css"→ファイルの場所
とそれぞれ宣言しています。

href="./css/style.css"のようにファイルの場所を指定する際は
「相対パス」と「絶対パス」の概念を理解した方がいいので以下の記事で理解してみてください。

ちなみに今回の場合は相対パスで場所指定しています。
CSSファイルは相対パスで指定するのが一般的です。


chapter3 : セレクタ / プロパティ / バリュー

CSSを記述する際はこの形が基本となります。
以下の場合、html.indexで記述しているh2のテキストがWeb上で青色に反映されます。

h2{ color: blue;}

h2→セレクタ(要素を指定)
color→プロパティ(スタイルの種類)
blue→バリュー(プロパティ似実行してほしい内容)
※プロパティの右の「：(コロン)」、バリューの右の「；(セミコロン)」は必須です。

プロパティはたくさんありますが一部紹介します。
最初から全部暗記する必要はありません。
コードを書いている内に自然と身につきます。

color:文字色変更
font-size:文字サイズ
font-weight:文字ウエイト
text-decoration:文字装飾
line-height:行の高さ
margin-top(left/bottom/right):上下左右の外余白
padding-top(left/bottom/left):上下左右の内余白
width:幅
height:高さ
text-shadow:文字影
box-shadow:ボックス影
background-color:背景色
background-image:背景画像
border-left(bottom/top/right):境界線
letter-spacing:文字感覚
display:表示
text-align:行揃え

思いつく限り書きましたが全部書いていたらキリがありませんし、僕が知らないこともまだまだあると思うのでtagindex.サイトを参考にしてみてください。


chapter4 : クラス

次にクラスという重要な考え方。
例えば下記のようなHTMLがあるとします。

[index.html]

<h2>今日も快便だ！！</h2>

<h2>今日は便秘気味だ！！</h2>

で、「今日も快便だ!!」を青色にしたいと思いたって次のようなCSSを書くとします。

[style.css]

h2{
    color: blue;
}

するとどうなると思いますか？

「今日も快便だ!!」と「今日は便秘気味だ!!」の両方とも青色になってしまうんですよねえ。

ここで大事になってくるのが"クラス"という考え方。
難しく考える必要はなく、要はセレクタに名前をつけてあげる感じです。
頭のタグの後ろに「class="名前"」をつけるだけの簡単作業。

[index.html]

<h2 class="unnchi">今日も快便だ！！</h2>

<h2>今日は便秘気味だ！！</h2>

そしてCSSには「unnchiを青くして〜」という命令文を書く。

[style.css]

.unnchi{
    color: blue;
}

これで「今日も快便だ!!」だけが青くなるという仕組みです。
※クラスをCSSで扱う時には頭に「.(ドット)」をつけるのをお忘れなく


chapter5 : 1時間を迎えましたので、、

デイトラで学んだことをnoteにまとめていっているんですけども、教材のボリュームが豊富なので全部書いてたらめっちゃ時間とられます。
なので「記事を書き始めて1時間くらい経過したら、書ききれていない解説はどこかの誰かが書いてる分かりやすい記事のリンクを貼る」という自分ルールを設定しました。

本日書ききれていないジャンルはこちら！

・子孫要素


・ボックスモデル←これめっちゃ大事な概念です


こんな感じで今日はここまでです。
もっと端的に分かりやすくスピーディーに文章書けるように精進します。
ありがとうございました。

けけ丸


この記事が気に入ったらサポートをしてみませんか？