HTML
HTMLでホームページのテキストや画像が作れる。
文字の色やサイズや位置はCSSで調節する。
HTMLはテキストや画像を作るだけでなくページの構成を検索用コンピューターに伝える働きもある。
ファイル名は〇〇.htmlにする。
HTML開始と終了
| プログラム | 説明 | |
| HTML開始 | <!DOCTYPE html><html><head> <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> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <title>〇〇</title> <meta name="description" content="〇〇"> <link rel="icon" href="./〇〇.png" /> <link rel="apple-touch-icon" href="./〇〇.png" sizes="180x180" /> <link rel="stylesheet" href="○○.css"> <script src="〇〇.js" defer></script> </head><body> | 文字コードをUTF8にする。 画面をフレキシブル設定にする。 ページについている余計なCSS設定を削除する。 jQueryを使えるようにする。 ページのタイトルを入れる ページの概要文を入れる ページのアイコン画像を入れる CSS読み込み JS読み込み（deferをつけると最後に読み込むようになる） |
| HTML終了 | </body></html> | HTML開始とHTML終了の中にHTMLのテキストを書く。 |
グーグルフォントの追加
| プログラム | 説明 | |
| グーグルフォント「サワラギゴシック」 | <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フォントで検索→fileter→languageをJapaneseにする→下のstyleの入力欄でプレビューが確認できる→get font →get embed code→上のHTMLのコードをコピーしてHTML開始の中に貼り付ける。 下のCSS部分は使うところにfont-familyの部分だけコピーしてCSSのところに貼り付ける。 |
基本のテキストや画像
基本
| プログラム | 説明 | |
| 見出し1「あいう」 | <h1>あいう</h1> | 見出しをつける。文字が大きくなる。１から６まである。 横いっぱいに枠をとる。 |
| テキスト「あいう」 | <p>あいう</p> | 段落の塊のテキスト。 横いっぱいに枠をとる。 |
| 画像「画像.png、〇の画像」 | <img src="画像.png" alt="〇の画像"> | 画像を表示する。画像が読み込めないときに表示されるテキストもつける。 |
| 動画「動画.mp4、お使いのブラウザは動画タグに対応していません」 | <video autoplay muted loop playsinline> <source src="動画.mp4" type="video/mp4">お使いのブラウザは動画タグに対応していません。</video> | 動画を流す。動画が読み込めないときに表示されるテキストもつける。 |
| スペース「1cm」 | <div style="height:1cm;"></div> | 余白を入れる |
囲むもの
| プログラム | 説明 | |
| リンク「https://www.google.com」〇〇〇リンク閉じ | <a href="https://www.google.com">〇〇〇</a> | リンク「」とリンク閉じでテキストや画像を囲む。 囲むとクリックした時そのリンク先に飛ぶようになる。 |
| 横箱（基本）〇〇〇横箱閉じる | <div style=" display:flex;align-items: center;justify-content: space-evenly; >〇〇〇</div> | 横箱(基本)と横箱閉じるで囲む。 囲むと囲まれたものが均等に横に並ぶようになる。 例えばテキスト３つをで囲むと横に並ぶようになる。 |
| 横箱（均等）〇〇〇横箱閉じる | <div style=" display:flex;align-items: center;justify-content: space-around; >〇〇〇</div> | (基本)だと端の間隔は狭い。（均等）は端の間隔も等間隔に並べる。 |
| 横箱（両端）〇〇〇横箱閉じる | <div style=" display:flex;align-items: center;justify-content: space-between; >〇〇〇</div> | 端の間隔を０にする。 |
| 横箱（中央）〇〇〇横箱閉じる | <div style=" display:flex;align-items: center;justify-content: center; >〇〇〇</div> | 両端以外の間隔をなくして中央に寄せる。 |
| 箱〇〇〇箱閉じる | <div >〇〇〇</div> | 箱で囲まれたものは一つの塊になる。箱で囲まれてものを横箱で囲んでも箱の中のものは横にならない。 |
そのほか
| プログラム | 説明 | |
| 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の動画をクリック→埋め込みコードをコピー |
| 文字「あいう」 | <span>あいう</span> | 文字 横いっぱいに枠が広がらない。 |
| 改行 | <br> | 改行する。枠が横いっぱいに広がるものは改行しなくてもいいがそれ以外は縦にならべるとき改行する。 |
| 罫線 | <hr> | 横一直線に線が入る |
| ふりがな「漢字」「かんじ」 | <ruby>漢字<rp>（</rp><rt>かんじ</rt> <rp>）</rp></ruby> | 「漢字」の上に小さくひらがなで「かんじ」とふりがながつく |
| H下文字「２」O | H<sub>2</sub>O | ２が下に小さく出る |
| ３上文字「２」 | 3<sup>2</sup> | ２が上に小さく出る |
| イタリック体「YES」 | <i>YES</i> | 斜めのイタリック体になる |
| 引用「https://www.google.com」〇〇〇引用閉じる | <blockquote cite="https://www.google.com">〇〇〇</blockquote> | 引用されていることを表す |
| 強調「あいう」 | <em>あいう</em> | |
| 重要「あいう」 | <strong>あいう</strong> | |
| ハイライト表示「あいう」 | <mark>あいう</mark> | |
| 日付「2020年1月1日」 | <time datetime=“2020-01-01”>2020年1月1日</time> | コンピューターに日付だと伝える |
| 文字枠線箱「あいう」〇〇〇文字枠線箱閉じる | <fieldset><legend>あいう</legend>〇〇〇</fieldset> | 見出しから線が出て囲む枠線ができる |
表と入力欄
表
| プログラム | 説明 | |
| 表設定 | <style> table { border-collapse: collapse; }th, td { border: 1px solid black; }</style> | 表設定のものを書かないと表の枠線が表示されない。プログラムの1つ目は枠線の二重線を一重線にするというもの。 ２つ目は枠線をつけるというもの。 |
| 表箱〇〇〇表閉じ | <table><tr>〇〇〇</tr></table> | 表箱と表閉じの中に表の中身や内容を書く。 どこからどこまでが表の中身かを示す。 |
| 表見出し「金額」 | <th>金額</th> | 見出しになる表の内容。 |
| 表内容「５００円」 | <td>500円</td> | 中身になる表の内容。 |
| 表行変更 | </tr><tr> | 表の行を変えて次の行に行く。この後使う表見出しや表内容は次の行になる。 |
入力フォーム
| プログラム | 説明 | |
| 入力欄（テキスト） | <input type="text"> | 一行の文字をいれる入力欄 |
| 入力欄（メール） | <input type="email"> | コンピューターがメール番号と記録する。メールの形式かどうかも確認する。 |
| 入力欄（電話） | <input type="tel"> | コンピューターが電話番号として記録する |
| 入力欄（パスワード） | <input type="password"> | 入力内容が＊＊＊で見えなくなる |
| 入力欄（色） | <input type="color"> | 色を選択できる |
| 入力欄（数字） | <input type="number"> | 数字を選択できる |
| 入力欄（月日） | <input type="date"> | 月日を選択できる |
| 入力欄（時間） | <input type="time"> | 時間を選択できる |
| 入力欄大 | <textarea></textarea> | 複数行入る入力欄 |
| 選択欄箱〇〇〇選択欄箱閉じ | <select>〇〇〇</select> | 複数の選択内容「」を選択欄箱と選択欄閉じで囲む。下に伸びる選択肢の中から1つ選択する入力欄ができる。 |
| 選択内容「あいう」 | <option value="あいう">あいう</option> | 選択肢の内容 |
| 〇ボタン | <input type="radio" value="" > | 性別〇男 〇女 というような形の入力欄の〇ができる。同じnameをつけた〇ボタンは１つしか選択できない。 |
| □ボタン | <input type="checkbox" value="" > | 苦手な教科□英語 □数学 □国語 というような形の□の入力欄ができる。同じnameをつけた□ボタンでも複数選択できる。 |
| 欄やボタンに追加する要素 必須 初期値「あいう」 送信する値の箱名「箱A」 | <input type="text" required> <input type="text" placeholder="あいう"> <input type="text" name="箱A"> | 必須にしたものを入力せずに送信した時教えてくれる。 初期値は欄に最初から入っている値 送信する値の箱名はPHPのプログラムを使うときに箱名を使って内容を取り出す。 （入力内容をメールで送るのにPHPのプログラムが必要） |
| 提出ボタン「送信」 | <button type="submit" >送信</button> | フォームの内容をPHPに送信するボタン。フォームの中ではURLを変えたりページを再読み込みする機能もある。 |
| 通常ボタン「クリック」 | <button type="button">クリック</button> | 送信機能や読み込み機能をなくしたボタン。 |
| リセットボタン「クリック」 | <button type="reset">クリック</button> | フォームの入力欄をリセットするボタン。 |
フォームの囲むもの
| プログラム | 説明 | |
| フォーム箱（〇.php）〇〇〇フォーム箱閉じる | <form action="〇.php" method="post" >〇〇〇</form> | フォームの入力欄と送信ボタン全体を囲む。どこからどこまでがフォームかを示す。〇.phpは送信ボタンが押されたときに移動するプログラムファイル名 formのmethodをgetにすると、とんだURLがphpのファイル名の右にname名と入力欄に入れた内容になる。 nemeを日本語にしていると日本語はURLに使えないため％を使った文字列になる。 |
| ラベル箱〇〇〇ラベル箱閉じる | <label>〇〇〇<label> | 文字と入力欄のセットをラベルで囲む。そうすることで文字がクリックされたときに入力欄にカーソルが入る。 |
タグ
タグは検索用コンピューターにページの構成を伝えるもの
メイン
| プログラム | 説明 | |
| ヘッダー⇩ 〇〇〇 ヘッダー⇧ | <header>〇〇〇</header> | ヘッダー部分。ホームページの上の帯のようになっている部分 |
| メイン⇩ 〇〇〇 メイン⇧ | <main>〇〇〇</main> | ホームページのヘッダーやフッター以外の部分 |
| フッター⇩ 〇〇〇 フッター⇧ | <footer>〇〇〇</footer> | フッター部分。ホームページの下の帯のようになっている部分 |
| ナビ⇩ 〇〇〇 ナビ⇧ | <nav>〇〇〇</nav> | ヘッダーのメニューバーの部分 |
| アサイド⇩ 〇〇〇 アサイド⇧ | <aside>〇〇〇</aside> | 補足内容。豆知識やサイドメニューや広告など |
| まとまり⇩ 〇〇〇 まとまり⇧ | <section>〇〇〇</section> | テキストや画像のまとまった塊 |
リストなど
| プログラム | 説明 | |
| リスト枠（箇条書き）⇩ 〇〇〇 リスト枠（箇条書き）⇧ | <ul>〇〇〇</ul> | リスト枠（箇条書き）でリスト⇩〇〇〇リスト⇧の内容を囲む。 |
| リスト枠（番号）⇩ 〇〇〇 リスト枠（番号）⇧ | <ul>〇〇〇</ul> | リスト枠（番号）でリスト⇩〇〇〇リスト⇧の内容を囲む。 １から２と順番に行っていくようなリストに使う。 |
| リスト⇩ 〇〇〇 リスト⇧ | <li>〇〇〇</li> | リスト |
| リスト枠（文字説明）⇩ 〇〇〇 リスト枠（文字説明）⇧ | <dl>〇〇〇</dl> | 文字と説明がセットになったリストに使う。リスト枠（文字説明）で文字⇩文字⇧と説明⇩説明⇧の内容を囲む。 |
| 文字⇩ 〇〇〇 文字⇧ | <dd>〇〇〇</dd> | 文字 |
| 説明⇩ 〇〇〇 説明⇧ | <dt>〇〇〇</dt> | 文字の説明 |
| 画像内容枠⇩ 〇〇〇 画像内容枠⇧ | <figure>〇〇〇</figure> | 画像と内容がセットになっているものを囲む。 |
| 画像「画像.png、〇の画像」 | <img src="画像.png" alt="〇の画像"> | 画像 |
| 内容⇩ 〇〇〇 内容⇧ | <figcaption>〇〇〇</figcaption> | 画像の内容 |