実践コーディングスキル ー 第11章 チャレンジ

NESTschool公式サイトをマークアップしてみよう

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

チャレンジ内容

今まで学んだHTMLとCSSの知識をフル活用して、Webサイトを一人でマークアップしてみましょう。



使用するファイル

・「チャレンジ」フォルダの中の、「index.html」
・「チャレンジ」フォルダの中の、「style.css」
・「チャレンジ」フォルダの中の、「トップページ.psd」(デザイン確認用)



進め方

01.大枠のレイアウトを組んでみよう

トップページ.psdを見て、必要なグループがいくつあるか、見てみましょう。
ここでは、
・ヘッダー
・講座紹介
・料金体系
・フッター
の4つのグループがある事がわかります。
トップページ.psdを参考に、<header>タグ、<div>タグ、<footer>タグを利用して、それぞれのグループの横幅と縦幅を設定しよう。




02.ヘッダーをマークアップしよう

02-1. 上のラインを表示させよう
ヘッダーの上部にある、ピンクのラインを、CSSを使って表現してみましょう。
使用するcss:border
borderに関する動画:境界線をつけるborderプロパティの書き方(動画ID:133613897)




02-02. 真ん中寄せのレイアウトを組もう
ロゴとナビゲーションを、真ん中寄せに配置するための、<div>タグを新たに用意しましょう。
トップページ.psdを参考に、横幅と縦幅、必要な余白を入力し、<div>タグを真ん中に寄せます。
使用するcss:width、height、margin、padding
横幅と縦幅に関する動画:タグの横幅と縦幅の指定方法(動画ID:133616271)
真ん中寄せに関する動画:サイト全体を中央寄せ、センタリングする方法(動画ID:133616272)




02-03. ロゴを配置しよう
画像「logo.png」を表示させよう。サイトタイトルなので、見出しタグの付与を忘れずに!
使用するhtml:<img /> <h1>
画像の表示に関する動画:画像を表示する<img>タグの書き方(動画ID:133431722)




02-04. 横並びナビゲーションを表示させよう
トップページ.psdのナビゲーションと同じ表示になるように、マークアップしていきましょう。
同じ要素が複数並んでいる場合は、リストタグを利用します。
クリックすると別ページへリンクさせたいので、アンカータグも合わせて付与しましょう。
使用するhtml:<nav>、<ul>、<li>、<a>
使用するcss:float、font-size、margin、padding、border、color
横並びのナビゲーションに関する参考動画:floatを利用した横並びのナビゲーションを作ってみよう(動画ID:133616278)




02-05. ロゴとナビゲーションを左右に並べよう
縦に並んでいるロゴとナビゲーションを、デザインと同じになるようにfloatタグを使って左右に並べましょう。
位置の調整を、marginプロパティを使用して行います。
使用するcss:float、margin
タグを左右に並べる参考動画:floatを利用した横並びのナビゲーションを作ってみよう(動画ID:134168696)




03.メイン画像をマークアップしよう

03-1.背景画像を表示させよう
backgroundプロパティを利用して、背景画像を表示させましょう。
使用するcss:background
背景画像の参考動画:背景に画像を設定する方法(動画ID:133614074)




03-2.キャッチコピーを完成させよう
まずは必要なテキストを全てhtmlファイル上に入力しましょう。
動画の中では、<p>、<dl>、 <dt>、<dd>、<img>、<a>タグを利用していますが、全て<p>タグや、他のタグを利用していただいてもかまいません。
必要な文字を入力できたら、CSSを記述していきます。
ここでは、文字のサイズや色、余白の調整等を、デザインと同じになるように調整していきましょう。
使用するcss:width、height、font-size、color、margin、padding
外側余白を調整する参考動画:外側の余白を調整するmarginプロパティの書き方(動画ID:133533370)
内側余白を調整する参考動画:内側の余白を調整するpaddingプロパティの書き方(動画ID:133613897)
文字の大きさを調整する参考動画:フォントの大きさを指定するfont-sizeの書き方(動画ID:133532758)





04.講座紹介部分をマークアップしよう

04-1.まずはレイアウトを組もう
「トップページ.psd」を参考に、2カラムのレイアウトを組んでいきます。
使用するcss:width、height、float、clear
2カラムレイアウトの参考動画:Webサイトを2カラムレイアウトにする方法(動画ID:133616275)




04-2.見出しを作成しよう
<h3>タグを使って、見出しをマークアップしましょう。
デザインと同じになるように、見出しの下に白い境界線を表現していきます。
使用するhtml:<h3>、<span>
使用するcss:color、font-size、border、margin、padding¥
参考動画:borderプロパティを利用した、見出しを作ってみよう(動画ID:134475729)




04-3.講師紹介をマークアップしよう
同じような要素が並んでいるので、<ul><li>タグを利用してマークアップしていきましょう。
もちろん、他のタグを利用してもかまいません。
使用するhtml:<ul>、<li>、<dl>、<dt>、<dd>など
使用するcss:color、font-size、width、height、margin、paddingなど
参考動画:floatを利用した横並びのナビゲーションを作ってみよう(動画ID:133616278)




04-4.コース紹介をマークアップしよう
同じような要素が並んでいるので、こちらも<ul><li>タグを利用してマークアップしていきましょう。
もちろん、他のタグを利用してもかまいません。
背景画像を利用して、それぞれの<li>タグに異なるアイコンを表示させていきます。
使用するhtml:<ul>、<li>、<a>
使用するcss:border、width、height、background、margin、padding、display
参考動画:背景画像を利用したリストアイコンの表示方法(動画ID:133616234)





05.料金部分をマークアップしよう

05-1.まずはレイアウトを組もう
「トップページ.psd」を参考に、3カラムのレイアウトを組んでいきます。
使用するcss:width、height、float、clear、margin、padding
2カラムレイアウトの参考動画:Webサイトを2カラムレイアウトにする方法(動画ID:133616275)




05-2.見出しを作成しよう
<h3>タグを使って、見出しをマークアップしましょう。
講師紹介部分の見出しとデザインがほぼ同じになるので、class属性を利用してCSSを節約しましょう。
参考動画:classセレクタの使い方(動画ID:133616294)




05-3.必要なテキストを入力し、CSSを記述しよう
利用するタグは様々ですが、動画の中では<dl>、<dt>、<dd>タグ(定義型リスト)を利用しています。
もちろん、他のタグを利用してもかまいません。
使用するhtml:<ul>、<li>、<dl>、<dt>、<dd>など
使用するcss:color、font-size、width、height、margin、paddingなど
参考動画:第15回:定義型リストを利用して記事一覧をマークアップしよう(動画ID:134170138)
参考動画(2) :定義型リストを作成する方法(動画ID:133430116)






06.フッター部分をマークアップしよう

06-1.コピーライトを入力し、デザインを完成させよう
テキストを入力し、背景の色を設定しましょう。
使用するhtml:<p>
使用するcss:text-align、color、margin、padding