CSS Cheat Sheet<style type="text/css"> selector {property: value;} </style>
チープカ - はてなダイアリーのデザインを作るうえでのtips
CSS | 01:06 | はてなダイアリーのデザインをいじる上ではてなダイアリー独自に気をつけなくてはいけないものについて例をあげてみます。DOCTYPE宣言が互換モードまず一番問題になるのがここでしょうか。気をつけなくてはいけないのはなんといっても「IEで見るとwidthにpaddingがふくまれる」という点です。これはIE7になっても変わりません。そのためwidthとpaddingを同居させた要素を記述した場合にIEと他のモダンブラウザでは表示が変わってしまいます。回避策で一番簡単なのは同じ要素にwidthとpaddingを同居させないということです。ただしはてなダイアリーの構造上h1とかでwidthとpaddingを一緒に使わざるを得なくなったりするのでそん時はハックするしかないです。はてなのヘッダを透明にするはてなのヘッダは配色がしやすいように、画像部が透過されるようになりました
CSSコーディング・スタイル
「こういうスタイルがCSSを記述する時に便利だよ！ コンセンサス(つづりは知らない)も取れるし！」とかいう建設的な意見はまるでないんですが、CSSを書く時の自分ルールは結構あるのでまとめがてらエントリにする。もちろんhxxk.jpのCSS の記述ルール記事のまとめというエントリを見たから書く気になったんだけど。 とりあえずスタイル指定を取っ払う 各ブラウザ間でのデフォルトの状態での差異を考えると頭が痛くなってくるので、手始めに取っ払って勝負。 フォント・ファミリの指定は別ファイル 見出しはこのフォントで本文はこのフォントといったように、フォント・ファミリの指定はいろいろな要素にまとめて指定することが多いので、まとめて別ファイルに。 様々なところで使うスタイルはhiddenやwrapperなどというクラスでまとめる CSS側でこの要素ではclear: both;とかいうのでも良いのだけど、こ
パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife
普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。 #main .entryBody #topicPath_01 { margin:10px 0; } #main .entryBody #topicPath_01 li { display:inline; line-height:110%; list-style-type:none; } #main .entryBody #topicPath_01 li a { padding-right:10
画像を使ったタブ式インタフェースが簡単に作れる「Tab menu with images」
Tab menu with images 画像を使ったタブ式インタフェースが簡単に作れる「Tab menu with images」。 次のようなタブ式インタフェースを簡単に作れるようです。 作成する際のHTMLは説明にも書いてある通り、クリーンなものになります。 メニュー部分のＨＴＭＬは次のような感じでクリーン。 タブをマウスオーバーすると下位層のメニューが現れますが、そのメニューも次のHTMLコードに含まれています。 <!-- メインメニュー--> <div id="mainMenu"> <a>Products<img src="images/tabmenu_right.gif"></a> <a>Support<img src="images/tabmenu_right.gif"></a> </div> <!-- サブメニュー--> <div id="submenu"> <!-- Th
第7回 ページ構造を確認する方法
XHTML+CSSでは、ページ構造を意識して制作することが大切。Firefoxの拡張ツール「Web Developer Toolbar」を利用して、テーブルレイアウトの構造、フルCSSのページ構造、見出し構造、非推奨要素を確認する方法を説明しよう。 Firefoxの拡張ツール「Web Developer Toolbar」 Firefoxでは「Web Developer Toolbar」（以下、WDT）という高機能な拡張ツールが利用できる。名前のとおり、Web開発者向けのツールバーであり、CSSやJavaScriptの無効化、画像表示の無効化、ソースのバリデーションなどをツールバーから直接実行することができる。 まず、インフォアクシアで公開されているWDT日本語版をインストールしよう（http://www.infoaxia.com/tools/webdeveloper/）。Firefox（ま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
decaf, decaf.
