Design エントリー[マークアップ (XHTML+CSS) / 制作・管理]
マークアップの標準化で躓いたこと、見直したこと
あとで読む コメント (0) トラックバック (0) Atom/RSS
以下、後で再整理する。
前提条件とした事項
- 仕様 (スタイル) の変更や追加で破綻しないこと
- 再利用できること (component や module の考え方の取り込み)
- システム化したときにも破綻しない構成 (theme によるスタイル分割の採用とか)
再考、再構築の際、躓いたこと / 見直したこと
取りあえず、羅列。
- サイト構造 (ファイル構成や配置、画像は一箇所に格納とか)
- header 要素 meta, link
- スタイルシートの分割 (layout と decoration の分離)
- 命名規則 (Camel 形式 ? Pascal 形式)
- 書式 (HTML はインデントさせないので、CSS もインデントしない方向で)
- コメントの記述方法 (閉じタグの直前に書くとか)
- スタイルの初期化 (* グローバル・セレクタの不採用 ... もともと使っていなかったけど)
- body class や id の扱い
- フォントサイズ (YUIを参考にはしているけど、 Mac とも同一のサイズを実現するためには多少のプログラム JavaScript 導入も視野にいれている 相対値での指定に限界を感じる)
- セクション (段落やブロック) の再考 (class 名を section にするとか、余白の考え方を統一し、ほぼ全てで padding-bottom で余白を設定するようにした、とか)
- float 処置 (clearfix, zoom の採用)
雑感
Wiki を使って以下のドキュメントをまとめているけど、YUI で公開されているような cheatsheets (http://yuiblog.com/assets/pdf/cheatsheets/css.pdf) くらい簡潔にまとめないと、組織の中で標準化させるのは難しいかもしれない。(多数にメンバーが一定以上の技量と志しを持っていれば ? もっと手軽に導入できるかもしれないけど... あるいは強制力 ? 管理 (監視) 力 ?)
- サイト構造 (サイト全体のファイル構成)
- ページ構造 (レイアウト、ヘッダ・フッタ・ブロック構成)
- マークアップ・ガイドライン (HTML宣言、メタ、XHTML)
- スタイル・ガイドライン (CSS)
- デザイン・ガイドライン (配色のルールなど)
わかりやすくないとな...
あと、重要なことが一つ。
制作代行している場合に著作権 copyright の表記ってどのように扱うのが一番相応しいのか、という疑問。サイト運営者が保有している画像などは著作権の対象として考えるのは理解できる。
だけど、マークアップの仕方 ? スタイルの定義の仕方 ? とか、著作権と考えるとちょっと違うのだけど、手法や方法論の保護 ? みたいなことって考えなくてよいのだろうか ?
一度整理してまとめる必要がありそうだ。
参考にしたサイト
ドキュメントにまとめたら全部トラバらせていただきます。みなさんの情報発信 (アウトプット・マインド) に感謝。
CSS 全般
CSS 分割
CSS 初期化
- Lucky bag::blog: CSS を作成する際のお約束
- CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - DesignWalker
- bodyに設定しておくと便利な3つのポイントとおまけ｜CSS HappyLife
- ブラウザ間の差異をなくすCSSリセット | Emotional Web
- *{ margin : 0 }はもう古い！？ | Emotional Web
- 新規でサイトを作る際に僕がいつも使ってるCSSのセットを公開するよ::::::STOPN' LISTEN::::::to the silence:::::::
- [CSS]スタイルの初期化(前編) -全称セレクタとhtml, body編 | コリス
- [CSS]スタイルの初期化(後編) -body内の個別タグ編 | コリス
- 最初に指定しておくと便利なCSS | Tech de Go
コメント (HTML と CSS)
HTML でのコメント
- 正しいコメントを書こう - The Web KANZAKI.
- HTMLのコメントの書き方 - capsctrldays (2007-01-19)
- 我的春秋: (X)HTML, XML のコメント記述位置
- 覚え書き@kazuhi.to: Re: 第1回 ひきついだサイトはdivでいっぱい！
CSS でのコメント
フォント
- Lucky bag::blog: line-height の値には単位なしが良いとされる理由
- CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - DesignWalker (CSS の初期化でも参考にしたけどフォント設定でも参考になった)
- Yahoo! UI Library: Fonts CSS Font-size Adjustment
- TRANS - YUI Fonts CSSのline-height: 1.22em;の謎を解く！
- 名古屋芸術大学音楽学部
id, class名
- もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
- id名、class名の最近の自分の傾向｜CSS HappyLife
- classとidの使い分けについて考えてみる | Blog hamashun.com
- id="header"で問題ないのでは | d-spica
body につける class, id
float
- 構造のマークアップなしでフロートをクリアする方法
- 【IE7対応clearfix】さらに続報、コピペでつかえる主要ブラウザをclearするコード、[多分最終版]::::::STOPN' LISTEN::::::to the silence:::::::
- clearfixハック｜CSS HappyLife
そのほか
- フルCSSコーディング（分離型コーディング）のワークフロー（１）::::::STOPN' LISTEN::::::to the silence:::::::
- フルCSSコーディング（分離型コーディング）のワークフロー（2）::::::STOPN' LISTEN::::::to the silence:::::::
非公開サイト ...
私以外アクセスできないけど...
サイト設計、サイト構造に関する etc
- ウェブサイト構造設計 (ちょこっとリンク集) - private address://yamazaki/pukiwiki/index.php?WebsiteStructure
- 情報アーキテクチャー (ちょこっとリンク集) - private address://yamazaki/pukiwiki/index.php?InformationArchitecture
マークアップに関する etc
- スタイル一覧 (共通化しておくと効率のよい基本スタイル、装飾の定義そのものはサイトそれぞれで行う) - private address://yamazaki/pukiwiki/index.php?StyleList
- (X)HTML + CSS マークアップ全般の覚書 - private address://yamazaki/pukiwiki/index.php?MarkupStyle
- (X)HTML 全般の覚書 - private address://yamazaki/pukiwiki/index.php?Markup
- CSS 全般の覚書 - private address://yamazaki/pukiwiki/index.php?CascadingStyleSheets
デザインに関する etc
- デザイン 全般の覚書 (データ AI とか PSD の扱いやデザイン・ガイドについて) - private address://yamazaki/pukiwiki/index.php?Design
追記
CSS Nite in OSAKA ザ・ルールズ・オブ・スタイルシート by 益子貴寛[to-R]
あとで読む コメント (0) トラックバック (0) Atom/RSS
投稿: 2007年03月27日 09:43 / 最終更新: 2007年04月10日 00:08
» ツリー構造を表現するマークアップ
« Dreamweaverk8から実装されたルート相対パス指定
コメント (投稿する)