自由記入欄HTML用のソース配布

英雄クロニクルとバースセイバーの自由記入欄で使えそうな物を書いて配布しています。
ご自由にお使いください。


以下、小物集。

横幅1280pxのイラスト表示時のスクロールバー抑制

<div style="overflow:hidden"><画像タグ></div> ※イラストの右端が表示されなくなります。

画像分割時の隙間をなくす

イラスト2枚を隙間なく表示してアップろだのサイズ制限を突破します。
※英雄クロニクルは特に対策せず2枚並べればくっつきます。
<div style="line-height:0"> <画像タグ上> <画像タグ下> </div>

画像に文字を乗せる

<div style="display:flex;"><div style="flex:none;width:640px;">【画像】</div><div style="flex:none;width:640px;margin-left:-640px">文字だぞー！！！</div></div>

スクロールバー付きのdivタグ

<div style="height:480px;overflow-y: scroll;"> ここに文章 </div> height:480px;で縦サイズの指定をしてます。
ここをある程度大きめに取っておかないと読みづらくて悲惨なことになると思います。

マウスオーバーで文字列表示

<div title="マウスカーソルを乗せたときに表示される文字列"> ここに文章とかイラストとか置く。 </div> 多くのスマホでは表示されません。必ず提示したい情報は他の方法を使ってください。
マウスカーソルを乗せたときに表示されるtooltipを設定します。
イラストに設定して「つついた時にセリフが表示される」みたいな感覚が期待できます。
以下のようにする事で文章の中の1単語のみに設定することもできます。
<div style="display:inline" title="マウスカーソルを乗せたときに表示される文字列"> ここに文章とかイラストとか置く。 </div>