はじめに
HTML では、<blockquote> タグを使用して、著者の名前または出典付きで引用を Web ページに表示します。このタグはブロックレベル要素として使用され、別の段落として表示されます。この実験では、HTML <blockquote> タグを使用してブロック引用を作成する方法を学びます。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を記述する方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080 タブを更新して Web ページをプレビューできます。
HTML 構造を追加する
index.html という名前の HTML ファイルを作成し、コードエディタで開きます。
以下のように HTML 構造を追加します。
<!doctype html>
<html>
<head>
<title>HTML Blockquote Tag</title>
</head>
<body>
<h1>HTML Blockquote Tag</h1>
<!-- ブロック引用を追加する -->
</body>
</html>
ブロック引用タグを追加する
次の構文を使用して、HTML コードにブロック引用タグを追加します。
<blockquote>
あなたの引用はここに来ます...
<cite>- 著者名</cite>
</blockquote>
注： 引用の著者名または出典を提供するために、cite タグを blockquote タグの中に追加します。
CSS スタイリングを追加する
次のコードスニペットを使用して、ブロック引用タグに CSS スタイリングを追加します。
<style>
blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
font-style: italic;
color: #555;
padding: 5px 20px;
border-left: 5px solid #ccc;
}
</style>
注： このコードは、ブロック引用タグにいくつかの基本的なスタイリングを設定します。border-left プロパティは、ブロック引用タグに左罫線を追加します。
あなたの引用はここに来ます... を置き換えて、Web ページに表示したい引用を追加します。
HTML ファイルを保存し、Web ブラウザで開いて、Web ページに表示されるブロック引用を確認します。
まとめ
この実験では、Web ページ上の別個のブロックで引用を表示するための <blockquote> タグについて学びました。また、このタグで使用できる属性と、CSS を使ってそれをスタイリングする方法についても学びました。ブロック引用タグを使えば、Web ページに引用を簡単に表示できます！
