あかつきのお宿

画像とかリンクに、title属性とかalt属性を使うことってあると思うんです。

リンクのtitle属性は場合によるかもだけど、画像の場合は、基本、alt属性はつけといた方が良いと思う。つけないデメリットはあまりない。SEO的なこともあるし、うっかり画像が表示されなかったときに代替テキストが表示されるし。

画像にalt属性をつけないのは、下着をつけずにミニスカートをはくようなもんです。うっかりミニスカートが風でめくれたときに下に何もつけてなかったら、代替パンティが表示されずに、さらにその奥の秘密の花園が見えちゃうじゃん？　それまずいじゃん？　パンティが見えた方が良いじゃん？

……あれ？　男としては、どっちでも嬉しいのか？

そっかーどっちでも良いのかー。じゃあ別にalt属性もつける必要ないなぁ……とはならないよね。

改行させてみようじゃないか

そんなわけで属性をつけるわけですが、このtitle属性（alt属性も）、改行タグが使えない。実際やってみりゃ分かりますけど、brタグとか入れても改行しない。タグがそのまま文字列として表示されちゃったりする。

かと言って、改行コードである「\n」を入れても結果は同じ。基本的に改行はできない。

改行することってあまりないような気もするんですが、それでもどうしても改行させたい場合も、あるかもしれない。どうしてもミニスカートをはいた可愛い女の子を見たいって思うのと一緒で、人間にはどうしても抑えきれない欲望ってのがありますからね。

じゃあどうすれば良いか。

「\n」とは別の改行コードを使うという手があります。

それがこれ↓




ちょっと面倒だけど、これを自分でtitle属性なんかに書いとけば、マウスがホバーしたときに文字が改行されて出てきます。

この記事のトップにある画像にも改行つきで文字を入れてあるので、試しにマウスを当ててみれば分かります。iPadやスマホの場合はすまん。

こんなやり方もある

ちなみに。

javascriptを使ってtitle属性を書く場合は、「\n」でもいけるみたい。

<a href="#">sample</a>

<script>
$('a').attr('title', '改行\n改行');
</script>

jQueryありきの書き方になっちゃいましたが、こんな感じですね。もうjQuery使うのが当たり前になっちゃってるんで、通常のjavascriptの書き方忘れちゃったよ……。

<a href="#" id="sample">sample</a>

<script>
document.getElementById('sample').title = '改行\n改行';
</script>

こんなんだったかな……間違ってたらごめんなさい。






まあ、ここまで書いといて全否定するのもあれだけど、最近じゃ「jQuery tooltip」とかで検索すりゃ、title属性よりもオシャレで、しかもHTMLタグも使ってマウスオーバーのときに文字を見せたりする方法もすぐに見つかるし、もはやこんなことをする必要もないんでしょうけど、わざわざプラグインとか使うほどじゃないってときにこの方法を覚えとけば、役に立つこともあるかもしれないですね。

そういや、某国の民族衣装では男性がスカートの下に何もはいていないと聞いたのですが……ほんとでしょうか？