皆さんこんばんわ！AbeGoblinです！
前回はphp7では削除されてしまって使用できなくなったmysql_real_escape_string()の置き換えについてご紹介させていただきました。記事は以下から！
今回はですね、いつも通りcssですね！cssだけで格子模様の背景を作ってしまおうというものになります！なかなか使う機会はないかもしれませんが、ふとした瞬間に使用されるデザインですので是非覚えておきましょう！
いやいや！どうやってよ？？
はい！今回は各種background関連のプロパティとrepeating-linear-gradient()プロパティをうまいこと使用します！
このrepeating-linear-gradient()について簡単に説明しますと、
repeating-linear-gradient(角度等, 開始色 位置, 途中色 位置, 終了色 位置);こういうものになっています！読んでで字の如く、linear-gradient()の繰り返し版って感じですね！
コードはズバリこう！コピペできます！
html
<div class="hoge"></div>css
.hoge{
width:100%;
height:400px;
background-size: 16px 16px;
background-position: 50% 50%;
background-image:repeating-linear-gradient( 90deg, rgba(0,0,0,.5) , rgba(0,0,0,.5) 1px, transparent 1px, transparent 16px),repeating-linear-gradient( 0deg, rgba(0,0,0,.5) , rgba(0,0,0,.5) 1px, #fff 1px, #fff 16px);
}今回はネストの必要がないのでscssは不要ですね！
サンプルはこちら！
格子模様ができましたね！今回は見やすくするために、透明度を0.5にしていますが、少しぼやけてしまうのと、テキストを入力することを考えると、透明度は0.05~0.2以下がおすすめです！
また、background-sizeとlinear-gradient()の終了位置の値を変更することで格子の大きさが大きくなったり小さくなったりします！
あ、この二つですが、background-size:16px 16px;のように、プロパティの値は同じにしてくださいね！
当然、色も変更できます！今回は2つrepeating-linear-gradientプロパティを重ねましたが、プロパティをひとつにしてして角度を90degでストライプになりますし、0degにすればボーダーになります！
最後に
このコードは、ノートっぽい背景を作成したいときに主に使われるように思いますね！つーか逆にそれ以外があんまりない気がします(笑）
まぁでもこれも自分のcssの引き出しにはなると思いますので、ぜひ覚えて使ってみてください！
はい、それでは今日はこのあたりにしておこうと思います！さようならー(^q^)ﾉｼ
