CSSを使用してホームページのレイアウトを作成する

トップページ＞ CSSを使用してホームページのレイアウトを作成する

CSSを使用してホームページのレイアウトを作成する

HTMLを使用することでホームページ内の文章とその文章の構成を指定することができたら次はCSSを使用してホームページのレイアウトを指定していきます。

CSSとは、マークアップ言語で書かれた文にスタイルを指定するために使用するコンピュータ言語です。HTMLでコーディングをしただけの段階ではホームページにはデザインが反映されません。そこにこのCSSで指定を与えることで文字や背景の色などをデザインの通りになるように作成していくのです。

CSSはタグ、クラス、IDに指定をすることができます。
ここでよく理解しておかなければならないのが『class』と『id』というものです。
タグに対して指定を行う場合は『タグ名{プロパティ: 値;}』といったように記述をします。しかし、このように記述をした場合は同じタグを使用した部分全てに同じレイアウトが指定されることになってしまいます。
そこで、その部分だけに指定を与えたいといった場合に使用するのがクラスやIDとなってきます。

まず、クラスは記述する際に.クラス名{プロパティ: 値;}といった形でクラス名の前に.をつけて記述を行います。
この際クラス名は任意で指定することができるので、後で作業をするときなどにわかりやすいような名前を指定するようにしましょう。
同じく、ID名も任意で指定することができます。IDは記述をする際に#ID名{プロパティ: 値;}といった形でID名の前に#をつけて記述をします。

では、このクラスとIDはどういった点が違うのでしょうか。
この2つの大きな違いは、クラスは1ページ中で何度も同じクラスを使用することができるのに対してIDは1ページ中で1度しか使用することができないというところにあります。
そのため、IDはヘッダーやメインなどのブロックなど1ページ中に同じものが複数存在しない箇所に対する指定を行うときなどに使用し、クラスはページ中で何度も使用する文字の装飾などを指定する時に使用するようにするなどと言ったように使い分けていくと良いかもしれません。

全ての装飾にクラスを使用して指定してしまえば複数使用するか1度しか使用しないかを考えなくて済むので楽なのではないかと思うかもしれません。
しかし、それではどのクラスがどういった目的のものなのか、ということなどがわかりにくくなってしまったりもしますので、このクラスとIDの違いをよく理解して上手く使い分けて使用できるようにしましょう。

ホームページ制作会社　一覧

ホームページ制作東京: ホームページ制作会社のフューチャーは、東京都の品川区でホームページ制作を格安で行っております。お打ち合わせは、東京、千葉、神奈川、埼玉まで無料でお伺い致します。
WEBディレクター: ホームページ制作会社の現役ＷＥＢディレクターがためにＷＥＢ制作、ディレクションについて語ります。
ホームページ制作会社の営業日記: ホームページ制作会社の営業人がホームページ制作の現場をリアルに伝えます。
ホームページ制作基礎知識: ホームページ制作会社の窓口である事務員がＷＥＢの基礎知識を書いています。
ＷＥＢコーダー: ホームページ制作会社に必ず必要なプロのＷＥＢコーダーが惜しげもなく、テクニックを公開しています
ＷＥＢコンサルタント: ホームページ制作の受注をとるためには、ＷＥＢコンサルタントがお客様のご要望を正確に吸い上げる必要があります。
そんな体験談でしたらこちらを参考下さい。

CSSを使用してホームページのレイアウトを作成する