コード
どうも!LSSです!!
「ハートマーク背景コード生成ツール」を作ってみました。
使い方
「ランダム設定」ボタン、
表示サンプル、
ハートの色1、ハートの色2、背景の色、ハートサイズ(比率)、繰り返しサイズ、
コード
が並んでいます。
「ハートの色1、ハートの色2、背景の色、ハートサイズ(比率)、繰り返しサイズ」を調節する事で、「表示サンプル」が変化し、その状態のものを表示するためのコードが「コード」部分に出力されます。
(「ハートサイズ(比率)」は「繰り返しサイズ」の中でのハートのサイズ比です。)
また、一番上の「ランダム設定」ボタンを押すと、「ハートの色1、ハートの色2、背景の色、ハートサイズ(比率)、繰り返しサイズ」がランダムに設定されます。
「ランダム設定」ボタンを何度か押して、好みの状態に近いものが出てきたら、サンプル下のところで微調整して、完成したところで「コード」の内容をコピーしてご利用いただけます。
(はてなブログなら「HTML編集」画面に貼り付け、その他WebサイトでもHTMLソース上に貼り付けられます。)
また、完成したコード中で、
height:300px;
とあるのは、背景の模様を確認しやすいサイズを設定しているだけですので、数値を書き換えたり、行ごと削除しても構いません。
コードの最後の、
<div class="heart"></div>
の部分、
<div class="heart">と</div>
の間に文字を入れる事も出来ます。
その他のコード利用方法
完成したコードの2行目、
.heart{
を、
body{
に変更し、
height:300px;
と
<div class="heart"></div>
を削除すると、ページ全体の背景がハートマーク背景になります。
↓つまり、こんなコードになります。
ページ全体の背景にするコード
あと一ケ月ほどでバレンタインデー
というタイミングで、こんなツールを公開してみました。
あざといw
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^