🍎CSSの基本②🍎

🌟３つのセレクターを使えるようになろう

セレクターとは（どこの）{
プロパティ（何を）：値（どうする）；
}

🌱３つのセレクター

• エレメント（要素）セレクター
• idセレクター
• クラスセレクター

1. エレメント（要素）セレクター

要素を指定してスタイルを設定する方法

      body {
        background-color: #ccc;
      }

2. IDセレクター

要素にページ内でユニークな名前であるidをつけられる
そのidを指定してスタイルを付けられる！

<p id="hello">こんにちは中村さん</p>

CSSでは

#hello {
        color: blue;
      }

⚠️同じページ内で一箇所しか指定できない!!

3. クラスセレクター

セレクターにクラスを指定する
クラスというのはHTMLの属性に対してクラス名を付けることでグループ分けができる機能

idと違いHTML内で同じ名前で何回設定してもOK🙆🏻‍♀️
同じ内容のスタイルを複数の要素に設定したい場合に便利！！

<ul>
      <li><input type="checkbox">読書</li>
      <li class="completed"><input type="checkbox" checked>HTMLの学習</li>
      <li class="completed"><input type="checkbox" checked>JavaScriptの学習</li>
    </ul>

CSS

.completed {
        text-decoration: line-through;
      }

👆クラスを指定するにはドットをつける！

<li class="completed red"><input type="checkbox" checked>JavaScriptの学習</li>

一つの要素に対して複数のクラスを指定することもできる！！🙆

🌟結合子を使ったセレクタを指定

より詳細にセレクタの適用先を指定することができる！

🌱結合子を使ったセレクタの種類

• ユニバーサルセレクタ *　全ての要素に適用　▲
• 子孫セレクタ スペース　Aの階層下の全てのB　◎
• 子セレクタ >　Aの一つ下の階層のB　○
• 隣接セレクタ + Aの直後に記述した同じ階層のB　▲
• 間接セレクタ ~　Aの後に記述した全ての同階層のB　▲

1. ユニバーサルセレクタ

全ての要素というのはHTML要素BODY要素、さらにその配下に配置した要素全てに適用される
ブラウザがデフォルトで持っているスタイルを消したい時に利用！

      * {
        margin: 0;
      }

2. 子孫セレクタ

P要素の階層化の全てのストロング要素にスタイルが適用される

      p strong {
        color: red;
      }

3. 子セレクタ

P要素の一つ下の階層のストロング要素にスタイルが適用

 p>strong {
        color: red;
      }

4. 隣接セレクタ

H要素の直後に記述した同じ階層のP要素にスタイルが適用される

h2+p {
        color: red;
      }

5. 間接セレクタ

H1要素の後に記述した全ての同階層のP要素にスタイルが適用

 h1~p {
        color: red;
      }

🌟複数のセレクタを指定

カンマ区切りで複数のセレクタを書くことができる！
別の言い方でセレクタリストを使うという

h1,
      p {
        color: blue;
      }

セレクタリストを使うと一つずつ記載する場合と比べて
CSSが見やすくなる！🙆🏻‍♀️

🌟リンクで使用する擬似クラスを設定

擬似クラスとは~
要素の状態に応じてCSSの設定を適用することができる

🌱主なリンクで使用する擬似クラス

• a:link　未訪問のリンク
• a:visited　訪問すみのリンク
• a:hover　ホバー状態のリンク
• a:active　クリック状態のリンク

      a:link {
        color: black;
      }

      a:visited {
        color: red;
      }

      a:hover {
        color: green;
      }

      a:active {
        color: blue;
      }

⚠️
link,visted,hover,activeの順番で記述する

φ(･･
順番を守らないと期待する動作にならない！！
LVHAと覚える

スマホやタブレットなどではホバー状態が発生しない

🌟フォントを指定しよう

CSSによるフォント指定
構文
フォント名とフォントファミリー
どうやって指定を決めるのか

構文
セレクタ{
Font-family: フォント名ORフォントファミリー;
}

例）

html {
font-family: self;
}

🌱フォント名

具体的なフォント名を指定

例）

• メイリオ
• Hiragino Kaku Gothic ProN

システムにインストールされているフォントがデバイスによって異なるので
エンジニアやデザイナーが意図しないフォントが表示される可能性がある課題がある

Macだとフォントブックで確認できる

🌱フォントファミリー

フォントの種類を示すキーワードで指定

• Serif👉明朝体
• Sans-serif👉ゴシック体

font-falilyプロパティの設定事例

html {
font-falily: ”メイリオ”,”Hiragino Kaku Gothic ProN”, sans-serif;
}

φ(･･
複数のフォント名、フォントファミリーをカンマ区切りで指定できる
左側の指定から優先して使われる！！
フォント名は””で囲うが、フォントファミリーは囲わない

指定については絶対的な正解はないが
日本のサイトではシンプルに指定すると、
Windows向け、Mac向け、INAXなどで見られた場合を想定して
フォントファミリーの指定をする方法が考えられる！

🤔🤔🤔

どうやって指定を決める？？

フォントファミリーの設定方法には、一つの正解があるわけではない
プロジェクトで決める、大手のウェブサイトを研究するなど！
👉
ウェブサイト、検証のエレメンツタブでHTMLをクリックしてフォントファミリーの指定を確認！

🌟ウェブフォントを利用しよう

ウェブフォントとは〜
WEBサーバー上に配置したフォントファイルをインターネット経由で配信して
ウェブブラウザで表示させる仕組み

ウェブフォントを利用するメリット

どのユーザー環境でも、同一のフォントが表示されるようになる！！
製作者の思い通りの印象をユーザーに与えることができる！

💡Googleフォンツを利用

https://fonts.google.com/

リンクとフォントファミリーをコピペする_φ(･_･

🙆‍♀️メリット

• システムに依存しないで、意図したフォントをユーザーに表示できる

🙅デメリット

• ダウンロードに時間がかかり、ページの表示が遅く感じられる場合がある
• 有料の場合もある

🌟テキストにさまざまなスタイルを当てる方法

利用頻度が高いもの

h1 {
        color: blue;
        font-size: 64px;
        /* text-align: right; */
        /* text-align: left; */
        text-align: center;
}
p {
        font-weight: bold;
        /* text-decoration: line-through; */
        text-decoration: underline;
      }

---

今日はCSSの基本習得編の残りを終わらせた！
真似しながら、メモしながらだとやっぱり時間かかる〜
でも新しいMacも届いたしモチベ上がった！！
積み重ね、習慣化が大事💪🏻パワー