2008年06月23日

cssコメント部分のメモ

CSSのコメント部分は後から誰が見ても理解できるようにインデントを付けたり、わかりやすいコメントを付けたりすると思いますが今日書いてて「お、これ便利かも」と思った書き方を、メモ代わりに書き留めておきます。

/* -------------------------------------------------
トピックス
#layout > #navi > div.topics
--------------------------------------------------*/

以上、ただ単に構造を書くだけなんだけど、これ見れば後から見てもこのクラスがどこで使われている一目瞭然だと思う。


さらにこんな感じで使用しているページなんかも追加するとわかりやすいかな
/* -------------------------------------------------
トピックス
#layout > #navi > div.topics
topics/index.html
--------------------------------------------------*/

2008年04月12日

CSSのみでアコーディオンメニュー

CSSnewbleCSSのみでアコーディオンメニューを作るという面白いアイデアが紹介されていました。特に難しいこともなく簡単な記述でアコーディオンメニューっぽいものを作ることが出来ます。実際にどのような動作をするのかはCSSnewbleでのサンプルを見るとわかると思います。今回はこれをページのレイアウトに利用した全画面バージョンを作ってみました。

続きを読んでみる

2007年08月02日

width:auto;の使い道

最近まであまり使わなかったcssのwidth:auto;ですが、最近よく使うようになりました。理由はメインのレイアウト部分で使用するclassなどを以前よりclass="section"などで使い回すようになったからです。

例えばほとんどのページではwidth:400px;のように幅を固定して、一部のページのみwidth:100%;にしたい場合などあるじゃないですか。でもその場合素直にwidth:100%;にしちゃうと、そのクラスに適用している余白やマージン・ボーダー等の関係で例のよろしくないこと(ボックスモデル問題)が起きてしまうわけですよ。

そこでこの「auto」を利用すると、本来の自然な大きさのブロック要素に戻してくれるというわけです。てなわけで最近width:autoは重宝してます。

2007年05月22日

IEでhoverをa以外に効かせる

過去のCSSネタを復活。おなじみのa:hoverはIEの場合 a 属性以外には効果が無い(ZSPC:hover対応表)これを有効にするスクリプト「csshover」というスクリプトを配布している「Peterned」というサイトがある。javascriptでhoverさせるという手もあるけど、一括指定でhoverが使用できる点からこちらのほうが便利かなと...。

IEのみがターゲットということもあり、読み込みのほうもいつもの外部読込形式ではなく、IE独自の「behavior」を使う。CSS一枚に記述するだけで事足りるので楽チン。Bodyに behavior: url("xxx.htc") という形でhtcという形式のファイルを読み込ませる。

続きを読んでみる

2007年05月17日

dl,dt,ddでシンプルな横並びを表現する

以前書いていたエントリーなのですがバックアップを取っておらず、データの移行が難しいので少しずつ昔のデータを編集しながら再エントリーしていきたいと思います。CSSの記述にも昔のエントリーを見ると間違えている部分が多いので修正できるチャンスでもあるわけです。というわけで過去に書いたdl,dt,ddで綺横並びを再エントリー。

続きを読んでみる

SEARCH THIS BLOG

RECENT ENTRY

CATEGORY

ARCHIVES