- ベストアンサー
ホームページ作成でリンクを作成する方法
例えば、「プロフィール」「日記」「掲示板」という文字をリンクに使いたいとします。その文字を横一列に並べると、 <a href="URL">プロフィール</a><a href="URL">日記</a><a href="URL">掲示板</a> となりますが、これでは表示上、 プロフィール日記掲示板 このようになり文字がつながった状態になってしまいます。 これは通常、特殊文字のスペースを使えばいいのでしょうか？それともほかの方法はあるでしょうか？ 回答よろしくお願いします。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
私の本当のお奨めは＃1さん＃4さんのリストとしてマークアップするやり方です。が、あえて、miya_HNさんオリジナルのソースを利用して遊んで見ます。文字間を開けるというのばデザインですのでｃｓｓでの記述をお奨めします。 私はデザインの為に本文部分のマークアップを変えるべきでないという考え方です。その意味で、＃1さん＃4さんのリストとする案が適していると思います。デザインなんて、かなり自由が利きますので、文章は本当の意味付けの為に使って欲しいと思います。 <head></head>内の他を邪魔しない場所に<style type="text/css">以下を差し込んで遊んでみてください。不要の物は行ごと削ってください。 display:block;/*ブロックとして扱う（縦に並べる）*/なんかは絶対邪魔だと思います。一度表示させてから外してみて、構造的マークとデザインが違うことを認識できたらと思って邪魔なものいっぱいつけてみました。 <style type="text/css"> a:link{ margin-left:20px; /*左側を20px分あけろ*/ width:7em; /*1つは７文字分の幅で取れ*/ text-align:center;/*文字は枠の真中に*/ background:pink;/*背景色はピンク色*/ border:red 1px solid;/*赤い枠を1pxの実線で*/ display:block;/*ブロックとして扱う（縦に並べる）*/ } a:hover{ background:red; /*マウスがのった時は背景を赤くしろ*/ border:red 1px dotted;/*赤い枠を1pxの点線で*/ } </style>
その他の回答 (4)
- himajin100000
- ベストアンサー率54% (1660/3060)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Q3680189 TestCase 1</title> <style type="text/css"> ul#navigation li{ float:left; margin-top:0; margin-bottom:0; margin-left:20px; /* 数字を弄る */ margin-right:20px; /* 数字を弄る */ } </style> </head> <body> <!-- 確かにスペースを挟むのも一案だが，意味的にはこちらの方が俺は好き。 これには大きな欠点があるけど。 p要素問題 http://www.akatsukinishisu.net/wiki.cgi?p%CD%D7%C1%C7%A4%CE%C3%E6%A4%CBobject%CD%D7%C1%C7%A4%F2%B2%F0%A4%B7%A4%C6%A5%D6%A5%ED%A5%C3%A5%AF%CD%D7%C1%C7%A4%F2%B4%DE%A4%E1%A4%EB%A4%B3%A4%C8%A4%CB%B4%D8%A4%B9%A4%EB%B5%C4%CF%C0#i0 (リスト系の要素はHTMLとしてはブロックレベル要素扱いだと思うので， p要素の子になれない。) 俺は著作権関係の問題を無視するなら原文変更派。 俺がtable要素を使うのは 「2列以上記述する必要がある」 かつ 「th要素とcaption要素の内容が決定できるとき」 時にしている (他di要素のない現状，table要素にあるtr要素があった方が適切だと思うことも多い) --> <ul id="navigation"> <li>プロフィール</li> <li>日記</li> <li>掲示板</li> </ul> </body> </html>
お礼
スタイルシートですか。実はまだHTMLも始めたばかりで、スタイルシートは全く分かりません。 しかし、レイアウトを考えるならやはり、スタイルシートが一番いいようですね。もうちょっと勉強します。 ありがとうございました。
- グイン リアード（@guin_riard）
- ベストアンサー率43% (401/924)
好みの問題でしょうけど、私は、テーブルを使うのが好きなので、私なら次のようにします。 (テーブルを使うと、ほぼ自分の好みの位置に文字を配置ですますので) <center> <table width=60% > <tr align="center"> <td width=20%><a href="URL">プロフィール</a></td> <td width=20%><a href="URL">日記</a></td> <td width=20%><a href="URL">掲示板</a></td> </tr> </table> </center> ※20%は、任意の割合
お礼
テーブルを使えば好みの配置ができるんですね。まだ、テーブルはよく分からないので勉強したいと思います。 ありがとうございました。
- luke2004
- ベストアンサー率64% (58/90)
<a href="URL">プロフィール</a>□<a href="URL">日記</a>□<a href="URL">掲示板</a> □は全角スペースです。 こうすると「プロフィール 日記 掲示板」で単語一つずつリンクになりますが、 これでいいでしょうか。
お礼
回答ありがとうございます。 普通のスペースだとちょっと狭い感じがしました。 ありがとうございました。
プロフィール 日記 掲示板 というように横表示にしたいのですよね？ それでしたら普通にスペースキーでＯＫです！ <a href="URL">●</a> <a href=… でなるはずです。 ちなみに改行（縦表示）にしたいのであれば、 <a href="URL">●</a> <br> <a href="URL">●</a> とします。
お礼
回答ありがとうございます。 確かに普通にスペースを入力すれば少し間が空きましたがちょっと狭すぎる感じがしました。 ありがとうございました。
お礼
回答ありがとうございます。 なるほど。レイアウトなのでCSSを使用するといいんですね。まだ、CSSは勉強していなのでこれから勉強していきたいと思います。 ありがとうございました。