低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

リンクが途中で折り返されるのを防ぐテクニック

要素の横幅を指定し、その中の文字列にリンクを設定すると、文字数によっては中途半端な部分で折り返され、2行にわたってリンクが表示されてしまう場合があります。それを防ぐテクニックです。

HTML

1<ul class="sampleBox">
2<li><a href="#">サンプルテキスト</a></li>
3<li><a href="#">サンプルテキストサンプルテキスト</a></li>
4<li><a href="#">サンプルテキストサンプルテキストサンプルテキスト</a></li>
5<li><a href="#">サンプル</a></li>
6<li><a href="#">サンプルテキストサンプルテキスト</a></li>
7<li><a href="#">サンプルテキストサンプル</a></li>
8</ul>

CSS

01.sampleBox {
02width: 300px;
03border: 1px solid #CCCCCC;
04padding: 15px;
05overflow: hidden;
06zoom: 1;
07list-style-type: none;
08margin-bottom: 10px;
09}
10.sampleBox li {
11float: left;
12margin-right: 10px;
13margin-bottom: 5px;
14}
15.sampleBox a {
16white-space:nowrap;
17}

サンプルページ

a要素についている”white-space:nowrap;”というプロパティは、IE6とIE7で表示が崩れないようにするためのものです。

タグクラウドの表示など、リンクが折り返されると見栄えが悪くなるデザインなどに使ってみてはいかがでしょうか。

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ