html、cssのspanタグ内の表記につきまして

<span>タグ内に、<title>タグをつけた文章を表示させる際のcssの書き方を教えて頂けませんでしょうか？

《html》

<p> <strong class="color_a">■titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。</strong><br> "まず、htmlソースが見れる状態にして、上から６行目あたりにある、"<br> <span class="look"><title>初心者向けホームページテンプレート tp_beginner5</title></span><br> "を編集しましょう。"<br> "あなたのホームページ名が「SAMPLE SITE」だとすれば、"<br> <span class="look"><title>SAMPLE SITE</title></span><br> "とすればＯＫです。"</p>

《css》
.color_a {
color: #d08147
}
.look{
background: #e5e5e5;
border-radius: 5px;
padding: 5px 10px;
}

上記のように表記したら、表示されませんでした。
すみません、解決法を伝授して頂けたら幸いです。
恐れ入りますがよろしくお願いいたします。

maisumakun

2020/11/17 02:40

どのような動作を実現したいのでしょうか？

miyabi_pudding

2020/11/17 02:49

HTMLの一部ではなく、全体を示した方がよさそうなので、 HTML全体を記載してください。

nmamaworker

2020/11/17 02:53

<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>About SAMPLE SITE</title> <meta name="description" content="初心者のためのサンプルサイト"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="description" content="プログラミング初心者のためのサンプルサイトです"> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="container"> <header> <h1 id="logo"> <a href="index.html"> <img src="images/logo.png" alt="ロゴ画像"> </a> </h1> </header> <nav id="navigationbar"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="link.html">Link</a></li> </ul> </nav> <div id="contents"> <section> <h2>About</h2> <p>このサイトの説明ページです。</p> <h2>tableサンプル</h2> <table class="ta1"> <caption> 見出しが必要であればここを使います </caption> <tbody> <tr> <th>見出し</th> <td>ここに説明など入れて下さい。サンプルテキスト。</td> </tr> <tr> <th>見出し</th> <td>ここに説明など入れて下さい。サンプルテキスト。</td> </tr> <tr> <th>見出し</th> <td>ここに説明など入れて下さい。サンプルテキスト。</td> </tr> <tr> <th>見出し</th> <td>ここに説明など入れて下さい。サンプルテキスト。</td> </tr> <tr> <th>見出し</th> <td>ここに説明など入れて下さい。サンプルテキスト。</td> </tr> <tr> <th>見出し</th> <td>ここに説明など入れて下さい。サンプルテキスト。</td> </tr> </tbody> </table> </section> <section> <h2>当テンプレートについて</h2> <h3>当テンプレートはhtml5+CSS3(レスポンシブWEBデザイン)です</h3> <p>当テンプレートは、パソコン、スマホ、タブレットでhtml共通のレスポンシブWEBデザインになっております。古いブラウザ（※特にIE8以下）で閲覧した場合にCSSの一部が適用されない（角を丸くする設定など）のでご注意下さい。</p> <h3>各デバイスごとのレイアウトチェックは</h3> <p>最終的なチェックは実際のタブレットやスマホで行うのがおすすめですが、臨時チェックは最新のブラウザ(IEならIE10以降)で行う事もできます。ブラウザの幅を狭くしていくと、各端末サイズに合わせたレイアウトになります。 </p> <h3>各デバイス用のスタイル変更は</h3> <p>cssフォルダのstyle.cssファイルで行って下さい。詳しい説明も入っています。<br> 前半はパソコン環境を含めた全端末の共通設定になります。中盤以降、各端末向けのスタイルが追加設定されています。<br> media=" (～)"の「～」部分でcssを切り替えるディスプレイのサイズを設定しています。ここは必要に応じて変更も可能です。</p> <h2>当テンプレートの使い方</h2> <h3>初心者向けマニュアル公開中</h3> <p>テンプレートの編集方法、画像加工、無料サーバーを使ってサイトを公開するなど動画をまじえてわかりやすく解説しています。<br> <a href="https://template-party.com/tips/index_beginner.html" target="_blank">初心者向けマニュアルはこちら。</a> </p> <h3>titleタグ、copyright、metaタグ、他の設定</h3> <p> <strong class="color_a">■titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。</strong><br> まず、htmlソースが見れる状態にして、上から６行目あたりにある、 <br> <span class="look"><title>初心者向けホームページテンプレート tp_beginner5<title></span> <br> を編集しましょう。<br> あなたのホームページ名が「SAMPLE SITE」だとすれば、<br> <span class="look"><title>SAMPLE SITE</title></span><br> "とすればＯＫです。"</p> <p> <strong class="color_a">■copyrightを変更しましょう。</strong><br> 続いてhtmlの下の方にある、<br> <span class="look">Copyright© SAMPLE SITE All Rights Reserved.</span><br> の「SAMPLE SITE」部分もあなたのサイト名に変更します。</p> <p> <strong class="color_a">■metaタグを変更しましょう。</strong><br> htmlソースが見える状態にしてmetaタグを変更しましょう。</p> <p> ソースの上の方に、<br> <span class="look">■content="ここにサイト説明を入れます"</span><br> という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。</p> <p> 続いて、その下の行の<br> <span class="look">content="キーワード１,キーワード２,～～～"</span><br> も設定します。ここはサイトに関係のあるキーワードを入れる箇所です。10個前後ぐらいあれば充分です。キーワード間はカンマ「,」で区切ります。</p> <p> <strong class="color_a">■ロゴ画像のalt指定と、ロゴ画像本体も変更しましょう。</strong><br> html側に<br> <span class="look"><img src="images/logo.png" alt="SAMPLE SITE"></span><br> となっている箇所があるので、ここのalt指定(SAMPLE SITE)もあなたのサイト名に変更しましょう。</p> <p>ロゴ画像本体については、baseフォルダに文字なしの土台画像「logo.png」が入っているので、画像ソフトなど使ってあなたのサイト名を入れて、imagesフォルダに上書きしましょう。 <br> このロゴ画像、HPで見るサイズよりかなり大きく感じると思いますが、高解像度の端末でピンボケさせない為に適当に大きくしてあります。</P> <p>レイアウト上のロゴの大きさは、cssフォルダのstyle.cssの <br> <span class="color_a">/*ヘッダー（ロゴが入った最上段のブロック）</span><br> のブロックで設定されている、<br> <span class="color_a">#logo img</span><br> にあるwidthの値で変更可能です。css下の方に小さな端末用の設定がある場合もあるのでそちらも確認して下さい。</p> <h3>その他、テンプレートのカラーやデザイン変更などは</h3> <p>cssフォルダのstyle.cssで行って下さい。詳しい解説も書かれています。<br> cssの解説は、「<span class="color_a">/*</span>」と「<span class="color_a">*/</span>」の間にコメントとして入れています。「<span class="color_a">/*</span>」と「<span class="color_a">*/</span>」はcss用のコメントタグであり、飾りではないので削除をしないで下さい。もし解説を削除したい場合は、「<span class="color_a">*/</span>」と「<span class="color_a">*/</span>」含めて丸ごと削除して下さい。</p> <h3>うまく編集できない場合は</h3> <p><a href="https://template-party.com/bbs/">サポート掲示板</a>からご質問下さい。対応可能な範囲内でサポートしております。</p> </section> </div> <footer> <small> Copyright© <a href="index.html">SAMPLE SITE</a> All Rights Reserved. </small> <span class="template-party"> 《 <a href="https://template-party.com/">Web Design:Template-Party</a> 》 </span> </footer> </div>  </body> </html> <code></code>などもやってみたのですが、、コードとして、表示させたいだけなのですが、、初心者で恐れ入ります。。何卒よろしくお願いします。

miyabi_pudding

2020/11/17 02:56

質問本文に入れてください。質問本文は修正可能です。また、ソースコードを記載する時は、 ```html ここにソースコード ``` といった形式でいれてください。（コードブロック表記になります）