00:00
4月から高校生だよ。娘がね。 アシカガギャスト。
先日、ツイッターでCSSの話題になっていて、
私、一応、HTML、CSSあたりは仕事で使っている専門分野なので、
抑えておくべきポイントは、この3つだと思いますよと、 ちょっと偉そうに書いたんですね。
そのCSSの3つのポイントとは、 詳細度。
マージンの総裁、ショートハンドです。 わざとキーワードっぽい言葉を使っていて、
何のこっちゃという人も多いと思いますが、 この3つのポイントについて、
あえて声だけで紹介してみようかなと思います。 興味ない関係ないという人にも、
面白い内容、知的好奇心を満たされるような内容に、 もしできたらいいなと思います。
まず、詳細度は一番難しいので後回しにして、 マージンの総裁の話からしたいと思います。
総裁というのは、相手の愛に殺すと書いて総裁ですね。
意味としては、かしかり、損得などを互いに消し合ってゼロにすること。
相反するものが互いに影響し合って、 その効果などが差し引きされることとマックの辞書にありました。
マージンというのは、CSSで絶対知っておくべき言葉なんですが、 まあ、余白空白ですね。
ある領域だったり、 そこに入っている文字だったり画像だったりの要素の、
隣り合う別なものとの余白空白をマージンと言います。 実は余白空白にはマージンとパディングという2種類あるんですが、
すごく単純化して言ってしまうと、背景色があったとして、 その領域の背景色がついている余白がパディングで、
背景色のないその領域と次の領域との間がマージンです。 そしてやっとでマージンの総裁の話なんですが、
隣り合っている領域のマージン同士は プラスされるのではなく、
03:03
大きな方のサイズになるというのがマージンの総裁です。 Aという領域とBという領域が縦に並んでいたとして、
Aという領域には下に4ピクセルマージンを設定します。 Bという領域には上に2ピクセルマージンを設定します。
そうすると、4プラス2の6ピクセルの空白が空くのではなくて、 4と2の大きい方の4ピクセルの空白しかこの2つの領域の間には空きませんと
いうのがマージンの総裁ですね。 このマージンの総裁については私ある例えを思いついていて
本邦初公開なんですが、 俺の半径2メートル以内には近づくなよという人が
います。 そして一方
俺の半径1メートル以内に近づくなよという人が別でいました。 でこの俺の半径2メートル以内に近づくなよマンと
俺の半径1メートル以内に近づくなよマンが一番接近するのは何メートルでしょうと 考えるとこれ
2メートルですよね。 2メートルプラス1メートルの3メートルではなくて2メートル離れていればお互い近づくなよという領域は
守られていることになりますね。 これがまさにマージンの総裁の説明として分かりやすいと思います
パディングは総裁されません。 パディングはバリアーですね。
2メートルのバリアを張っている人と1メートルのバリアを張っている人は 2メートルプラス1メートルの3メートルの間ができてしまいますよね
はい次にショートハンドです。 ショートハンドは省略形ということですね
マージンとかパディングの設定をするときに上下左右それぞれ設定できるんですが個別に設定すると
上の空きはマージントップ、下はマージンボトム、右はマージンライト、左はマージンレフトと設定しないといけないので
結構煩雑になりますがそれを 1行で書いてしまうことができるんですね
数字を4つ半角スペースを入れて並べると 時計回りに上右下左の数字を設定することになります
例えばマージン0スペース5ピクセルスペース10ピクセルスペース15ピクセルと書いた場合は
06:09
上が0右が5ピクセル下が10ピクセル左が15ピクセルのマージンになります 数字を2個だけ書いた場合は一つ目の数字が上下で
2つ目の数字が左右それぞれの 指定になります
マージン10ピクセルみたいに1個だけ数字を書いた場合は 上下左右すべて同じ10ピクセルになります
数字を3つ書いた場合は上左右下になりますね あまりCSSをいじらないけどたまにいじる
みたいなレベルの人にはちょっと引っかかるポイントだと思うので覚えておくと便利でしょう 最後に詳細度ですがこれは英語でshow side
ではなくて日本語の詳しい細かいの詳細に度数の度ですね 例えば見出しのh2タグに対して
このページでのh2は緑色にすると指定したとします でもそのページ内に
コラムっぽい領域があって そこのh2は
オレンジ色にしたかったとします その場合
CSSでh2に対して緑色を設定するとすべてのh2が緑に一旦なるんですが コラムの領域を
コラムというクラス名のついたエリアにしたとして .columnspace h2というCSSの記述で
オレンジ色と設定した場合 そのコラムの領域内のh2に関してはオレンジ色になります
でこれはCSSを書く順番は関係なくて h2という指定だけよりも
.columnspace h2という指定の方が詳細度が高いのでそっちが優先されるという理屈になります
でこの詳細度は簡単に言ってしまうと いっぱい記述している指定の仕方の方が点数が高くなる傾向にあります
純粋なh2よりもコラムという領域の中のh2ですと指定した方が点数が高いですし さらにそれを大きく囲っている領域の名前だったり
09:03
領域のタグだったりがいっぱい入っている方が足し上げで点数がプラスされて高くなっていくそんなルールです
一応点数が決まっていて通常のタグは1点で クラスで指定すると10点
id で指定すると100点 そして組み合わせた場合にはそれがプラスされていくというようになってるんですが
css を自分で書く時にいちいち点数を細かく計算している人はそんなにいないと思います 要は css で指定した時にそれが適用されない場合
詳細度がもっと高い指定が他でされているから 反映されないんだなと考えたらいいということですね
詳細度の話はカスケードとか継承とかも関連してくるのでちゃんと学びたいという人は ネットで調べたり本を読んでいただいたりすればいいかと思います
どんな人でも多少何ともネットを使って何かをするのでしたら css については多少は知っておくと役に立つケースが出てくるんじゃないかなと思います
今回は以上です
