タグ: css

【メモ】 2カラムでも満足できなかったので1カラムにしてみた、それとデザインの選択とユーザビリティの話。

さすがに怒られそうですが、怒られついでに「どうせだったら1カラムだってありじゃね」と思ったので試してみました。

前回

【メモ】 3カラムのブログデザインが好きになれないので2カラムにする | mutter 3カラム（オリジナル） 05_02_01.jpg 2カラム（前回） 05_02_02.jpg

続きを読む

【メモ】 3カラムのブログデザインが好きになれないので2カラムにする

大きなお世話、と叱られそうなんですけど、大好きなブログ「フモフモコラム」さんが少し前にリニューアルしまして3カラムになりました。これがあんまり好きになれない。 05_02_01.jpg いやー。デザインしてる人はそれぞれ理由（アフィリエイトとか）があってそうしてるんですけど、読み手としては記事の幅が狭くなればなるほど読みづらいんですよね…余計なものが目にはいるし…特にフモフモコラムさんは軽妙なテキストで長文を読ませるブログだったので、それが読みづらくなってしまって最後まで読めないという状況が個人的に頻出していました。何という残念。

続きを読む

【メモ】 tableのcellspacingはCSSのborder-collapseで設定できる

こういうtableがあったとして、

日付内容
12/5カブのぬか漬け


日付内容


12/5カブのぬか漬け
この「cellspacing=”5″」をCSSで表現するとこうなるらしい。 
border-collapse: separate;
border-spacing: 5px;

適用例

日付内容
12/5カブのぬか漬け
「cellspacing=”0″」の場合は、 
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;
つまり、デフォルトで「cellspacing=”0″」になっているということ。 .sample-table { background-color: #ccc; } .sample-table th { background-color: #666; color: #fff; }

続きを読む

はてなの「お知らせ機能」を非表示にしてみた

はてなブックマークのヘッダーバーが新しくなりまして、ワンタッチではてなの他のサービスに行けるなど、 便利になりました。デザインもいいかんじ。 ただ個人的には、Facebookライクな「あなたへのお知らせ」機能が少々煩い。 スターを貰ったりするとその数が数字で表示されるのですけど、 「チェックしろ」って言われてるみたいでなんか落ち着かないんですね。 まー慣れの問題なんでしょうけど。 というわけで、これを非表示にしたい。

続きを読む

Internet Explorer7以下で正常に表示されないようです 【修正済み】

「internet Explorer」で表示が乱れるという報告をいただいたので調べたところ、次のようになりました。

  • Internet Explorer 8 → 正常に表示される
  • Internet Explorer 7 → ページ冒頭のみ表示される
  • Internet Explorer 6 → 左カラムが右カラムに回り込んでしまう
  • Internet Explorer 5 → 左カラムが右カラムに回り込んでしまう
現在修正中ですので、しばらくお待ちください。

追記

Internet Explorer 7については修正を完了しました。 IEの様々なバグの真相らしきもの – CSS HappyLife しかしそれに伴い、Internet Explorer 6の表示乱れがひどくなったような気がします（汗） 現在確認しているInternet Explorer 6での不具合：
  • 左カラムが右カラムに回り込んでしまう
  • 右上のFlashが左上にずれて表示される
  • ヘッダーメニューが左にずれる
引き続き修正を行います。

追記その2

応急措置としてInternet Explorer 6では以下のように対応しました。
  • 左カラムのサイズを固定
  • 右上のFlashを非表示
IE6ってそういえばpositionでのrightに対応していないんでしたっけ… → いやそんなことないね。IE5でも動くはず

追記その3

一応の修正を行いました。 気になる点はまだ少しありますが（特にIE6）、ひとまずこれで及第点ということにしようと思います。
  • 「position: absolute」時の基点がIE7以下で異なる
  • 「right」の取扱いがIE6以下では異なる（レイヤーの影響か正しくrightが適用されないことがある）

続きを読む

吹き出しを作るCSSのテスト。（追記、修正あり）

こ、これはすごいぜ。

これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌
Fun With CSS Shapes – Nettuts これは驚き！CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。
 
えええ。マジっすか。 サンプル見てもにわかに納得できなかったので、試して検証してみる。

続きを読む

はてなダイアリーで「リンク集」モジュールにCSSを当てられない件。

せっかく作ったんだしってんで、1日1ニコ@はてなを軽く改装していたんですが、 どうも「リンク集」モジュールにCSSが適用されない。 タイプミスかなーとか思っていろいろ確認してみたんだけど問題なし。 謎だなぁと思って、更新後の設定を見返してみたらば、 「hatena-urllist」というクラス名が、 「hatena-url(‘./list’)」という名前に勝手に書き換えられていた。 なんじゃこりゃ…

続きを読む

[CSS] 段組みの使い分け（ピクセル固定2カラム）

ピクセル固定で左右2列の段組を組む場合、CSSのパターンは色々とありますが、 その中でも例えば以下の2つは同じ片方floatだけど、違う効果をもたらします。

1. 片方はfloat、もう片方はmargin


#container {
width: 400px;
}
#left {
width: 150px;
float: left;
}
#right {
width: 250px;
margin-left: 150px;
}




LEFT

2. 片方にだけfloatを指定する


#container {
width: 400px;
}
#left {
width: 150px;
float: left;
}
#right {
width: 400px;
}




LEFT

続きを読む

【CSS】 CSSだけでマウスオーバーして画像に色を付ける（RobGoodlatte.comの場合）

デザインを色々と見ていて。 このページの右メニューのマウスオーバーに目鱗。 Passionless Pre-Professionals ? RobGoodlatte.com トップページのメニューでも、マウスオーバーで色が変わるんだけどアレはFLASH。 エントリ内の右メニューではCSSのみで動いてる。 どうやってるかというと。

続きを読む