CSS

clearFixでお馴染みなCSSの擬似セレクタ:beforeと:afterではcontentプロパティというものが使えるわけですが、
:beforeと:afterがIE7以下未対応ということもあって使ってない人は未だ多かろうと思います。
しかしながらレガシーなIEで表示されないから使わないというのは非常に勿体無いので、
今一度contentプロパティで挿入出来る内容についてまとめておこうと思います。

挿入出来るモノ

大きく分けると３つです。

• テキスト
• プロパティの値
• 画像

Continue reading

MooToolsとCSSでFlashのような滑らかなマウスオーバーやカレント表示を実装するプラグイン。

元ネタはCreate a Sprited Navigation Menu Using CSS and MooToolsで、
よくやるコーディングに合わせて作り直しつつちょっとロジックを変えてクラス化した。
使用する際にはHTMLとCSSにいくつかルールがあります。

DEMOはこちら

Image

全部つなげて作る。順番はなんでもいいです。
デモのやつは上から、通常・マウスオーバー・クリック・カレント、になってます。

Download(psd file):SpriteNavigation Demo Base (v1.0)

Continue reading

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

Continue reading

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 {
}

Continue reading

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

ラフデザイン。

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

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

Continue reading