CSSのプロパティを探索してみる

[前回の投稿](https://qiita.com/Ki2neudon/items/ab3f3abe913adb20f8be)で課題とした部分。

>こういったパラメータがものすごいたくさんある。
すべてを記憶する必要はないが、触っておけば「あ、こんなのあったな」と思い出せるので、一度全部網羅しておきたい。

探索するツールをご提供するものではなく、ゴリゴリ力技でひととおり体験してみようのコーナー！
※「パラメータ」と書いてしまったが「プロパティ」が正しいらしい

# 更新履歴

一度に全部を学ぶことは無理なので、順次更新していくつもり

## 2024.12.03 初版

新規作成

# 参考

- [CSS リファレンス via mdn web_docs](https://developer.mozilla.org/ja/docs/Web/CSS/Reference)
- [【初心者向け】CSSのプロパティ一覧を覚えておきたい重要度別に分けてみた](https://qiita.com/7note/items/c90ba916f23d29229ac4)
- [CSSプロパティ早見表 via 文系大学生のためのHTML／CSS入門](https://zenn.dev/ojk/books/intro-to-html-css/viewer/css-properties)

順次増えていく(かも)

# 進め方

1. 他の方がまとめた「よく使うCSSプロパティ」をひととおり体験してみる
1. 自分の中で優先度つける ★未着手★

# CSSプロパティ ゴリゴリ体験

基本的にフォルダ構成は以下

```text:フォルダ構成
model02\
|`css\
|  `stylesheet.css
|`img\
|  `xxxx.png
 `sample.html
```


## color

```html:sample.htmnl
    <div class="container">
        <h1>colorテスト</h1>
    </div>
```

```css:stylesheet.css
.container h1 {
    color:chocolate;
    border-style: solid;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/9b88495d-aafc-3d2e-63d0-f3a5a409531b.png)

文字色を変えることによく使っていたが、正しくは「前景色」の指定らしい。ボーダーやリストなども全部同じ色になる。

文字色だけ変えるときは`<span>`で囲って別指定なのかな。

## background-color／background-image

背景色。`background-image`で画像を指定でき、<font color="red">こっちが優先される。</font>

背景画像からはみ出した部分は`background-color`が適用される。

```html:sample.html
    <div class="container">
        <h1>Sample</h1>
    </div>
```
```css:stylesheet.css
.container h1 {
    height: 400px;
    width: 400px;
    color: white;
    background-color: darkorange;
    background-image: url("../img/mask_buff_skarf_man.png");
    text-align: center;
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/e4a4729a-2772-2d2d-2f12-592aac922b39.png)

## accent-color

フォーム部品のアクセントカラーを指定する。おっしゃれ～ :star2:

```html:sample.html
    <div class="container">
        <input type="checkbox" class="checkbox">チェックボックス<br>
        <input type="radio" class="radio" name="fruit">リンゴ
        <input type="radio" class="radio" name="fruit">バナナ
    </div>
```

```css:stylesheet.css
.checkbox {
    accent-color:  green;
}
.radio {
    accent-color: orange;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/d247679e-c046-7e41-79af-d2147fe8d74c.png)

## opacity

不透明度。Progateでは0～1で指定したけど％指定もできるらしい。
背景色・背景画像両方に適用されちゃう。

```html:sample.html
    <div class="container">
        <h1>Sample</h1>
    </div>
```
```css:stylesheet.css
.container h1 {
    height: 400px;
    width: 400px;
    color: white;
    background-color: darkorange;
    background-image: url("../img/mask_buff_skarf_man.png");
    text-align: center;
    opacity: 50%
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/46ebaff8-8d16-b573-cfe4-6ed268a72dd4.png)

背景色のみ透過したい場合は`background-color`を`rgba`で指定する。
背景画像のみを透過する方法はない、らしい。別でinline-blockを`absolute`(うろ覚え)で重ねるのかな。

```css:stylesheet.css
.container h1 {
    height: 400px;
    width: 400px;
    color: white;
    background-color: rgba(255,140,0,30%);
    background-image: url("../img/mask_buff_skarf_man.png");
    text-align: center;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/6671cc99-d4b0-e7a6-bbbb-8285cd25005b.png)

## background-repeat

|パラメータ|結果|
|---|---|
|repeat|水平＆垂直方向に繰り返し(default)|
|repeat-x|水平方向にのみ繰り返し|
|repeat-y|垂直方向にのみ繰り返し|
|no-repeat|繰り返しなし|
|space|水平＆垂直方向に繰り返すが途中で切れない。が、画像の間に隙間があく？|
|round|水平＆垂直方向に繰り返すが途中で切れない。要素領域にぴったり収まるように画像が引き伸ばされる？|

## background-size

背景画像をスパッと切る。`px`で指定するか、以下のキーワードでコントロールできる。

- cover
- contain
- auto

うーん、ここは実際に試さないと理解できなさそう。

[参考サイト](https://zenn.dev/ojk/books/intro-to-html-css/viewer/css-properties#background-size)

# 今日はここまで

まだまだある。他の記事を書くついでアドベントカレンダーが終わるまでに少しずつ書き足していく。