HTMLのタグを覚えただけでは、ホームページは作れません。
学生時代に一生懸命、英単語を覚えたけど、英語がまるで話せないのと同じです。
HTMLもケーススタディを重ねることで、DOMの構造体を自分で作ることができるようになっていきます。
要するに
経験する以外に習得できないという事です。
今回はそんなHTMLのケーススタディを積み上げる為の、ドリルを作ってみました。
お題に沿って、自分自信でHTMLを作ってみましょう。
HTMLは作る人によって、十人十色なので、不正解はあるけど正解は無いという事に気がついたら一段レベルアップすることができますよ。
はじめに
ドリルを始める前の準備として、自分の使っているパソコンにドリルの解答を書き込むためのディレクトリを作ってください。
その中にそれぞれの問題のファイル（フォルダ）を作って、ドリルを解いていってください。
解答に表示されるコード以外でも同じ見え方ができていれば全て正解なので、できるだけコピペなどせずに、自分でコードを作り出してください。
ドリル1 画像の表示
ドリル2 リンク
ドリル3 Table
ドリル4 番号リスト
ドリル5 入力フォーム
ドリル6 Youtube
ドリル7 文章の表示
ドリル1 画像の表示
問題
犬の写真を、縦300ピクセル x 横300ピクセルのサイズで、画面に表示してください。
ヒント
・画像のピクセルレートが歪んでも問題ありません。
・サイズをセットする場合は、属性を使います。
・画像は、ダウンロードしてHTMLファイルと同じ場所に置いてもいいし、インターネットにあるURLをセットしても、どちらでも構いません。
解答
<img alt="" border="0" data-original-height="853" data-original-width="1280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjatwYLCWbxlSw3UFVoTmKbKKFgZg0Nl5HctWvq_8JDnsdHEHOGGax4PRVbLvwkcGKZajimBei5IzohQUqcdWuiwQ8yMgoeWRVHguv0-kpT7cvLDY_ayuTyY1DleMATYE-hy67KNi5-wcje2-8oRxPV84QFGyS-ggZoty0tveh4InrHxmcTOoV81Hz-/s1600/bulldog-1047518_1280.jpg"/>
ドリル2 リンク
問題
クリックすると、Yahooのトップページに、別ウィンドウ（タブ）で遷移するリンクタグを作ってください。
ヒント
・YahooのトップページURLは、"https://yahoo.co.jp"です。
・別ウィンドウは、target属性で指定できます。
・バナー画像などは無くても問題有りません。（文字だけのリンクでいいです）
解答
<a href='https://yahoo.co.jp' target='_blank'>Yahoo</a>
ドリル3 Table
問題
次の画像と同じ構成のtableを作ってください。
ヒント
・colspanとrowspanの使い方は理解できてますか？
・数値の自動計算などは、不要です。
・Tableに罫線を表示させるには、border属性をセットしてください。
解答
<table border='1'>
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Name</th>
<th>Count</th>
<th>Unit</th>
<th>Price</th>
<tr>
</thead>
<tfoot>
<tr>
<th colspan='5'>合計</th>
<td>1645</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>1</th>
<td rowspan='2'>2023/1/1</td>
<td>りんご</td>
<td>3</td>
<td>150</td>
<td>450</td>
</tr>
<tr>
<th>2</th>
<td>バナナ</td>
<td>1</td>
<td>95</td>
<td>95</td>
</tr>
<tr>
<th>3</th>
<td>2023/1/2</td>
<td>みかん</td>
<td>5</td>
<td>120</td>
<td>600</td>
</tr>
<tr>
<th>4</th>
<td>2023/1/3</td>
<td>桃</td>
<td>2</td>
<td>250</td>
<td>500</td>
</tr>
<tbody>
</table>
ドリル4 番号リスト
問題
あなたの好きなインターネットサイトの１位から３位を、順番リストで表示してみましょう。
インターネットサイトは、名称を書いてそれをクリックすると、そのサイトに遷移するようにリンクさせてください。
※画像はお題とは関係ありません。
ヒント
・リストは番号表示が自動でできるOLタグを使うと良いでしょう。
・リンク設定は理解できてますか？
解答
<ol>
<li><a href="https://codepen.io/" target="_blank">Codepen</a></li>
<li><a href="https://www.dailyui.co/" target="_blank">Dayli UI</a></li>
<li><a href="https://developer.mozilla.org/ja/docs/Web" target="_blank">MDN web docs</a></li>
</ol>
ドリル5 入力フォーム
問題
・名前、メールアドレス、性別、住んでいる都道府県を選択できる、入力フォームを作成してください。
※画像のようなデザインは不要です。
ヒント
・名前は、input type='text'
・メールアドレスは、input type='email'
・性別は、ラジオボタン
・都道府県は、selectタグ
を使って構築してみましょう。
・送信できるようにボタンを設置しましょう。
解答
<form>
<div>名前 <input type='text' name='name' value=''/></div>
<div>メール <input type='email' name='email' value=''/></div>
<div>男 <input type='radio' name='sex' value='m'/> / 女 <input type='radio' name='sex' value='f'/></div>
<div>都道府県 <select name='prefix'>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="秋田県">秋田県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
<option value="岐阜県">岐阜県</option>
<option value="静岡県">静岡県</option>
<option value="愛知県">愛知県</option>
<option value="三重県">三重県</option>
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</select></div>
</form>
ドリル6 Youtube
問題
Youtubeの動画を貼り付けて、自分のHTMLで見れるようにしてみましょう。
ヒント
・Youtubeサイトのembed（共有/埋め込む）で挿入タグを取得しましょう。
解答
<iframe width="560" height="315" src="https://www.youtube.com/embed/AB_qEMwNQE8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
ドリル7 文章の表示
問題
次の文章を貼り付けてHTMLファイルを作成して表示してください。
・点線内に表示されているものと同じように見えるようにしましょう。
※点線は、表示しなくていいです。
・１行目のタイトルをヘッダタグでセットしてください。
・一番したの会社名をセンター表示にしてください。
株式会社MYNTのコンセプト
株式会社MYNTは、
「まだ、世の中に、無いモノを、創る」
をモットーに活動している会社です。
インターネットやIoTなど、デジタルに関する製品やサービスを、プログラミングを通して構築するITクリエーター会社です。
面白いと思った事は、時間を惜しまずトライする精神で日々頑張っています。
Podcastや、Kindle書籍など、アウトプットしているコンテンツもたくさんあるので、興味の有る人は是非お便りをお寄せくださいませ。
© 株式会社 MYNT
ヒント
・改行されない時は、どうすればいいか考えてみよう！
・太字の部分にもちょっと注目してみよう！
解答
<h1>株式会社MYNTのコンセプト</h1>
株式会社MYNTは、<br>
「<b>ま</b>だ、<b>世</b>の中に、<b>無</b>いモノを、<b>創</b>る」<br>
をモットーに活動している会社です。<br>
<br>
インターネットやIoTなど、デジタルに関する製品やサービスを、プログラミングを通して構築するITクリエーター会社です。<br>
<br>
面白いと思った事は、時間を惜しまずトライする精神で日々頑張っています。<br>
<br>
Podcastや、Kindle書籍など、アウトプットしているコンテンツもたくさんあるので、興味の有る人は是非お便りをお寄せくださいませ。
<center>© 株式会社 MYNT</center>
