第四章:ウェブサイトをデザインするトップページへ戻る

1. デザインをする言語CSS /  2. CSSの基本構造 /  (ア) タグへ対する装飾 /  (イ) “id”属性と”class”属性 /  3. ページ全体を装飾する /  (ア) 文字のサイズを指定する /  (イ) 文字の色を指定する /  (ウ) 文字の行間を指定する /  4. タイトルを装飾する /  (ア) 文字を太字にする /  (イ) 文字のフォントを指定する /  5. ヘッダーを作成する /  (ア) ブロックのサイズを指定する /  (イ) ブロックの余白を指定する(1) /  (ウ) 背景画像を設定する /  6. 2カラムデザインを実装する /  (ア) カラムという概念 /  (イ) 2カラムを指定する /  7. メニューをデザインする /  (ア) リンクを装飾する /  (イ) リストに画像を指定する /  8. コンテンツ部分をデザインする /  (ア) 今までにやったことを用いて、見出しを装飾する /  (イ) 今までにやったことを用いて、コンテンツを装飾する /  (ウ) 画像を使わずにセンスある見出しを作る /  (エ) 写真をあれこれ装飾する /  (オ) 表を装飾する /  9. フッターを作成する /  10. 最後に、ウェブサイトを公開する

(イ) “id”属性と”class”属性

タグによる指定だと、そのタグの全てに効果が付与されてしまいます。

だから、「この<p>タグだけ文字の色を濃くしたいのに!」といった要望には応えることができません。

そこで、登場するのが、id・class属性です。
どっちもほとんど同じです。 見ていきましょう。

では、いくつかある<p>タグの中で、この箇所だけ文字の色を変えたい、と思ったとします。
今、HTMLは、

<p>段落1。</p>
<p>段落2。</p>
<p>段落3。</p>

です。 段落2だけ、文字を赤く変えてみましょう。

HTML:
<p>段落1。</p>
<p id="red-accent">段落2。</p>
<p>段落3。</p>
CSS:
#red-accent { color: red;}

※この、red-accentのところは、自分で自由に名前を付けられます。

こうすると、

表示例:

と、表示されます。

では、次はclass属性。
段落1と段落3の文字の大きさを大きくしたいと思います。

HTML:
<p class="big-font">段落1。</p>
<p id="red-accent">段落2。</p>
<p class="big-font">段落3。</p>
CSS:
#red-accent { color: red; }
.big-font { font-size: 130%; }

表示例:


こんな感じです。
で、idとclassの違いって何?と疑問に思ったと思いますが、その違いは
・同じ名前のidは1ページに1度しか使えない
・同じ名前のclassは1ページに何度でも使っていい
これだけです。

なんで、分かれてるんでしょうね? 一緒の方がわかりやすいのに。。 と思います。

ちなみに、タグに対する装飾、とも併用することができます。
つまり、

HTML:
<p class="big-font">段落1。</p>
<p id="red-accent">段落2。</p>
<p class="big-font">段落3。</p>
CSS:
#red-accent { color: red; }
.big-font { font-size: 130%; }
p { font-weight: bold; }

※font-weightは、太字です。

表示例:


といった具合です。

なんとなくわかって来ましたか?

どこに適用するか { 何を装飾したいか: 具体的にどうしたいか; }

です。例外はありません。

それでは、実際に、これまであなたが作ってきたウェブサイトにデザインを追加していきましょう!

島岡諒の無料ホームページ作成講座『初めてWeb入門』 前のページへ戻る島岡諒の無料ホームページ作成講座『初めてWeb入門』 次のページへ進む

あなたも、サポートメールに参加しませんか?

『初めてWeb入門』に取り組んでくださっている方にサポートメールをお送りしています。
ここでは、『初めてWeb入門』では紹介し切れなかったウェブデザインの知恵を配信しています。
名前とメールアドレスだけで参加出来ますので、興味のある方は、ぜひご参加くださいね^^

氏名 :
メール:

※サポートメールは、いつでも解除できます。詳しくはサポートメールのページをご確認ください。




第四章:ウェブサイトをデザインするトップページへ戻る

1. デザインをする言語CSS /  2. CSSの基本構造 /  (ア) タグへ対する装飾 /  (イ) “id”属性と”class”属性 /  3. ページ全体を装飾する /  (ア) 文字のサイズを指定する /  (イ) 文字の色を指定する /  (ウ) 文字の行間を指定する /  4. タイトルを装飾する /  (ア) 文字を太字にする /  (イ) 文字のフォントを指定する /  5. ヘッダーを作成する /  (ア) ブロックのサイズを指定する /  (イ) ブロックの余白を指定する(1) /  (ウ) 背景画像を設定する /  6. 2カラムデザインを実装する /  (ア) カラムという概念 /  (イ) 2カラムを指定する /  7. メニューをデザインする /  (ア) リンクを装飾する /  (イ) リストに画像を指定する /  8. コンテンツ部分をデザインする /  (ア) 今までにやったことを用いて、見出しを装飾する /  (イ) 今までにやったことを用いて、コンテンツを装飾する /  (ウ) 画像を使わずにセンスある見出しを作る /  (エ) 写真をあれこれ装飾する /  (オ) 表を装飾する /  9. フッターを作成する /  10. 最後に、ウェブサイトを公開する

はじめにサポートメールホームページの疑問・質問おすすめリンクお問い合わせ

当サイトは、スマホ対応しリニューアルしました。これから勉強される方は、こちらの新サイトをおすすめいたします。

リニューアルしたサイト「WEB-D.PRO」へ遷移します