どうもこんにちは。
HTMLの基礎講座を終えたので、練習問題はないかな～？とググっていたら
いいサイトを見つけたのでやってみました。
それがクリエータークエストの練習問題１「ボブのお願い」です。
もちろん無料でできて、とてもわかりやすかったです。
これからHTMLを勉強する方はクリエータークエストさんの項目にそるとわかりやすいかもしれません。
基礎編はコチラから。（もちろん無料です！）
解説はコチラからどうぞ。
HTMLを使って同じサイトをつくってみよう！という問題です。
やってみると全然わからなくて、調べながらなんとかできましたが
できた達成感はとっても嬉しかったです。
ただ、私はテックアカデミーさんでHTMLは学んだので
一緒にこちらで学んだ人はどう振り返ればいいか参考になるかと思い、
テックアカデミーさんの項目に沿ってHTMLのサイトを作ってみたので説明しますね！
（順番はクリエータークエストさんに沿っていきます）
練習の概要
今までのHTMLの技術をフル活用して
ボブ（って誰だろう）のお父さんのサイトにある
「よくある質問ページ」を作ってみましょう！と。
目標タイム
なんと20分！
みんなも時計をみながらスタートしてみよう！
完成イメージ
サイトではフレームに埋め込んでありましたが、
私にはそんな技術はないためコチラをご覧ください。
まぁ、サイト紹介するのでサイトに沿ってやってください！といえばそれまでなんですが、
参考までにね！笑
この練習問題には各項目の目標時間も細かく設定されているので
慣れてきたら各項目の時間も意識するといいかもしれないです。
問題
HTMLの全体構造
HTMLに必要な基本的な要素を記述しましょう！
（問題と参考にしたテックアカデミーさんのyoutubeのページを載せています。）
①HTML5のDOCTYPE宣言を適切な箇所に記述してください
テックアカデミーでいうと(1-3)、私の記事でいうとHTML第3回。
<!doctype html>ですね
②以下の全体構造の要素を適切な箇所に記述してください
<html>要素 （lang属性: “ja”）<head>要素<body>要素<title>要素
・<html><head><body>は
テックアカデミーでいうと(1-3)
<title>は
テックアカデミーでいうと(1-4)
私の記事にはまとめてHTML第4回にのってるよ！
③以下の文字列を<title>要素内に記述してください
- 文字列「よくある質問 | 架空の株式会社ダミー」
④<meta>要素のcharset属性を用いて文字コードを「UTF-8」に設定してください
あ！これもさっきとおなじ
テックアカデミーでいうと(1-4)
私の記事だとHTML第4回にのってるね！
テキスト関連の要素
文章を配置し、見出しや段落などのテキスト関連の要素を記述しましょう～！
⑤<body>要素内に以下の文字列を貼り付けてください
よくある質問
株式会社ダミーによくご質問頂く内容を、Q&A集としてまとめました。
当社についてのQ&A
何をやっている会社ですか？
お客様のために最高品質の架空の製品をつくる会社です。
御社の今後の方向性はなんですか？
「お客様のためなら何でもする」という経営方針のもと、
架空の製品を開発し、国内で一番の架空の会社を目指します。
サービスについてのQ&A
カスタマイズはできますか？
はい、可能です。
お客様のご要望に合わせて架空の製品をカスタムします。
注文してから何日ぐらいで納品されますか？
国内であれば最短6時間で納品致します。
ただし下記の場合は納品に1日〜3ヶ月程度かかります。
海外からのご注文の場合
台風や地震などの災害が発生した場合
採用についてのQ&A
アルバイトから社員になれますか？
もちろん可能です。
頑張り次第で、アルバイト -> 契約社員 -> 正社員になれます。
社員に求める能力ベスト3はなんですか？
忍耐力
持久力
コミュニケーション能力
離職率はどれくらいですか？
入社後1年以内の離職率はわずか87%です。
© 2016 株式会社ダミー All Rights Reserved.
これはコピーして、<body></body>の中に張り付けるだけだね！
⑥
- 文字列「&」
- 文字列「>」
- 文字列「©」
これが！わからなかった！
エスケープとかいうみたいだけどわからなかったので
テックアカデミーさんのマガジンから探したよ！
&、>、©の使い方！
⑦以下の文字列を適切な見出しにしてください
- 文字列「よくある質問」
- 文字列「当社についてのQ&A」
- 文字列「サービスについてのQ&A」
- 文字列「採用についてのQ&A」
テックアカデミーでいうと(2-1)
私の記事だとHTML第5回にのってるね！
<h1>~<h2>かな？
⑧以下の文字列を段落にしてください
- 文字列「株式会社ダミーによくご質問頂く内容を、Q&A集としてまとめました。」
- 文字列「© 2016 株式会社ダミー All Rights Reserved.」
段落<p>もさっきと同じ範囲にあったね！
リスト関連の要素
箇条書きや用語説明型リストを記述しましょう。
⑨以下の範囲の文章をよく読み、質問文を用語、回答を説明とする用語説明型リストを作成して下さい。
- 文字列「何をやっている会社ですか？」〜 文字列「国内で一番の架空の会社を目指します。」
- 文字列「カスタマイズはできますか？」〜 文字列「台風や地震などの災害が発生した場合」
- 文字列「アルバイトから社員になれますか？」〜 文字列「入社後1年以内の離職率はわずか87%です。」
テックアカデミーでいうと(3-2)
私の記事だとHTML第11回にのってるね！
質問と回答は<dl><dt><dd>で習ったね！
はい、休憩代わりの癒しっこです。
⑩以下の範囲の文章をよく読み、順不同型リストを作成して下さい。
- 文字列「海外からのご注文の場合」〜 文字列「台風や地震などの災害が発生した場合」
テックアカデミーでいうと(3-1)
私の記事だとHTML第10回にのってるね！
順不同リストは<ul>と<li>だね！
⑪
- 文字列「忍耐力」〜 文字列「コミュニケーション能力」
これもさっきの⑩と同じ項目にあったね！
番号の場合は<ol>と<li>だね！
テキスト関連のフレージング・コンテンツ
改行や強調、重要など文章の一部に意味や役割を持たせましょう！
⑫以下の箇所で改行を行って下さい
- 文字列「はい、可能です。」の後
- 文字列「国内であれば最短6時間で納品致します」の後
- 文字列「もちろん可能です。」の後
テックアカデミーでいうと(2-5)
私の記事だとHTML第9回にのってるね！
改行は<br>だったね。
⑬以下の文字列を強調して下さい
- 文字列「お客様のためなら何でもする」
- 文字列「わずか」
テックアカデミーでいうと(2-2)
私の記事だとHTML第6回にのってるね！
強調は<em>だね。
⑭以下の文字列を重要にして下さい
- 文字列「国内で一番の架空の会社を目指します。」
重要タグは<strong>だね。さっきの⑬にもでてきたね！
おめでとう～！！
どうかな？できてました？
きのみさんは1時間とかかかったよ。
みんなはどうかな。
基礎のところをしっかりできるのはいいよね！
ちなみに私はこう
- <!doctype html>
- <html lang="ja">
- <head>
- <meta charset="UTF-8">
- <title>よくある質問 | 架空の株式会社ダミー</title>
- </head>
- <body>
- <h1>よくある質問</h1>
- <p>株式会社ダミーによくご質問頂く内容を、Q&A集としてまとめました。</p>
- <h2>当社についてのQA</h2>
- <dl>
- <dt>何をやっている会社ですか？</dt>
- <dd>お客様のために最高品質の架空の製品をつくる会社です。</dd>
- <dt>御社の今後の方向性はなんですか？</dt>
- <dd><em>「お客様のためなら何でもする」</em>という経営方針のもと、
- 架空の製品を開発し、<strong>国内で一番の架空の会社を目指します。</strong></dd>
- <h2>サービスについてのQ&A</h2>
- <dl>
- <dt>カスタマイズはできますか？</dt>
- <dd>はい、可能です。<br>
- お客様のご要望に合わせて架空の製品をカスタムします。</dd>
- <dt>注文してから何日ぐらいで納品されますか？</dt>
- <dd>国内であれば最短6時間で納品致します。<br>
- ただし下記の場合は納品に1日〜3ヶ月程度かかります。
- <ul>
- <li>海外からのご注文の場合</li>
- <li>台風や地震などの災害が発生した場合</li>
- </ul>
- </dd>
- <h2>採用についてのQ&A</h2>
- <dl>
- <dt>アルバイトから社員になれますか？</dt>
- <dd>もちろん可能です。<br>
- 頑張り次第で、アルバイト -> 契約社員 -> 正社員になれます。</dd>
- <dt>社員に求める能力ベスト3はなんですか？</dt>
- <dd>
- <ol>
- <li>忍耐力</li>
- <li>持久力</li>
- <li>コミュニケーション能力</li>
- </ol>
- </dd>
- <dt>離職率はどれくらいですか？</dt>
- <dd>入社後1年以内の離職率は<em>わずか</em>87%です。</dd>
- <p>
- © 2016 株式会社ダミー All Rights Reserved.
- </p>
- </body>
- </html>
まだ綺麗に書くとか、インデントをそろえるとかが難しいけど、
クリエータークエストは練習問題がたくさんあってよさそうだったから
ぜひみんなもやってみてね！
私も挑戦したのがあってわからないことがあったら
また教えます！
今回やったのがクリエータークエストさんの
練習問題１「ボブのお願い」です。
HTMLの基礎編はコチラから。（もちろん無料です！）
ではまたね！