ブログを書こうと思ったきっかけが今回もTwitterっていう。
この一言が発端だとか。
@hira いつもブログ見てます///
更新してないときは心に刺さる一言ですね。
でも、こんなブログでも見てくれてる人が居るってのを実感するとモチベーションが上がるっす。
さて、主題の関連ページとかのリンクに使えそうなサンプルですが、以前エントリーした「タグクラウドみたいなのの単語の折り返しに関して」と同じだったりするんですが、自分の中では結構使い道があったのにビミョーな感じだったので、見せ方の問題が大きいような気がしてちょっとリベンジです。
サンプルは以下より。
サンプルを別窓で開きながら見てもらうと良い感じかと思いますが、
ページ下部に、関連リンクみたいにいくつかのページへのリンクを設置するケースって意外と多いと思います。
そんな時に、floatプロパティを使ってやるとwidthを指定しなきゃグズグズになったり、display: inlineで並べると、単語が途中で折り返してしまったりしてイマイチ汎用性が無いなーと。
そこで、リンク先ページの文字数がまばらでも問題なく出来るようにしたいって思ってやってたのが今回のサンプルなのです。
このやり方だと、文字量がある程度違っていた場合にも、良い感じに改行してくれるので部分的に長いテキストが入るところだけclassを追加とかしなくて済む感じです。
必要最低限のスタイルは以下になります。
#main ul.relatedList {
width: 510px;
overflow: hidden;
margin: 0 0 30px;
padding: 10px 15px;
background: #f4f4f4;
border: 1px solid orange;
}
#main ul.relatedList li {
float:left;
margin: 0 20px 0 0;
padding: 0;
white-space: nowrap;
line-height: 2;
background: none;
}
#main ul.relatedList li a {
zoom: 1;
padding-left: 15px;
background: url(../img/item/mark_cursor.gif) no-repeat left .5em;
}
*:first-child + html #main ul.relatedList li a {
background-position: left .8em;
}
* html #main ul.relatedList li a {
background-position: left .8em;
}
前のと違う部分はoverflow: hidden;を入れてるので、単語が横幅より長い場合ぶった切るっていう潔さがありますが、サイトの仕様的に極端に長いテキストが入らないなら大丈夫だと思います。
文字サイズに関しては、IEで「最大」にして切れない程度が基準でしょうか。
長いテキストが多い場合、無理に横並びにしないで一行にしたらいいと思うので、あくまでも比較的短いテキストが入る場合に使えそうな方法ということでお願いします。
なお、floatのサンプルがやっつけ的なのは気にしたらいけません。