CSSを記述するとき、どんな記述方法をしていますか?

LINEで送る
Pocket

CSSを記述するとき、どんな記述方法をしていますか?

※ここに出てくるCSSの名前は仮で付けているだけなので必ずこの名前でないといけないことはないです。

htmlファイル内に~で書いてますか?それともhtml1つに対して1つのCSSを書いていますか?

大きく分けてこの2つじゃないかと思います。ですが、これではCSSの更新がとても不便です。

以下の図は1つのhtmlに対して1つのCSSで管理しているサイトの図です。

1つのhtmlに1つのCSSを書いていくと後々の更新がとても不便です。
確実に処理することができますが、これは面倒です。更新作業に慣れていない自分以外の人が更新作業を行うとなると理解不能なことに陥る可能性があり、効率が悪いですね。
これは1番やってはいけない組み合わせだと断言できます。

では、次のパターンです。

全htmlを1つのCSSで管理するのがいいかと思いますが、それではCSSの行数が莫大なものになり、適応させる要素が混合してしまうことが起こってしまう可能性が大きいのであまりよろしくありません。

最後に説明するものは少し長くなりますが、最後まで読んでいただければありがたいです。

まずはこの4つのCSSについて説明していきます。

全htmlから、まずはじめに「import.css」というファイルを読ませます。
import.cssには、reset.cssとbasic.cssとpage.cssを読んでください。という命令を書いておきます。すると、htmlにはimport.css内で書かれている3つのCSSを読み込みます。
ここで書く順番ですが、CSSは一番下に書かれたものを優先して読み込みます(!important;←これが書かれているものを除く)

[css]
.Yohaku {
margin:10px;
}
.Yohaku {
margin:20px;
}
[/css]

上記のソースでは同じクラスが指定されています。しかし、余白の幅の数値が異なります。
先ほど記述した通りCSSは上から下へ読んでいくのでCSSの気持ちになって翻訳すると・・・
「クラスYohakuのマージンは10px・・・ん?20pxじゃん。20pxで設定しますね」
こうなります。

では例外として!importantがあるとどうなるのか。

[css]
.Yohaku {
margin:10px !important;
}
.Yohaku {
margin:20px;
}
[/css]

これをCSSの気持ちになって翻訳すると・・・
「クラスYohakuのマージンは10px・・・ん?20px?10pxで読まないといけないから20pxには出来ません!ごめんね!」
要約すると、!importantが付け加えられたものは絶対的な権利を与えられているもの。という考え方で大丈夫です。

では話を戻して・・・import.cssの役目というのは3つのCSSを読ませるだけのものです。
じゃあ、html内に3つのCSS書いたほうがいいんじゃないか?と思われる方もいるかと思いますが、CSSの読み込ませ順序が異なったり、新しくCSSを追加するとなったときにimport.cssだけを書きなおすだけなので作業効率が上がり、ファイル管理もかなり分りやすくなります。

次に「reset.css」です。
みなさんは、サイト作成しているときに各ブラウザでの表示が異なる。というようなことになったことありませんか?
これは、ブラウザのエンジンに問題があり、特にIEでの表示バグが目立ちますが、
・フォントの大きさ
・余白の広さ
この2つが表示バグの原因です。これを全モダンブラウザで統一されるようにCSSで各要素をリセットさせるのが、reset.cssです。これは海外サイトなどで無償配布されています。自分に合ったreset.cssを探してみてください。

次に「basic.css」です。
まずは以下の図を見てください。

一般的なレイアウトで2カラムのサイトを作成する場合、オレンジ色で囲んだ部分は全ページ固定でレイアウトが決まっていませんか?
こういいうページは基本的にメインの部分がページごとに異なり、ヘッダー・サイド・フッター・は変わりません。
なので、こういった全ページ固定の部分のCSSは「basic.css」に記述しておきます。
つまり、basic.cssは全ページ共有CSS(文字の装飾等)を記述するところです。

最後に「page.css」です。
これは、main部分のCSSです。ページごとに異なるメイン部分のみをこのpage.cssに記述します。id・classを上手く使い分けて、記述します。初めてだと戸惑うかもしれませんが、これは慣れれば簡単です。

という感じです。

htmlやcssの書き方は100人が書けば100通りの書き方が出てくると言っていいほど人によって様々です。
決まったルールはあるけどそこまで重視しなくても作れてしまいます。
コーディングをやる上で、自分以外の人が触っても理解しやすいソースを記述する。これが出来れば完璧かと思います。
しっかりコメントを書いておけば特に問題はないかも知れませんが、コメントを最小限に。ソースを簡潔に。

追記:
HTMLのコーディングはこちらの記事が参考になります。
W3C準拠したコーディングのやり方をザックリと説明

関連記事

ピックアップ記事

  1. カメラのフラッシュを使用したほうが綺麗な写真が撮れると思っていませんか? それは間違い…
  2. 100%売上を上げる
    まだまだ体力のないショップ様にとって、どんな商品を仕入れるか、またはどんな商品を企画して作る…

ココロザシ運営サービス

合同会社ココロザシ

空港ラウンジ.com

OMIYA!

ネトビジ!

オデ速!

ノマド的節約術

オススメサービス

Feedly

follow us in feedly

ピックアップ記事

  1. 最近「安いものが以前に比べて、高いものが売れるようになった」ような情報をチラホラ聞くことが多…
  2. 楽天SEO
    今回は、楽天でSEOするための重要な要素である商品レビュー数を増やすための方法を考えてみたいと思…
ページ上部へ戻る