【CSS】10pxってどのぐらいのサイズ？方眼を描いてみました【小ネタ】
どうも！LSSです！！
はい、いきなり背景がアレですが、お使いの端末は正常です（多分）。
10px方眼
この記事の記事部分の背景に、「10pxの方眼」を描いてみました。
記事のHTML編集画面に、
<style>
article{
background-image:
linear-gradient(#ffcccc00 90%,#ffccccff 100%)
,linear-gradient(90deg,#ffcccc00 90%,#ffccccff 100%)!important;
background-size:10px 10px!important;
}
</style>
というコードを入れると、こんな風に背景に10pxサイズのマス目が描かれる事になります。
コード解説
article
としています。
CSSのセレクタは「.」をつけるとクラス名、「#」をつけるとid名を指定する事になりますが、そのどちらもつけない場合はタグ名を指す事になり、はてなブログにおいて記事部分を囲んでいる<article>タグに対しての指定、という事になります。
もちろん、こんな記事全面じゃなくて一部の要素に対して指定したい場合は、
<div class="nantoka"></div>
といった要素を置いて、セレクタ部分を
.nantoka
にする事で要素内だけに反映させる事ができます。
background-image:
linear-gradient(#ffcccc00 90%,#ffccccff 100%)
,linear-gradient(90deg,#ffcccc00 90%,#ffccccff 100%)!important;
背景として、２つのlinear-gradientをカンマ区切りで並べています。
１つめの方が横線になる部分、２つめの冒頭に「90deg」を入れている方が縦線になる部分です。
各マス目の中で、「横位置も縦位置も、90%までは透明、100%は色付き、その間は徐々に変化するグラデーションになる」という指定ですね。
「90%」を「99%」にしたところ、10pxという極小のマス目の中では表示自体省略されてしまったため、90%としました。
ただし、方眼のサイズを大きくした場合、グラデーションが目視できてしまうようになるので、場合によって調整したほうがいいかもです。
また、articleタグに対して、ブログテーマやデザインCSSから指定しているとそちらが優先されてしまう場合もあるので、最後の「;」の前に優先度を上げる「!inportant」をつけています。
そして最後。
方眼のサイズを設定しているのが、
background-size:10px 10px!important;
です。
先に２つ書いたlinear-gradientの画像としてのサイズを「縦10px、横10px」としています。
これで「縦横10pxの四角で端の部分に色がついたマス目が並ぶ」事になり、10pxの方眼が描かれるんですね^^
という冗談のような小ネタでした
なぜこんなネタを？というと…そもそもは昨日の記事、
で、サイコロを単に数字で書いていましたが、それをちゃんとした「サイコロの目」にしようかな、と思っていたんですね。
それはradial-gradientを並べる事で容易に描けそうですが、ふと、
「サイコロの目を配置する時の位置の指定、幅・高さに対する配置の比率はどのようにするのがいいだろう？」
と面倒くさい事を考えはじめ、
「【CSSお絵描き】としてサイコロの目を作るのだけを１記事にしてもいいか」
などと思い至ったのですが、「比率」について考え出すと
「幅を５等分ないし４等分ないし３等分するようなガイドラインを描いて、説明に手間をかけようか」
とか思ったところから、挙句の果てに「線だけで１記事」という事になったのでしたｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
