佐賀のホームページ制作なら株式会社イン・ザ・コム

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

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

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

縦書きにするための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;
}

使いどころが難しい

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

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

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

押されてナンボですし。

この記事が気に入ったら
いいね!しよう

Twitter で

関連する記事

Copyright © IN THE COM .inc All rights recerved.