Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【ツール】ハートマーク背景コード生成ツール

 

コード

 


 

 

 どうも!LSSです!!

 

「ハートマーク背景コード生成ツール」を作ってみました。

 

 

f:id:little_strange:20220112230608p:plain

使い方

「ランダム設定」ボタン、

表示サンプル、

ハートの色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

 

 

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^