ホーム > タグ > CSS
CSS
[css] contentプロパティで挿入できるコンテンツ
- 2010-03-23 (火)
- CSS
clearFixでお馴染みなCSSの擬似セレクタ:beforeと:afterではcontentプロパティというものが使えるわけですが、
:beforeと:afterがIE7以下未対応ということもあって使ってない人は未だ多かろうと思います。
しかしながらレガシーなIEで表示されないから使わないというのは非常に勿体無いので、
今一度contentプロパティで挿入出来る内容についてまとめておこうと思います。
挿入出来るモノ
大きく分けると3つです。
- テキスト
- プロパティの値
- 画像
- Comments: 0
- Trackbacks: 0
[MooTools] SpriteNavigation Plugin
MooToolsとCSSでFlashのような滑らかなマウスオーバーやカレント表示を実装するプラグイン。
![]()
元ネタはCreate a Sprited Navigation Menu Using CSS and MooToolsで、
よくやるコーディングに合わせて作り直しつつちょっとロジックを変えてクラス化した。
使用する際にはHTMLとCSSにいくつかルールがあります。
Image
全部つなげて作る。順番はなんでもいいです。
デモのやつは上から、通常・マウスオーバー・クリック・カレント、になってます。

Download(psd file):SpriteNavigation Demo Base (v1.0)
- Comments: 0
- Trackbacks: 0
[CSS]画像1枚でメニューボタンを作る
- 2009-02-19 (木)
- CSS
tinyMCEや大手サイトなどでよく使われてる、メニューボタンの画像を1枚にまとめてしまう手法。
ボックスなどにも応用出来るので覚えとくと便利じゃないかなと思います。

- Comments: 0
- Trackbacks: 1
[XHTML]WebサイトのOOP
- 2008-11-18 (火)
- Memo
Webサイトはオブジェクトの集合体。
CSSもオブジェクト指向。
オブジェクトの集合なら、命名規則やデザインパターン作っておけば再利用はしやすくなる筈。
WebSiteでもOOP(Object Oriented Programming)的なこと出来る?
…となんとなく考えた事を適当に羅列してるメモです。まとまり皆無。思考ダダ漏れ注意。
Class
- Header -> #header
- Sidebar(Menu) -> #sidebar
- Contents -> #contents,#wrapper,#container
- Form ->#form,#contact
- 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 {
}
- Comments: 0
- Trackbacks: 0
XHTMLコーディング過程を晒してみる(画像で)
- 2008-06-21 (土)
- Memo
恥を忍んでつらつら過程の画像だけ並べてみる。
画像は全部等倍で、ソースは貼って無いです。
架空じゃないから実際のサイトで見れると思いまする。
2カラムでメインメニューは左?ど真ん中にタブのメニュー。
メニューが2箇所あるので、コンテンツをメニューで挟むことにする。
コンテンツの両脇にグラデーションのシャドウって定番だよなあ。
※デザインはデザイナーが作った
- Comments: 0
- Trackbacks: 0
Home > Tags > CSS
-
- そしてこのSQLはわれながらよく書いたと思う 2010-11-15
- CSVの列っていう方がいいのかな…118項目だった 2010-11-15
- 楽天のCSVの項目が116個もあった衝撃 2010-11-15
- オフィスで香水臭振りまくのは迷惑だと知れ 2010-11-15
- ぐあー フレグランステロやー 2010-11-15
- More updates...
Powered by Twitter Tools
-
- ホームページビルダー
- 擬似クラス
- 楽天
- 1Column
- 2BOX
- 2ch
- 2column
- 2Helvs
- 3column
- 5BOX
- Actionscript
- Ajax
- Animation
- AntiSpam
- API
- apple
- Aptana
- Aqua
- ASCII
- Assets
- AutoExternalLink
- background
- backup
- BETA
- Blog Status
- breadcrumb
- Bubble
- bug
- Button
- calendar
- Calendarizm
- canvas
- Center
- Chain
- Chrome
- Class
- Click Event
- CMS
- ColorMeShopPro
- ContactForm
- Control
- Cookie
- CSS
- CSS3
- CSV
- Custom
- date()
- Demo
- Dojo
- domain
- Download
- Dreamweaver
- dropdown
- Dummy Text
- Effect
- Elastic
- Error
- Filter
- filter.html
- FireFox
- Fixed
- Flash
- Floating
- foglio
- Form
- free material
- free script
- Function Reference
- Fx.Morph
- Fx.Scroll
- Fx.Slide
- Fx.Tween
- gettext
- get_posts
- GMarker
- Go-To-Top
- GoogleChart
- GoogleEarth
- GoogleMap
- GoogleSearch
- Hack
- Halves
- Highlight
- Horizontal
- HTML&XHTML
- HTML5
- HTML5API
- Icon
- IE
- illustrator
- infowindow
- iphone
- Javascript
- jQuery
- jQuery.plugin
- KML
- LeftMenu
- liquid
- ListMenu
- Localization
- login-system
- Magpie RSS
- Mobile
- mooFollow
- MooTools
- mooTyping
- number format()
- OnlineGame
- OOP
- OpenPNE
- Pagenation
- permalink
- Photoshop
- PHP
- ping
- plugin
- poedit
- Polyline
- prototype.js
- Regular Expression
- RightMenu
- rollover
- RPC
- RSS
- Safari
- Sample
- script.aculo.us
- scrollbar
- selection
- selectors
- SEO
- session
- Shortcode
- Sidebar Widgets
- slimbbs
- Smarty
- SmoothScroll
- strtotime()
- Symphony-CMS
- Tableless
- Tab Menu
- Tar
- Template
- Template Engine
- Template Tags
- time()
- TinyMCE
- token
- Tooltip
- Transparent
- Tutorial
- Tutoriarl
- Valid
- Validator
- vertical-align
- Web Browser
- Web Site
- Wiki
- window.open
- wordpress
- wp-custom
- wp-function
- wp-plugin
- wp-themes
- xampp
- XHTML
- XML
- Xserver
- YUI
- Zend Framework
- Zend_Form
- Zend_View
- zeromail

