CSS で counter を使って自動連番を振る際の注意点 - lucky bag
content プロパティを使って、CSS2.1 の counter による自動連番の挿入っつうマニアック気味なちょっとした実験で気付いたことがあったのでメモ。どうやら、ブラウザによっては、counter のリセットを明示しなくても良いものや、リセットしないと連番にならないものがあるっぽい。 サンプルを作成して実験 下記のような定義リストを用意して、これの dt 要素（記事タイトル部分）の頭に上から連番で番号を振っていきたいと思ったとする。 <dl> <dt>記事タイトル</dt> <dd>記事の概要</dd> <dt>記事タイトル</dt> <dd>記事の概要</dd> <dt>記事タイトル</dt> <dd>記事の概要</dd> <dt>記事タイトル</dt> <dd>記事の概要</dd> </dl> とりあえず、::before 疑似要素使って content プロパティで coun
CSS3の属性セレクタ - lucky bag
属性セレクタは、属性名や属性値によって、要素を指定する事ができます。Gecko系などのブラウザは、CSS3の属性セレクタなどに対応しています。どういった指定が出来るのか、覚え書きとしてメモ。サンプルとして、下記の(X)HTMLを想定します。 <a href="/" title="Lucky bag::blogのトップへ">トップ</a> 一番単純なのが、属性名を指定する方法です。下記は、 title 属性を持つ全ての a 要素に1pxのドットで下線を表示することができます。 a[title]{ border-bottom: 1px dotted #666666; } 次は、 title 属性の値が「Lucky bag::blogのトップへ」の場合のみ、指定する方法。 a[title="Lucky bag::blogのトップへ"]{ border-bottom: 1px dotted #66
Lucky bag::blog: 印刷用 CSS に必要なこと
拙サイトにおいて印刷用 CSS の需要と必要性がどれほどあるのかは微妙だけど、とりあえずは用意していたりする。んで、作成した当時にこうした方が良いかなってな事がいくつかあったんで、何となく書き残しておく。いや、別にネタがないとかそう言うことじゃ (ry 基本的に紙媒体を対象とするもんだから、通常のスクリーン用 CSS を作成する時とは考え方が変わってくる。 不必要な要素を非表示 ナビゲーションやらサイドカラム、フォームなんかは必要ないんで、display: none; にしてプリント用紙を節約。 フォント関連 ポイントで決め打ちする。拙サイトの場合は、本文 10pt にしてある。後は、本文などの長文系は明朝系のフォントを指定した方が読みやすい。 色は使わずモノクロ 余計な色を使ってインクを使わせないって事と、モノクロプリンタのユーザに対しての配慮。そして、なるべくスミ 100% などのベタ
Lucky bag::blog: IE で min-width を指定する方法
IE は min-width に対応していないんだけど、「Stu Nicholls | The CSS Playground」でスクリプトを使わず CSS だけで擬似的に min-width を指定する方法が紹介されていたんで、ざっくりとご紹介。この方法は、Win IE のみに効く方法で、Mac IE では機能しない模様。サンプルとして下記の (X)HTML を使用してみる。 <div class="container"> <div class="box"> <div class="contents"> 内容 </div> </div> </div> これに対して、幅 90% で最小幅 400px の指定をしてみる。IE5.5 と IE6 に対応したパターンと IE5.01 と IE5.5 と IE6 に対応したパターンの２種類の方法がある。 実際に試してみたサンプル IE5.5 と IE
Lucky bag::blog: CSS Reboot に見るウェブデザインのトレンド
以前にも取り上げた事があったけど、CSS Reboot ってのは、ウェブサイトのリデザインを期日を決めて一斉に行なうイベント。多分もう 3 回目くらいだと思うんだけど、5 月 1 日に 2006 Spring が行なわれたばっか。CSS Reboot のサイトでは、リデザインしたウェブサイトが紹介されてて、誰でも気に入ったサイトに投票できるようになっている。ちなみに、CSS Reboot のその場でクリックするだけで評価できる vote 機能は、シンプルで良いな。送信した後に、Total score も表示されるし。 んで、Christian Montoya が今回の Reboot でのデザインのトレンドについて書いていたんだけど、大雑把に書き出してみると下記のような感じ。 1024px の幅 Silk Icons の使用 暗い背景に明るい色のテキスト 大きめのフッタ 1024px の幅
Firefoxで今見ているページを右クリックからIETesterで開く方法 - lucky bag
今見ているページを、右クリックからIETesterでバージョン指定して開けたらなあと思ってTwitterで呟いたら、akzさんに「Launchy」で出来そうって教えて頂いた。 @e_luck URLを外部アプリに渡す拡張だったらLaunchyってのがあったんですけどもう開発止まってるみたいですね https://addons.mozilla.org/ja/firefox/addon/81 @e_luck あとバージョン指定は引数渡してやればいけそうです http://tinyurl.com/cd8a2f それ頂きっす！ということで、Launchyを使って今見ているページをIETesterで任意のIEバージョンを指定して開く方法をメモっとく。 Launchyのインストール Launchyは、リンクなどを任意のアプリケーションを指定して開けるようにする拡張。3年ほど開発止まってるみたいだけど、
after擬似要素を使いたい - lucky bag
例えば、MTとかじゃなくて、普通のサイトでフッターのコピーライトの年表記を一括修正できるようにしたい時。今パッと思いつくのはこれくらい。（いや、年表記なんかいらないんだぜっていうのは無しで） フッター用のhtmlを別に作ってSSIでインクルードする フッター部に外部jsファイルのdocument.writeでコピーライトを書き出す Dreamweaverのライブラリを使う CSSのafter 擬似要素とcontentで書き出す 年が明けてからアップして一年間忘れてみる １は、サーバがSSIに対応していない場合もある。２は、javascriptをoffにしている人もいる。３は、何となくイヤ（笑）。で、４な訳ですよ。 <div id="footer"> <p><span class="copyright">Copyrights©</span> hoge Co., Ltd. All r
Lucky bag::blog: 外部の RSS を PHP で取得
2008年12月26日に当サイトのテンプレートおよびデザイン、サーバの変更作業時に当記事にて紹介しているHot entryというページは削除してしまいました。当該ページは404 Not Foundとなっていることをご了承ください。 ありがたくも、拙記事なんぞをはてなブックマークや dei.icio.us などの ソーシャルブックマークでブックマークして頂いてもらっちゃったりしているわけで、なんとも恐縮に感じていたり、いなかったり。んでもって、どうせなら興味を持って頂いた記事を紹介するかっつうことで、そんなに Hot なわけじゃないのに Hot entry なるページを作っちまいました。ウヘ:-P とりあえず今回は、はてなブックマークにブックマークされている当サイトのエントリー一覧の RSS を取り込んでみますた。外部の RSS を取り込むって場合、CGI や JavaScript を使って
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IE6で閲覧するとモノクロ - lucky bag