【超有料級】元プロ講師が教える🔥Webページの作り方講座｜第2回【CSSの基礎】

2024年3月7日 22:51

⭐経歴＆実績⭐
・小中学生プログラミング教室の校責任者として、200名以上に個別授業
・中高大生プログラミング教室の校責任者として、100名以上に集団授業
・教育企業の管理職向けDX研修担当者として、50名以上に集団研修
・教育業界の現状を変えるため退職、無職クリエイター活動開始🤞

皆さん、こんにちは！
「元プロ講師が教える🔥Webページの作り方講座」、前回に続き第2回は、【CSSの基礎】の解説です！

👇 本記事は、配信動画を見ながら進めると、よりスムーズに理解できます👇

今回の目標

前回の復習

HyperText Markup Language、Webページの骨組み
<〇〇>「開始タグ」</〇〇>「終了タグ」
役割を持った塊のこと「要素」
<html>DOCTYPE宣言以外の全要素が入る箱</html>
<head>Webクライアントに解析させる情報が入る箱</head>
<body>ユーザーに見せる全要素が入る箱</body>
外側の要素「親要素」、内側の要素「子要素」
子要素の子要素を「孫要素」、孫から見たら「祖先要素」
<a href="https://google.com">リンク</a>
anchor：現ページからリンク先のページへ繋ぐ役割が船の錨っぽい
Uniform Resource Locator：インターネット上の情報資源の位置特定
hypertext reference：リンク先のURLを指定
<img src="source.png">
image：画像を埋め込む、source：大元の出所、resource：資源
<ul>箇条書き</ul>
unordered list：箇条書きのリスト
<ol>順位書き</ol>
ordered list：順位書きのリスト
<li>リストの要素</li>
list item：リストの要素

CSSの解説

CSSとは？
Cascading Style Sheets、Webページの飾り付け

まずはCSSファイルを作成しましょう！
（VSCodeのアイコンは「#ハッシュ」）

CSSの書き方を見ていきます。
セレクタ {
プロパティ: 値;
}
どこの {
何を: どうする;
}

HTMLファイルに以下を入力、ページを表示しましょう！
（relation：現ページとリンク先の関係を指定）
（hypertext reference：リンク先のURLを指定）

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>第2回CSSの基礎</title>
        <link rel="stylesheet" href="style.css"><!-- 追加 -->
    </head>

セレクタの指定方法

全称セレクタ　　* {何を: どうする;} == 全要素を飾り付け
要素セレクタ　　p {何を: どうする;} == 指定した要素を飾り付け
クラスセレクタ　.no {何を: どうする;} == 指定したclass属性を持つ要素
IDセレクタ　　　#no1 {何を: どうする;} == 指定したid属性を持つ要素

「:」コロンは区切り、「;」セミコロンは文末
「p, div」カンマを入れることで、<p>と<div>両方の要素を飾り付け
（id属性の飾り付けが優先される）

px　RGB

pxピクセル　どこの {何を: 50px;}
ディスプレイの画素1ピクセルに対応する絶対的な長さの単位
（ディスプレイと相性が良いため、絶対的な長さの単位はpxが一般的）

RGBカラー　どこの {何を: rgb(0, 255, 0);}
Red、Green、Blueの成分で指定した色
（色の不透明度を表す「アルファ成分」を追加指定できる）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>pxの例</title>
    </head>
    <body>
        <div style="display: inline-block; width: 1px; height: 1px; background-color: black; margin-top: 20%; margin-left: 10%;"></div>
        <div style="display: inline-block; width: 100px; height: 100px; background-color: black;"></div>       
    </body>
</html>

色　フォント

テキストの色　　どこの {color: どうする;}
要素の背景色　　どこの {background-color: どうする;}
フォント種類　　どこの {font-family: どうする;}
フォント大きさ　どこの {font-size: どうする;}
フォント傾き　　どこの {font-style: どうする;}
フォント太さ　　どこの {font-weight: どうする;}
テキスト行高さ　どこの {line-height: どうする;}

* {
    color: red;
    background-color: rgba(0, 0, 255, 0.5);
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
    font-style: italic;
    font-weight: bold;
    line-height: 50px;
}

境界線　余白

境界線の色　　　　どこの {border-color: どうする;}
境界線のスタイル　どこの {border-style: どうする;}
境界線の線幅　　　どこの {border-width: どうする;}
境界線の一括指定　どこの {border: どうする;}
要素の周りの領域　どこの {margin: どうする;}
要素の内部の領域　どこの {padding: どうする;}
上の辺のみ指定　　どこの {padding-top: どうする;}
右の辺のみ指定　　どこの {padding-right: どうする;}
下の辺のみ指定　　どこの {padding-bottom: どうする;}
左の辺のみ指定　　どこの {padding-left: どうする;}
（肩パッドみたいに、内側に詰めていくからpadding）

* {
    border: black solid 1px;
    margin: 100px 50px 25px 0;/* 上、右、下、左の順に指定できる */
    padding-top: 100px;
    padding-right: 50px;
    padding-bottom: 25px;
    padding-left: 0;
}

要素の大きさ　配置

要素の横幅　　　どこの {width: どうする;}
要素の高さ　　　どこの {height: どうする;}
寸法の扱い　　　どこの {box-sizing: border-box;}
要素の表示形式　どこの {display: どうする;}
要素の配置　　　どこの {position: どうする;}
重ね合せの順序　どこの {z-index: どうする;}
水平方向の配置　どこの {text-align: どうする;}

* {
    width: 50%;
    height: 50%;
    box-sizing: border-box;/* 100pxに指定した場合、境界線とpaddingを含めて100pxになる */
    display: inline;/* 要素を横並びで表示 */
    position: relative;
    z-index: 10;
    text-align: center;
}

まとめ

Cascading Style Sheets、Webページの飾り付け
セレクタ {
プロパティ: 値;
}
どこの {
何を: どうする;
}
全称セレクタ　　* {何を: どうする;} == 全要素を飾り付け
要素セレクタ　　p {何を: どうする;} == 指定した要素を飾り付け
クラスセレクタ　.no {何を: どうする;} == 指定したclass属性を持つ要素
IDセレクタ　　　#no1 {何を: どうする;} == 指定したid属性を持つ要素

今回は、【CSSの基礎】を解説しました。
沢山のインプットで頭がパンクしそうな人もいるかもしれませんが、ご安心ください！やってくうちに慣れていきます！
これから一緒に、レベルアップしていきましょう！

少しでも良かったなと思った方は、チャンネル登録よろしくお願いします！
第3回は【HTML・CSSの実践】を配信します。それでは、また次回〜！🖐️

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