忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[15] [14] [13] [12] [11] [10] [9] [8] [7] [6] [5

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

CSSのガイドライン

参照元 : taichi kaminogoya様

最近、自分以外の人のCSSをじっくり見る機会があって、
その時に思ったのは
「HTMLの書き方は、多少の差異はあれどあまり個人差はないが、
CSSは、書き方やファイルの作り方に個人差があるのではないか?」
ということです。

今まで、他の人の書いたCSSを研究してこなかったわけではありませんが、
顔が見える人(つまり知人)のCSSを見て比較する機会がほとんどなかったので、
CSSの書き方もその人の性格を表すんだろうか?なんていうことも思っています。


さて、本題ですが、
他人のことが気になると、自分のことも気になるわけで、
私はCSSを書く際にどうやってファイルを分けているのか?
セレクタはどういう書式で書いているのか?プロパティはどうなんだろう?
が気になり、

以下で現在の自分の作り方をまとめてみました。


1.CSSファイルの作り方

CSSファイルはすべて、styleフォルダに格納。
import.cssに@importを書き、基礎となるCSSを読み込む。
基礎CSSのファイル名はほとんどbase.css。
baseには、ページ全般のデザインに加えてトップページ専用のデザインも書く。

コンテンツページに関しては、base.cssを上書きにする形で新しいCSSを読み込ませる。
よって、基本的には階層が深くなるほど、読み込むCSSが増えていくことになる。


2.セレクタの順序

はじめに、html、body、pなど、ID・クラスのないものに対して全般的な指定をする(パディングとかマージンとか)
それ以降は、HTMLに現れてくるID・クラスの順番にセレクタを置く。
なので、#headerに関する指定、 #mainの指定、 #footerの指定、の順番で出現する。


3.プロパティの順序

大枠を決めるプロパティから先に記述する。
displayがあった場合は、displayが最上部。
次にwidth、height、
次にmargin、padding
次にテキストに関する指定(text-indent、line-height、font-family、font-weight など)
次に色や背景に関する指定(color、background、border)
次に、floatの指定
次に、position関連の指定
その他はこの後ろに。
 


4.書き方の基本

.クラス名(#ID名)の後ろに半角スペースを入れて{
プロパティは1回インデントをしてから書く。
}インデントを消して終了。
 

.class {
    propaty: date;
}


いま、私の思いつく範囲ではこんな感じになるでしょうか。
知識が浅すぎて使うプロパティが少ないので、わりと簡素になってます。
今後、もうすこし分析してみたいと思います。



8月7日追記

5.ID、クラス名

よく利用するID名を挙げると、

  • #container  body直下に置くコンテナボックス
  • #contents   #containerの下、または#containerと同義
  • #navi      ナビゲーション用
  • #main     メインコンテンツ用
  • #sub      サブメニュー・サブコンテンツ用
  • #left      3カラムレイアウトのときの左
  • #right     3カラムレイアウトのときの右
  • #header   タイトルなどを入れるヘッダ用
  • #footer    コピーライトなどを入れるフッタ用

クラス名だと

  • .clearfix   clearfix用
  • .section   コンテンツを小分けにするときに使う

くらいでしょうか…。
いつも使うものだけ挙げたにしても、意外に少ないものですね。

PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
11« 2017/12 »01
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
ブログ内検索
忍者ブログ [PR]