Webコーダーとして働くまで知らずに、ただのタイトルのタグで私は以下のように覚えており、使っておりました。
- どのタグも何回も使って良い。
- フォントサイズやフォントの太さがこの順になっていて、h1>h2>h3>h4>h5>h6、メインタイトル>サブタイトルみたいに覚えていた。
正しくは以下の通り、ルールがあります。皆さんも参考にしていただければと思います。
【h1～h6タグのルール】
h1：ページのタイトル、複数利用できない
h2：各項目のタイトル、複数利用できる
h3：各項目のサブタイトル、複数利用できる
h4：コンテンツ内の見出し、複数利用できる
h5：コンテンツ内のサブ見出し、複数利用できる
h6：一番見出しの中で小さい、複数利用できる、h6以下はあまり使わない
練習問題
メモ帳でも作成可能ですが、フリーソフト：サクラエディタですと行番号も振られており、見やすいので、ぜひインストールして利用してみてください。表示されているか確認は、既存ブラウザにて確認してください。
サクラエディタ
ブラウザ：chrome、edgeなど
練習問題①
以下の内容をわかりやすく表記せよ。
【例】
タイトル：私の大好きなもの
サブタイトル：好きな果物
私の好きな果物は、りんごです。
あなたは何が好きですか。
練習問題②
以下の内容をわかりやすく表記せよ。
【例】
大項目：食事
中項目：好きな果物
小項目：りんご
私は、水々しくてシャキシャキしているりんごが好きです。
特に熟しているりんごは美味しく、青森県さんの紅林は有名なブランドで高いですが、手に取りやすく、家庭でも味わえる林檎です。
練習問題③
以下の内容をわかりやすく表記せよ。
【例】
・青森
・食事
・果物
・林檎
私は、水々しくてシャキシャキしているりんごが好きです。
特に熟しているりんごは美味しく、青森県さんの紅林は有名なブランドで高いですが、手に取りやすく、家庭でも味わえる林檎です。
前回の投稿した練習問題の解答
前回の練習問題①の解答
前回の練習問題①の解答
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- memo:メタ情報を適切に設定する -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample Title</title>
<meta name="description" content="練習ページ">
<meta propaty="og:type" content="website">
<meta propaty="og:site-name" content="Sample Title">
<meta propaty="og:url" content="サイトのリンク">
<meta property=”og:image” content=” サムネイル画像のURL” />
<link rel="icon" href="img/favicon.ico">
<!-- 左記のサイトでfavicon.ico作成 https://www.xiconeditor.com/-->
</head><!-- ここまでが裏の設定ですよという宣言 -->
<body>
<p>Hello World</p>
</body>
</html>
前回の練習問題②の解答
前回の練習問題②の解答
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- memo:メタ情報を適切に設定する -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample Title</title>
<meta name="description" content="サイトの説明">
<meta propaty="og:type" content="website">
<meta propaty="og:site-name" content="サイトのタイトル">
<meta propaty="og:url" content="サイトのリンク">
<meta property=”og:image” content=” サムネイル画像のURL” />
<link rel="icon" href="img/favicon.ico">
<!-- 左記のサイトでfavicon.ico作成 https://www.xiconeditor.com/-->
</head><!-- ここまでが裏の設定ですよという宣言 -->
<style>
.txt{
font-weight: bold;
}
</style>
<body>
<p class=txt>Hello World</p>
</body>
</html>
前回の練習問題③の解答
前回の練習問題③の解答
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- memo:メタ情報を適切に設定する -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample Title</title>
<meta name="description" content="サイトの説明">
<meta propaty="og:type" content="website">
<meta propaty="og:site-name" content="サイトのタイトル">
<meta propaty="og:url" content="サイトのリンク">
<meta property=”og:image” content=” サムネイル画像のURL” />
<link rel="icon" href="img/favicon.ico">
<!-- 左記のサイトでfavicon.ico作成 https://www.xiconeditor.com/-->
</head><!-- ここまでが裏の設定ですよという宣言 -->
<style>
.txt{
font-weight: bold;
}
.txt-img{
weight: 100%;
max-weight: 100%;
}
</style>
<body>
<p class="txt">Hello World</p>
<!-- この段階でdivタグで囲うことはしなくてもOK -->
<div class="txt-img">
<!-- 画像を格納した先を指定 -->
<img src="img/ファイル名">
</div>
</body>
</html>
本日の練習問題の解答は次の投稿にて！