Zenn
✨

CSSについて

2024/12/24に公開
CSS
tech

CSSとは

Webサイトやアプリの見た目を整えるスタイルシート言語。
セレクタにてスタイルを適用する要素を指定し、
プロパティにて具体的にその指定したセレクタにどんなスタイリングを行うかを記述する。

/* このbutton部分がセレクタ */
button {
　/* 以下の記述がbuttonタグに対するプロパティ */
 color: 'white';
 background-color: 'blue';
 border-radius: 5px;
 height: 20px;
 width: 50px;
}

CSSの呼び出し方

  1. 内部スタイルシート
    　 HTMLのheadセクションのstyleタグ内に記述する方法
<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: red;
            font-size: 15px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>このテキストは赤色で15pxです。</p>
</body>
</html>
  1. 外部スタイルシート
    　　CSS用のファイルを作成し、そこに記述する方法
    　　3つの手法の中で一番推奨される方法。
styles.css
p {
    color: red;
    font-size: 16px;
}
  1. インラインスタイル
    HTML要素に直接スタイルを書き込む方法
<p style="color: red; font-size: 15px; font-weight: bold">赤くて太字の15pxの文字</p>

あまり使えてなかったCSSプロパティ

  1. overflow
    コンテンツがはみ出したときのスタイル
    　　スクロールしたい場合などに使うことが多いかも。

IDとclassの使い分け

IDは一度しか使わない場合に用い、
classは複数の要素に適用する場合に用いる

あまり使ったことのないCSSセレクタ

  1. 子要素
    直近の子要素にスタイルを適用する
div > h2 {
    color: white;
}

この場合、div内のh2タグすべてにスタイルが適用される

  1. 疑似要素
p::last-line {
    font-size: 20px
}

p要素の最後の行にスタイルを適用している

Discussion