COPYRIGHT 2013 CYBRiDGE CORPORATION
COPYRIGHT 2013 CYBRiDGE CORPORATION 2
TEL [] COPYRIGHT 2013 CYBRiDGE CORPORATION 3
CSS CSS2.1 CSS3 CSS CSS3IEhtc js CSS ファイル 名 内 容 格 納 フォルダ common.css style.css xxx.css home.css CSS& CSS OOCSS + /css/ ID class 22 #adhead COPYRIGHT 2013 CYBRiDGE CORPORATION 4
ID class ファイル 名 #wrapper #container #header #navi.breadcrumbs #contents #main #side #footer.section.item.inner #wrapper COPYRIGHT 2013 CYBRiDGE CORPORATION 5
OOCSS(Object-Oriented CSS) class OOCSS(Object-Oriented CSS) <body>id <body> ID OOCSS ファイル 名 #pagehome #pagecontact #pagecompany #pagesearch #pagedetail CSS CSS W3C W3C CSS http://jigsaw.w3.org/css-validator/ jg g COPYRIGHT 2013 CYBRiDGE CORPORATION 6
CSS CSS tab DreamweaverCSS Dreamweaver 1. [][] 2. [ ] 3. [ ]CSS body { font-size: 82%; color: #444; line-height: 137%; } #wrapper { width: 100%; } COPYRIGHT 2013 CYBRiDGE CORPORATION 7
.hoge { color:#000; }.hoge { background:#fff url("/img/common/bg.gif") repeat-x 0 0; }.hoge { border:1px solid #CCC; } padding-bottom: 5px;.hoge { margin:12px 0; padding:0 0 5px; } プロパティ 単 位 備 考 font-size % または em 文 字 サイズはユーザーが 指 定 できるよう 原 則 可 変 にする デザイン 的 に 固 定 する 場 合 はpxも 可 9ページも 参 照 line-height 単 位 なし または px 文 字 サイズに 合 わせて 適 用 されるように 単 位 ナシで 指 定 する emで 指 定 する 場 合 は 子 要 素 への 影 響 が 異 なるので 注 意 画 像 置 換 のLIR 方 式 やデザイン 的 に 固 定 する 場 合 はpx 指 定 background- em または % または px アイコンを 表 示 している 場 合 など 文 字 サイズを 変 更 した 際 にbackground-positionの 指 定 を 変 えなくても position よいのでem 指 定 デザイン 的 に 必 要 な 場 合 は%やpxも 可 COPYRIGHT 2013 CYBRiDGE CORPORATION 8
CSS px pt em % YUI Fonts CSS CB-STANDARDcommon.css 16 3 #FF0000 #F00 文 字 状 態 CSSセレクタ 色 16 進 数 表 記 デコレーション 通 常 body 黒 #333 or #444 --- リンク a:link 青 #06C or 訪 問 済 み a:visited 紫 マウスオーバー a:hover 青 アクティブ a:active 青 COPYRIGHT 2013 CYBRiDGE CORPORATION 9
CSS CSS CSS CSS CSS CB-STANDARD common.css style.css /*================================================================== 1. style setting ===================================================================*/ /* ------------------------------------------------------------------ 1-1. Font color styles -------------------------------------------------------------------*/ /* page top styles -------------------------------------------------------------------*/ COPYRIGHT 2013 CYBRiDGE CORPORATION 10
CB-STANDARDcommon.cssstyle.css common.cssclass OOCSS(Object-Oriented CSS) CSSstyle.css style.css CSS CSStext-indent:-9999px Google #navi li a { display: block; overflow: hidden; width: 136px; height: 30px; background: #FFF url("/img/common/gn.gif") no-repeat; text-indent:-9999px; } CSS CSS class="hover" Opacity COPYRIGHT 2013 CYBRiDGE CORPORATION 11
common.css clearfix leftbox rightbox class float:left/right clearfixfloat clear 2 2 <div class="photobox clearfix"> <div class="leftbox"></div> <div class="rightbox"></div> </div> float clearfix common.css.cleartfix float overflow:hidden overflow:hidden float IE IECSS3PIE.htc IE6 PNG PIE.htc DD_belatedPNG.js COPYRIGHT 2013 CYBRiDGE CORPORATION 12