どうも！LSSです！！
だいぶ前の記事ですが、
で使用した、background-sizeとbackground-positionというプロパティの自由度の高さを確認してみます！
CSSでドット絵が描けます！
まず枠を作ります
コード
<div style="width: 300px; height: 300px; border: 1px solid black;"> </div>
ドットをひとつ置いてみます
コード
<div style="width: 300px; height: 300px; border: 1px solid black;
background-image: linear-gradient(red,red);
background-size: 1px 1px;
background-position: 25px 25px;
background-repeat: no-repeat;
"> </div>
小さすぎて分かりにくいので、大きくしてみます
コード
<div style="width: 300px; height: 300px; border: 1px solid black;
background-image: linear-gradient(red,red);
background-size: 5px 5px;
background-position: 25px 25px;
background-repeat: no-repeat;
"> </div>
ここで ちょっと解説 その１
background-image: linear-gradient(red,red);
linear-gradientは直線的なグラデーションを描く事ができますが、極端に削って ( ) の中身を「同じ色２つ」並べる事で、ベタ塗りになります。
（１つでは機能しませんでした。）
background-size: 5px 5px;
ここで、「背景画像を適用する場所」のサイズを決めています。
（この場合「背景画像」はlinear-gradientで作った仮想的な画像ですが）
この指定では縦横ともに5pxの四角になります。
（横、縦、の順で指定しています。）
background-position: 25px 25px;
こちらは、「背景画像を適用する場所」の位置を決めています。
この指定では「左上の角から数えて、右に25px、下に25px」の位置、という指定になります。
background-repeat: no-repeat;
背景画像を「繰り返さない」という指定です。
この指定がないと、縦横ともに背景画像を繰り返し並べて配置しようとするので、この指定がないと、
こんな風にまっかっかになってしまいますｗ
２つめのドットを置いてみます
コード
<div style="width: 300px; height: 300px; border: 1px solid black;
background-image: linear-gradient(red,red) , linear-gradient(blue,blue);
background-size: 5px 5px , 5px 5px;
background-position: 25px 25px , 20px 100px;
background-repeat: no-repeat;
"> </div>
ここで ちょっと解説 その２
background-image 、 background-size 、 background-position の３つのプロパティにそれぞれ、カンマをつけて２つめのドットについての情報を追加しました。
ちなみに、background-repeat にも付け足しても良かったのですが、no-repeatひとつだけだと全てのドットに対して適用されるので、そのままにしています。
２つめのドットを横長にしてみます
コード
<div style="width: 300px; height: 300px; border: 1px solid black;
background-image: linear-gradient(red,red), linear-gradient(blue,blue);
background-size: 5px 5px,100px 5px;
background-position: 25px 25px,20px 100px;
background-repeat: no-repeat;
"> </div>
どんどん増やせます！
コード
<div style="width: 300px; height: 300px; border: 1px solid black;
background-image: linear-gradient(red,red) , linear-gradient(red,red),linear-gradient(red,red) , linear-gradient(red,red) , linear-gradient(red,red) , linear-gradient(red,red) , linear-gradient(red,red) , linear-gradient(black,black);
background-size: 50px 5px , 5px 5px , 5px 5px , 5px 25px , 5px 10px , 15px 5px , 5px 30px , 60px 10px;
background-position: 25px 25px , 20px 30px , 75px 30px , 15px 35px , 80px 35px , 85px 45px , 100px 50px , 20px 30px;
background-repeat: no-repeat;"> </div>
なんだか訳の分からない事になりましたがｗ
要は「ドットなり細長い棒なり四角なり、いくらでも追加できます」という事を言いたかったのです^^
かなり極端な例でした^^;
実際のところ、ドット絵を自由に描く事もできますが、到底「正しい使い方」と言えるものではありませんｗ
でも、以前の記事の格子模様のような複雑な背景を作りたい場合に、「その気になればここまでできる！」っていう一例を試してみました^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
