CSS

[XHTML]WebサイトのOOP

2008/11/18 Memo No comments , ,

Webサイトはオブジェクトの集合体。
CSSもオブジェクト指向。

オブジェクトの集合なら、命名規則やデザインパターン作っておけば再利用はしやすくなる筈。
WebSiteでもOOP(Object Oriented Programming)的なこと出来る?
…となんとなく考えた事を適当に羅列してるメモです。まとまり皆無。思考ダダ漏れ注意。

Class

  1. Header -> #header
  2. Sidebar(Menu) -> #sidebar
  3. Contents -> #contents,#wrapper,#container
  4. Form ->#form,#contact
  5. Fotoer ->#footer

Method

  • List (UL,OL,DL) -> #menu,#navi,#navigation,#globalnavi
  • Headering Title (H1~H6) -> #page-title,#sitename,#content-title
  • Text Section -> div.post , div.section , div.entry
  • Buttons (input type=”button”,button tag, block style Ancher) -> #submit,#reset
  • Input (form elements)
  • Copyright (address) -> #copyright
  • Image (floating style, ancher style)
  • Table

Property

  • Inlines (strong,em,tt,code…etc)
  • Blocks (div,p,address,blockquote…etc)
  • String (plain text)

4BOXとか5BOXとかのレイアウトテンプレートは中身が空のクラス、つまりこんな状態です。

class Header {
}

(さらに…)

XHTMLコーディング過程を晒してみる(画像で)

2008/06/21 Memo No comments ,

恥を忍んでつらつら過程の画像だけ並べてみる。
画像は全部等倍で、ソースは貼って無いです。
架空じゃないから実際のサイトで見れると思いまする。

ラフデザイン。
ラフデザイン

2カラムでメインメニューは左?ど真ん中にタブのメニュー。
メニューが2箇所あるので、コンテンツをメニューで挟むことにする。
コンテンツの両脇にグラデーションのシャドウって定番だよなあ。

※デザインはデザイナーが作った

(さらに…)

[JS]Table内セルを自動的にストライプにする

2008/06/04 Javascript No comments ,

1行間隔でストライプとか、何行おきかで線が引いてあるTableをたまに見ますが、
いちいちclass追加してると面倒なのでjavacript使った方が早いよね。
っていうことでそういう感じのことをするスクリプトのサンプル。

左:1行間隔でセルの背景色変える
右:3行間隔で線を引く

(さらに…)

[CSS]CSSだけで作る吹き出しのしっぽ

2008/05/28 CSS No comments ,

どんなボックスもしっぽさえつけりゃフキダシに見えるとエロイ人はいいました。
何故CSSだけで作るのか?それは…そこにCSSがあるからだ!


直接見る»

まあ、崩れたりもするんですけど。

(さらに…)

[CSS]Safari3.X用CSSハック

2008/04/15 CSS No comments ,

Safari3.1登場。爆速表示で非常に快適なブラウザです。
FireFoxがカスタムし過ぎか最近重いからこの速さはかなり新鮮。

FireFoxでチェックしながら作ってたら大抵Safariでも同じ表示になるんだけど、
今作ってるサイトでSafariがIE6系と同じ表示になる現象が発生したので
Safariにだけ適用するCSSハックを探してたらいいものがありました。

CSS Filter: Safari CSS Hack

Not that Safari 3.0 on Windows is a grade-A browser yet, and not that I have figured out any reasons to need to hack for this browser yet, but two good potential CSS filters include using :first-of-type and -webkit-min-device-pixel-ratio.

CSS, JavaScript and XHTML Explained » Targeting Safari 3 with CSS and JavaScript: Safari3 Hacks & Filters (2008-04-15)

(さらに…)