Q&A
＞※私はプロゲートでHTML初めて1か月です。
ひとまず初学者であることを伝えたいのでしたら質問に「初心者アイコン」をつけるのみで良いかと思います。
質問は編集できますので適宜ご対応ください。
前提・実現したいこと
見本のwebページ
http://demo.themegraphy.com/write-ja/typography/
上記のサイトの模写コーディングを行っていて、"タイポグラフィー"の下のコードを含む文章をブラウザで表示させようと
思っていますが、<code></code>で<p class="intro"></p>の部分をかこっても表示されません。
※模写サイトをサーバーにアップはしてません。
発生している問題・エラーメッセージ
chromeでコードの部分だけ表示できない
該当のソースコード
<p class="p-1">これはイントロダクションです。ここに記事の概要を書きます。このスタイルは <code><p class="intro"></p></code>で囲むことによって表示することができます。</p>試したこと
<p class="p-1">"これはイントロダクションです。ここに記事の概要を書きます。このスタイルは" <code><p class="intro"></p></code>"で囲むことによって表示することができます。"</p> 通常の文章の前半、後半をダブルコーテーションで囲った→変わらず補足情報（FW/ツールのバージョンなど）
コーディング用に使っているのはATOMです。
※私はプロゲートでHTML初めて1か月です。
よろしくお願いします。
コードは原則、テキストでマークダウンにてご提示ください。
画像で提示されても誰も再現確認できません。
m.ts10806様回答ありがとうございます。
以下コードになります。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ページの内容を表す文章" />
<meta property="og:url" content="ページのURL" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページのタイプ">
<meta property="og:description" content="記事の抜粋" />
<meta property="og:image" content="画像のURL" />
<meta name="twitter:card" content="カード種類" />
<meta name="twitter:site" content="@Twitterユーザー名" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="appIDを入力" />
<title>taipo-graphy</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/5.8.2/css/font-awesome.min.css" rel="styleshe>
<link rel="icon" href="●像URL" sizes="16x16" type="image/png"/>
<link rel="apple-touch-icon-precomposed" href="●画像のURL"/>
<script src="●JavaScriptファイルのURL"></script>
<script src="https://kit.fontawesome.com/63ce3b6b7b.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/taipo-Graphy.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<div class="wrapper">
<div class="menu">
</div>
<div class="top-img">
<img src="img/taipo-img.jpg" alt="window">
</div>
<div class="main-contents">
<div class="taipo-graphy"><!--タイポグラフィー-->
<h1 class="title-1 title-color">タイポグラフィー</h1>
</div>
<p>これはイントロダクションです。ここに記事の概要を書きます。このスタイルは<code><p class="intro"></p></code>で囲むことによって表示することができます。</p>
<div class="title-1 title-color"><!--見出し1-->
<h1 class="title-1-1">見出し1</h1>
</div>
<p class="p-1">見出し2は本文の中では最も大きな見出しになります。使われる頻度が最も高い見出しです。</p>
<div class="title-2 title-color"><!--見出し2-->
<h2 class="title-2-1">見出し2</h2>
</div>
<p class="p-1">見出し3は本文の中では見出し2に次いで大きな見出しになります。こちらも使われることが多いでしょう。</p>
<div class="title-3 title-color"><!--見出し3-->
<h3 class="title-3-1">見出し3</h3>
</div>
<p class="p-1">見出し4は本文の中では見出し2に次いで大きな見出しになります。こちらも使われることが多いでしょう。</p>
<div class="title-4 title-color"><!--見出し4-->
<h4 class="title-4-1">見出し4</h4>
</div>
<p class="p-1">見出し5は小さな見出しです。見出しとして用意されてはいますが、使われることはほとんどありません。</p>
<div class="title-5 title-color"><!--見出し5-->
<h5 class="title-5-1">見出し5</h5>
</div>
<p class="p-1">見出し6は小さな見出しです。見出しとして用意されてはいますが、使われることはほとんどありません。</p>
<div class="title-6"><!--見出し６-->
<h1 class="tiele-6-1">引用（Blockquote)</h1>
</div>
<p>見出し6は小さな見出しです。見出しとして用意されてはいますが、使われることはほとんどありません。</p>
<div class="">
<h3 class="title-3 title-color">引用 (Blockquote) テスト</h3>
<p>一行の引用。</p>
<blockquote><!--ダブルコーテーション-->
<p class="italic">ハングリーであれ、愚かであれ。</p>
<p>cite 参照を含む複数行の引用</p>
</blockquote>
</div>
</div>
<div class="footer">
</div>
</div>
</body>
回答ではなく質問への追記修正依頼です。
質問本文を更新してください。こちらのコメント欄に投稿されても見づらいですしマークダウン使えません。
https://teratail.com/questions/238564
回答2件
0
ベストアンサー
HTML の中で <p> などと書いた場合、たとえ <code> の中であっても p タグとして扱われます。
< や > や & を表示したい場合、それぞれ < や > や & と書く必要があります。
参考: HTMLタグ/HTMLの基本/文字参照 - TAG index
html
1<p class="p-1">これはイントロダクションです。ここに記事の概要を書きます。このスタイルは 2<code><p class="intro"></p></code>で囲むことによって表示することができます。</p>
投稿2020/04/03 17:57
総合スコア7901
hoshi-takanori 様回答ありがとうございまうす。
ソースを表示すれば良かったということですね。
検証ツールばかり気を取られていました。
次回からそちらを確認するように気を付けます。
0
模写コーディングの方針がよくわかりませんが、
どうしても分からないところがあるのでしたら、目の前にあるお手本見れば良いと思います。
見たからって目的が達成できればそれで良いわけですし、
例え「これまで勉強したことを復習するため」とかであっても、
全てを記憶しておくのって熟練者でもしてません。
試験でないのでしたら「カンニング」という考え方は当てはまりません。
フロントエンドのコードはブラウザから確認できるものなので、公開されているものです。スクレピングなど、グレーな部分を除いて、あくまで技術的な参考として、取り入れても何の問題もありません。
競合サイトのCSSとJavaScriptを丸裸にする方法
投稿2020/04/04 01:35
総合スコア80875
m.ts10806 様回答ありがとうございます。
次回からページのソースを表示で確認するようにします。
検証ツールからのみ確認していました。
ありがとうございます。
デベロッパーツールはブラウザがいい感じに調整してくれてたりするので、
リアルなコードそのままでなかったりします。軽微な文法ミス程度なら調整されてることもありますからね。
「コード」を確認すなら「ソースを表示」
「要素の構成や設定」を確認するなら「デベロッパーツール」
と使い分けると良いです。
あなたの回答
tips
プレビュー
