今よりちょっとだけクオリティを上げるために。

執筆が終わったと思えば、主業務が激務でネタがちらほら浮かんでたのに書けない今日この頃。
でも、どこぞのiPhoneネタと宣伝ばかりになってしまったブログよりいいかも知れません。えぇ。

さて、CSSってある程度覚えてしまえば思った以上に簡単に組めたりして、何となく組めている気がするって思ったりしないっすかね。
もしくは、その逆になーんかイマイチ成長してないようなって感じてる時とか。

そんな状況のときに、今よりちょっとだけコーディングのクオリティや効率を上げるのに意識する事とかやっておくべきこととかを思いつくままに上げてみます。
仕事としてってのがベースなので、個人サイトやブログレベルだと当てはまらないかも。

ボクが昔はやってなかったけど今は当たり前な事とか、今でも忘れがちな事とか、何かそういう感じのことを書いていくので、人によっては当たり前だし、ちょっとした発見がある人も居るかも？

よく分かりませんが、いっきます！

---- こっから続き

クオリティや効率を上げるために必要そうな事

この見出しが一段階下げる目的だけで使ったなんてとても言えません。

何はともあれ、HTMLが最重要。

正しい文書構造でマークアップ出来てなければ、どんなにCSSが分かっててもダメっす。

必ずlintは使うよーに。

たまーにチェックするの忘れちゃうんだけど、テキストエディタとかで作業している場合は、要素の閉じ忘れとかっていうイージーミスに気付かないから必ずチェックしなきゃダメっす。減点されてたら、解説を読むなりググるなりして次回から同じミスを繰り返さないように。

デザインから要素を選ばないよーに。

デザイン上こう見えるから、この要素でマークアップじゃなくて、プレーンな状態で見た時に正しい意味合いになるようにしなきゃダメっす。

サイト全体を見て、設計しなきゃ。

「木を見て森を見ず」じゃないけど、ページ単位で組んでると無駄が多くなっちゃうから、サイト全体をちゃんと見て、どの要素がどこで使いまわせるか考えなきゃダメっす。コレはデザインにも言えるかな。

横幅も大事だけど、縦幅にも気を使って。

デザインを再現するにあたって、横幅は1pxでもずれるとカラム落ちが発生したりするから気付き易いんだけど、縦幅の詰めが甘いとデザインクオリティが一気に落ちちゃう。
特にテキストはline-heightプロパティの関係とかで、デザイン上10px空いているのをそのまま10pxとかだと実際には13px相当だったりしちゃうから、その辺りも気を使わないとダメっす。

フォームには必ずlabel要素を使うよーに。

ラジオボタンとチェックボックスは特にそうだけど、label要素を使ってないと使いにくいから、使わないとダメっす。

文字サイズを変えても崩れないよーに。

画像しかないヘッダーとかで、文字サイズを変えるとずれて行くとのはカッコ悪いから、Fxとかで幾ら大きくしてもズレ無いようにしておかないとダメっす。テキスト部分も当然、レイアウトが破綻しないようにしなきゃダメっす。

classとかを減らしたいからって、ガチガチに組まないよーに。

例えば、デザイン上このページはp要素を使う部分が特定のデザインしかないからってclassを付けずに、子孫セレクタだけで親要素からp要素に指定しちゃうと、後から普通の段落が追加できない可能性が出ちゃう。
個人サイトならいいんだけど、仕事としてサイトを組む場合は、あまりにもガチガチに組んでしまうと柔軟性が無くなって、修正や追加するときに、都度CSSも直さないといけないっていう状況が発生してしまう。その作業を別の人がやる可能性も高いから、そんな事にならないように多少classが増えても管理面が良くならなきゃダメっす。

できるだけ汎用性の高いclass名をつけるよーに。

そのページのそのデザイン。実は他のページでも同じだったりしない？そんな時に、同じスタイル当てるのに別々のclass名付けるのは手間だから、どっちに使っても不自然じゃないclass名をつけなきゃダメっす。

あまりにもCSSファイルを分割し過ぎないよーに。

分割管理は、うまく機能してればとても使い易いけど、安易に分割したり、ページ単位とかで分けたりするのはかえって煩雑になってしまいがち。HTMLからclassとかidをコピって検索かけても分割され過ぎてると目的のスタイルが見つからなくなってしまう可能性も考えてあげなきゃダメっす。

読み込み中のことも考えて、背景画像を引いてても背景色の指定もするよーに。

背景色の指定をするとデザイン上問題が出るケースもあるので、一概には言えないけど、例えばグラデーションの背景画像を使っている場合とかは開始か終了の色を指定することで、読み込み時に多少重くなってもすぐにテキストが読めたり、読み込みがキレイになったりするからやっておくといいとおもー。

class名に「clear」や「clearfix」は使わないよーに。

何気にウチのサイトの検索ワード1位が「clearfix」だったりするんですが、コレをそのままclass名に使う人が結構多い気がするけど、見た目を現すclass名はびみょーなので使ったらダメっす。そもそも、clearfix使わないと再現できないっていうケース自体がfloatプロパティへの理解を深めれば殆ど無いかとおもー。

だからって、絶対に見た目を現すclass名がダメとは思わないよーに。

良くないとはいえ、見た目や位置関係でclassを付けないとダメなケースもやっぱり有るんです。ブログ構築してる時なんて特にそうだけど、そんなときまで頑なにつけないってのは、管理・更新・運用面で効率が落ちてしまうだけなので、状況を見て判断しなきゃダメっす。

繰り返しの背景画像を小さく切り過ぎないよーに。

容量を抑える目的でリピートさせる系の背景を切る時に、最小サイズで切って並べると、レンダリングスピードがかなり落ちて、PCにも意外と負荷が掛かってしまう。横で繰り返す画像の場合、1px×50pxとかで切らずに20px×50pxとかで切った方が実は早かったりする。時代遅れな低スペックマシンでやってみるとその差が体感できるんす。

追記

ボクが確認した時には明らかに最小サイズで切った画像がリピートするのに時間掛かっていた記憶が有るのですが、実験してるブログを読む限り小さくて良いみたいです。
んで、ボクも気になって実験してみましたがその差はよく分からなかったです。
ただ、小さすぎると何の画像か分かりにくいという点と、2x2で切った画像が44バイトに対して、20x20で切った画像が77バイトなので、10倍の画像サイズで2倍の容量ならどっちでも良いかもです。

プロパティの指定順序は統一するよーに。

これは最初に癖付ける部分ですが、指定順序がバラバラだと、同じ指定を2度してしまったり、後から見た時に分かり難かったりといい事が無いので、統一しなきゃダメっす。美の追求ですわ！美の！じゃあ、どんな順番がいいんですか？ってのは、Mozilla.orgの外部CSSの順番が有名で、ボクもソレに近いです。簡単に書くと、1. 視覚整形モデル、2. ボックスモデル、3. 背景と前景、4. フォントとテキスト、5. 生成内容っていう感じ。

IEではまらないよーに。

IE6/7で変だなっていうときは、何も考えずにとりあえず「zoom: 1;」を試してみれば、9割方問題が解決しちゃったり。zoomプロパティはIE独自なので、使いたくない人はwidthプロパティの指定をするとかで乗り切れちゃいます。IE6だけ変だぞ？っていう場合、「display: inline;」やってみると直ったり。如何にIE対策を早い段階で覚えるかってのも作業効率を上げるには重要だと思うっす。

確認を怠らないよーに。

意外なところで、意外なミスをやらかしてる可能性があるので、確認はしっかりやらなきゃダメっす。

あまり根つめすぎずにやるよーに。

うぉ、ネタが切れてきた、、、何事に対してもそうだと思うんですけど、納期に追われる余り食事も休憩も余り取らずにっていう状態は、精神的にも身体にも良くないので、ほどほどにさぼってやりませぅ。じゃないと結果として効率が落ちたり、ミスが増えたりといい事がない気がするっす。

何はともあれ楽しまないと損です！

いや、ホントに。コーディングつまんねー！とか思ってたらやっぱりダメっす。せっかくなんで、楽しんでやってください。ウチのサイトの目的がそれなので最重要っす！！

あぁ、もっとイッパイ書く予定だったけど、書き出すとあまり浮かばない。
気が向いたり、浮かんだりしたら追記していきまっす。

しかし書いているウチにターゲットとしてた人のレベルがどの辺だったか曖昧に...

まぁ、何はともあれ、弊社にもコーダーさんとかマークアップエンジニアさんっていう人は何人か居ますので、その人たちへのメッセージが込められているとかそうでないとか。

がんばってね。

各種SBMに追加

• 
• 
• 
• 
• 
• 
•