HappyLifeCSSに関するネタを中心に色々書いてます。ロサンゼルスで働くウェブデザイナーの日記を読んで、ボクなりな最初に指定して置くと良いポイントを上げたくなったので書いちゃいます。このサイトの方向性的に有った方が便利だよなーと。書くきっかけを頂き、感謝いたします。ちなみに、最初に指定しておくポイントってそれぞれだと思うので、一つの参考として読んでいただければ幸いです。最初にbodyに指定しておくと便利だと思う3つを。sans-serif;font-size:80%;}じゃあ、詳細について色々書きまする。21:45頃にチョット修正入ってます。bodyの指定まずは背景。top;背景の指定を予め記述しておくのは、都度書くのが面倒だからです。比較的背景色は白が多いので、#FFFで白指定。背景画像の指定までしているのも、面倒だから、、、ディレクトリ構成は色々だと思うんですが、ボクの場合全ページで使いまわす画像はimgフォルダ内にshareフォルダを作りbodyに指定する背景画像はbg.gifで入れる事が多いのでその打つ手間を省きます。コレにより、別のサイトを組む際に使い回しが利きます。repeatとかも同じ理由。0から打つより「-y」とか「-x」とだけ打った方が楽だもん。sans-serif;Verdanaは、英数字で一番読みやすいとかって何処かで読んだので、僕の中で流行ってます。確かに読みやすいと思う。ウチのサイトでも本文内はVerdanaが指定されてます。ビスタの登場もあるんでメイリオを指定しておくか逆にfont-familyの指定はしないのもいいと思います。font-size:80%;個人的にこのサイズが見やすいんと、上がってくるデザインはこのサイズが多いので最初に指定してます。後は、対象ユーザー次第だと思います。比較的年齢層が高い場合などは、mediumくらいが良さ毛。違うなら変えればいいだけなのでいくつでも良いとは思いますが、とりあえず相対単位(px除く)で指定してれば良いかと。60%やら、xx-smallとか異様に小さいサイズを最初に指定するのはダメだと思うけどね。以上でbodyに指定しておくポイントはお終い。続いてタイトルにもある「おまけ」の部分をば。@charset指定を文字コードに関わらず、@charsetで文字コードの指定をした方がいいです。"utf-8";たまにコメントの後に指定しているのを見かけますが、@charsetは、必ず一番最初の行に記述します。スペースすら空けちゃいけないです。{margin:0;padding:0;}ブラウザによるデフォルトのmarginとpaddingの差異を無くすために、ユニバーサルセレクタを利用して初期化をします。順番的にはココでbodyの指定をします。{overflow-y:scroll;}前回のエントリーで書いたFirefoxのスクロールバーの有無でセンタリング位置がズレる件を解消用です。{}h1から書いてグループ化するのすらだるいので取りあえず書いてあると楽ってだけです。{list-style-type:none;}line-heightは好みですかね。1.6はボクが見やすいと思ってるので最近良く使ってます。単位指定しない方が良い理由については、下記が参考になります。読んでみれば分かりますが、別に単位を付ける事自体はダメじゃないんで、その辺知ってれば問題ないかと。p要素のmargin指定は、ユニバーサルセレクタで無くなられてしまわれたmarginを上書きして、ちゃんと段落になるように。li要素の指定もデザイン次第なんですが、割合的に消えている場合が多いのなら最初に消しておいた方が指定する数が少なく済みます。{border:0;}imgにリンクを貼ったときに出る枠を消します。ボクはコレを必ず指定してます。{font-style:normal;}日本語で斜体は読みにくいんで、ノーマルに。{clear:both;}コレは実際に使うんじゃなくて、組んでる最中に「は?何だコレ」ってなった時に使います。大半の問題がクリアする事で解決したりするので、入れて解決したらwidth指定を忘れているんじゃないのかとかclearfix使うべきなのかとかっていう原因を探ります。組み終わったら消しちゃっていい感じです。ここまでで一旦まとめ上記のをまとめると以下のようになります。{clear:both;}ボクの場合「いかにして打つ量を減らすか。」に重点を置いているのでこんな感じになってるという訳です。最初の方で指定して置くと便利そうなポイント基本的なリンクカラーの指定も最初にすると便利です。{color:#666;}コレはウチのサイトの例ですが、リンクのカラー指定は記述の順番が決められているので間違えないように予め用意しておくっていうスンポーです。主要な部分のid名やclass名を最初に指定しておくとより打つのが減って良さげです。{}更に細かく足しても良いと思いますが今回はこの位で。id名やclass名の参考は、もう、class名やid名で悩まないんだからっ!!辺りをどうぞ。全部まとめたのを以下においておきます。http://css-happylife.com/template/12/default.cssお気にめされた方は、コレをベースに自分用にカスタマイズしてお使いください。今回のポイントは、マイルールみたいな感じです。自分なりなルールや、社内ルールみたいに有る程度決めてるとチョコッとでも作業効率が上がるかと思います。CSS*1とは、(X)HTML文書の見栄えを整形するための、Web標準*2の指定方法です。要するにホームページをデザインする手段です。恐竜図鑑みたいなサイト「探そう!好きな恐竜」を作ったんです「Web制作者のためのSassの教科書」の改訂2版が発売しました。́)ゞそろそろ「こちら」や「ここ」にだけリンクさせるのを絶滅させたいんです。Sassの教科書で一番読んで欲しいところ。Spaceが3月1日にオープンしますCSSSってコワーキングスペース運営するです。excluded.↑上に行くよ。