FC2ブログ

Harukiya Archives

--/--/--

category / スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2005/05/06

category / CSS

テンプレいじってると、そっちの方が面白くてエントリ更新するのがおろそかになる。とりあえず「これは便利だなぁ」と思ったことを書いておけばメモにもなるし一石二鳥。

メニューなどのリンクをリストでマークして(なぜリストなのかは、また別の機会に)その見映えをインラインにしたいとき、リンクの文字と文字の間をどうやって区切るか?これは単純に

<li><a href="hoge" title="pageを開く">page</a> | </li>

と書いてもいいのだけど(ホントはよくないのかもしれない)” | ”は意味を持たない余計なデータになってしまうのだね。また、後で「やっぱり縦メニューにしよう」とした時にCSSだけじゃなすまなくHTMLの方の修正も余儀なくなる。この作業が楽しいと思ってる種族σ( ̄▽ ̄)もいるのだが、あくまでも外道であることを肝に銘じなければならない。

(x)html

  1. <ul class="state">
  2. <li><a href="<%topentry_link>#comments" title="「<%topentry_title>」へのコメント">コメント(<%topentry_comment_num>)</a></li>
  3. <li><a href="<%topentry_link>#trackback" title="「<%topentry_title>」へのトラックバック">トラックバック(<%topentry_trackback_num>)</a></li>
  4. <li><a href="#top" title="このページのトップへ">&nbsp;&Delta;&nbsp;</a></li>
  5. </ul>

CSS2の beforeafter擬似要素とfirst-child擬似クラスを使う方法(モダンブラウザ用・IE6不可)

css

  1. ul.state {
  2. padding:0; margin: 0;
  3. }
  4. ul.state li {
  5. padding:0; margin: 0;
  6. display: inline;
  7. }
  8. ul.state li:after, ul.state li:first-child:before {
  9. content: " | ";
  10. }
スポンサーサイト

writeback

  1. マス : この”first-child”ってのが自分自身を指すのが、javascriptの”firstChild”と違うところが面白い。-07日00時
  2.  


< 一周年 | bbs > | 表紙へ戻る | 探す | 案内


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。