2006年7月26日 12:51
▼EntryMore▼
======================================================= スタイルシートガイドライン ver1.0 ======================================================= ■ 冒頭に目次を設ける。 ・目次の項目に固有のIDを振りエディタの検索で頭出しできるようにする。(例) -------------------------------------------------- 〜目次〜 1: Initialize (=INI) 2: Layout (=LAY) 3: Decoration (=DEC) --------------------------------------------------
※ここでの(=INI)などがIDにあたる。「=INI」で検索することで頭出しが可能となる。 （CSSには「=」を含む文字列がないため、別の文字がヒットしてしまうことを防ぐ） ■ レイアウト、装飾などのカテゴリごとに記述を分け、たとえ同じIDやclassであっても分けて記述する。 (分類:レイアウト) clear,float,display,height,margin,min-width,min-height, max-width,max-height,padding,position,width,z-index, (分類:装飾) background,border,color,font,letter-spacing,line-height, list-style,overflow,text-align,text-indent,text-decoration,vertical-align,visibility, ■ ID、class名は適切な名前をつける。 ・名前は「意味」を考えてつける。font-12ptなどの「見た目」を名前にはしない。 あくまでそのスタイルを適用する要素の意味ごとに名前をつけ、スタイルを設定する。(例) -------------------------------------------------- <div id="container"> <p class="info"> <strong class="date"></strong> </p> </div> --------------------------------------------------
※ここでのcontainer、info、dateのこと。 それぞれに意味があり、「dateの文字の色、太さ、大きさはこれ」という指定の仕方をする。 （もしfont-12pt、などのスタイルを設定してしまうと、文字サイズなどの変更が生じた際、HTMLを書き換えないといけなくなってしまう。（font-12pt{font-size: 14pt;}などとすると矛盾が生じてしまうため）） ■ できるだけID、classは大枠につけ、配下の要素には名前をつけない。 ・各要素ごとに<div>や<p>でくくり、この<div>や<p>に対してIDやclassを割り振り、その配下の<em>や<strong>などには名前をつけないようにする。また同じようなスタイルであっても個別にIDやclassを設定し、セレクタのグループ化で同時に設定する。(例) -------------------------------------------------- div#man1 h1, div#man2 h1, div#man3 h1{ border-bottom: solid 1px #000; } --------------------------------------------------
※こうしておくことで、後々、たとえばman2のh1だけborderを2pxに、という指示があっても個別に設定し直すことが容易になる。 ■ (模索)コンポーネント化する。 //模索中の案です。実際に運用に耐えるかは未知数…。 ・全ページではないが、複数ページにて同じようなスタイル（色違いなど）が存在する場合は個別ファイルとして用意し、各個別ページ用のファイルから読みこませる。記述内容は必要最低限のものだけとし、個別ファイルにて詳細を設定する。（色や線の太さなど）(例) -------------------------------------------------- [comp.css] /* コンポーネントファイル*/ .text-field{ border-left-style: solid; border-bottom-style: double; } [unique.css] /* 個別ファイル */ body#unique .text-field{ border-left-color: #ff5533; border-bottom-color: #ff5533; } --------------------------------------------------
※各要素の定義の分離をはかる。また、プロパティの指定時に省略形を使わない。 （省略形を使ってしまうと、定義されていない部分のプロパティが省略形の初期値に設定されてしまうため）トラックバックURL
http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/16
©2008 CSS-EBLOG. All Rights Reserved
コメント
1 - きっぴ さん
えどさん、こんにちは。
ふむふむです。
うーーん。なんとか、大体、ついていくことができました（＾−＾）
ふぅふぅ。
ところで、やっとこ質問ですが、
（遅くなってすみません）
最近、webページをプリントしたいと言われまして、
media="print"を使って、印刷用の CSSで指定していますが、
display:none;でいらない要素は消す。
フォントサイズの指定
文字色、背景色の指定
など。
どうしても、プリントしたい画像が用紙の途中で切れてしまったりすると言われて、ちょっと困りました。
結局、ページプレビューで確認しながら、しょうがなく画像位置を調節しましたが、
こまかいwebページをを印刷にもと考えてもらっては、ツライでした（＞−＜）
そんなに印刷したいならpdfにしてちょーだい！（泣き言）
えどさん、なにかいい方法ありますか？
また、印刷時のテクニックなどありましたら、教えてくださいませませませっ♪
2006年7月29日 07:36
2 - えど さん
どもです(*'-')
印刷は苦労する部分ですよね…。
しかも、こちらで印刷して渡すならまだしも、クライアント側で印刷するのでなかなか微調整もできません。
しかも印刷の設定にも依ってしまうし…。
その画像は背景として使っていたものですか？
それとも、文章の中に出てくる画像として？
ただ、場合によっては解決策がない場合もあったりします…。
とりあえずもちっと詳しく状況を教えてください(*'-')
2006年7月31日 13:02
3 - きっぴ さん
えどさん、こんばんわ。
ご回答いただきまして、恐縮です。
そのサイトは、画像１つに対して説明をつけるようなもので、
１つの画像のサイズは200pxタテ×ヨコくらいの大きさです。
それがたくさんあって。
クライアント様のご希望により、テーブル組にして仕切っているのですが、
その
画像が切れてしまうものは、
テーブルの枠線や、そのものを説明する画像なんです・・・。
たくさんぎっしり並んでいるので、どうしてもどこかで切れてしまうのですよ（T-T)
クライアント様はwebページを印刷して資料としても使いたいらしく・・・。
結局は、どうしても印刷したいとおっしゃるので、大幅にテーブルの組み方や、画像の位置などを修正してなんとか印刷できるように、調整したのですが、やはり、特効薬てきなテクニックはないのですかしら（＞−＜）？
2006年8月 3日 21:44
4 - 三兎 さん
いつも勉強になるなぁと思って読んでいます。トップページから記事が消えてしまっていましたので報告。MTの設定によるところだと思いますが…
2006年8月 5日 00:58
5 - えど さん
>>三兎さん
おお、いつも読んで頂いてありがとうございます(*'-')
トップページの記事については直しました。
ご指摘ありがとうございました！
>>きっぴさん
どもです。
印刷はつらいところですよね・・。
CSSでのずれなら修正可能なんですが、
例えばクライアント側での印刷設定などが影響して
思惑通りに印刷されない、ってこともあったりするので
とても悩みどころです；
横が切れる、と言ってくるクライアントには
印刷の設定で余白を最小にしてやり直してみてください、とお願いしてます。
大概それで解決して納得してくれるので、それでいつも逃げてますｗ
ただ、文章なんかが長くて、縦の部分が切れてしまう件については
結構むずかしいですよね・・。
印刷の設定にもよりますが、
確実に改行してほしいところで
CSS側で印刷時に改ページさせる、という指定があるので
それでなんとか体裁を繕ったことはあります。
ちょっとすぐプロパティが出てこないんですが、
その印刷用のプロパティは使ってますか？
それを使ってもなおダメ出しがくるとなると、
現状ではちょっと解決策が思いつかないですね；
印刷については結構悩まされるので、
も少し調べたりしてみたいと思います。
なんかいい記事が見つかったりしたら新しく書きますね！
2006年8月 5日 02:59