HTMLの構成
<!DOCTYPE html> <html lang="ja"> <head>
Headの内容
</head> <body>
Bodyの内容
</body> </html>
※headで囲まれた部分にHeadの内容、bodyで囲まれた部分にBodyの内容を入れる。
headは設定でbodyは表示する内容
HTMLは主に３種類ある
①設定をつけるもの
②画像やテキストを表示するもの
③検索ロボットに構成を伝えるもの
Headの内容
①ページタイトル、ページ概要文、アイコンの設定
<title>〇〇</title> <meta name="description" content="〇〇"> <link rel="icon" href="./〇〇.png" type="image/png" /> <link rel="apple-touch-icon" href="./〇〇.png" sizes="180x180" />
②ページの基本設定（文字コード設定、画面設定、リセットCSS）
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>* { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; }
img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; }
a { text-decoration: none; color: inherit; } ul, ol { list-style: none; }</style>
③必要に応じての設定(JQUERY（JavaScript)、CSSファイル読み込み、JSファイル読み込み)
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <link rel="stylesheet" href="○○.css"> <script src="〇〇.js" defer></script>
※deferをつけるとテキストをすべて読み込んだ後、最後に読み込むようになります。
④グーグルフォントの読み取り
グーグルフォント「サワラギゴシック」の例
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
GEOGLEフォントの使い方
GEOGLEフォントで検索→fileter→languageをJapaneseにする→下のstyleの入力欄でプレビューが確認できる→get font →get embed code→上のHTMLのコードをコピーして貼り付ける。
下のCSS部分は使うところにfont-familyの部分だけコピーして貼り付ける。
Bodyの内容
①よく使うもの
見出し1～6
<h1>〇〇</h1> <h2>〇〇</h2> <h3>〇〇</h3> <h4>〇〇</h4> <h5>〇〇</h5> <h6>〇〇</h6>
段落
<p>〇〇</p>
画像
<img src="./〇〇.png" alt="△△の画像">
リンク
<a href="△△.html">〇〇</a>
※altは画像につける画像名、hrefはリンクを押したときに飛ぶリンク先
②表
<table border=”1”> <tr><th>題1</th><th>題2</th></tr> <tr><td>〇〇</td><td>〇〇</td></tr> <tr><td>〇〇</td><td>〇〇</td></tr> </table>
※trは行を表す thは見出しの内容 tdは通常の内容
④箱
前後に改行が入る箱
<div>〇〇</div>
前後に改行が入らない箱
<span>〇〇</span>
※箱に入れることでCSSを設定するとき箱に入っているものすべてにまとめて文字サイズや色の設定ができる。
⑤その他
改行
<br>
直線
<hr>
ふりがな
<ruby>〇〇<rp>（</rp><rt>△△</rt> <rp>）</rp></ruby>
※rubyの〇〇は漢字の部分で△△がフリガナの部分。
下文字
H<sub>2</sub>O
上文字
3<sup>2</sup>
イタリック体
<i>YES</i>
⑥GEOGLEマップやYOUTEBEの埋め込み
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12966.991969859417!2d139.735133142554!3d35.6585800615079!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1754797442191!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
※埋め込みの方法
geogleマップ→位置を選択→共有→地図を埋め込む→ＨＴＭＬをコピー
Youtubeの動画をクリック→埋め込みコードをコピー
⑦ビデオ
<video autoplay muted loop playsinline> <source src="○○.mp4" type="video/mp4"> お使いのブラウザは動画タグに対応していません。 </video>
検索ロボットに構成を伝えるもの
タグつけ
ヘッダー
<header>□□□</header>
メイン
<main>□□□</main>
フッター
<footer>□□□</footer>
メニュー（リンク集）
<nav>□□□</nav>
補足情報
<aside>□□□</aside>
まとまり
<section>□□□</section>
まとまり
<article>□□□</article>
リスト
<ul> <li>〇〇</li> <li>〇〇</li> <li>〇〇</li> </ul>
※検索用ロボにページの構成を伝えるためにつける
細かい構成を伝えるもの
引用
<blockquote cite="URL名">○○</blockquote>
強調
<em>○○</em>
重要
<strong>○○</strong>
ハイライト表示
<mark>○○</mark>
日付「2020年1月1日」
<time datetime=“2020-01-01”>2020年1月1日</time>
テキスト名とその説明文
<dl> <dt>〇〇</dt> <dd>〇〇</dd> </dl>
画像とその説明文
<figure> <img src="〇〇" alt="△△の画像"> <figcaption>〇〇</figcaption> </figure>