186(css)

2004-10-28

[] Hack

確かハックの資料を纏めたのはThemeグループだったか。

この辺キーワード建てて作ってこうかと考え中。問題はハックの名前だ。ボックスモデルハックって何て呼ばれてたっけか。

トラックバック - http://css.g.hatena.ne.jp/smoking186/20041028

2004-10-24

http://www.hatena.ne.jp/1098437696 18:13

質問 日常的にCSSでWebデザインをされている方に質問です。

「こんなCSSの使い方ができるんだ!」と感心したサイトを教えてください。

http://www.csszengarden.com/http://www.mozilla-japan.org/のように、HTMLとCSSの中身をみて参考になるサイト。

また、感心されたポイントを教えていただければ幸いです。

http://www.hatena.ne.jp/1098437696

CSSグループの方々へ、告知。

今のところ俺しか答えてないので、どなたか紹介してあげて下さい。海外関係を纏めて答えようかと思ったけど、二回目っていうのもな。

[] photoモジュールを弄ってみる。

ポイントは最大でも50px*50px60px*60pxという点。

  • div.hatena-modulebody
    • ul.hatena-photo
      • li
        • a
          • img

という五階層に気をつけ、どれをブロック化すると良いのかを考えながら弄ってみる。

目標は

#photo_test {
 margin:10px;
 padding:10px;
 border-bottom: 2px solid #cccccc;
 border-right: 1px solid #dddddd;
 border-top: 1px solid #fefefe;
 border-left: 1px solid #fefefe;
}

みたいに加工したものをdiv.module-body中に中央揃えで並べること。aをblock化し、widthとheightを決め打って枠線を引くと崩れにくいか?

div.module-bodyの幅は200pxとしておく。

[] 上の続き

.sidebar {
 width: 240px;
}

.hatena-module {
 width: 220px;
 margin: 10px 9px 10px 9px;
 border: 1px solid red;
}

.hatena-modulebody {
 widht: 200px;
 margin: 10px 9px 10px 9px;
 border: 1px solid blue;
}


.hatena-photo {
 margin: 0px;
 padding: 0px;
 list-style-type: none;
}

.hatena-photo li {
 display: block;
 width: 82px;
 margin: 5px 59px 5px 59px;
 background-color: #ffffff;
}

.hatena-photo li a {
 border: 0px;
 display: block;
 text-align: center;
 padding-top: 10px;
 padding-bottom: 10px;
 background-color: #ffffff;
 border-bottom: 2px solid #cccccc;
 border-right: 1px solid #dddddd;
 border-top: 1px solid #fefefe;
 border-left: 1px solid #fefefe;
}

.hatena-photo li a img {
 border: 0px;
}

具体例。Standardモードで解釈する場合は上の通り。

後はQuirkモードで読みやがるIE,Opera等に対して調整を行う。

IEに関しては_hackか* html hack辺りでwidthの計算方法に気を使いながら指定しなおせばよい。

今度作るテーマで採用しようと思っている。

aをブロック化して、a要素で写真の枠線を引いているので、active時に背景色及び枠線の色を変えることも容易い。なるべく一つに纏めるのは良いことだ。

追記:画像の幅って最高で60pxだったのか。50pxと勘違いしてた(;´Д`) どおりで横のアキが寸詰まりになる訳だ。

という訳でここまで読んだ人はg:css:id:tredue:20041026も読むこと。liの枠線を用いて更に細かく影を再現している。

[] CSSを書く時の注意。

  1. まずGecko系で作る。Macの人ならSafari。
  2. 次にOpera6, Opera7で調整を行う。
  3. 最後にIEでハックを使いながら崩れないように調整していく(width周りを重点的に)。

こうすると大抵のブラウザで問題なく共通で見られるCSSが作れるので作業が楽である。

最初からIEで描画テストを行いながら作ってしまうのは、非常にお勧め出来ない。というか止めなさい。後で面倒臭いことになることが多い。

UAで判別するのも良いが、UAを偽装する人が稀にだがいる点を忘れてはいけない。JavaScript切ってる人はどうするんだ? JavaScriptを切ってもUAで判断するという手もあるが、Recommuniみたいになっちゃうぞ?

トラックバック - http://css.g.hatena.ne.jp/smoking186/20041024

2004-10-09

テンプレート案に従ってime-modeとか書き中。

しかしはてな内で使うところが考えられないという罠。コメント欄を英語専用にするとかかしらん。

トラックバック - http://css.g.hatena.ne.jp/smoking186/20041009

2004-10-05

プロパティ解説のテンプレート案

Sampleの所は面倒なのでsuperpre(>||~||<)の方が楽かなと。

はてなガイドのCSSセレクタの項で「とほほのスタイルシート入門」の座を奪う勢いで。

で、-moz関係は通常のウェブサイトでは勧められないってことを頭に書いといた方が良いと思うので、そこはそれということでお願いします。はい。

kamiokakamioka2004/10/05 09:19了解です。注意書きについてはp.messageのようなクラスが欲しいですね。*.cautionかな。
<em class="caution"></em>と<strong class="caution"></strong>の使い分けが妥当でしょうか?

トラックバック - http://css.g.hatena.ne.jp/smoking186/20041005

2004-10-04

多々の視覚系UAを共存させるというか見た目を確認する方法

トラックバック - http://css.g.hatena.ne.jp/smoking186/20041004

2004-10-03

-moz-box-sizingってこの説明でええんかなぁ。

→ちょっと直した。

トラックバック - http://css.g.hatena.ne.jp/smoking186/20041003