月別: 2017年3月

CSSが何の略か、は今回も置いておきます。
HTMLは要素の配置ですが、更にデザインを再現させるのがCSSの役割です。

紙に限らず、WEBでもデザイン優先です。
もちろん状況によってできないことはあります。ECサイトなどは特に制限が大きいです。
でもせっかく趣味のサイトなんだから、入れたいことを盛り込みましょう。
仕事じゃないんだから、作ってて楽しいのが一番。
やりたいデザインを実現するためには、CSSを理解するのが大事です。

基本の書き方

反映させたい箇所（セレクタ）　{要素（プロパティ）:その内容（値）}
です。
基本はたったこれだけ。

書く場所は3通りです。

1.専用ファイルを作成して、htmlを読み込ませる。

どのページにも適用させたい、別にまとめたいものはこのやり方です。
ヘッダーやフッター、基本のレイアウトなど。
複数読み込ませることも出来ます。
その場合、上から順次適用されていきます。

外部ファイルを使用するときは、htmlと同様に1行目に文字コードの宣言を入れておきます。

2.htmlと同じページのhead内に書き込む。

そのページ内での独自のCSSのときに使用します。
1.よりも優先順位が高くなります。

3.適用させたい箇所に直接書く。

特定の箇所のみ適用させたい時に使用します。
1.2.よりも優先順位が高くなります。

優先順位が高くなるほど汎用性は低くなります。

CSSをリセットする

実際にCSSを書く前に、サンプルをよく見てみましょう。
→トップのサンプル

微妙に隙間があったり、色が指定されています。
これはブラウザが「見やすいように」気を利かせてくれているからです。
ですが、自分で設定する場合はこれが邪魔をしてきます。

そのために、現在ブラウザで指定されているスタイルを全てリセットしてしまいます。

本当はもっとあったほうが良いのですが、いったんこれだけで。

リセットCSSは色々作ってくれている人がいるので、そちらを借りることも出来ます。
reset css　とかで検索すると色々出てきます。
慣れてきたら自分でカスタマイズしましょう。

→リセットCSSを適用させたサンプル

きっちり詰め詰めになりました。
次回はデザインに合わせてCSSを書いていきます。