CSS

4日目 : CSS Programming Advent Calendar 2012

2012/12/04 CSS No comments , ,

CSS Programming Advent Calendar 2012の4日目
CSSエンジニアって肩書きもアリなんじゃないかと思っているTenderfeelです。

おいしいカレーの作り方を考えてたら無事にゲームができました。
どちらもステージは1つだけです。Chromeでしか動作確認してません。

(さらに…)

[css] contentプロパティで挿入できるコンテンツ

2010/03/23 CSS 10 comments ,

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

挿入出来るモノ

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

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

(さらに…)

[MooTools] SpriteNavigation Plugin

2010/01/04 CSS, MooTools No comments , , ,

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

spritenavigation plugin

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

DEMOはこちら

Image

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

navigation

Download(psd file):

“[JS]ロールオーバースクリプト(画像名のOn/Offで判別)” をダウンロード – 0 回のダウンロード –

Creative Commons License

(さらに…)

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

2009/02/19 CSS 2 comments ,

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

(さらに…)

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

(さらに…)