掲示板/総合質問板/過去ログ/一覧/ リンク表示の間隔をあける方法

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について　もう少し勉強します。