インラインフレームの横にリンク。
-
0 名前： 凌。 ： 2006/03/18 20:51 ［URL］
- 初めまして。
改装中に分からないことがあったため、お邪魔させて頂きました。
URLを見ていただけると分かると思うのですが私のサイトはインラインフレームです。
そのフレームの横に、リンクを付けることは可能なのでしょうか？
また付ける場合、どのようにして付けると良いのかアドバイスを貰えると嬉しいです。
いくつか試してみたのですがどれも出来ずに終わってしまい、質問させて頂きました。
やはり･･･インラインフレームではない、フレームで行わなければいけないのでしょうか？
良い回答、お待ちしております。
-
1 名前： カヅサツ ： 2006/03/18 20:51
- http://www.tagindex.com/cgi-lib/conf.cgi?http://moon.aea.to/littletwinstars/index2.html
の、インラインフレームの下にあるリンクを横に付けたいのですね？ 右でしょうか左でしょうか。
-
2 名前： 凌 ： 2006/03/18 20:51 ［URL］
- 返信有難う御座います。
説明不足すみません･･･orz
下にあるリンクをそのままにし、また改めてリンクを緑色の部分に付けたいのです。
ご回答楽しみに待っております。
-
3 名前： カヅサツ ： 2006/03/18 20:51
- > 右でしょうか左でしょうか。
> 右でしょうか左でしょうか。
> 右でしょうか左でしょうか。
-
4 名前： 凌 ： 2006/03/18 20:51 ［URL］
- わわわ･･･何度もすみません･･･orz
出来ればどちらのやり方も教えて頂きたいのですが･･･
どちらかと言うと右にお願いします。
-
5 名前： カヅサツ ： 2006/03/18 20:51
- 単にブロックを左右に並べるだけなら float プロパティを使えば良いのですが、ちょいとコツがあります。
▽文書型宣言は、省略せずに全部書く
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
ではなく
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
と書きます。
省略してしまうと、1部のブラウザは CSSを公式のルール通りに解釈しません。
▽並べるブロックの width は % 単位で指定する。
ピクセル単位で指定してしまうと、ウィンドウの大きさが小さい場合に、回り込みされません。
ただ、その方が良い場合もあるかもしれません。
サンプルは、80%,20%の幅のブロックを並べました。
▽並べるブロックは左右 margin, padding, border-width を 0 にする。
ブロックの幅は「左右margin + 左右padding + 左右border-width + width」で計算されます。
うかつに左右 margin, padding, border-width に 1以上の値を入れると、計算がややこしくなります。
余白は、並べるブロックの、そのすぐ内側のブロックの margin で調整しましょう。
▽マークアップは適切に
見出しは h1〜h6、箇条書きは li と、要素は適切なものを指定しましょう。
本当はレイアウトのための table は宜しくない（tableは「表」であるから）のですが、今回のケースは、まぁ止むを得ないでしょう（ただ、tableには必ず枠線が付いてしまう環境もあることは覚えておいてください。別に困らないでしょうから放置しましたが）。
以下、上記を踏まえたサンプルです。
-
6 名前： カヅサツ ： 2006/03/18 20:51
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" href="css1.css" type="text/css">
<title>ciel</title>
<style type="text/css">
</style>
</head>
<body>
<table id="main">
<tr>
<td id="t1"><img src="t1.gif" alt=""></td>
<td id="top">
<h1><em>c</em>iel</h1>
</td>
<td id="t2"><img src="t2.gif" alt=""></td>
</tr>
<tr>
<td></td>
<td><iframe src="http://www.google.co.jp/" name="iframe" id="iframe" frameborder="no"></iframe></td>
<td></td>
</tr>
<tr>
<td id="t4"><img src="t4.gif" alt=""></td>
<td id="bottom">
<ul>
<li><a href="about.html" target="iframe">:: about</a></li>
<li><a href="http://ciel1210.blog42.fc2.com/" target="iframe">:: diary</a></li>
<li><a href="bbs.html" target="iframe">:: bbs</a></li>
<li><a href="gallery.html" target="iframe">:: gallery</a></li>
<li><a href="link2.html" target="iframe">:: link</a></li>
<li><a href="http://peach.candybox.to/natuno1210/postmail/postmail.php" target="iframe">:: mail</a></li>
<li><a href="top.html" target="iframe">:: top</a></ul></li>
</ul>
</td>
<td id="t3"><img src="t3.gif" alt=""></td>
</tr>
</table>
<div id="search">
<ul>
<li><a href="http://www.google.co.jp/">google</a></li>
<li><a href="http://www.yahoo.co.jp/">yahoo</a></li>
</ul>
</div>
</body>
</html>
-
7 名前： カヅサツ ： 2006/03/18 20:51
- /* css1.css */
html{
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ffffff;
scrollbar-3dlight-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-arrow-color:#5c6b52;
scrollbar-track-color:#ffffff;
}
body{
padding:0px 10%;
background-color:#5c6b52;
font-family:Verdana,Chicago,Arial,Osaka,sans-serif;
color:#663300;
}
h1{
color:#5c6b52;
font-size: x-large;
text-align: right;
margin: 0px 0px 0px 0px;
padding: 3px 10px 0px 0px;
border-width: 0px 0px 2px 0px;
border-style: solid;
border-color: #5c6b52;
}
h1 em{
color:#ff6600;
font-style: normal;
}
iframe{
border-width:0pt;
width: 100%;
height: 450px;
vertical-align: bottom;
}
a:link,
a:visited{
text-decoration:none;
color:#663300;
font-weight:bold;
}
a:hover{
color:#ff6600;
}
/* 全体のテーブル */
table#main{
width: 80%;
border-collapse: collapse;
margin: 0px;
}
table#main td{
padding: 0px;
background-color: #FFFFFF;
}
/* 四隅 */
td#t1{/* 左上 */
text-align: left;
vertical-align: top;
}
td#t2{/* 右上 */
text-align: right;
vertical-align: top;
}
td#t3{/* 右下 */
text-align: right;
vertical-align: bottom;
}
td#t4{/* 左下 */
text-align: left;
vertical-align: bottom;
}
td#t1 img,
td#t2 img,
td#t3 img,
td#t4 img{
width: 40px;
height: 40px;
vertical-align: bottom;
}
-
8 名前： カヅサツ ： 2006/03/18 20:51
- /* 下部メニュー */
td#bottom{
border-width: 2px 0px 0px 0px;
border-style: solid;
border-color: #5c6b52;
}
td#bottom ul{
font-size: small;
text-align: center;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
td#bottom li{
margin: 0px 1em 0px 0px;
list-style-type: none;
display: inline;
}
/* 検索エンジンへのリンク */
div#search{
width: 20%;
}
div#search ul{
color: #FFFFFF;
margin: 0px 0px 0px 10%;
padding: 1em 0px 1em 0px;
}
div#search li{
margin: 0px 1em 0.7em 2em;
}
div#search a:link,
div#search a:visited{
color: #FFFFFF;
}
div#search a:hover{
color:#ff6600;
}
/* 左右ブロックの配置 */
div#search,
table#main{
float: left; /* ここの値を right にしてみよう */
}
-
9 名前： 凌 ： 2006/03/18 20:51 ［URL］
- リンクだけではなく、HTMLの指摘までしてくださり本当に有難う御座います。
また質問になってしまうのですが･･･お暇が有ればお答え下さい。
左右の幅を同じにし、左右どちらにもリンクをつけたいのです･･･。
また、左右のリンクの小さな箇条書きの白丸を消すためにはどうしたら良いのでしょうか。
そしてその左右のリンクを下に持ってきたい場合は改行タグを使うのでしょうか。
本当に質問ばかりの若輩者ですみません･･･orz
尚、このコメントのURLに作成中です。
-
10 名前： カヅサツ ： 2006/03/18 20:51 ［URL］
- > 左右の幅を同じにし、左右どちらにもリンクをつけたいのです･･･。
すでに float の方法はお教えしたと思います。
HTML（この順に並べる）：
<div id="serch" class="sidebar">
左リンク
</div>
<table id="main">(略)</table>
<div id="news" class="sidebar">
右リンク
</div>
CSS：
div.sideber{
(略)
width: 20%;
float: left;
(略)
}
table.main{
(略)
width: 60%;
float: left;
(略)
}
とでも書き換えればよろしいでしょう。
> また、左右のリンクの小さな箇条書きの白丸を消すためにはどうしたら良いのでしょうか。
list-style-type: none; です。「CSS "list-style-type"」でググりましょう。
> そしてその左右のリンクを下に持ってきたい場合は改行タグを使うのでしょうか。
br要素をレイアウトのために使ってはいけません。
どのくらい下にもって行きたいのでしょうか？
▽リンクの位置を、今ある場所からほんの少し下げたい場合
div#search の下 padding か、div#search ul の上 margin を調節します。
▽リンクの最終行を、中央のテーブルの下辺に揃えたい場合
この場合 float を使う方法は難しいです。他の方法を考えます。
-
11 名前： 凌 ： 2006/03/18 20:51
- カヅサツさん有難うございました！！
たくさんのアドバイスのお陰で何とか改装を終えることができ、
何回もの質問に丁寧に答えて頂き、心から幸せに感じました。
大切な要素を忘れていたりしてたくさんのご指摘で、確実に学べたような気がします。
まだ不安な箇所もありますが、カヅサツさんから教えて頂いたことをもとに
これから、しっかりと作成していきたいと思います。
本当に有難う御座いました。
