ワンランク上のcssテクニック集2018年版 – この一手間が大事編 –

WEBサイトにちょっとした作り手の心意気を追加するテクニック集です。
この一手間で、サイトの見やすさ指数は格段に上がります。

随時更新予定です。

テーブル要素のタイトルテキストをいい感じで折り返す方法

通常はタイトル要素(thなど)のhtmlにスタイルシートでwidthを指定するのが一般的だと思いますが、テキストの折り返しが思ったようにいかないので私は一番長いタイトルのテキストを<span style="display: inline-block; width: テキスト数;"></span>で囲みます。
タイトル要素(thなど)にはpaddingのスタイルが設定されていると思いますので、差分を考え子要素としてテキストを囲むのがポイントです。

1
<table>
2
    <tr>
3
        <th>短いタイトル</th>
4
        <td>短いタイトルの内容</td>
5
    </tr>
6
    <tr>
7
        <th><span style="display: inline-block; width: 20em;">長ーーーーーーーーーーーーーーいタイトル</span></th>
8
        <td>長いタイトルの内容長いタイトルの内容長いタイトルの内容長いタイトルの内容長いタイトルの内容長いタイトルの内容</td>
9
    </tr>
10
    <tr>
11
        <th>短いタイトル</th>
12
        <td>短いタイトルの内容</td>
13
    </tr>
14
</table>

phpの配列で回してたりするならcount();などを使えばいい感じで自動設定できると思います。
少し手間ですが、見た目はかなりよくなるのでオススメです。

長いテキストを指定した位置で折り返す方法

レスポンシブデザインなどで長いテキストがある場合、意図しない位置で折り返しされます。
要素をセンタリングしているととてもかっこ悪くなるので気になります。

そんな時私はdisplay: inline-block;でグルーピングします。
タイトルなどに使うと小さいウィンドウになっても綺麗にテキストが折り返されるのでとっても有効なテクニックかと思います。

PHPなら句読点をトリガーに正規表現などを使えば管理が楽ですね。

1
<p>
2
    <span style="inline-block">長ーーーーーーーーーーーーーーいタイトルなので、</span>
3
    <span style="inline-block">折り返しが思った通りにいかないのが</span>
4
    <span style="inline-block">A型の私には気になります。</span>
5
</p>