00:00
4月から高校生だよ。
娘がね。
アシカガギャスト。
先日、ツイッターでCSSの話題になっていて、
私、一応、HTML、CSSあたりは仕事で使っている専門分野なので、
押さえておくべきポイントはこの3つだと思いますよと、
ちょっと偉そうに書いたんですね。
そのCSSの3つのポイントとは、
詳細度、マージンの総細、ショートハンドです。
わざとキーワードっぽい言葉を使っていて、
何のこっちゃという人も多いと思いますが、
この3つのポイントについて、あえて声だけで紹介してみようかなと思います。
興味ない関係ないという人にも面白い内容、
知的好奇心を満たされるような内容に、もしできたらいいなと思います。
まず詳細度は一番難しいので後回しにして、
マージンの総細の話からしたいと思います。
総細というのは、相手の愛に殺すと書いて総細ですね。
意味としては、かしかり、損得などを互いに消し合ってゼロにすること。
相反するものが互いに影響し合って、その効果などが差し引きされることとマックの辞書にありました。
マージンというのは、CSSで絶対知っておくべき言葉なんですが、
まあ余白空白ですね。
ある領域だったり、そこに入っている文字だったり画像だったりの要素の
隣り合う別なものとの余白空白をマージンと言います。
実は余白空白にはマージンとパディングという2種類あるんですが、
すごく単純化して言ってしまうと、背景色があったとしてその領域の背景色が付いている余白がパディングで、
背景色のないその領域と次の領域との間がマージンです。
そしてやっとでマージンの総細の話なんですが、
隣り合っている領域のマージン同士はプラスされるのではなく、大きな方のサイズになるというのがマージンの総細です。
03:08
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メートルの間ができてしまいますよね。
はい次にショートハンドです。ショートハンドは省略形ということですね。
マージンとかパディングの設定をするときに、上下左右それぞれ設定できるんですが、個別に設定すると、上の空きはマージントップ、下はマージンボトム、右はマージンライト、左はマージンレフトと設定しないといけないので、
結構煩雑になりますが、それを一行で書いてしまうことができるんですね。
数字を4つ半角スペースを入れて並べると、時計回りに上、右、下、左の数字を設定することになります。
例えばマージン0スペース5ピクセルスペース10ピクセルスペース15ピクセルと書いた場合は、上が0、右が5ピクセル、下が10ピクセル、左が15ピクセルのマージンになります。
06:18
数字を2個だけ書いた場合は、1つ目の数字が上下で、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:14
一応点数が決まっていて通常のタグは1点で、クラスで指定すると10点、IDで指定すると100点、そして組み合わせた場合にはそれがプラスされていくというようになってるんですが
CSSを自分で書くときにいちいち点数を細かく計算している人はそんなにいないと思います。要はCSSで指定したときにそれが適用されない場合、詳細度がもっと高い指定が他でされているから反映されないんだなと考えたらいいということですね。
詳細度の話はカスケードとか継承とかも関連してくるので、ちゃんと学びたいという人はネットで調べたり本を読んでいただいたりすればいいかと思います。どんな人でも多少なりともネットを使って何かをするのでしたらCSSについては多少は知っておくと役に立つケースが出てくるんじゃないかなと思います。
今回は以上です。
