HTMLスキル ー 第6章 チャレンジ

テキスト系タグを使った、カフェメニューページを作ろう!

このスキルのデータをダウンロード: Windows Mac

チャレンジ内容

素材ダウンロードサイトを作ってみましょう。



使用するファイル

・チャレンジフォルダの中の「start」フォルダに入っている、「index.html」に記述していきましょう。



進め方

01.適切な見出しの設定をしよう

・コンテンツの見出し、「Drink Menu」「Ranking」を見出し2に定義しましょう。
・見出し2のしたの説明文を<p>タグで囲みます。




02.メニューの部分に必要なタグを書いていこう

・cafeメニューは、見出し3で定義します。
・見出し3のしたの説明文を<p>タグで囲みます。
・メニューとメニューの間の先は<hr>タグで記述します。





03.ランキングの作成をしよう

・それぞれの文章を<li>タグで囲みます。
・今回はリストのアイコンを数字にしたいので、<li>タグを<ol>で囲みます。




これで、このようなcafeメニューのページが完成します。
みなさんもぜひチャレンジしてみてください。