HTML/CSSコーディングの練習用データを配布します

てっくど

2020年9月4日 17:48

コーディングを始めたて、勉強したい方向けに練習用のデザインデータを作りました。
スライダー、ハンバーガーメニュー、flexbox、グリッドレイアウト等コーディングを行う上で身に付けたい技術を意識して作ったデザインデータになります。

対象者：書籍、progate等でHTML/CSSコーディングの基礎を一通り学んだ方
作業時間：早い人で1~2時間　普通の人は5時間くらいを目安に

(1)練習用データ（AdobeXD)

内容：
・AdobeXDによるデザインデータ
・実際にコーディングしたファイル（完成品）

(2)コーディングの進め方

1.デザインデータ確認＆画像書き出し
XDを開いたらざーっとデザインを確認し、まずは画像を書き出します。
書き出したい画像を選択し、Ctrl+E(Command+E)で書き出して保存します。

写真系はjpg、アイコンやロゴなどはpngで書き出しましょう。

やり方が分かっている方は完成品データの中にある書き出し済みの画像ファイルを使用していただいて構いません。

2.汎用CSSの設定
タイトル部分など、ページ内で同じCSSを使える部分については汎用のCSSを作っておき、HTMLコーディング中にクラスを当てていきます。

例：タイトル部分がどれも同じCSSで行けそう...

スクリーンショット 2020-09-04 17.19.06

/**CSS**/
.section-ttl-wrap {
 text-align: center;
}
.section-ttl {
 display: inline-block;
 padding-bottom: 0.3rem;
 border-bottom: 0.3rem solid #24acf2;
 font-size: 3.2rem;
 font-weight: bold;
 text-align: center;
 line-height: 1;
}

こうしてあらかじめCSSを作っておけば、HTMLを記述する際に

/**ABOUTのタイトル**/
<div class="section-ttl-wrap">
  <h2 class="section-ttl">ABOUT</h2>
</div>

/**COMPANYのタイトル**/
<div class="section-ttl-wrap">
 　<h2 class="section-ttl">COMPANY</h2>
</div>

/**CONTACTのタイトル**/
<div class="section-ttl-wrap">
 　<h2 class="section-ttl">CONTACT</h2>
</div>

このようにClass名をつけるだけでタイトル部分を作ることができます

3.HTMLの記述
デザインを確認し、汎用CSSを設定したらHTMLの記述に入ります。
ポイントとして、

・HTMLを全て記述してからCSSに移る
・極力全ての要素にClass名を設定する

このあたりを意識して記述を行っていきましょう。
Class名については (3)コーディングの注意点で解説しています。

4.CSSの記述
HTMLが終わったらCSSを記述していきます。

5.JSの記述
今回の場合、スライダーとハンバーガーメニューの部分になります。
ポイントとして、
・トリガーになる要素はIDを設定する
ここを意識しておきましょう。

例：.header-nav-toggleにクリックメソッドを当てたい場合...

/*HTML*/
<div id="header-nav-toggle" class="header-nav-toggle">
　　<span></span>
   <span></span>
   <span></span>
</div>

/*JS*/
$("#header-nav-toggle").on("click", function () {
   〜
});

6.確認
最後に作成したサイトをチェックします。
よくあるミスとしては、
・レスポンシブしてる途中で右に余白ができる
・marign、paddingなどの余白がバラバラ
などがあります。

今回は練習用データなので余白はシビアにやる必要はありませんが、実案件ではしっかりチェックしておきましょう。

(3)コーディングの注意点

・Webフォントの読み込み
今回のページ、フォントはほとんどNoto Sans JPになっています。
Google Fontからダウンロード＆読み込みができるので以下URLよりお試しください。
https://fonts.google.com/specimen/Noto+Sans+JP

■ページ内の設定方法
上記URLにRegular 400とBold 700のSelect this styleをクリック
↓
右側のサイドバーにある「Embed」をクリックし、<link>のコードをHTMLの<head>内に貼り付ける

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

↓
CSS rules to specify familiesにあるfont-familyのコードを、CSS内でフォントを適用させたい部分に貼り付ける
（今回の場合、body内に適用させてOKです）

body{
  font-family: 'Noto Sans JP', sans-serif;
}

■AdobeXDに読み込ませる方法
下記URLにアクセスし、ページ上部にあるDownload Familyからフォントをダウンロード
https://fonts.google.com/specimen/Noto+Sans+JP
↓
ダウンロードしたファイルを解凍し、フォントファイルをクリックして開く
↓
フォントをインストールのボタンがあるのでPC内にインストール
↓
AdobeXDを再起動して課題データを開くとフォントが適用されています。

・Class名の付け方
class="親要素+Element名"でつけるとわかりやすくなります
例：
<section class="about">の子要素にh2でタイトルを置くとき
↓
<h2 class="about-ttl">

Element名参考：https://qiita.com/manabuyasuda/items/dbb76ed36970bec95470

具体例として、AdobeXDのレイヤー部分に名前をつけておきました
思いつかない方はこちらを参考にしてみてください

・スライダーの作り方
プラグインのSlickかSwiperあたりを使用して作成することをオススメします
今回の場合、Swiperの方が楽に組めると思います
（完成品はSwiperで作成しています）
Swiper参考記事：https://mdstage.com/web/javascript/how-to-use-swiper

・COMPANY部分の作り方
display: grid;を使うとHTMLがスッキリした状態で組むことができます。

<div class="company-wrap">
　<p class="company-subttl">TEST COMPANY</p>
  <img src="./assets/img/img_company_01.jpg" alt="" class="company-img">
  <p class="company-txt">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
　<a href="#" class="company-btn">MORE</a>
</div>

以下記事などを参考に挑戦してみてください。
グリッドレイアウト参考：https://www.itti.jp/web-design/quick-css-grid/

(4)完成品について

・VWの設定
スマホ版は375pxを基準としたvwで作成しています。

・SCSSファイル
完成品はSCSSで記述しています。SCSS→CSSのコンパイルは設定済みのGulpで行っているため、他のツールでコンパイルすると微妙に異なったCSSが出力される可能性があります。ご注意ください。

・メディアクエリの設定
完成品はモバイルファーストで作成しています。
コードが見慣れない形で難しい、という方は以下のCodepenを参照してください。
PCファーストで各パーツごとに作成したコードを配布しています。
https://codepen.io/tecd1130

(5)その他

・本デザインはご自由に配布等して使用していただいて構いません。（ご一報いただけると助かります）
・画像素材はPixabayからダウンロードしたフリー素材を使用しています。https://pixabay.com/ja/

ご意見、ご感想、ご質問などあればTwitterの方にお願いしますm(_ _)m
https://twitter.com/tecd1130

この記事が気に入ったらサポートをしてみませんか？