アヒルのある日

株式会社AHIRUの社員ブログです。毎週更新!社員が自由に思いついたことを書きます。

CSSに触れた話

こんにちは!ふるいプログラマーです。

今回はタイトルにあるとおり、CSSについて軽く触れようと思います。

最近個人的にCSSを触る機会があったので、その時に分かったことなどをメモ書き程度に書き記しておこうと思います。 (本格的に触っているわけではないので、間違ったことを言っていたらすみません…)

まず、CSSとは…? Cascading Style Sheets(カスケーディング・スタイル・シート)の略だそうです。 基本的にHtml上の配置物の見た目を制御できるものですね。html上で記載できること+α程度のことができるものというイメージですね。

例えば、画像を表示する場合、ソースの指定をhtlm上でも指定できますが、要素に対して、class="任意の名前" を記載し、CSS上から指定できます。

<div>
    <img src="./image/icon.png">
</div>

html
<div>
    <img class="icon">
</div>
---
css
.icon{
    src: url("./image/icon.png");
}

個人的に驚いたのは、定数が作成できることですね。 以下のように記載しておけば後ほど画像を差し替えたいときにrootに定義した箇所を変更するだけで適用されます。

css
:root{
    --IconSrc: url("./image/icon.png");
}

.icon{
    src: var(--IconSrc);
}

今回は画像の参照先で説明しましたが、高さ指定や、幅指定、余白の調整でも同じように利用できます。

では、今回はこのあたりで(@^^)/~~~