画像と文章の表示について
-
0 名前： 美咲 ： 2006/03/06 17:01
- > 色々調べてみたのですが解らないので教えて下さい。
>
> ＿＿＿＿＿
> ｜ ｜ 文字1
> ｜ 画像 ｜ 文字2
> ｜ ｜ 文字3
> ｜＿＿＿＿｜ 文字4
>
> 上の図のように画像の横の文字部分にリンクを貼りたいのですが、
画像が大きい為160×120ピクセル位小さく表示させて、なおかつ横にリンクを貼るタグはありますか？
> 宜しくお願いします。
-
1 名前： とく ： 2006/03/06 17:01
- >画像が大きい為160×120ピクセル位小さく表示させて、なおかつ横にリンクを貼るタグはありますか？
一度にそれほどの事をするような便利なタグはないです。
<img src="〜〜" width="160" height="120" alt="">
<ul>
<li><a href="〜〜">文字１</a></li>
（略）
<li><a href="〜〜">文字n</a></li>
</ul>
とマーキングしてulをfloat:leftするとかそんな感じになると思います。
-
2 名前： カヅサツ ： 2006/03/06 17:01 ［URL］
- > 文字部分にリンクを貼りたいのですが(略)160×120ピクセル位小さく表示させ
1文字の大きさを、さまざまな単位で指定することはできますが、例えば、
「○○さんのウェブページ」
「首相官邸」
という、文字数の異なるテキストの大きさを同じようにするとなると、かなり面倒です。
結局、それぞれのテキストについて、1文字の大きさを「（120÷文字数）ピクセル」にするくらいでしょうか、しかしながら、こうすると高さが合いません。
一番良いのは、文字部分も画像にしてしまうことでしょうか。
-
3 名前： カヅサツ ： 2006/03/06 17:01 ［URL］
- とりあえず、文字を小さくする問題は、一度脇に置きます。
まずテキストを書き、次に HTML で文書の意味を明示し、最後に CSS で見栄えを整えると、「良いウェブページ」を作ることができます。
---
google
yahoo
infoseek
goo
---
まず、テキストを書きました。各文字をリンクにして並べたいとします。
このような文書は、普通「箇条書き」でしょうから、li要素（≠タグ）でマークアップします。
---
<li><a href="〜">google</a></li>
<li><a href="〜">yahoo</a></li>
<li><a href="〜">infoseek</a></li>
<li><a href="〜">goo</a></li>
---
次にちょっと面倒なのですが、HTMLにおける箇条書きには「順不同型」と「順序型」の 2種類があります。
この場合は、順不同でしょうから、ul要素を使います。
---
<ul>
<li><a href="〜">google</a></li>
<li><a href="〜">yahoo</a></li>
<li><a href="〜">infoseek</a></li>
<li><a href="〜">goo</a></li>
</ul>
---
「順序型というのは、「(1) ふたを開ける (2) スープ・かやくを取り出す (3) お湯を注ぐ …」のような箇条書きのことです」
-
4 名前： カヅサツ ： 2006/03/06 17:01 ［URL］
- 次に CSS で見栄えを整えます。
・多くのブラウザでは、li要素の先頭に「・（黒丸）」を付けて「箇条書き」を表現しますので、これを無くします（list-style-type）。
・そして、画像の分、左側を空けておきます（margin-left /仮に 200ピクセルとしました）。
li{
list-style-type: none;
margin-left: 200px;
}
・ul要素に、画像を背景画像（background-image）として指定します。
・このままだと、要素内に背景画像が敷き詰められてしまうので、これを無くします（background-repeat）。
・多くのブラウザで取られる余白を 0 にしておきます。
・画像の高さと同じかそれ以上を、要素の高さに指定します（height /仮に 200ピクセルとしました）。
ul{
background-image: url("1.jpg");
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
height: 200px;
}
-
5 名前： カヅサツ ： 2006/03/06 17:01 ［URL］
- 最後に仕上げをして完成です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title>test</title>
<style type="text/css">
ul{
background-image: url("1.jpg");
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
height: 200px;
}
li{
margin-left: 200px;
list-style-type: none;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="〜">google</a></li>
<li><a href="〜">yahoo</a></li>
<li><a href="〜">infoseek</a></li>
<li><a href="〜">goo</a></li>
</ul>
</body>
</html>
-
6 名前： 匿名希望 ： 2006/03/06 17:01
- はじめにお読みください より
マルチポストは禁止です。（削除の対象になります）
http://cgi4.osk.3web.ne.jp/~kitayan/wforum/wforum.cgi?no=3339&reno=no&oya=3339&mode=msgview&page=0
-
7 名前： F ： 2006/03/06 17:01
- マルチポストがなぜよくないかは下記参照。
http://www.ippo.ne.jp/g/53.html
-
8 名前： 美咲 ： 2006/03/06 17:01
- とくｻﾝ・カヅサツｻﾝ
ご丁寧にありがとうございました<m(__)m>
やってみます!!
-
9 名前： 匿名希望 ： 2006/03/06 17:01
- >>8
その前にマルチポストをしたことを謝罪しましょう。
TAG-indexでは（今のところ）マルチポストは許可されてません。
http://www.tagindex.com/bbs/note.html
