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

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

(ウ) 画像を使わずにセンスある見出しを作る

何やらすごい名前になっていますが(笑)
ここでは、<h3>の装飾を行いたいと思います。
ひさびさの新しいCSSの装飾の登場です。

h3 {
height: 25px;
border-bottom: 2px #669966 solid;
border-left: 5px #669966 solid;
margin: 0 0 20px 20px;
padding: 3px 0 0 5px;
}

ここで注目すべきなのは、borderです。
なんとこれ、今まで見えない四角といっていたものが、見えるようになるんです。

いつも通り、図にしますと



詳しく見てみます。

border-bottom: 2px #669966 solid;

「border-位置(上・右・下・左):線の太さ 線の色 線のスタイル;」
という仕組みになっています。

また、この中で出てきたことがないのが、線のスタイルですが、フォント(font-family)のときと同様、いくつか種類があります。

・solid:一本線
・double:二本線
・groove:くぼみ
・ridge:立体
・dashed:破線
・dotted:点線

まだ、ふたつほどありますが、基本的にはこんな感じです。

では、下のように表示されたなら



次に進みましょう。

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

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

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

氏名 :
メール:

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




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

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

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

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

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