🍎

🍎CSSの基本②🍎

2022/12/01に公開・約3,900字

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

セレクターとは(どこの){
プロパティ(何を):値(どうする);
}

🌱3つのセレクター

  • エレメント(要素)セレクター
  • 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も届いたしモチベ上がった!!
積み重ね、習慣化が大事💪🏻パワー

Discussion

ログインするとコメントできます