Webサイト構築メモ CSS設計について

2ヶ月ぶりの更新に･･･。

商品としてのWebサイトを構築していく中で、
作業の手戻りや、「ここをこうしておけばよかった！」ということが良く発生するので、
これから使うべく自分ルールをメモ。

CSSは、基本ルール＋拡張ルールで作る。

各タグに、基本的なルールをつけます。
h1の見た目、pのマージン・行間など、タグに基本的なルールをつけた後、
同様のルールを別のクラスにもつけます。

制作をしていく中で、マークアップとしてはh2だけれど、見た目としてはh1、大見出しとして見せたいことがあると思います。
そのような時、タグに対してしかスタイルをつけていないと、「見た目」という観点から、本当はh2の箇所をh1としてマークアップしなければなりません。
（現場では、SEO対策だったり、デザインを優先させるためにマークアップを犠牲にしなければならないことがよく起こります。）
それを解消するため、タグのほかに、別個、クラスにも同様のスタイルを適用しておきます。

ソース例：
h2,
.heading02
{ selector:property; }

クラス名のほうにはタグ固有のスタイルを打ち消す記述が必要になります。
多少冗長になるのですが、個人的にあまりクラスやIDをつけたくないので･･･。

また、
#contents .section .heading02
というように、子孫セレクタを使って書かないように心がける。
div.section h2.heading02
タグ名＋クラス名という組み合わせでも書かない。
汎用性を持たせるためです。

印刷時、残しておきたいものは画像（imgタグ）で生成

CSSで背景画像として作ったものは、基本的に印刷画面で表示されません。
コンテンツの中で、情報として必要なものは必ず画像化しておくこと。
リストのビュレット（●とか■）を背景画像にしているときは、
印刷用CSSでlist-style-imageで指定をすると、表示してくれるようです。

役に立つdisplay:inline-blockとheight:1%

floatやpositionを使うコンテンツには何かと上記を指定することが多いです。（マイナーかも。うちの会社ではほとんどお目にかかれず。）
以前、慣れないzoomプロパティを使って構築をしたら表示崩れがひどかったので、以後使っていません。（こっちはうちの会社で多発してます。）
高さを固定する必要のないフロートコンテナに関しては、height1%を指定。
positio:relativeに指定したボックスに関しても、幅と高さを固定したくない場合は、height:1%で。
また、display:inline-blockもheight:1%;と同じように色んなところで使います。
IE6系にはさほど影響が出ず、Firefoxには効果てきめんなときが何度かあるので利用してます。

こういう時はどうしますか？の対応

• 文字サイズが大きくなったら、文字の量が増えたら、この見出しはどうなるんだろう。
• 画面サイズが大きいと、背景画像どうなるんだろう。

などの疑問を洗い出しておいて、先に聞いておくこと。
後からそういうことだったのか！となると、時間的にも、精神的にも負担がでかいです。

• 文字が大きくなったらどうするか
• 画面サイズが大きく（小さく）なったらどうするか
• コンテンツの高さがウィンドウサイズより短かったらどうするか
• 画像とテキストが横並びになるとき、テキストは回り込むか否か
• 印刷CSSは作るか、作るならどこを印刷してどこを消すか

他、ちいさなことですが

• どこがロールオーバーするか
• フォントの指定があるか
• 文字色・リンク色まわり

も大事です。

命名規則を揺らさない

基本的なことですが、CSSまた画像名も、命名規則を揺らさないこと。
構築前に「このルールでいく！」と決めたら、横道にそれないこと。
色んな名前のクラス・画像ファイルが混在して混乱のもとに。

特殊な指定はコメント入りの方がいいかも

私の場合のheight:1%にあたります。
たとえば、自分の書いたCSSで不具合があって、別の人に修正依頼が来るとき、
原因は分かったけれど、それが本当にいらないものなのかどうかは、設計した本人にしかわからないもの。
自分しかわからなさそうなプロパティの指定には、コメントを入れようかと思ってます。

ブラウザバグ関連もろもろ

よく悩まされるのは、背景画像リピート＋コンテンツセンタリング。
Firefoxだと、センタリングしたときに絶妙（1pxレベル）な誤差が出るらしく、表示の調整にかなり苦労した覚えがあります。
・ちょっとズレても大丈夫なように、背景画像を余裕を持って指定しておく。
・Firefoxバージョン専用ハックを使ってごまかす。
ことで乗り切りました。

IE6のフロートマージン2倍バグはご周知されてる通りですね。
floatボックスにfloat側と同じmarginを指定する場合は、display:inlineで回避。

あとは、IE6にてマージン相殺のバグがあるので、
マージンは上下、左右のどちらかにしか指定しないようにするとか。

また、「スラッシュハック」なるものが社内でマイナー公開されていました。プロパティの前に『/』をつけることで、そのプロパティがIE6と IE7にしか聞かなくなるというスグレモノ。
でもまだ実践で使ったことないです

---

今日は時間がないのでここまで・・・。

今まで、『マークアップとデザインの分離』とは、ただ単に、
「太字にするためにstrongを使わない」
「目立たせるためにh1を使わない」
「CSSはHTMLに直書きせず、別ファイルで管理する」
ことだと思っていました（その意味も含まれると思いますが）。

商品としてのWebサイトを構築してきて、気付いたのは、
「マークアップに対してスタイルをつけるんだ」ということ。
スタイルのために、マークアップの妥当性を犠牲にしないということ。

もちろん、今までもそれを意識して作業してはいたけれど、
本当の意味で理解していなかったんだということに気付いたのです。

タグに対して固定のスタイルをつけてしまうと、デザインを見て、タグを入れるという作業になってしまう。
運用作業をこなす中で、『こういう見た目が欲しいから、このマークアップを使うしかないか。』と感じたことが何度もありました。

スタイルのことは考えず、マークアップしていって、相応のクラスをつけてデザインの調整をする。
マークアップしている間は、デザインのことは気にしなくていい。
デザインは後からクラス名をつけることによっていくらでも調整がきくのですから。
『マークアップとデザインの分離』ってこういうことなんだ、と今さらながら初めて理解できました。

今回のメモは、WebDesigning4月号のOOCSSの記事が発端でした。
その記事を見て、自分はこんな方向性でいきたいなと思ったのでメモしてみました。

知らない世界

こんな記事を発見。

クライアントからのムチャぶり迷言集
http://www.webcreatorbox.com/webinfo/clients-funny-requests/


これを見て、同じ会社で働くディレクターの人が言っていたことを思い出した。

「クライアントは、こちらの世界の状態だったり、こちらの仕事の内容を知らないことがある。
それはしょうがないこと。
でも、その溝を埋めようとしないのが許せなくて。」

と。


私は営業やディレクターのように最前線に立ってクライアントと向き合う立場じゃないから、具体的なことは分からないけれど、
その言葉からすると、
認識の違いは、直接会って話して、しっかり説明すれば、分かってもらえるものなのだと思う。
それができない状況っていうのは、ディレクターとしては、ほんとうに、一番苦しかったのかなと。


クライアントが、こちらの業界について無知なことは多々ある。
でも、逆に、Web制作会社のほうが、クライアントの業界に対して無知なことだってあると思う。

業界が違うんだから、考え方に違いがあるのはしょうがない。
普通の人間関係だってそうなんだから仕方ない。
他人の「自分ルール」なんて誰も知るわけがないんだから。


どうも、
「あんたんとこの商品金だして買ってるんだからね！ちゃんとサービスしてよね！」
という感じの、

クライアント＞Web制作会社

という力関係になってしまいがちですが、
そんな関係だと、相乗効果は生まれないですよね。きっと。

理想論ではありますが、顔なじみのお得意様みたいな感じで、
互いに大切に思い、尊重しあう関係を気付けたら、長くお付き合いできて幸せになれるのかなと思います。

そうなるためには、まず前提として、
お互いの違いを見てみぬふりせず、意見を言い合って理解する努力が必要なのかな。
互いが一番大事にしていることを、互いに尊重して、守ってきているなら、
関係ってそう壊れることはないと思うのです。

CSS3を試してみる column、border-radius、multiple background

Firefox3.6ではついにCSS3がテスト実装されたと聞きまして（ちゃんと調べてません）、
CSS3でページを作ってみました。
作ったの自体は去年だったんですけど、完成を待ってるといつになるかわからないので、
この段階でいったん公開してみます。

こちら↓
http://www.granshe.com/css3/


確認してみましたが、
Safariでは確実に複数背景画像・border-radiusが実装済でした。
Firefox3.5だと、「まあまあ、マルチカラムと角丸くらいはぼちぼち。」な感じでした。
IEは8でも、うんともすんともでした。

columnはともかく、border-radiusや複数背景画像の指定がうまくいくようになったら、
今よりだいぶソースがすっきりするんじゃなかろうかと思う。

画像をスライスする手間も省けるし、
今よりずっとサイト上でデザインを再現するのが楽になるんだろうな（予想）。
実際に仕事で使っていくかどうかは、対象ブラウザやサイトの仕様やいろいろな問題で、
もう少し先になるかもしれないけれど、楽しみ。

HTML5よりは、CSS3のほうが期待が大きいかな。



参考

角丸にするJS＋角丸＆複数背景JS
http://ascii.jp/elem/000/000/416/416811/
http://articles.sitepoint.com/print/rounded-corners-css-javascript

マルチカラムJS
http://www.alistapart.com/articles/css3multicolumn/
デモ
http://www.csscripting.com/css-multi-column/

入社10ヶ月目

なんだかんだ言って、Web制作会社に就職して9ヶ月が経ち。
現場配属は入社の後2ヶ月後だったので、現場で仕事をし始めてようやく7ヶ月が終わりました。

入社する前から、Web制作は独学で経験をつんできて、
小さな会社ではありますが、お金をもらってWebの仕事をしたこともありました。
もしかすると、スキル的な伸びしろは少ないのかもしれないと、思ったことも正直あります。

実際、会社に入ってから一番学んだのは、
「効率よく仕事をする手法」。
それは例えば一斉置換作業を行うためのツールだったり、正規表現だったり、
目的のフォルダにアクセスしやすくするランチャーだったり。
更新前後のサイトの差分ファイルをまとめやすくするツールもあり。
（いまだに差分抽出作業はニガテです。）

コミュニケーション技術がかなり求められるということも、よく分かりました。


それでも、技術的なスキルが全く伸びなかったわけではなく。
「ちょっとできる」ということに対して、挑戦させてくれる場所だったというのは、本当にありがたいです。

この、仕組みを考える、構築する、頭を使う仕事というのは、
年を重ねるごとに、どんどん新しいものが出てきて、考え方が変わって、成長していけるものだと思います。


私はWeb制作という仕事が大好きで、
この仕事に就けたということは、本当に運が良かったとしか、言いようがありません。

仕事は繁忙期だと結構遅い時間まで作業が必要になるので、
眠い、キツイ、辛い、しんどい、と思ったことは何度かありますが、
Web制作が嫌いだと思ったことも、辞めたいと思ったこともないと思います。
幸い、会社おとまりは1回も経験していないので。


そろそろ、FirefoxもCSS3に対応し始めたようなので、
本格的に動き出さないと。と思って筆を執りました。

HTML5の概要について理解できるスライドショー

また1ヶ月ぶりになってしまった･･･。

HTML5の概要についてわかりやすーく書いてあるスライドがありましたのでメモ。

HTML5、きちんと。

発見だったところ

• <br>と<br />が混在できる。
• <img>と同じように使える<video><audio>ができるかも。