[CSS]画像1枚でメニューボタンを作る

tinyMCEや大手サイトなどでよく使われてる、メニューボタンの画像を1枚にまとめてしまう手法。
ボックスなどにも応用出来るので覚えとくと便利じゃないかなと思います。

続きを読む [CSS]画像1枚でメニューボタンを作る

[XHTML]WebサイトのOOP

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]WebサイトのOOP

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

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

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

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

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

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

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

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

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

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

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

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


直接見る»

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

続きを読む [CSS]CSSだけで作る吹き出しのしっぽ