文字列の右にリンクボタンを作りたい

タイトル

文字列１　　　　　　　リンク１
文字列２　　　　　　　リンク２
文字列３　　　　　　　リンク３
文字列４　　　　　　　リンク４
文字列５　　　　　　　リンク５

　　　　　テキスト

の様なページを作りたいのですが、リンクの部分が上手く
表示出来ません。文献で調べても文字列の部分が画像の
場合の記述は幾つも出てきますが、文字列の記載が少なくて
解りません。」

<!DOCTYPE html>

<html> <head> <meta charset="shift-JIS"> <body> <title>依存症</title> <style type="text/css"> body { background-color: Black; background-image: url("top.png.homepage.top.png"); background-size: cover; background-attachment: fixed; background-position: center center; } </style> </head> <body> <div style="margin-top:60px"> <center>タイトル</center>> <center>サブタイトル</center> <div style="line-height: 1.5em"> <div style="margin-left:100px"> <div class="left"float="left"> 文字列１ 文字列２ 文字列３ 文字列４ 文字列５ </div class"right"float="left"> テキスト テキスト テキスト テキスト テキスト テキスト テキスト <div style="line-height: 1em"> <center>お問合せ</center> </div> </body> </html>> 現状此処で止まっています。宜しくお願い致します。

m.ts10806

2020/03/06 20:56

コードはマークダウンのcode機能を利用してご提示ください。また、できれば「完成イメージ」は文字より図の方が良いです（簡単な手書きやペイントでのイラストとかで結構です）あと、現在の状態もご提示ください。

m.ts10806

2020/03/06 20:58

もっと細かいことなんですが、HTML5で廃止されたタグがたんまり使われています。代替可能なものばかりですし、CSSで対応可能なので、使用は避けましょう。ブラウザが拾ってくれてるだけでそのうち使えなくなると思って良いです。 https://www.tagindex.com/html5/basic/abolished.html

izumisawa

2020/03/09 23:23

ご指摘有難う御座います。「css」は敷居が高いと思い込んでいました。「css」で描きたいと思います。只何分ど素人な者で最初のご回答の「aaa」、「bbb」、「ccc」が何を表すのかさえ解りません。まさか其の侭「aaa」とかではないのですよね、ご回答其の儘コピペしても駄目でしたので。勉強不足です。調べてみたいと思います。有難う御座いました。「aaa」、「bbb」、「ccc」は何を表しているのでしょうか？。

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

回答2件

クリックすると別ページへリンクする方法がわからない、という意味なら、以下のような形で実装できます。

HTML
1<p class="aaa"><font class="bbb" size="5" color="Silver"><em>文字列１</em></font><a href="https://www.google.co.jp/"><font size="5" color="Gold">テキスト</font></a></p>

以下のような記述で、「https://www.google.co.jp/」にリンクします。
<a href="https://www.google.co.jp/">テキスト</a>

[参考URL]
http://www.htmq.com/html5/a.shtml

投稿2020/03/07 05:47

編集2020/03/07 05:52

new1ro

総合スコア4528

ベストアンサー

こんな感じですか？

<!DOCTYPE html>
<htlm lang="ja">
<html>
<head>
<meta charset="utf-8">
<!-- <meta charset="shift-JIS"> -->
<body>
<p>
<title>依存症</title>
</p>
<style type="text/css">
body {
background-color: Black;
background-image: url("top.png.homepage.top.png");
background-size: cover;
background-attachment: fixed;
background-position: center center;
}
.aaa{
  width: 40vw;
  margin: 10px auto;
}
.aaa:after{
  content: "";
  clear: both;
  display: block;
}
.bbb{
  float: left;
}
.ccc{
  float: right;
}
</style> 
</head>
<body>
<div style="margin-top:60px">
<p><center><font size="7" color="Red"><strong>タイトル</strong></font></center></p>>
<p><center><font size="7" color="Gold"><strong>サブタイトル</strong></font></center></p>
<p><br></p>
<div style="line-height: 1.5em">
<div style="margin-left:100px">
<div class="left"float="left">
<p class="aaa"><em><font class="bbb" size="5" color="Silver">文字列１</em></font><font class="ccc" size="5" color="Gold">テキスト</font></p>
<p class="aaa"><em><font class="bbb" size="5" color="Silver">文字列２</em></font><font class="ccc" size="5" color="Gold">テキスト</font></p>
<p class="aaa"><em><font class="bbb" size="5" color="Silver">文字列３</em></font><font class="ccc" size="5" color="Gold">テキスト</font></p>
<p class="aaa"><em><font class="bbb" size="5" color="Silver">文字列４</em></font><font class="ccc" size="5" color="Gold">テキスト</font></p>
<p class="aaa"><em><font class="bbb" size="5" color="Silver">文字列５</em></font><font class="ccc" size="5" color="Gold">テキスト</font></p>
</div class"right"float="left">
<p><br></p>
<div style="line-height: 1em">
<p><br></p>
<p><center><font size="3" color="White"><u>お問合せ</u></font></center></p>
</div>
</body>
</html>

投稿2020/03/06 21:04

annaPanda

総合スコア130

izumisawa

2020/03/08 22:36

早速のご回答、ご指摘有難う御座います。「css」の勉強始めました。実のところ「html,css」書き始めて１０日程で今一良く解りません。「css」未だ良く解らず出来れば「html]」で書ければ嬉しいのですが。私の質問方法が悪かったのか再質問させて頂きたく思います。文字列１～５は1boxとしても一行ごとに右に飛ばしてもどちらでも構いません。文献にでは<img>の右に飛ばすのは良く見るのですが文字列の右に飛ばすのは記載が無くて困っています。「css」勉強中の為「html」で描けると嬉しいのですが。私の質問方が悪かったのか少しイメージが違うかと思います。　　　　タイトル サブタイトル 文字列１ <liリンク１> 文字列２ <liリンク2> 文字列３ <liリンク3> 文字列４ <liリンク4> 文字列５ <liリンク５> 文字列６ 文字列７ 文字列８ もｊ列９ 文字列１０ の様なページを作りたいのですが、「box、froat」使っても文字列５の下に表示され文字列の右に飛んでくれません。又変な処に入れると左側余白が無くなったりします。宜しくご鞭撻の程お願い致します。 <!DOCTYPE html> <htlm lang="ja"</htlm> <html> <head> <meta charset="Shift-JIS"> <body> <title>ページタイトル</title> <style type="text/css"> body { background-color: Black; background-image: url("top.png.homepage.top.png"); background-size: cover; background-attachment: fixed; background-position: center center; } </style> </head> <body> <div style="margin-top:60px"> <center>タイトル</center>> <center>サブタイトル</center> <div style="line-height: 1.5em"> <div style="margin-left:100px"> <div class="left"float="left"> 文字列１ 文字列２ 文字列３ 文字列４ 文字列５ </div class"right"float="left"> 文字列６ 文字列７ 文字列８ 文字列９ 文字列１０ <div style="line-height: 1em"> <center>お問合せ</center> </div> </body> </html>>

annaPanda

2020/03/09 11:12

正直申し上げて、質問が意味不明すぎます。きちんと整理しましょう。まず、HTMLは文章を整理するためのファイルです。文章内の各文字列を<h1>や<a>などのタグで囲んでその文字列の役割を指定します。h1は重要なタイトルです。aはどこかのリンクです。 CSSはHTMLの文章をブラウザで見る時の見た目を指定するファイルです。ここは何色、ここはこの位置、等。 HTMLにCSSに書くべきことを書いてしまうこともできなくはないのですが、上の基本をおさえてない方がやると混乱の元です。分けて書く方が簡単です。まずあなたのやりたいことは上の説明で言うと、CSSファイルで行うことで間違いないですね？

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

あなたの回答