CSS基礎

2024年6月6日 22:35

１．@mediaについて

　@mediaとはメディアクエリと呼ばれ、ページが表示されている媒体に応じて、cssの割り当てを変更することができる仕組みである。例えば、以下の例では、サイトの幅が1000px以上では背景が黒で表示され、1000px未満では緑で表示されるといったことが可能である。webサイトの状態によるif分岐というイメージだろう。

@media (min-width: 1000px) {
  footer {
    background-color: #16222f;
  }
}

@media (max-width: 1000px) {
  footer {
    background-color: #2e9744;
  }
}

２．hover擬似クラスについて

　hover擬似クラスは、オブジェクト上にマウスカーソルがある場合に適用されるCSSを定義するものである。通常の状態と比較して、サブとして用いられるので、擬似クラスと呼ばれる。例えば、ボタンの色の変更などがある。色の変更などは、元のオブジェクトのCSSに、transition属性を設定することで、変化時間を定義できる。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ボタンのホバー効果</title>
    <style>
        .button {
            background-color: #4CAF50; /* Green */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .button:hover {
            background-color: #a0459b;
            transform: scale(1.1)
        }
    </style>
</head>
<body>
    <button class="button">Hover me</button>
</body>
</html>

３．擬似クラス一覧

hover:マウスカーソルを重ねた場合
active:クリックしている場合
focus:入力選択など
visitd:既に訪れたリンク

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>擬似クラスの例</title>
    <style>
        a {
            color: blue;
            text-decoration: none;
        }
        a:hover {
            color: red;
        }
        a:visited {
            color: purple;
        }
        a:active {
            color: green;
        }
        input:focus {
            border-color: green;
            outline: none;
        }
        p:first-child {
            font-weight: bold;
        }
        p:last-child {
            margin-bottom: 0;
        }
        ul li:nth-child(odd) {
            background-color: #f0f0f0;
        }
        ul li:nth-child(even) {
            background-color: #e0e0e0;
        }
    </style>
</head>
<body>
    <a href="https://www.example.com">リンク</a>
    <input type="text" placeholder="フォーカスを当ててください">
    <p>最初の段落</p>
    <p>2番目の段落</p>
    <p>最後の段落</p>
    <ul>
        <li>アイテム 1</li>
        <li>アイテム 2</li>
        <li>アイテム 3</li>
        <li>アイテム 4</li>
    </ul>
</body>
</html>

４．margin属性について

　marginは、要素の"外側の"余白を設定するものである。設定方法は様々あるので、場合によって使い分ける。GoogleChromeでは、検証からオレンジ色で余白が表示される。

  /* 上下左右 */
  margin: 0px;
  /* 上下　左右 */
  margin: 0px 0px;
  /* 上　左右　下 */
  margin: 0px 0px 0px;
  /* 上　下　左　右 */
  margin: 0px 0px 0px 0px; 
  /* 上下は固定　左右は自動で調節し、コンテンツを中央に配置 */
  margin: 0px auto;

５．padding属性について

　paddingは、要素の"内側の"余白を設定するものである。検証では、緑色で表示される。marginとpadding を使い分けて、要素の位置を設定する。

  /* 上下左右 */
  padding: 0px;
  /* 上下　左右 */
  padding: 0px 0px;
  /* 上　左右　下 */
  padding: 0px 0px 0px;
  /* 上　下　左　右 */
  padding: 0px 0px 0px 0px; 
  /* 上下は固定　左右は自動で調節し、コンテンツを中央に配置 */
  padding: 0px auto;

６．display属性について

　display属性とは、指定した要素の表示形式を指定する場合に用いる属性である。具体的には、要素をブロックレベル要素か、インライン要素か、flex要素かなどの指定に用いる。以下に例を示す。

display: block;
display: inline;
display: flex;
display: grid;