ul,liリストを縦書きにするためのCSS

Pocket

Tweet

雑誌のデザインってウェブデザインにものすごく参考になりますね～。

縦書きを自由に使って良い雑誌と、色々制約があるウェブですが、雑誌のデザインを思い切って導入することも大事ですね。

縦書きにするためのHTML

<ul class="g-nav">
 <li><a href="#">テスト</a></li>
 <li><a href="#">テスト</a></li>
 <li><a href="#">テスト</a></li>
</ul>

縦書きにするためのCSS

.g-nav li{
  padding: 0 10px 10px 10px;
  font-size: 18px;
  font-weight: bold;
  list-style-type: disc;
  float: left;
  font-family:'Hiragino Mincho ProN', serif;
  writing-mode: tb-rl;
  /* IE独自仕様 */
  writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -o-writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
}

使いどころが難しい

誰もクリックしてくれなそう。

縦書きのリンクを使っている人はまだまだ少ないので、縦書き文字をグローバルナビにするのはやめたほうが良さそう。

押されてナンボですし。