この記事では、デザインデータからHTML, CSSのコーディングを行う練習をしていきます。
今回は簡単なブログサイトのトップページの作成をしていきます。
はじめは難しいと感じると思いますが、ひとつひとつ確認しながら学習していきましょう。
- Adobe XDのデザインデータからコーディングする方法
- Adobe XDから画像のデータを書き出す方法
- デザインデータを見て、HTMLの構造を把握する方法
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
はじめに
今回の練習をするにあたって、必ずやって欲しいことが３点あります。
わからなかったところをメモに残す
わからなかったところを調べる
この記事の内容を必ず復習する
上記の作業も併せて行うことで、この記事の内容の理解が深まります。
この記事と同じ流れを制作動画にしていますので、記事と併せてご覧ください。
教材を開く
それでは、練習に入っていきます。
まず始めに、以下のダウンロードボタンから制作していくうえで必要な「デザインデータと教材（ファイル）」のダウンロードを行いましょう。
圧縮ファイルとしてダウンロードされるので、「解凍（展開）」してファイルの中身を確認しましょう。
ダウンロードしたファイルの確認
ダウンロードした「zpm-coding-practice.zip」を解凍すると、これからコーディングを行っていく「src」フォルダと制作のもととなるデザインデータの「zpm-coding-practice.xd」が入っています。
XDで制作するデザインを確認する
教材のダウンロードができましたら、デザインの確認をします。
XDでデザインデータを開き、練習用の教材のデザインを確認しましょう。
※xdファイルが開けない場合、こちらをクリックしてデザインデータを確認してください。
VSCodeで編集するフォルダを開く
VSCode（以降：エディタ）を開いて、「src」フォルダを開きましょう。
この状態で、いつでもHTML及びCSSを編集することができます。
VSCodeの導入と使い方
VSCodeの使い方については、「Visual Studio Codeの導入」記事をご覧ください。
Google ChromeでHTMLを表示する
編集していくHTMLの結果を確認するために、Google Chrome（以降：ブラウザ）に表示させます。
VSCodeのインストール記事で紹介した「Live Server」を使って、HTMLをブラウザに表示させます。
インストールしていない方は、以下の記事を参考にしてインストールを行ってください。
Live Serverをインストールしていると、画像の通りにエディタの右下に「Go Live」という項目が表示されます。
「Go Live」をクリックしてLive Serverを起動しましょう。
起動すると、パソコン上にサーバーが立ち上がり、自動的にGoogle Chromeが起動されます。「index.html」が表示されていれば成功です。
Live Serverはファイルを編集して保存するたびに自動でブラウザが更新されます。
検証ツールでブラウザをスマホの表示にする
今回は、スマホ版のデザインのみコーディングしていきます。
実際にWebサイトを制作していく上でも「モバイルファースト」を意識していきます。
つまり、スマホでの表示を優先して制作していくことになります。
理由としては、レスポンシブの記事で詳しく解説していますが、
現代において、Webサイトはスマホで閲覧するユーザーの方が多いからです。
また、モバイルファーストは、Googleの「SEO（検索エンジン最適化）」の観点からも大切です。
「モバイルファーストが意識されているか」という要素が検索結果の上位に表示されるかどうかを判断するようになりました。
では、検証ツールを開き、ブラウザをスマホ版の表示にしていきましょう。
ブラウザの画面を右クリックし、メニューの「検証」をクリックする
ブラウザを右クリックし、「検証」をクリックします。
「Toggle device toolbar」 をクリックする
次に「Toggle device toolbar」（スマホとタブレットのアイコンのボタン）をクリックします。
「Dimensions」から「iPhone SE」を選択する
次に「Dimensions」から「iPhone SE」をクリックします。
上記の作業をすることで、ブラウザをスマホの表記に近い形で確認することができます。
制作面でもモバイルファーストは大切です。
スマホ版のデザインから制作していく方が、PC画面から制作するのと比べて、結果的にコードの量が少なくなるメリットも存在します。
これでコーディングの準備は完了です。
画像素材を準備する
次に、デザインデータの中からコーディングで使用する画像を準備していきましょう。
デザインデータから画像を保存することを「書き出し」と言います。
今後よく目にする単語になりますので、覚えておきましょう。
画像を書き出し対象にする
「画像」を右クリックして、「書き出し対象にする」をクリックする
XDのデータの画像を個別に保存できるよう設定していきます。
「画像」を右クリックして、「書き出し対象」にしましょう。
今回の教材デザインデータの中にある全ての画像を書き出し対象にしていきましょう。
画像を書き出す
「ファイル」から「書き出し」、「全ての書き出し対象」をクリックする
書き出し対象に設定した画像を保存していきます。
画像を書き出す際に、「全ての書き出し対象」を選択すると、
書き出し対象にした全ての画像を一括で保存することができます。
「imgフォルダ」を指定し「書き出し」をクリックする
書き出した画像は、今回の練習教材の「imgフォルダ」の中に保存しましょう。
写真の画像を使っていくので、画像のフォーマットは「JPG」にします。
書き出しサイズを「Web」に設定し、書き出しをクリックします。
画像を選別する
書き出された画像から「@2x」以外の画像を削除する
XDでWeb用に画像を書き出すと、「通常の大きさの画像」と「２倍の大きさにした画像」の２つが書き出されます。
画像の解像度の都合で、今回は「２倍の大きさ」の画像を使っていきます。
なので、「画像の名前@2x.jpg」という名前になっている画像だけを残し、他の画像は消してしまいましょう。
画像の名前から「@2x」を消す
次に、右クリックして「画像の名前の変更」を行います。
画像の名前から「@2x」の部分を消して、画像のようにしましょう。
ここまでできれば、画像素材の準備は完了です。
デザインのフォントを確認する
次に、デザインデータのテキストに対して、どんなフォントが適用されているのか確認してみましょう。
丁寧なデザインデータであれば、「スタイルガイド」も用意されているので、そちらから確認することができます。
Google Fontsから探す
今回のデザインデータで使用されているフォントは「源ノ角ゴシック JP」です。
コードを記述する際に読み込む必要があるので「Google Fonts」から探します。
注意点として、Adobe XDにおける「源ノ角ゴシック JP」は、
Google Fontsでは「Noto Sans Japanese」に該当します。
Google Fontsでは「源ノ角ゴシック JP」で検索するのではなく、
「Noto Sans Japanese」で検索してください。
フォントを読み込む
読み込みたいフォントは見つかったので、あとは読み込むだけです。
読み込み・適用のさせ方は、「無料で有名なWebフォントの紹介と使い方を解説」で解説しているので、そちらをご覧ください。
コーディングしてみよう
それでは、コーディングの作業を行っていきます。
コーディングを行う際は、いきなりコードを記述せず、「サイトのデザインをよく確認すること」が大切です。
デザインデータから構造を確認する
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タグを入れておきましょう。
デザインデータからプロパティ、余白を確認する
構造を記述したら、デザインの通りに見た目を整えていきます。
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」という名前の画像を読み込んでいる状態になっています。
デザインデータ通りに、それぞれの記事に対応する画像を読み込むようにしていきましょう。
（画像の名前は連番になっているので、上から01,02,03…といった具合に読み込みましょう。）
ここまでで「ヘッダーから投稿記事の一覧」が完成しました。
残すところは「サイドバー」と「フッター」のみです！
もう少し頑張って続けていきましょう！
サイドバーを作る
次に、サイドバーの構造を作っていきます。
デザインデータから構造を確認する
「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サイト制作でも、コーディングを行うときに同じ作業を行います。
反復での練習が大切なので、今回の記事をもう一度初めから読んで理解を深めましょう。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
