リンク表示の間隔をあける方法

[統計] HTMLからXHTMLへの移行を進めていますか？

0   名前： yuki ： 2006/12/14（木） 21:56  ID:o90NGsge
【何をしたいのか】
相互リンクのページをつくり　相手のリンクの貼り付けをしていますが
リンク同士がくっついて表示されるため　間隔をあける方法を教えて下さい。

現在 → リンクリンク　となっているのを　リンク　リンク　と間をあけて
表示したいのです。

【現在の状況】
今までは　できていたのですが　久しぶりに追加したら　うまくできませんでした。
なお　ホームページビルダーV9　のページ編集の画面では　右上の表示は
標準　BODY となっています。
　
【何をしてみたのか】
間隔をあけて貼り付け、スペースをとる、など　今までのやり方をしたつもりですが・・・
1   名前： カヅサツ ◆ThCi95HEzw ： 2006/12/14（木） 21:56  ［URL］  ID:O5hEMlpW
1.まずテキストを書く
google
yahoo


2.リンクにする
<a href="http://www.google.co.jp/">google</a>
<a href="http://www.yahoo.co.jp/">yahoo</a>


3.リンクを並べている「箇条書き」なので、li要素にする。

<ul>
	<li><a href="http://www.google.co.jp/">google</a></li>
	<li><a href="http://www.yahoo.co.jp/">yahoo</a></li>
</ul>


4.li要素のマーカ(・)を消す
li{
	list-style-type: none;
}


5.li要素を横に並べる
li{
	list-style-type: none;
	display: inline;
}


6.ul要素の余白を消す
ul{
	margin: 0px;
	padding: 0px;
}


7.li要素の左右余白を好きなように設定する(サンプルでは5ピクセル)
li{
	list-style-type: none;
	display: inline;
	margin: 0px 5px;
}


●完成形サンプル
<!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{
	margin: 0px;
	padding: 0px;
}
li{
	list-style-type: none;
	display: inline;
	margin: 0px 5px;
}
</style>
</head>
<body>
<ul>
	<li><a href="http://www.google.co.jp/">google</a></li>
	<li><a href="http://www.yahoo.co.jp/">yahoo</a></li>
</ul>
</body>
</html>


2   名前： yuki ： 2006/12/14（木） 21:56  ID:o90NGsge
解答ありがとうございます。
上記の 4 からが　よくわかりません。
3 の上あるいは下に記載するのでしょうか。
4からの文章が画面に表示されてしまいました。
(リンクを横に並べたいのですが)
よろしくお願いいたします。
3   名前： Newのり太 ： 2006/12/14（木） 21:56  ID:soILHxrj
> 3 の上あるいは下に記載するのでしょうか。

>>1 の最下部に、わざわざ完成形サンプルが提示されています。


ホームページビルダーの操作に変換。

1. 2. 3. 箇条書きリストを作りリンクをはる
挿入→リスト→番号なしリスト でリストを作り、
挿入→リンク で、それぞれの文字列にリンクをはる。

4.li要素のマーカ(・)を消す
書式→スタイル→スタイルシートマネージャー→追加→HTMLタグ名=LI
リスト→リストマークのタイプ を、右下のマークなしを選択→OK

5.li要素を横に並べる
これは、スタイルシートマネージャーで設定できないので
ソース画面で書き加えてください。

6.ul要素の余白を消す
書式→スタイル→スタイルシートマネージャー→追加→HTMLタグ名=UL
レイアウト→マージン、パディングを、4方向とも0pxに。

7.li要素の左右余白を好きなように設定する(サンプルでは5ピクセル)
書式→スタイル→スタイルシートマネージャー→LI を選択し、編集
レイアウト→マージン→上方向、下方向=0px、左方向、右方向=5px に設定し、OK。

# スタイルシートマネージャーを使うと、サンプルとは多少異なる書式となりますが同じ意味です。


HTMLやCSSについてよく理解されると、融通が利くようになります。
http://www.tagindex.com/html_tag/index.html
http://www.tagindex.com/stylesheet/index.html
4   名前： yuki ： 2006/12/14（木） 21:56  ID:o90NGsge
丁寧な　ご説明ありがとうございました。
完成版サンプルのようになりました。
HTMLやCSSについて　もう少し勉強します。
一覧へ戻る