実践コーディングスキル - 第6章 Lesson1

第1回:下層ページ用にファイルを複製しよう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

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

下層ページ用にファイルを複製する方法を解説しています。
ここでは、トップページのhtmlファイルを複製し、必要のないタグを削除します。


この動画で学べること

・メニュー一覧ページのための新規ファイルを作成する方法


メニュー一覧ページのための新規ファイルを作ろう

トップページを複製して、メニュー一覧ページのための新規ファイルを作っていきましょう。
トッページのHTMLファイルを全て選択してコピーし、menu.htmlに貼り付けます。
menu.htmlにトッページのコードが表示されたら、中身を書き換えていきましょう。
まずはメイン画像だった部分を見出しに変更したいのですが、<img>タグが入っているので<h2>タグで「メニュー一覧」の文字を囲んでいきましょう。
また、コメントアウトも「メイン画像」を「中みだし」に変えてわかりやすくしておきましょう。



<!-- 中みだしここから -->

<h2 id="heading" class="box_shadow">メニュー一覧</h2>

<!-- 中みだしここまで -->



ではCSSに見出しのスタイルを書くためのコメントアウトをしましょう。
HTMLをファイルはページごとに分ける必要がありますが、CSSは1サイトに1つで大丈夫なので、トップページの次に書いていってください。
次回、見出しのスタイルを書いていきたいと思います。