個別記事

前後の記事

after擬似要素を使いたい

この記事が属するカテゴリー
CSS

例えば、MTとかじゃなくて、普通のサイトでフッターのコピーライトの年表記を一括修正できるようにしたい時。今パッと思いつくのはこれくらい。（いや、年表記なんかいらないんだぜっていうのは無しで）

  1. フッター用のhtmlを別に作ってSSIでインクルードする
  2. フッター部に外部jsファイルのdocument.writeでコピーライトを書き出す
  3. Dreamweaverのライブラリを使う
  4. CSSのafter 擬似要素とcontentで書き出す
  5. 年が明けてからアップして一年間忘れてみる

１は、サーバがSSIに対応していない場合もある。２は、javascriptをoffにしている人もいる。３は、何となくイヤ（笑）。で、４な訳ですよ。

<div id="footer">
<p><span class="copyright">Copyrights&copy;</span> hoge Co., Ltd. All rights reserved.</p>
</div>

上記htmlに対して、下記のCSSで年を挿入する。

#footer .copyright:after {
        content: "2000-2004";
}
sample.jpg

年に変更が入る時は、CSS一カ所変更すれば全ページに反映される。これが一番簡単なんだけど、IEが対応していないorz いや、別にIEだけ表示されなくても無問題なんですが。

:before、:afterってcontentプロパティ使って要素の前後にイメージやら文字やらを挿入するのにスゲェ便利だと思うのになぁ、って今仕事しながら思った。

2004-11-27T13:18:14+09:00 | コメント (4) | トラックバック (1) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/76

このリストは、次のエントリーを参照しています: after擬似要素を使いたい:

WWW hxxks さんからのトラックバック
:before 擬似要素 / :after 擬似要素の活用例
hxxk.jp の場合は :before 擬似要素 / :after 擬似要素を随所に活用していますので、その例をいくつか紹介します。 [続きを読む]
2004年11月27日 15:54

コメント

strife さんからのコメント

subaru's blog から飛んできました。
技術にお詳しく羨ましい限りです。

私はＩＴ企業を志望します。
将来の希望は、技術者ではありませんが、
個人的に技術に興味はあります。

当サイトを参考にさせて頂きますね。
私のブログにもぜひいらしてください。
友人の話では、精神論中心らしいですが。。
参考にして頂ければ幸いです。

では、また遊びに来ます。

2004年11月28日 06:44
e-luck さんからのコメント

strifeさん、こんにちは。
いやいや、実はそんなに詳しくもなかったりして（笑）
でも、やっぱり興味を持つってことが一番大事ですよね。技術や知識の習得具合も如実に反映する気がします。
当サイトが少しでもお役に立てれば嬉しい限りです:-)

2004年11月28日 12:30
strife さんからのコメント

おはようございます。

返事を頂きありがとうございます。
そうそう、e-luckさん、相互リンクよろしいでしょうか？
ご検討の程、宜しくお願いします。

2004年11月29日 06:44
e-luck さんからのコメント

>strifeさん
BlogPeopleですが、追加させて頂きました。MyblogListは使っていないのですが、pingは飛ばしているので、当サイトの更新は反映されるはずです。

2004年11月29日 09:54

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)