リンクを貼る(画像)/Dreamweaver/HTMLの基本を学ぶ/ウェブ作成に役立つ情報サイト/It's a long way to the top

リンクを貼る(画像)

Home>Dreamweaver>ソフトの使い方>リンクを貼る(画像)

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

前回はテキストにリンクを貼りましたが、画像にリンクを貼ることもできます。

まず、[挿入]->[イメージ]又は、[挿入]ツールバーの[一般]カテゴリの[イメージ]をクリックし、画像をドキュメント内に貼り付けます。

イメージソースの選択

次に、貼り付けた画像を選択します。

プロパティインスペクタに画像のプロパティが表示されます。
[リンク]欄に、設定したいリンク先のURLを入力します(同じサイト内のファイルの場合は、右側のフォルダアイコンをクリックすると、ファイルを選択するウィザードが起動します)。

ファイルの選択

画像の枠線を消す

画像にリンクを設定すると、画像に枠線が表示されるようになります。
この枠線を表示させたくない場合には、次の方法を使います。

imgタグにborder属性を指定する

画像のプロパティには、[ボーダー]という欄があります。
ここに数値を入力すると、画像の枠線の太さを指定することができます。この値をゼロにすると、枠線は表示されません。

この操作の場合、imgタグにborder属性が設定されます(コードビューで確認してください)。
しかし、imgタグにborder属性を指定するのは、あまりスマートな方法とはいえません。border属性は、HTML構造上の意味をなすものではなく、見た目を操作するだけのものなので、HTMLにおいては推奨されていません。

そこで、画像の枠線を指定するには、CSSを使います。

cssのborderプロパティを使う

CSSでは、borderプロパティが、枠線表示の指定をするプロパティです。

たとえば、CSSの設定で、

img{
border:none;
}

のように、imgタグに「枠線なし」の指定をすると、画像はすべて枠線なしの状態になります。

→詳しくは「CSS:プロパティリファレンス:border」をご覧ください。

関連リンク

よく読まれている記事

UpDate:2010-10-3