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

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

(エ) 写真をあれこれ装飾する

実行例を見てもわかるように、リンクの時についてしまう枠線と、その右ある無駄なスペースを直したいですね。

ということで直します。

HTML:
<img src="pro_yahoo.jpg" alt="プロの作ったウェブサイトの例:Yahoo!JAPAN" class="content_img">
CSS:
.content_img {
margin: 20px;
border: none;
float: left;
}

微妙に全部新しいですね^^; では、順にみていきます。

まず、margin。このように値をひとつしか書かないと、上下左右全ての余白がその値になります。
これは、paddingにおいても同様です。 便利なので覚えておきましょう。

次。border。 これは、このように、noneとすることで、枠線を消すことができます。
noneでなく、0でもOKです。0pxということですからね。

最後、float:left;。カラムの時にやりました。
このfloat:left;は、「そのものを左へ寄せます」という意味です。
なので、これを行うと、画像が左にずれて、文字が右側の空いているスペースへ流れ込んできます。


ほら、綺麗になったでしょう?
こういう、細かい積み重ねが素人っぽさをなくすコツです。

※ちなみに、今回、画像はひとつしかないにも関わらず、idでなく、classを使用しました。
なぜか? このようなレイアウトのウェブページで画像を用いる際、ひとつしか用いないという場合は少ないと考えたからです。
これからあなたが、ウェブページを自分用に変更していく時に、id指定されていると、新しく画像を追加することができませんね(idからclassに変更する必要が出てきます)。
なので、classにして、後から画像を追加することが出来るようにしました。
もちろん、今の段階では文法的には間違いです(一か所でしか使っていないので)。
頭がパンクしそうな人は、この注釈は読み飛ばしても何ら問題ありません^^;

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

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

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

氏名 :
メール:

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




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

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

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

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

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