縦線を書きたい（思ったように動かない）

他サイトを見て、線を書くことは出来たのですが、ボタンの横に線を書くことが出来ません。

前提・実現したいこと

ボタンの横に線を書き、区切りを書きたいです。
ボタンの配置などは完了しています。
※図

試したこと

<teble>を使い

html
1<table>
2<tr>
3<td>            </td>
4<td style="width: 1px; height: 15000px; background-color: blue;"></td>
5<td></td>
6</tr>
7</table>

<td> </td>の中を空白で間を空けて、文字の間の線だとしてもらい、上手く行かないか試しました。解決方法を教えていただきたいです。

###ホーム画面のソースコード(ホーム画面に縦線を付けたい)

html
1<html>
2<font size="15" color="#ff0000">
3<p class="text_center">CLANE STAR ONLINE 
4          　<hr size="5">
5		 <font size="3" color="000000">
6		 
7		                                       <form action="http://localhost/clane/online/home.html"method="post">
8<input type="image" src="http://localhost/clane/online/image/home.jpg" alt=" ">
9		   <p></P>                        
10
11		   <form>
12		       
13<input type="button" onClick="location.href='http://localhost/clane/online/owner.html'" value="作者プロフィール">
14</form>
15		   <form>
16<input type="button" onClick="location.href='http://localhost/clane/online/form.php'" value="お問い合わせ">
17</form>
18<form>
19<input type="button" onClick="location.href='http://localhost/clane/online/search/prizesearch.php'" value="景品検索ページへ">
20</form>
21<title>CLANE STAR ONLINE</title>
22<head>
23<body bgcolor="#4169e1">
24<font size="8" color="#ff0000">
25<html lang="ja">
26<head>
27<meta charset="utf-8">
28<link rel="stylesheet" href="./style.css">
29</head>
30<body>
31
32 <body onContextmenu="window.alert('右クリック禁止です。');return false">
33<body oncopy="return false;">
34 <body>
35<EMBED src="http://localhost/clane/online/BGM.mp3" width="0" height="0">
36</body>
37
38
39<font size="8" color="#000000">
40
41<p> 
42	
43
44<html>
45<head>
46
47
48</body>
49</html>
50
51

補足情報（FW/ツールのバージョンなど）

localhost

m.ts10806

2020/02/18 08:23

提示されたコードに「ボタン」に類するものがありません。今のどのようになっていて、どうしたいのでしょうか。文字では限界がある議題なので図示願います

mutsuki22

2020/02/18 08:36

やりたい事に対する方法自体はいくつかありますが、現在との折り合い等もあるので、ボタンも含めて全体のコードの提示をお願いいたします。現在の情報だけではなんとも言えません。

行動規範の内容に同意します

回答3件

ベストアンサー

自己解決しました。

<pre>をうまく使い工夫しました。 ```html <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre> <pre> ｜</pre>


回答を下さったかた有り難うございました。

投稿2020/02/25 08:37

退会済みユーザー

総合スコア0

CSS
1.sidebar {
2  border-right: 1px solid blue;
3}

https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Flexbox
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout

代表的なレイアウト方法を挙げますが、HTML がボロボロなので先に正しい HTML を書けるようにしたほうが早道だと思います。

投稿2020/02/18 09:07

x_x

総合スコア13749

退会済みユーザー

2020/02/18 09:26

僕も自分で作ったのに分かりにくいです。正しいhtmlが書けるように勉強します。

退会済みユーザー

2020/02/19 11:19

僕も読んでみたのですがよく理解が出来ませんでした。少し分かりやすく教えていただけませんか？

x_x

2020/02/20 01:21

<html> や <body> など1回しか書けないものがあります。 HTML 講座を展開するつもりはないのでこの辺などを参考にして学習してみてください。 30分間HTML入門 https://www.kanzaki.com/docs/html/lesson1.html#S20 MDN HTML入門 https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started 仕様 HTML Standard (4章までは読んでおきたい) https://momdo.github.io/html/dev/ https://momdo.github.io/html/

行動規範の内容に同意します

ボタンの横

ちょっと意味がわかりません
ボタンのbeforeにcontentでSVGを指定するとかでしょうか
とりあえず手書きでいいので図示するとよいでしょう

投稿2020/02/18 08:20

yambejp

総合スコア114994

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！