この記事では、デザインデータからHTML, CSSのコーディングを行う練習をしていきます。
今回は簡単なブログサイトのトップページの作成をしていきます。
はじめは難しいと感じると思いますが、ひとつひとつ確認しながら学習していきましょう。
- Adobe XDのデザインデータからコーディングする方法
- Adobe XDから画像のデータを書き出す方法
- デザインデータを見て、HTMLの構造を把握する方法
はじめに
今回の練習をするにあたって、必ずやって欲しいことが３点あります。
わからなかったところをメモに残す
わからなかったところを調べる
この記事の内容を必ず復習する
上記の作業も併せてやっていただけると、この記事の内容の理解が深まります。
動画でも解説してます！
この記事と同じ流れを制作動画にしていますので、併せてご覧いただけるとより理解が深まるかと思います。
練習を始める準備をする
まず始めに、以下のダウンロードボタンから「練習用の教材」をダウンロードしましょう。
この配布した教材を使用して、練習を進めていきます。
圧縮ファイルとしてダウンロードされるので、「解凍（展開）」してファイルの中身を確認してください。
ダウンロードしたファイルの確認
ダウンロードした「zpm-coding-practice.zip」を解凍すると、以下の教材が使用できるようになります。
配布教材に入っているもの
- srcフォルダ：練習に使用するhtmlファイルなどが入っている
- zpm-coding-practice.xd：練習に使用するデザインが確認できる
内容が確認できましたら、次の手順に進んでいきましょう。
XDで制作するデザインを確認する
まずは、「zpm-coding-practice.xd」を開きましょう。
Adobe XDでデザインデータを開き、練習用の教材のデザインを確認しましょう。
※xdファイルが開けない場合、こちらをクリックしてデザインデータを確認してください。
VSCodeで編集するフォルダを開く
次は、VSCode（以降：エディタ）を開いて、「src」フォルダを開きましょう。
この状態で「srcフォルダ」内のHTMLファイルとCSSファイルを編集していきます。
VSCodeについての復習
VSCodeの使い方については、「Visual Studio Codeの導入」記事をご覧ください。
Google ChromeでHTMLを表示する
次は、Google Chrome（以降：ブラウザ）に編集するHTMLファイルを表示する。
VSCodeのインストール記事で紹介した「Live Server」を使って、HTMLをブラウザに表示させます。
Live Serverをインストールしていると、画像の通りにエディタの右下に「Go Live」という項目が表示されます。
「Go Live」をクリックしてLive Serverを起動し、HTMLファイルをブラウザで表示しましょう。
Live Serverについての復習
Live Serverは、以下の記事でインストール方法を説明しました。
もし、インストールを忘れてしまっている方は、以下の記事を参考にしてインストールを行ってください。
起動すると、自動的にGoogle Chromeが起動されます。
画像のように、白紙の「index.html」が表示されていれば成功です。
Live Serverはファイルを編集した後、保存をするたびに自動でブラウザが更新されます。
（１度起動すれば、その後は自動でブラウザを更新してくれるので、何度も「Live Server」を起動する必要はありません。）
検証ツールでブラウザをスマホの表示にする
今回の練習では、スマホ版のデザインのみコーディングしていきます。
なので、ブラウザ上の見た目をスマートフォンで閲覧した時の状態に近づけていきます。
ブラウザの画面を右クリックし、メニューの「検証」をクリックする
ブラウザを右クリックし、「検証」をクリックします。
「Toggle device toolbar」 をクリックする
次に「Toggle device toolbar」（スマホとタブレットのアイコンのボタン）をクリックします。
「Dimensions」から「iPhone SE」を選択する
次に「Dimensions」から「iPhone SE」をクリックします。
上記の作業をすることで、ブラウザをスマホの表記に近い形で確認することができます。
モバイルファーストの復習
今回の練習は、「モバイルファースト」という考え方に基づいて作業を進めていきます。
モバイルファーストについては、以下の記事で詳しく解説しています。
まだ読んだことがない方は、一読しておくと今回の練習の理解がより深まります。
ここまでの作業のまとめ
- 教材を解凍する
- Adobe XDでデザインデータを開く
- VScodeで教材のフォルダを開く
- Google Chromeで「index.html」をLive Serverを使用して開く
- 検証ツールでスマートフォンの見た目に近づける
ここまでの作業で、練習を始める準備ができました。
実際の授業でも上記の操作を行なってもらいますので、今のうちから慣れておきましょう。
画像素材を準備する
次に、デザインデータの中からコーディングで使用する画像を準備していきましょう。
デザインデータから画像を保存することを「書き出し」と言います。
今後よく目にする単語になりますので、覚えておきましょう。
画像を書き出し対象にする
「画像」を右クリックして、「書き出し対象にする」をクリックする
XDのデータの画像を個別に保存できるよう設定していきます。
「画像」を右クリックして、「書き出し対象」にしましょう。
今回の教材デザインデータの中にある全ての画像を書き出し対象にしていきましょう。
画像を書き出す
「ファイル」から「書き出し」、「全ての書き出し対象」をクリックする
書き出し対象に設定した画像を保存していきます。
画像を書き出す際に、「全ての書き出し対象」を選択すると、
書き出し対象にした全ての画像を一括で保存することができます。
「imgフォルダ」を指定し「書き出し」をクリックする
書き出した画像は、今回の練習教材の「imgフォルダ」の中に保存しましょう。
写真の画像を使っていくので、画像のフォーマットは「JPG」に変更します。
書き出しサイズを「Web」に設定し、書き出しをクリックします。
画像を選別する
書き出された画像から「@2x」以外の画像を削除する
XDでWeb用に画像を書き出すと、「通常の大きさの画像」と「２倍の大きさにした画像」の２つが書き出されます。
画像の解像度の都合で、今回は「２倍の大きさ」の画像を使っていきます。
なので、「画像の名前@2x.jpg」という名前になっている画像だけを残し、他の画像は消してしまいましょう。
画像の名前から「@2x」を消す
次に、右クリックして「画像の名前の変更」を行います。
画像の名前から「@2x」の部分を消して、画像のようにしましょう。
ここまでの作業のまとめ
- 画像を書き出し対象にする
- 「imgフォルダ」に全ての画像を書き出す
- 書き出された画像から「@2x」以外の画像を削除する
- 画像の名前から「@2x」を消す
ここまでできれば、画像素材の準備は完了です。
フォントを準備する
次は、今回のWebサイトで使用するフォントの準備を行います。
デザインデータのテキストに対して、どんなフォントが適用されているのか確認してみましょう。
今回は、「源ノ角ゴシック JP（Noto Sans JP）」というフォントが使用されています。
丁寧なデザインデータであれば、「スタイルガイド」も用意されているので、そちらから確認することができます。
Google Fontsからフォントを読み込む
次は、Google Fontsからフォントを探し、読み込みを行います。
今回のデザインデータで使用されているフォントは「源ノ角ゴシック JP」になります。
Google Fontsでは、「Noto Sans Japanese」という名前になっているので、この名前で検索しましょう。
フォントの読み込みの復習
Webフォントの読み込みに関しても、別の記事で解説しています。
復習が必要な方は、以下の記事を見ながら作業を進めていきましょう。
フォントの読み込みのまとめ
- Google Fontsから使用するフォントを読み込む
- HTML,CSSにフォントの読み込みに必要なコードを記述する
ここまでの作業ができたら、コーディングを始める準備は完了です。
コーディングしてみよう
それでは、コーディングの作業を行っていきます。
コーディングを行う際は、いきなりコードを記述せず、「サイトのデザインをよく確認すること」が大切です。
コーディングの流れ
- デザインデータから構造を確認する
- HTMLでサイトの構造を記述する
- デザインデータからプロパティと余白を確認する
- CSSでサイトのスタイルを記述する
上記の流れを意識して、実際にコーディングを行っていきます。
全体のスタイル
body {
/*テキストの色を指定*/
color: #333;
/*フォントの種類を指定*/
font-family: "Noto Sans JP", sans-serif;
/*デフォルトのフォントの大きさを指定*/
font-size: 16px;
/*行間を指定*/
line-height: 1.75;
/*字間を指定*/
letter-spacing: 0.1em;
}まずは、サイト全体に適用させるスタイルを記述しておきます。
「style.css」に上記のコードを記述しましょう。上記のコード内では主に、サイト全体のテキストに関するスタイルの指定を行っています。
ヘッダーを作る
次に、サイトのヘッダーを作っていきます。
デザインデータから構造を確認する
XDを用いてデザインデータの確認をしていきましょう。
デザインの確認をする際は、どのような構造になっているかを把握することが大切です。
慣れないうちは、デザインデータだけでなく、紙とペンを用意して構造を書きながら練習しましょう。
ヘッダーの中には、「サイトのタイトル」と「文章」が存在しています。
補足※画像で薄く灰色になっている構造は、PC版のデザインになった時に必要な構造になります。
スマホ版のみの練習を進めていくので、今回はあまり気にする必要はありません。
HTMLでサイトの構造を記述する
<header class="header">
<div class="header-inner">
<h1 class="logo">
<a href="index.html" class="logo-link">ZeroPlus Blog</a>
</h1>
<p class="header-heading">日々の学習を記録するブログ</p>
</div>
</header>先ほど確認したデザインの通りにHTMLの構造を記述していきます。
エディタを使って、教材用のファイルを編集していきます。
サイトのタイトルは、クリックすると「トップページ（最初のページ）」に戻れるようにするので、aタグを入れておきましょう。
デザインデータからプロパティ、余白を確認する
構造を記述したら、デザインの通りに見た目を整えていきます。
Adobe XDで要素を選択（クリック）し、「フォントの大きさ」や「色」などのプロパティを確認しましょう。
補足
- フォントの種類（
font-family） - 字間（
letter-spacing） - 行間（
line-height）
今回の練習では、コーディングの一番初めに、サイト全体のスタイルとして上記３つの項目を記述してあります。
また、要素の間の余白も確認する必要があります。
画像の例では、ヘッダーには上下16pxずつ内側の余白が空いています。
このような余白の大きさは、デザインデータの値を汲み取ってコードに落とし込んでいきます。
CSSでサイトのスタイルを記述する
デザインデータのプロパティの確認ができたので、スタイルの記述をしていきましょう。
.header {
/* 上下に内側の余白 */
padding: 16px 0;
/* テキストを中央寄せする */
text-align: center;
}
スタイルを記述/変更したら、ブラウザでページ確認します。
同じようにして他の要素にもスタイルを記述していきましょう。
.logo {
color: #ff7f00;
font-size: 24px;
font-weight: bold;
}
.header-heading {
font-size: 14px;
/* ロゴとの間の余白 */
margin-top: 8px;
}
上記のスタイルを記述したら、画像のようなサイトの見た目になっていれば大丈夫です。
※画像は少し拡大表示しているので、皆さんの画面でもご確認ください。
ここまでの一連の作業が、Webサイト制作の基本的な流れになります！
ヘッダーから下の構造も、同じ要領で進めていきましょう！
コンテンツの入れ物を作る
次に、サイトのコンテンツの入れ物となる構造を作っていきます。
デザインデータから構造を確認する
サイト全体のコンテンツの入れ物として「divタグ（div.top-container）」を作成します。
その中に、mainタグとasideタグが入るように構造を作ります。
- mainタグ：投稿記事の内容を入れていく構造
- asideタグ：サイドバーの内容を入れていく構造
HTMLでサイトの構造を記述する
<div class="top-container">
<main class="main">
<!-- ブログの投稿が入る構造 -->
</main>
<aside class="aside">
<!-- サイドバーの内容が入る構造 -->
</aside>
</div>先ほどの構造をHTMLで表すと上記のコードになります。
現状、ブラウザを更新しても見た目上は変化がないので、そのまま次の工程へ進みましょう。
デザインデータからプロパティと余白を確認する
構造を記述したら、デザインの通りに見た目を確認していきます。
CSSでサイトのスタイルを記述する
デザインデータのプロパティの確認ができたので、スタイルの記述をしていきましょう。
.top-container {
/* PCのサイズになった時のために横幅に制限を付ける */
max-width: 1080px;
width: 92%;
/* 左右に中央寄せ*/
margin: 0 auto;
/* フッターとの余白*/
padding-bottom: 64px;
}
.main {
width: 100%;
}
.aside {
/*mainとの余白*/
margin-top: 64px;
}上記の構造は中身がまだ何も入っていないので、ブラウザ上の見た目上に今のところ変化はありません。そのまま次の工程へ進みましょう。
投稿記事の構造を作る
次に、mainタグの中の投稿記事の構造を作っていきます。
デザインデータから構造を確認する
mainタグの中に、投稿記事をまとめるための「divタグ（div.posts）」を作ります。
divタグ（div.posts）の中に作る記事の構造も確認していきましょう。
デザインデータでは、６個も記事があるので混乱してしまうかもしれません。
ですが、焦らず１つだけ構造を確認していってください。
複数個ある要素は、１つの構造を詳しく分析するだけで大丈夫です。
構造は、１つ１つ分解しながら確認していきます。
このように、細かく構造を考えながらコードを記述すると、構造を考えずいきなりコードを書き始めてしまうよりも綺麗なコードに仕上がります。
HTMLでサイトの構造を記述する
<div class="posts">
<article class="post">
<a href="" class="post-thumb-wrapper">
<img
src="img/thumb_article.jpg "
alt=""
width="686"
height="384"
class="post-thumb"
/>
</a>
<div class="post-txts">
<h3 class="post-title"><a href="">初心者のやりがちなミス</a></h3>
<p class="post-content">
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。な…
</p>
<div class="post-btn-wrapper">
<a href="" class="post-btn">続きを読む</a>
</div>
</div>
</article>
</div>mainタグの中に上記のコードを記述します。
imgタグには横幅と高さをあらかじめ指定することで、「レイアウトシフト」という現象を避けることができます。（少し発展的な話なので、今回は「画像には横幅と高さを記述するんだなぁ」くらいの感覚で大丈夫です。）
ブラウザを確認します。
デザインデータからプロパティと余白を確認する
このような余白の値もデザインデータの値を汲み取ってコードに落とし込んでいきます。
CSSでサイトのスタイルを記述する
デザインデータのプロパティの確認ができたので、スタイルの記述をしていきましょう。
記事全体のコード
.post {
padding-bottom: 32px;
border-bottom: 1px solid #ccc;
}
/* １番目の記事以外の上に余白を付ける */
.post:not(:first-child) {
margin-top: 32px;
}
記事の画像のコード
.post-thumb-wrapper {
width: 100%;
display: block;
flex-shrink: 0;
}
記事のテキスト類のコード
.post-txts {
margin-top: 8px;
}
.post-title {
font-size: 18px;
font-weight: bold;
}
.post-content {
color: #999;
font-size: 14px;
font-weight: bold;
margin-top: 8px;
}
.post-btn-wrapper {
/*記事の文章との余白*/
margin-top: 40px;
text-align: right;
}
.post-btn {
color: #ff7f00;
font-size: 14px;
font-weight: bold;
}
スタイルを記述/変更したら、ブラウザを確認しましょう。
上記の状態になっていれば大丈夫です。
投稿記事の構造を複製する
次に、作成した投稿記事を増やしていきましょう。
投稿記事が全部で６個になるようにしていきます。
「articleタグ」を折りたたむ
次に、作成した投稿記事を増やしていきましょう。
HTMLのタグを複製するときは、操作ミスを避けるために
開始タグと閉じタグを選択しやすくなるように折りたたみます。
「articleタグの開始タグと終了タグ」をまとめて選択する
そして、articleタグの「開始タグ」と「終了タグ」をまとめて選択します。
VSCodeの行数の箇所をクリックし、ドラッグすると選択がしやすいかと思います。
「真下に複製」のショートカットを使用して複製する
「真下に複製」のショートカットを使用して、articleタグを増やしていきます。
（Windows：Alt Shift ↓、Mac：option Shift ↓）
それぞれの記事で読み込む画像を変える
複製が終わったら、読み込む画像を変えていきましょう。
全ての記事が「imgフォルダ」の中にある「thumb_article.jpg」という名前の画像を読み込んでいる状態になっています。
デザインデータ通りに、それぞれの記事に対応する画像を読み込むようにしていきましょう。
ここまでで「ヘッダーから投稿記事の一覧」が完成しました。
残すところは「サイドバー」と「フッター」のみです！
もう少し頑張って続けていきましょう！
サイドバーを作る
次に、サイドバーの構造を作っていきます。
デザインデータから構造を確認する
「aside」の中には「おすすめ」と「バナー」をまとめているグループがあります。
「おすすめ」のグループは「divタグ（div.recommend）」という構造で表しています。
その中には、「見出し」と、おすすめのものを紹介する「リスト」が存在します。
「バナー」のグループは「divタグ（div.aside-bnrs）」という構造で表しています。
その中には、「リンクを持つバナー画像」が３つ入っています。
ここまで構造が確認できれば、サイドバーの構造は大丈夫です。
HTMLでサイトの構造を記述する
<div class="recommend">
<h2 class="recommend-title">おすすめ記事</h2>
<ul class="recommend-list">
<li class="recommend-item">
<a href="" class="recommend-item-link">・web制作</a>
</li>
<li class="recommend-item">
<a href="" class="recommend-item-link">・プログラミング</a>
</li>
<li class="recommend-item">
<a href="" class="recommend-item-link">・webデザイン</a>
</li>
<li class="recommend-item">
<a href="" class="recommend-item-link">・マーケティング</a>
</li>
</ul>
</div>
<div class="aside-bnrs">
<a href="" class="bnr-item">
<img
src="img/bnr_advertising.jpg"
alt=""
width="686"
height="272"
class="bnr-img"
/>
</a>
<a href="" class="bnr-item">
<img
src="img/bnr_advertising02.jpg"
alt=""
width="686"
height="272"
class="bnr-img"
/>
</a>
<a href="contact.html" class="bnr-item">
<img
src="img/img_contact-form.jpg"
alt=""
width="686"
height="272"
class="bnr-img"
/>
</a>
</div>asideタグの中に上記のコードを記述します。
HTMLが書けたらブラウザで確認してみましょう。
画像のような状態になっていれば大丈夫です。
次は、サイドバーの見た目を整えていきましょう。
デザインデータからプロパティと余白を確認する
XDのデザインデータを確認して、余白やプロパティを確認します。
バナーの画像の箇所の余白も忘れずに確認しましょう。
CSSでサイトのスタイルを記述する
デザインデータでプロパティの確認ができたので、スタイルの記述をしていきましょう。
.aside {
display: flex;
/*「おすすめ」と「バナー」の間の余白*/
gap: 40px;
flex-direction: column;
}「おすすめ」と「バナー」との間に余白をあけるために、「display: flex;」と「gapプロパティ」を用いて余白をあけます。
.recommend {
width: 100%;
}
.recommend-title {
color: #ff7f00;
font-size: 20px;
font-weight: bold;
}
.recommend-list {
/*見出しとの余白*/
margin-top: 16px;
}
.recommend-item {
/*下線との余白*/
padding-bottom: 8px;
border-bottom: 1px solid #ccc;
}
/*１番目のliタグ以外に上の余白*/
.recommend-item:not(:first-child) {
margin-top: 8px;
}
.recommend-item-link {
display: block;
}
/*上下の余白をつけるためにブロック要素に変更*/
.bnr-item {
display: block;
}
/*１番目のバナー以外に上の余白*/
.bnr-item:not(:first-child) {
margin-top: 16px;
}
スタイルを記述/変更したら、ブラウザを確認しましょう。
画像のようにスタイルが変わっていれば大丈夫です！
フッターを作る
最後に、フッターの構造を作っていきます。
デザインデータから構造を確認する
「フッター」の中には著作権表記のテキストが入っています。
このような構造のフッターはよく見かけるものですので、デザインの知識として覚えておきましょう。
HTMLでサイトの構造を記述する
<footer class="footer">
<small class="footer-copyright">© 2018 sample inc.</small>
</footer>今回のフッターの構造をHTMLで記述すると上記のコードになります。
著作権表記のテキストには、「pタグ」や「smallタグ」が用いられることが多いです。
今回は、サイトを閲覧する人にとって、著作権表記はさほど重要な情報ではないという意味合いから「smallタグ」で構造を作っています。
HTMLが書けたらブラウザで確認してみましょう。
画像のような状態になっていれば大丈夫です。
あとはスタイルをつけるだけです！
最後までがんばりましょう！
デザインデータからプロパティと余白を確認する
XDのデザインデータを確認して、余白やプロパティを確認します。
フッターの内側には上下に16pxずつ余白があいています。
また、テキストが中央寄せになっていることが確認できれば大丈夫です。
CSSでサイトのスタイルを記述する
デザインデータでプロパティの確認ができたので、スタイルの記述をしていきましょう。
.footer {
text-align: center;
/*内側の上下に余白*/
padding: 16px 0;
background: #ff7f00;
}
.footer-copyright {
color: #fff;
font-size: 12px;
}
スタイルを記述したら、いよいよ完成です！
まとめ
今回の記事で、Webサイト制作を行う際の実践的な作業を経験しました。
ポイントはたくさんありましたが、
まずは、記事の中で出てきた、上記の４つの項目を覚えておきましょう。
- 練習を始める準備をする
- 画像素材を準備する
- フォントを準備する
- コーディングの流れ
コーディングの作業の中で出てきた記述は、反復練習やテストを行う中で覚えていけば大丈夫です。
ここまでの作業お疲れ様でした。
サンプルコードのダウンロード
今回の流れを実際に行った場合のサンプルコードをご用意しましたので、以下のボタンからダウンロードし自分が制作したものと見比べてみてください。
