写真をあれこれ装飾する

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

ということで直します。
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にして、後から画像を追加することが出来るようにしました。
もちろん、今の段階では文法的には間違いです(一か所でしか使っていないので)。
頭がパンクしそうな人は、この注釈は読み飛ばしても何ら問題ありません^^;


関連記事

  1. タグへ対する装飾

  2. ブロックの余白を指定する

  3. リストに画像を指定する

  4. 自己表現ツールとしてのウェブサイト

  5. 小見出しをつける

  6. CSSの基本構造

お手本ナビの無料HPデザイン

ランダムピックアップ