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

前回の投稿で課題とした部分。

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

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

更新履歴

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

2024.12.03 初版

新規作成

参考

• CSS リファレンス via mdn web_docs
• 【初心者向け】CSSのプロパティ一覧を覚えておきたい重要度別に分けてみた
• CSSプロパティ早見表 via 文系大学生のためのHTML／CSS入門

順次増えていく(かも)

進め方

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

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

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

フォルダ構成

model02\
|`css\
|  `stylesheet.css
|`img\
|  `xxxx.png
 `sample.html

color

sample.htmnl

    <div class="container">
        <h1>colorテスト</h1>
    </div>

stylesheet.css

.container h1 {
    color:chocolate;
    border-style: solid;
}

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

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

background-color／background-image

背景色。background-imageで画像を指定でき、こっちが優先される。

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

sample.html

    <div class="container">
        <h1>Sample</h1>
    </div>

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;
}

accent-color

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

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>

stylesheet.css

.checkbox {
    accent-color:  green;
}
.radio {
    accent-color: orange;
}

opacity

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

sample.html

    <div class="container">
        <h1>Sample</h1>
    </div>

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%
}

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

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;
}

background-repeat

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

background-size

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

• cover
• contain
• auto

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

参考サイト

今日はここまで

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