【メモ】 2カラムでも満足できなかったので1カラムにしてみた、それとデザインの選択とユーザビリティの話。
さすがに怒られそうですが、怒られついでに「どうせだったら1カラムだってありじゃね」と思ったので試してみました。
前回
【メモ】 3カラムのブログデザインが好きになれないので2カラムにする | mutter 3カラム（オリジナル）
2カラム（前回）
カテゴリー: CSS
2カラム（前回）
【メモ】 3カラムのブログデザインが好きになれないので2カラムにする
【メモ】 tableのcellspacingはCSSのborder-collapseで設定できる
こういうtableがあったとして、
| 日付 | 内容 |
|---|---|
| 12/5 | カブのぬか漬け |
日付 内容 12/5 カブのぬか漬け
border-collapse: separate;
border-spacing: 5px;適用例
| 日付 | 内容 |
|---|---|
| 12/5 | カブのぬか漬け |
border-collapse: separate;
border-spacing: 0;適用例
| 日付 | 内容 |
|---|---|
| 12/5 | カブのぬか漬け |
border-collapse: collapse;適用例
| 日付 | 内容 |
|---|---|
| 12/5 | カブのぬか漬け |
参考エントリ
tableタグのcellspacing等をCSSのみで指定する :jBlogおまけ：リセットCSSでは「cellspacing」解除済み
このブログで使っている「YUI 2: Reset CSS」の場合は、以下が適用されている。border-collapse: collapse;
border-spacing: 0;はてなの「お知らせ機能」を非表示にしてみた
はてなブックマークのヘッダーバーが新しくなりまして、ワンタッチではてなの他のサービスに行けるなど、
便利になりました。デザインもいいかんじ。
ただ個人的には、Facebookライクな「あなたへのお知らせ」機能が少々煩い。
スターを貰ったりするとその数が数字で表示されるのですけど、
「チェックしろ」って言われてるみたいでなんか落ち着かないんですね。
まー慣れの問題なんでしょうけど。
というわけで、これを非表示にしたい。
吹き出しを作るCSSのテスト。（追記、修正あり）
こ、これはすごいぜ。
えええ。マジっすか。 サンプル見てもにわかに納得できなかったので、試して検証してみる。Fun With CSS Shapes – Nettuts これは驚き！CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。
これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌[CSS] 段組みの使い分け（ピクセル固定2カラム）
ピクセル固定で左右2列の段組を組む場合、CSSのパターンは色々とありますが、 その中でも例えば以下の2つは同じ片方floatだけど、違う効果をもたらします。
1. 片方はfloat、もう片方はmargin
#container {
width: 400px;
}
#left {
width: 150px;
float: left;
}
#right {
width: 250px;
margin-left: 150px;
}
LEFT
LEFT
2. 片方にだけfloatを指定する
#container {
width: 400px;
}
#left {
width: 150px;
float: left;
}
#right {
width: 400px;
}
LEFT
LEFT
【CSS】 CSSだけでマウスオーバーして画像に色を付ける（RobGoodlatte.comの場合）
デザインを色々と見ていて。 このページの右メニューのマウスオーバーに目鱗。 Passionless Pre-Professionals ? RobGoodlatte.com トップページのメニューでも、マウスオーバーで色が変わるんだけどアレはFLASH。 エントリ内の右メニューではCSSのみで動いてる。 どうやってるかというと。
【メモ】 “Flickrで使われているあのクールなドロップダウンメニュー” 改。
何となくドロップダウンメニューを探していて、こんなのを発見。 Flickrのドロップダウンメニューを作ってみるシンプルなスクリプト。
で、エントリ末に、Flickrで使われているあのクールなドロップダウンメニューを実装してみよう:phpspot開発日誌Woork: Flickr like horizontal menu Flickrで使われているあのクールなドロップダウンメニューを実装してみよう！ 次のようなクールなドロップダウンメニューを実装してみましょう。 紹介元で、HTMLと画像のサンプルが配布されています。
JSとHTMLの分離が行われていないのですが、element.onclick = function() {} などとして設定してHTMLとJSを分離してもよいでしょう。とあったのでやってみた。
【メモ】 未読のエントリにアイコンを表示する
CSSは別に悪くなかったらしい
先日取り上げた、 『諸悪の根源＝スタイルシート』 改め、 『スタイルシートをとりまく環境はなんとかならんのか？』 に、筆者の石坂さんによる追記があったので、一応追ってみる。