HPに縦線が引きたい!!

誰か~~~~~

お願い~~~~~~~~

このQ&Aに関連する最新のQ&A

A 回答 (4件)

一応、前2人の補足という感じになりますが、



横幅100ピクセルの線を引く方法
<hr width="100">

ブラウザ(表示されている画面)の半分(50%)の線を引く方法
<hr width="50%">

テーブルを使う方法
<table>
<tr>
<td width="100"> ←横幅100のテーブルを作成
<hr> ←テーブル内に横線を引く
<hr width="50%"> ←テーブル横幅の50%分の横線を引く
</td>
</tr>
</table>
    • good
    • 0

たとえば2つのコラムに分けている場合とか、見る人の環境によって、かなり上下がちがってきますよね。

そう言う場合、伸び縮みする縦線をつくった方がいいですよね。単純に実線でくぎる場合、1ピクセル幅の<td>で、好きな色をつければできます。
<td>左の内容</td><td>1ピクセル幅のセル</td><td>右の内容</td>
みたいな感じで。(その場合透明の1ピクセル画像とかを入れて下さい)
また、点線とか、模様とか飾り罫みたいなのを引きたいときは、<td>にbackgroundの指定をしてあげればできます。くり返してもおかしくないように小さな画像をつくって、指定すればOKです。
    • good
    • 0

こんな方法も。


<hr style="width:よこのながさpx;height:たてのながさpx;">

要素全体に対してなら
<p style="border-left:ふとさpx 線種 いろ">
などなど
線種は何種類かありますがsolidが無難です。

スタイルシートなので多様な表現ができる一方、
ちぐはぐな作りこみをされたページでは
それにあわせてちぐはぐになってしまいます。
あとnetscape navigator 4以前の場合、
borderはデタラメな解釈をされます。

参考URL:http://tohoho.wakusei.ne.jp/wwwcss2.htm#Border
    • good
    • 0

こんにちは!



結構簡単なのはテーブルを使ったりするのですが
あえて省略し、線を書くという部分の解説です。

1px×1px の画像(線の元)「line.gif」を用意します。

<img src="line.gif" width="1" height="n">

でnの長さの縦線が書けます。

これをテーブル等と組み合わせれば簡単に画面分割
等に使えると思いますよ~

この回答への補足

なななるほど!!・・・

>結構簡単なのはテーブルを使ったりするのですが
>あえて省略し・・・

よろしければこれも教えて下さい!!
トーシローなんでイロイロ試してみたいんで・・・

補足日時:2002/01/30 19:14
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Qコンテンツの高さに合わせた縦線を引きたい

コンテンツ部分の高さに合わせた縦線を引きたいのですが、どうも上手く実現する
方法が思い浮かびません。
コンテンツは表示するページによって高さが異なります。

CSSを利用することは何ら問題ありませんが、JavaScriptでwindow.load()イベントなどで
記述するのはちょっと避けたいです。
あくまでレイアウトということで・・・。

今縦線はこんな感じで作られてます。
#splitter {width:0px; height:485px;
  border:solid 2px #e5ecf9;overflow:hidden;
  border-top:none; border-bottom:none;
  background:#e5ecf9; float:left;
  margin-right:10px}

<div id="splitter"></div>

divだと無理なんでしょうか・・・?
ご教示下さい。

Aベストアンサー

残念ながら、レイアウト自体が、想像できません。
**
普通、伸縮させたいdivの中に伸縮するコンテンツが入っていないと伸縮はしないと思います。
<div id="a">
  <div id="b"></div>
</div>
bに伸縮する縦線を記述すると、bの中身が縦に伸びたときにはbも伸びて同時にaも伸びる。
<div id="a">
  <div id="b"></div>
  <div id="c"></div>
  <div id="d"></div>
</div>
bとcがfloatのばあい、dがclear:bothならaも中身に従って伸びます。
cssで静的に表現できる線ってこの程度のものだと思います。
なお、floatさせたものにmarginを指定するとIE6では倍の幅になりますのでpaddingに置き換えておいた方がいいです。

QHPのレイアウトで縦線を入れるには?

下記URLのサイトのように、HPの外枠に縦線を入れたいのですが、入れ方がわかりません。

URL:http://www.netyasun.com/
(※上記URL内の「水色の背景」と「HP」の境目の青色の境界線(枠線)のことです)

初歩的な質問過ぎて大変申し訳ございませんが、調べてもわからなかったため質問させていただきました。

どなたかご教授願えれば幸いです。

Aベストアンサー

#1さんへの追加質問
>border-styleを使用して縦線を入れることはできたのですが、
 上記記載のURLサイトのように、「水色の背景」と「HP」
 の境目に縦線が入るのではなく、HPを開いたときにPC画面
 上の、一番右端と左端に縦線が入ってしまいます。

成功しています。
ただ、ブロックレベル要素のルールをご存知ないだけです。

つまり、
1.幅を指定しなければ、100%が初期値となるルール。
→だから、右端と左端になります。
2.ブロックレベルの高さを指定しないと中身に合わせて高さが変化するルール。
→中身がないと(実験しただけで中身を入れていない?)高さがないので、上に少しだけという状態になります。中身を増やしてみましょう。高さをheightで指定する方法もありますが、中身がその指定値を超えた時にデザインがおかしくなりますので、お勧めしません。


>縦線を入れるために「border-style」はbodyに適応している
 のですが、適応箇所が間違っていると思うのですが、どこに
 適応したらよいのか分かりません。
bodyにでもいいと思いますが、どこに適応したらいいのかは、htmlを見せてもらわないとわかりません。

とりあえずbodyに入れるとして作ってみると
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=shift-jis" />
<title>test</title>
<style type="text/css">
html{
background: #D9E5FF;margin:0;/*青の背景色*/
}
body{
margin:0 auto;/*上下をぴったり、左右は真ん中*/
width:880px;/*bodyの幅の指定「ルール1への対応」*/
padding: 0 1em;/*罫線から中身までの空き*/
background: white;/*背景色*/
color: #555;/*文字の色*/
border: solid blue;/*罫の形と色*/
border-width: 0 1px;/*罫の幅、上下が0、左右が1px*/
}
body>*{
margin:0;/*bodyの直接の子要素のマージン。本当は望ましくないが、先頭に何が来るのか不明なので*。*/
}
</style>
</head>
<body>
<p>中身をいろいろ入れてください。縦に中身が広がると罫も延びるのがわかると思います。</p>
</body>
</html>

#1さんへの追加質問
>border-styleを使用して縦線を入れることはできたのですが、
 上記記載のURLサイトのように、「水色の背景」と「HP」
 の境目に縦線が入るのではなく、HPを開いたときにPC画面
 上の、一番右端と左端に縦線が入ってしまいます。

成功しています。
ただ、ブロックレベル要素のルールをご存知ないだけです。

つまり、
1.幅を指定しなければ、100%が初期値となるルール。
→だから、右端と左端になります。
2.ブロックレベルの高さを指定しないと中身に合わせて高さが変化するル...続きを読む

QHP作成中!!(T▽T)尸~~SOS!!!!

HP作成の初歩的な質問なのですけど
「直リンク禁止」っていうのはどういう意味なんでしょう?
直リンク と そうでないリンク の 違いを伝授ください!!
宜しくです。

さらに
<A REF=のリンク指定で書き込めてしまう掲示板でなく
POSTを使ったCGI(つまり見かけ上はボタンになっているもの)
で掲示板を書く方法を教えて下さい。

(>_<。)HelpMe!!

Aベストアンサー

No.3のSpurです。
なんとなくわかったぞ。( ̄ー ̄)ニヤリ

おそらく掲示板かどうかではなく、リンクを作るのに、<A>タグでは文字リンクになるので、掲示板にあるような、ボタンを押すとリンクをするようにしたい、ということじゃないかな?
つまり、掲示板の作り方ではなく、ボタンリンクの作り方かな?
もしそうなら、それはCGIでもなければPOSTとも関係有りません。
HTMLで次のように書けば、<A HREF="○○○.html">●●●</A>と同じになり、つまり、●●●をクリックすると、○○○.htmlへリンクが作れます。

<form>
<INPUT TYPE="button" VALUE="●●●" onclick='location.href="○○○.html"'>
</form>

Q自分が作ったHPじゃないHPにタグを貼りたい

なんだか判りにくいかと思われますが、自分のショッピングサイト(自分が作ったわけじゃない)ができたので宣伝するのにバナーを貼りたいと考えたのですがHP自体自分で作ったわけではないのでどうやってバナーを貼ったりリンクさせたり出来るのかわかりません。ちなみに私はホームページビルダーは持っています。どなたかお詳しい方がいたら教えて下さい。宜しくお願いします。

Aベストアンサー

ビルダーを使わない形での簡単なバナーを貼り付ける作業をご説明します。

バナーを貼り付けたいHTMLファイルのソースをノートパッド等で開き、貼り付けたい位置に以下のタグを記入します。

<A HREF="リンク先URL" TARGET="_top"><IMG SRC="バナーイメージのURL" BORDER=0></A>

これらの作業にはHTMLの知識が必要ですが。

参考URL:http://www.hi-ho.ne.jp/dk888/banner.html

Q縦線と横線だけを表示させたい。

以下のようなイメージのページをテーブルを使用し作成したいのですが、
表枠は表示させず、縦線と横線のみに出来ますか。
フレームを使用すれば出来そうですが。

図1   | 図2 図3 図4
図5 図6 | 文字1
文字2  | 文字3
文字4  | -----------------
     |文字5
     |文字6 図7 図8

*線は直線です。

Aベストアンサー

#3のkamotoです。
ちょっと説明がこんがらがってしまいましたので補足。

「縦線と横線の画像をそれぞれ作って…」
というのは、線と文字や画像の間をすこし空けたい場合、
例えば垂直線でしたら、幅11pxの画像で、真ん中の1pxのみ色をつけ、
左右5pxずつを白(または背景色)にしておけば、
その5px分の空間を線の周りに作ることができるよ、
ということです。

高さは1pxにして、<td background="sample.gif">で指定すれば、
テーブル全体の高さに線が伸びてくれます。

同様に、幅1px、高さ11pxの画像を作れば、水平線ができます。


人気Q&Aランキング

おすすめ情報