0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【HTML・学習ログ3】タグいろいろ

Posted at

区切りタグ

(1) navタグ(ナビゲーション)

Webサイトのナビゲーションを作成するタグ。

(2) articleタグ(記事)

記事を書く場所を宣言するための記述。

(3) sectionタグ(セクション)

(2)内でテーマの違う複数の記事を記述するときの区切り。

<!DOCTYPE html>
<html>
<body>
	<header>
		<h1>ヘッドラインニュース</h1>
		<nav>
			<a href="layout.html">ホーム</a>
			<a href="https://www.google.com">スポーツ</a>
			<a href="https://www.google.com">経済</a>
			<a href="https://www.google.com">天気</a>
		</nav>
	</header>
	<main>
		<article>
			<section>
				<h2>速報</h2>
				<h3>動物園でゾウの赤ちゃん誕生!</h3>
				<p>市内の動物園でゾウの双子の赤ちゃんが産まれました。赤ちゃんの名前を募集中です。</p>
			</section>
			<section>
				<h2>気象情報</h2>
				<h3>全国の天気</h3>
				<p>全国的に晴れますが、山間部で一時的に雪が降るところがあります。</p>
			</section>
		</article>
	</main>
	<footer>
	</footer>
</body>
</html>

スクリーンショット 2023-10-29 134019.png

特殊タグ

(4) audioタグ(音声再生)

「controls属性」を記述すると、音声ボタンや音量ボタンなどが表示される。

<!DOCTYPE html>
<html>
<body>
	<audio src="audiotag.mp3" controls></audio>
</body>
</html>

スクリーンショット 2023-10-29 140319.png

(5) videoタグ(動画再生)

「width属性」で幅、「height属性」で高さを指定する。

<!DOCTYPE html>
<html>
<body>
	<audio src="videotag.mp4" controls width="640"></audio>
</body>
</html>

(5) detailsタグ(折りたたみ機能)

クリックで表示、非表示を切り替える折りたたみ機能を作るタグ。
「open属性」…初期値が表示。これがなければ初期状態は非表示になる。
「summaryタグ」…詳細という文字を任意で変更できる。

(6) iframeタグ(別ページの埋め込み)

<!DOCTYPE html>
<html>
<body>
	<h2>東京タワー</h2>
	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.747798533325!2d139.74324421566527!3d35.658584838820154!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1636041735064!5m2!1sja!2sjp
	" width="500" height="500">
	</iframe>
</body>
</html>

スクリーンショット 2023-10-29 141809.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?