プロが教えるわが家の防犯対策術!

現在HTML言語を使用してホームメイドなサイトを構築しているのですが

<hr>・・・横長の区切り線

ですよね?

これを縦にした表示がしたいのですが、どうすればよろしいでしょうか?

恐れ入りますが、そのようなタグが存在するようならば、タグを教えていただけないでしょうか?

よろしくお願いします。

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

A 回答 (4件)

 こういうのはだめですか、↓


<div style="background-color:gray; width:2px; height:300px; position:absolute; top:50px; left:100px;"></div>

参考URL:http://www.tohoho-web.com/how2/line.htm#vr
    • good
    • 1

皆さんが仰っている様に、縦線を引くタグは存在しません。



通常は、小さいサイズの画像をイメージタグでサイズ指定して、線のように見せかけて使います。
この画像の色を変えれば、線の色も変えられます。

詳しくは、参考のURL見ていただければ・・・。

参考URL:http://www02.so-net.ne.jp/~oable/okui/faq/line.h …
    • good
    • 0

残念ながら有りません。


ただ画面で横幅を狭くすると縦書きに見えます。
通常は『画像』にするか、文字毎に改行して表示します。
    • good
    • 0

ありません。


でも、テーブル工夫すれ可能かも・・・
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

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

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

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.ブロックレベルの高さを指定しないと中身に合わせて高さが変化するル...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Q縦線、横線の作成

教えてください、困っています。
HTMLで普通に縦線、横線を引くのはどのようにしてやればよいのでしょうか。
表を使うのですか。

Aベストアンサー

TABLEを使う方法です。このソースを解析してくださいね。

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">

<TABLE WIDTH="400" BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR><TD WIDTH=100%>横線</TD></TR>
<TR><TD WIDTH=100% HEIGHT="1" BGCOLOR="#CC0000"></TD></TR>
</TABLE>
<BR>
<BR>

<TABLE WIDTH="400" BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR><TD WIDTH="1" BGCOLOR="#CC0000"></TD><TD WIDTH="399">縦線<BR><BR><BR><BR><BR></TD></TR>
</TABLE>

</BODY>
</HTML>

QCSSで任意の位置から縦罫線、横罫線を引きたい

 お早う御座います、CSSの初心者です宜しくお願い致します。

 CSSで任意の位置から縦罫線、横罫線をそれぞれ単独の線として引くのはどの様に書けば良いのですか。
 以上宜しくお願い致します。

Aベストアンサー

テーブルレイアウトでしたら、好きな位置に文字を書く事ができます。(普通のテーブルですから当然ですが)

table の中に文字を書き、css で必要ない枠線を表示させない感じです。(実際は必要な枠線を、border で表示させます)

複雑な表になるようでしたら、ペイントソフトで作成して、画像ファイルを表示させるのがよいと思います。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>

</head>

<body>

<table cellpadding="0" cellspacing="0">
<tr>
<td style="border-right:solid 2px #C0C0C0;width:150px;height:50px">&shy;</td>
<td style="width:150px">&shy;</td>
</tr>
</table>

<table cellpadding="0" cellspacing="0">
<tr>
<td style="border:solid 2px #C0C0C0;border-bottom:solid 2px #C0C0C0;width:300px;height:50px;text-align:center">部長</td>
</tr>
</table>

<table cellpadding="0" cellspacing="0">
<tr>
<td style="border-right:solid 2px #C0C0C0;width:150px;height:50px">&shy;</td>
<td style="width:150px">&shy;</td>
</tr>
</table>

<table cellpadding="0" cellspacing="0">
<tr>
<td style="width:50px;height:50px">&shy;</td>
<td style="border:solid 2px #C0C0C0;border-bottom:none;width:200px">&shy;</td>
<td style="width:50px">&shy;</td>
</tr>
</table>

<table cellpadding="0" cellspacing="0">
<tr>
<td style="border:solid 2px #C0C0C0;width:100px;height:50px;text-align:center">課長</td>
<td style="width:100px">&shy;</td>
<td style="border:solid 2px #C0C0C0;width:100px;text-align:center">課長</td>
</tr>
</table>

</body>

</html>

テーブルレイアウトでしたら、好きな位置に文字を書く事ができます。(普通のテーブルですから当然ですが)

table の中に文字を書き、css で必要ない枠線を表示させない感じです。(実際は必要な枠線を、border で表示させます)

複雑な表になるようでしたら、ペイントソフトで作成して、画像ファイルを表示させるのがよいと思います。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-T...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング