Little Strange Software

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

ブログで使える!BOX要素装飾ツールを作りました^^

 どうも!LSSです!!

  今回は「BOX要素をborder(枠線)と影(box-shadow)で装飾するツール」を作ってみました!

 

 

使い方

 

f:id:little_strange:20200322225340p:plain

↑この枠内の部分を色々いじると、その下にある「サンプル」に影響します。

 色を選択する部分がちょっと分かりづらいかもですが、もし
「黒」にしたい場合は「明」を0%に、
「白」にしたい場合は「明」を100%に、
「灰色」にしたい場合は「彩」を0%にして「明」で濃さを調節できます。

 

 あと「ここに内容を書きます」の部分も書き換えられますが、タグ無効化とかしていないので、中で別途タグが使用可能です。
※悪く言えば、その中でタグをミスると結果がおかしくなるのと、改行が改行として表示されない、というのがあります。(これは改行したいところで<br/>と入れるとOK!!)

 

  気に入ったものができたら、さらにその下にある「コード」のところに書かれたタグを、はてなブログ「記事を書く」「HTML編集」画面にコピペしてください^^

「サンプル」と同じものがブログで使えます!

 

 

ツール制作秘話(というほどのものじゃないですが)

 

 実は元の着想は、あるブログで見かけた絵の表現が綺麗だなと思い、「これ、CSSでそれっぽく作れるかも」と思ったのがきっかけでした。

 

で、それもできたのですが、作る前後に
「これを公開して、更に他の人に使ってもらうにあたって、元のブロガーさんに断りを入れるべきかな」
と思ったのですが、どう切り出したものか…と迷ってるうちに結局、サンプルのデフォルトを「それとは全く違うもの」にして公開に踏み切りましたw

 

…このへんがコミュ障ですねぇwww(多分、快諾してくれそうな人なんですけど^^;)