罫線を入れる。（１）

久しぶりにHTMLの小技です。ホームページでは書いていたのですが、いつかブログにも使ってみようと思っていました。

投稿画面で「下線をつける」ボタンを使った場合（タグは<u>～</u>）、
このように引くことが出来ますが、これだと文字の書かれた部分だけに下線を引く形になり、
改行してしまうと行の残りの空欄には適用されません。

まして罫線に色を付けたり、点線や破線にするというような応用も出来ません。

今回試すのは、便箋のように文章のない行も含めた全体に罫線を入れる方法です。
罫線は画像を使用します。これならば色の付いた罫線、点線や破線にすることも可能です。
まず、今回試す画像はコレ→「」。画像の縦幅が35pxなのでline-heightも合わせて指定。

div指定で文章に便箋風の下線を入れる。外部スタイルシートでの指定なので、スマホには反映されない。文章に便箋風の下線を入れる。文章に便箋風の下線を入れる。ここで改行。
編集画面でここから2行目。

（この上、空欄1行あり。）

直接スタイル指定した場合。div指定で文章に便箋風の下線を入れる。スマホで見たときに反映されているか？

（この上、空欄1行あり。）

後者の指定方法ならスマホでも反映されているようです。

あとは、カラフルな素材なども改めて幾つか準備してみます。