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

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

ただいまの
回答率

88.64%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 183

izumisawa

score 5

     
タイトル

文字列1       リンク1
文字列2       リンク2
文字列3       リンク3
文字列4       リンク4
文字列5       リンク5

テキスト

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

<!DOCTYPE html>
<htlm lang="ja"</htlm>
<html>
<head>
<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;
}
</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><em><font size="5" color="Silver">文字列1</em></font></p>
<p><em><font size="5" color="Silver">文字列2</em></font></p>
<p><em><font size="5" color="Silver">文字列3</em></font></p>
<p><em><font size="5" color="Silver">文字列4</em></font></p>
<p><em><font size="5" color="Silver">文字列5</em></font></p>
</div class"right"float="left">
<p><br></p>
<p><font size="5" color="Gold">テキスト</font></p>
<p><font size="5" color="Gold">テキスト</font></p>
<p><font size="5" color="Gold">テキスト</font></p>
<p><font size="5" color="Gold">テキスト</font></p>
<p><font size="5" color="Gold">テキスト</font></p>
<p><font size="5" color="Gold">テキスト</font></p>
<p><font size="5" color="Gold">テキスト</font></p>
<div style="line-height: 1em">
<p><br></p>
<p><center><font size="3" color="White"><u>お問合せ</u></font></center></p>
</div>
</body>
</html>>
現状此処で止まっています。宜しくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2020/03/07 05:56

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

    キャンセル

  • m.ts10806

    2020/03/07 05:58

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

    キャンセル

  • izumisawa

    2020/03/10 08:23

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

    キャンセル

回答 2

checkベストアンサー

0

イメージ説明
こんな感じですか?

<!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">文字列1</em></font><font class="ccc" size="5" color="Gold">テキスト</font></p>
<p class="aaa"><em><font class="bbb" size="5" color="Silver">文字列2</em></font><font class="ccc" size="5" color="Gold">テキスト</font></p>
<p class="aaa"><em><font class="bbb" size="5" color="Silver">文字列3</em></font><font class="ccc" size="5" color="Gold">テキスト</font></p>
<p class="aaa"><em><font class="bbb" size="5" color="Silver">文字列4</em></font><font class="ccc" size="5" color="Gold">テキスト</font></p>
<p class="aaa"><em><font class="bbb" size="5" color="Silver">文字列5</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/09 07:36

    早速のご回答、ご指摘有難う御座います。「css」の勉強始めました。実のところ「html,css」書き始めて10日程で今一良く解りません。「css」未だ良く解らず出来れば「html]」で書ければ嬉しいのですが。私の質問方法が悪かったのか再質問させて頂きたく思います。文字列1~5は1boxとしても一行ごとに右に飛ばしてもどちらでも構いません。文献にでは<img>の右に飛ばすのは良く見るのですが文字列の右に飛ばすのは記載が無くて困っています。「css」勉強中の為「html」で描けると嬉しいのですが。
    私の質問方が悪かったのか少しイメージが違うかと思います。
        <p>タイトル</p>
    <p>サブタイトル</p>
    <p>文字列1</p> <liリンク1>
    <p>文字列2</p> <liリンク2>
    <p>文字列3<p/> <liリンク3>
    <p>文字列4<p/> <liリンク4>
    <p>文字列5</p> <liリンク5>
    <p>文字列6</p>
    <p>文字列7</p>
    <p>文字列8</p>
    <p>もj列9</p>
    <p>文字列10</p>
    の様なページを作りたいのですが、「box、froat」使っても文字列5の下に表示され文字列の右に飛んでくれません。又変な処に入れると左側余白が無くなったりします。宜しくご鞭撻の程お願い致します。
    <!DOCTYPE html>
    <htlm lang="ja"</htlm>
    <html>
    <head>
    <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;
    }
    </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><em><font size="5" color="Silver">文字列1</em></font></p>
    <p><em><font size="5" color="Silver">文字列2</em></font></p>
    <p><em><font size="5" color="Silver">文字列3</em></font></p>
    <p><em><font size="5" color="Silver">文字列4</em></font></p>
    <p><em><font size="5" color="Silver">文字列5</em></font></p>
    </div class"right"float="left">
    <p><br></p>
    <p><font size="5" color="Gold">文字列6</font></p>
    <p><font size="5" color="Gold">文字列7</font></p>
    <p><font size="5" color="Gold">文字列8</font></p>
    <p><font size="5" color="Gold">文字列9</font></p>
    <p><font size="5" color="Gold">文字列10</font></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/09 20:12

    正直申し上げて、質問が意味不明すぎます。きちんと整理しましょう。

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

    まずあなたのやりたいことは上の説明で言うと、CSSファイルで行うことで間違いないですね?

    キャンセル

0

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

<p class="aaa"><font class="bbb" size="5" color="Silver"><em>文字列1</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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る