5日目 HTMLの基礎卒業
実は、重要なことを二つほどまだ投稿していませんでした。それらを紹介した後にそれぞれの解答例を完成したものを投稿していきます。
まだ紹介していなかった超重大事項
①要素の開始と終わり
実は一昨日から何も触れずに進んでいましたが、要素には始まりと終わりが指定されるものがほとんどです。例外として、<br>や<input>などがありますが、基本的には全部の要素についてあると思ってください。
②VS Codeを早く入力する方法
VS Codeには早く入力をするための機能が付いています。
特に使いやすいものをいくつか示しておきます。
１．要素を直接入力する
要素をそのまま入力すると予測変換をしてくれます。例えば、secと何もないところで入力すると<section>と予測変換されます。
２．ものによっては"要素：属性"まで推測
１．でも書いたように推測機能があるVS Codeは属性名まで推測してくれます。
３．"要素．名前"と入力する
上記のように入力すると自動的に< 要素名 name="名前">になります。この機能の便利なところは、CSSの適応部分はnameで指定するため、多くの部分で使用されます。毎回毎回name属性を付与せずにコードを書いてい来ることはかなり楽になると思います。
③ブロックレベル要素とインライン要素の関係図
ブロックレベル要素とインライン要素には明確な役割の違いがあります。
以前から段落を変更する機能があるか内科の違いがあると投稿していましたが、本当のことを言うと、以下のような法則があります。
一応、間違いのないように文字にすると、インライン要素内にはブロックレベル要素を絶対にコードしてはいけません。また、ブロックレベル要素内にはbody要素を絶対にコードしてはいけません。
ただし！！ブロックレベル要素の中にブロックレベル要素を記入することはOK！！というか、書かないと成り立たない。
<body>
<ブロックレベル要素>
<ブロックレベル要素>
</ブロックレベル要素>
<インライン要素>
</インライン要素>
</ブロックレベル要素>
</body>こんな風なことがよくあります。
ということで、これで一通り基礎が終わったかなと思います。
昨日の問題の結果
先に明言しておきますが、私も多少抜けている部分はありました。まぁ、そもそも初学者なのだから忘れているのは当たり前なんですけどね。
実は私はこのブログにまとめを作ることでアウトプットをしていたのでかなりスムーズに進めることができました。どんな方法でもいいです。間違っていても問題ありません。まずはアウトプットを心がけましょう。これはどのような勉強方法でも変わりません。ということで、答え合わせをしましょう。
①ホームページヘッダーの記載文
条件：headerタグ内に、任意の写真、ulタグに”音声読み上げ”、”文字サイズ・色合い変更”、”Language”、別のulタグに"サイトマップ","カスタム検索","検索ページ"を記載する。
headerタグを閉じ、次にsectionタグ内に"トップ"、"暮らし・健康・福祉"、"教育・文化・スポーツ"、"産業・仕事"、"環境・都市基盤"、"都政情報"と記載する。
その下にFooterとして"APEX都庁"、下の段落に"copyright (C) xxxx"
と記載する。
これらは文字のみとする。
①結果
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<img src="image/FBFzzBuUYAI0cn1.png"
width=10% alt="APEX_LOGO">
<ul>
<li>音声読み上げ</li>
<li>文字サイズ・色合い変更</li>
<li>Language</li>
</ul>
<ul>
<li>サイトマップ</li>
<li>カスタム検索</li>
<li>検索ページ</li>
</ul>
</header>
<section>
<ul>
<li>トップ</li>
<li>暮らし・健康・福祉</li>
<li>教育・文化・スポーツ</li>
<li>産業・仕事</li>
<li>環境・都市基盤</li>
<li>都政情報</li>
</ul>
</section>
<footer>
<h3>APEX都庁</h3>
<h3>copyright (C) xxxx</h3>
</footer>
</body>
</html>②コメント入力フォーム
条件：１行目に氏名入力欄(１行の入力欄)、２行目に性別欄(単一選択)、３行目得意科目(複数選択)、４行目以降に自己紹介欄(複数列の入力欄)を作製する。送信ボタンの作成もする。
②結果
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="##">
<p>氏 名：<input type="text"></p>
<p>性 別：
<input type="radio">男性
<input type="radio">女性
<input type="radio">その他
</p>
<p>得意科目：
<input type="checkbox">国語
<input type="checkbox">数学
<input type="checkbox">英語
<input type="checkbox">理科
<input type="checkbox">社会
</p>
<p>自己紹介：<textarea name="" id="" cols="30" rows="10"></textarea></p>
<p> <input type="submit"></p>
</form>
</body>
</html>③カレーの材料を表で作成
条件：tableタグを作製し、一番上に"材料"、"分量"、"備考"のセルを作製する。その下に、カレーのルー1/2個、牛もも肉を200g、玉ねぎを300g(中玉1.5個程度)、人参を100g(小１本)、ジャガイモを150g(中玉1個)、サラダ油を大さじ１、水を700mlを表にする。
一番上のセルはstrongで強調表示する。
※( )内の言葉は備考欄に記載する。
③結果
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tr>
<td>材料</td>
<td>分量</td>
<td>備考</td>
</tr>
<tr>
<td>カレーのルー</td>
<td>1/2個</td>
<td></td>
</tr>
<tr>
<td>牛もも肉</td>
<td>200g</td>
<td></td>
</tr>
<tr>
<td>玉ねぎ</td>
<td>300g</td>
<td>中玉1.5個程度</td>
</tr>
<tr>
<td>人参</td>
<td>100g</td>
<td>小1本</td>
</tr>
<tr>
<td>ジャガイモ</td>
<td>150g</td>
<td>中玉1個</td>
</tr>
<tr>
<td>サラダ油</td>
<td>大さじ1</td>
<td></td>
</tr>
<tr>
<td>水</td>
<td>700mL</td>
<td></td>
</tr>
</table>
</body>
</html>④セクション内に写真を複数枚挿入
条件：sectionタグ内に、写真の投稿と写真の簡単な説明をしてください。
今回自分はいらすとやさんから出ている社畜のイラストを使用します。
"社畜とは、主人が馬車で優雅に過ごしている中、馬車馬のごとく、低栄養のものを餌として重労働を与えてくるのである。"
※イラストから感じた印象を記載しています。ご批判はご勘弁ください。
④結果
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section>
<img src="image/syachiku.png" width=40% alt="社畜イラスト">
<p>社畜とは、主人が馬車で優雅に過ごしている中、馬車馬のごとく、低栄養のものを餌として重労働を与えてくるのである。</p>
</section>
</body>
</html>⑤単純文章作成
条件：h1タグで"昨日の出来事"とコードする。
articleタグ内に"昨日、友達と~~~と考えています。"と記載し、一行改行後に"和訳："と記載する。
その下に"Yesterday, I ~~~diverse experiences."と記載する。
⑤結果
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>昨日の出来事</h1>
<article>
<p>昨日、友達と一緒に新宿で買い物をしました。新宿は賑やかで、多くの人が様々な店舗で買い物を楽しんでいました。私たちはカフェで休憩し、美味しいコーヒーを楽しみました。その後、近くの公園に散歩に行き、自然の中でリラックスしました。夕方には美味しいラーメンの店に入り、新しい味を試すことができました。この経験は楽しくて充実しており、新しい場所や食べ物に触れることで、日本の文化をより深く理解できるようになりました。将来的にも、さまざまな場所を訪れて日本語を使いながら様々な経験を積みたいと考えています。</p>
<br>
<p>和訳：</p>
<p>Yesterday, I went shopping in Shinjuku with my friends. Shinjuku is lively, with many people enjoying shopping in various stores. We took a break at a cafe and enjoyed delicious coffee. Later, we strolled in a nearby park, relaxing amidst nature. In the evening, we entered a ramen shop and had the chance to taste new flavors. This experience was enjoyable and fulfilling, allowing me to deepen my understanding of Japanese culture by exploring new places and trying different foods. In the future, I hope to visit various locations, using Japanese while accumulating diverse experiences.</p>
</article>
</body>
</html>⑥各シートへのリンク作成
条件：題名(h1タグ)として"本日のHTML練習"とし、その下にulタグを使用して番号を振りながら、上から"ヘッダー・フッターの活用"、"入力フォーム"、"カレーの材料表"、"社畜とは"、"昨日の出来事"とし、①～⑤までのリンクを付与する。
⑥結果
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>本日のHTML練習</h1>
<ol>
<li>
<a href="project1.html">ヘッダー・フッターの活用</a>
</li>
<li>
<a href="project2.html">入力フォーム</a>
</li>
<li>
<a href="project3.html">カレーの材料表</a>
</li>
<li>
<a href="project4.html">社畜とは</a>
</li>
<li>
<a href="project5.html">昨日の出来事</a>
</li>
</ol>
</body>
</html>こんな感じで完成しました！！
・ここで一つポイント！
同じ構造はコピペをいっぱい使いましょう！！
特に③と⑥はコピペできる構造がたくさんあります。
どんどんコピペして楽しましょう！！
ということで明日からはCSSを勉強していきます。