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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

806閲覧

固定位置でのURLを埋め込んだボタンの表示

asai_

総合スコア4

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/01/29 06:50

前提・実現したいこと

HTML歴0ヶ月です。
実現したいことは、固定位置でのURLボタンの表示です。
固定位置となっているソース箇所を教えていただけないでしょうか。

無償で電子メールの署名をHTMLで作成できるページを発見し、作成後
ソースコードの書き出しが行えたためそちらを流用して
自分で必要に応じてコピペしたり書き換えたりしてみました。
ですが、自分でコピペし自作したURLボタンのみ固定位置での表示にはならず
右端表示になってしまいました。

ツールで書き出したコードは、ソースコードの100行目までで
102行目以降は自分でURLボタンのソースと思われる88行目~100行目までを
コピペして流用しました。(背景色の変更や文言、クリック時のURL先の変更等は自分でできました。)
改行は自分で見やすいように適当にやりました。

広告①ボタンのように、広告②、③も固定位置での表示としたいです。

広告①のソース内で固定位置となっている箇所を教えていただけないでしょうか。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<table cellpadding="0" cellspacing="0" class="sc-jDwBTQ dWtMUn" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: &quot;Yu Gothic&quot;;"> <tbody> <tr> <td style="vertical-align: middle;"> <table cellpadding="0" cellspacing="0" class="sc-jDwBTQ dWtMUn" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: &quot;Yu Gothic&quot;;"> <tbody> <tr> <td> <p color="#5d5d5d" font-size="medium" class="sc-fMiknA bxZCMx" style="margin: 0px; font-weight: 500; color: rgb(93, 93, 93); font-size: 14px; line-height: 22px;"> <span> 株式会社test</span> </p> <h3 color="#5d5d5d" class="sc-jhAzac hmXDXQ" style="margin: 0px; font-size: 18px; color: rgb(93, 93, 93);"> <span>日本</span> <span>&nbsp;</span> <span>太郎</span> </h3> <p color="#5d5d5d" font-size="medium" class="sc-dVhcbM fghLuF" style="color: rgb(93, 93, 93); margin: 0px; font-size: 14px; line-height: 22px;"> <span>Nihon Taro</span> </p> </td> <td width="15"> <div></div></td> <td width="1" color="#F2547D" direction="vertical" class="sc-hzDkRC kpsoyz" style="width: 1px; border-bottom: none; border-left: 1px solid rgb(242, 84, 125);"> </td> <td width="15"> <div></div></td> <td> <table cellpadding="0" cellspacing="0" class="sc-jDwBTQ dWtMUn" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: &quot;Yu Gothic&quot;;"> <tbody> <tr height="25" style="vertical-align: middle;"> <td width="30" style="vertical-align: middle;"> <table cellpadding="0" cellspacing="0" class="sc-jDwBTQ dWtMUn" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: &quot;Yu Gothic&quot;;"> <tbody> <tr> <td style="vertical-align: bottom;"><span width="11" color="#F2547D" class="sc-iRbamj blSEcj" style="display: block; background-color: rgb(242, 84, 125);"> <img width="13" src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png" color="#F2547D" class="sc-gPEVay eQYmiW" style="display: block; background-color: rgb(242, 84, 125);"> </span> </td></tr></tbody></table></td> <td style="padding: 0px; color: rgb(93, 93, 93);"> <a href="tel:00-0000-0000" color="#5d5d5d" class="sc-jlyJG bbyJzT" style="text-decoration: none; color: rgb(93, 93, 93); font-size: 12px;"> <span>00-0000-0000</span> </a> </td></tr> <tr height="25" style="vertical-align: middle;"> <td width="30" style="vertical-align: middle;"> <table cellpadding="0" cellspacing="0" class="sc-jDwBTQ dWtMUn" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: &quot;Yu Gothic&quot;;"> <tbody> <tr> <td style="vertical-align: bottom;"> <span width="11" color="#F2547D" class="sc-iRbamj blSEcj" style="display: block; background-color: rgb(242, 84, 125);"> <img width="13" src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png" color="#F2547D" class="sc-gPEVay eQYmiW" style="display: block; background-color: rgb(242, 84, 125);"> </span> </td></tr></tbody></table></td> <td style="padding: 0px;"> <a href="mailto:test@test.com" color="#5d5d5d" class="sc-jlyJG bbyJzT" style="text-decoration: none; color: rgb(93, 93, 93); font-size: 12px;"> <span>test@test.com</span> </a></td></tr> <tr height="25" style="vertical-align: middle;"> <td width="30" style="vertical-align: middle;"> <table cellpadding="0" cellspacing="0" class="sc-jDwBTQ dWtMUn" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: &quot;Yu Gothic&quot;;"> <tbody> <tr> <td style="vertical-align: bottom;"> <span width="11" color="#F2547D" class="sc-iRbamj blSEcj" style="display: block; background-color: rgb(242, 84, 125);"> <img width="13" src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png" color="#F2547D" class="sc-gPEVay eQYmiW" style="display: block; background-color: rgb(242, 84, 125);"> </span> </td></tr></tbody></table></td> <td style="padding: 0px;"><a href="http://www.test.com" color="#5d5d5d" class="sc-jlyJG bbyJzT" style="text-decoration: none; color: rgb(93, 93, 93); font-size: 12px;"> <span>http://www.test.com</span> </a></td></tr> <tr height="25" style="vertical-align: middle;"> <td width="30" style="vertical-align: middle;"> <table cellpadding="0" cellspacing="0" class="sc-jDwBTQ dWtMUn" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: &quot;Yu Gothic&quot;;"> <tbody> <tr> <td style="vertical-align: bottom;"> <span width="11" color="#F2547D" class="sc-iRbamj blSEcj" style="display: block; background-color: rgb(242, 84, 125);"> <img width="13" src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/address-icon-2x.png" color="#F2547D" class="sc-gPEVay eQYmiW" style="display: block; background-color: rgb(242, 84, 125);"> </span> </td></tr></tbody></table></td> <td style="padding: 0px;"> <span color="#5d5d5d" class="sc-gipzik iyhjGb" style="font-size: 12px; color: rgb(93, 93, 93);"> <span>〒000-0000 東京都XX区XXX0-0-0 XXXXXXXX XF</span> </span></td></tr></tbody></table></td></tr></tbody></table></td></tr> <tr><td height="30"></td></tr><tr><td height="1" color="#F2547D" direction="horizontal" class="sc-hzDkRC kpsoyz" style="width: 100%; border-bottom: 1px solid rgb(242, 84, 125); border-left: none; display: block;"> </td></tr><tr><td height="30"></td></tr> <tr><td><table cellpadding="0" cellspacing="0" class="sc-jDwBTQ dWtMUn" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: &quot;Yu Gothic&quot;; width: 100%;"> <tbody><tr> <td style="text-align: right; vertical-align: top;"> </td></tr></tbody></table></td></tr><tr><td> <table cellpadding="0" cellspacing="0" class="sc-jDwBTQ dWtMUn" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: &quot;Yu Gothic&quot;; width: 100%;"> <tbody><tr><td></td> <td style="text-align: right;"><span style="display: block; text-align: right;"></span> <a target="_blank" rel="noopener noreferrer" href="https://www.google.com/?hl=ja" color="#e04d8f" class="sc-eqIVtm kRufpp" style="border-width: 6px 12px; border-style: solid; border-color: rgb(224, 77, 143); display: inline-block; background-color: rgb(224, 77, 143); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px;"> 広告① 詳細はクリック </a></span></td></tr></tbody></table></td></tr></tbody></table> <tbody><tr><td></td>
<tr><td height="30"></td></tr><tr><td height="1" color="#F2547D" direction="horizontal" class="sc-hzDkRC kpsoyz" style="width: 100%; border-bottom: 1px solid rgb(242, 84, 125); border-left: none; display: block;"> </td></tr><tr><td height="30"></td></tr><tr><td> <table cellpadding="5" cellspacing="0" class="sc-jDwBTQ dWtMUn" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: &quot;Yu Gothic&quot;; width: 100%;"> <tbody><tr> <td style="text-align: right; vertical-align: top;"> </td></tr></tbody></table></td></tr><tr><td> <table cellpadding="0" cellspacing="0" class="sc-jDwBTQ dWtMUn" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: &quot;Yu Gothic&quot;; width: 100%;"> <tbody><tr><td></td> <td style="text-align: right;"><span style="display: block; text-align: right;"></span> <a target="_blank" rel="noopener noreferrer" href="https://www.google.com/?hl=ja" color="#e04d8f" class="sc-eqIVtm kRufpp" style="border-width: 6px 12px; border-style: solid; border-color: rgb(255, 165, 0); display: inline-block; background-color: rgb(255, 165, 0); color: rgb(51, 51, 51); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px;"> 広告② 詳細はクリック </a></span></td></tr></tbody></table></td></tr></tbody></table> <tbody><tr><td></td> <tr><td height="30"></td></tr><tr><td height="1" color="#F2547D" direction="horizontal" class="sc-hzDkRC kpsoyz" style="width: 100%; border-bottom: 1px solid rgb(242, 84, 125); border-left: none; display: block;"> </td></tr><tr><td height="30"></td></tr><tr><td> <table cellpadding="5" cellspacing="0" class="sc-jDwBTQ dWtMUn" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: &quot;Yu Gothic&quot;; width: 100%;"> <tbody><tr> <td style="text-align: right; vertical-align: top;"> </td></tr></tbody></table></td></tr><tr><td> <table cellpadding="0" cellspacing="0" class="sc-jDwBTQ dWtMUn" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: &quot;Yu Gothic&quot;; width: 100%;"> <tbody><tr><td></td> <td style="text-align: right;"><span style="display: block; text-align: right;"></span> <a target="_blank" rel="noopener noreferrer" href="https://www.google.com/?hl=ja" color="#e04d8f" class="sc-eqIVtm kRufpp" style="border-width: 6px 12px; border-style: solid; border-color: rgb(143, 219, 55); display: inline-block; background-color: rgb(143, 219, 55); color: rgb(51, 51, 51); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px;"> 広告③ 詳細はクリック </a></span></td></tr></tbody></table></td></tr></tbody></table> <tbody><tr><td></td>

試したこと

各タグの意味や内容をネットでggる。
HTML 固定表示でggる。

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

VisualStudioCodeは持っています。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2020/01/30 06:43

『固定位置』とは具体的にはどのようなものですか? スクロールさせてもスクロールしない要素、のような話でしょうか?
退会済みユーザー

退会済みユーザー

2020/02/01 15:46

コードを提示する際は、MarkDown記法を使用してください。
guest

回答1

0

自己解決

友人にお願いして友人の知り合いのPGの方に教えていただき、自己解決いたしました。
ありがとうございました。

解決した方法としましては、全てのコードを綺麗に成形して頂き
2行目のtbodyの要素のなかに広告②と広告③のソースを入れました。

投稿2020/02/03 01:26

asai_

総合スコア4

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問