自分のために書くメモ帳でアイデア帳で備忘録。2012年11月2日金曜日CSSを利用して任意の箇所に改行を入れるスマートフォン向けのサイトで、h1要素の両左右にボタンがついているヘッダを作りたいということがあります。そんな状況の時に、h1の1行が長くてテキストがボタンの後ろに隠れてしまうということがよく起こります。スマートフォンは縦表示時の横幅のサイズが小さいために起こりがちなことなのですが。こんな状況の時に使える、任意の位置で改行するための小技です。pre;}ここで重要なのはCSSの方。h1の子要素spanの前に改行コードを追加してます。記述することで改行を有効にしてます。(HTMLのpre要素のように扱われるみたいですね)スクリーンサイズごとに改行されるかどうかを決定したいなら、メディアクエリで特定スクリーンサイズまでは改行するようにしてあげればいいでしょう。}}この例では、スクリーンサイズが320px以下(iPhoneなど)では改行するようにしてます。例ではspan要素を使っているが、この要素がstrongやemでも結果は変わりません。この方法はbr要素を挿入するわけではない点に注意が必要です。}}方法としてはお手軽。視覚的にもわかりやすいですね。あとはメディアクエリーなんかで、ある一定以上の解像度になったらbr要素を非表示にでもしてあげれればいいように思います。個人的にはあんまり好きじゃないです。文節の途中で改行がかかってるように見えるし、これだとbr要素でコードを汚してしまっているように見えてしまいます。h1の文章が変更になったとすると、br要素の位置を変更しなければならなくなるし、ちょっとメンテナンス性が悪くなる気がします。10月(3)自己紹介r36at札幌のとある会社に所属してPHPを中心にウェブアプリケーションを作ってます。