【HTML/CSS コーディング解説】入門：レシピサイト2（前編）
目次
1. 完成イメージの確認
まずは、今回作るサイトの完成イメージを確認していきます。
今回は写真とテキストを横幅いっぱい使って配置したレシピサイトのコーディングです。
完成イメージは以下の通りです。
▼PC表示
▼スマホ表示
▼デモサイト
デモサイトはこちらからご確認いただけます。
それでは、さっそくレイアウト構成から考えていきましょう！
2. レイアウト構成を考えよう
はじめに全体のレイアウト構成を考えます。
①：全体のレイアウト構成
まずはおおまかなブロック単位に分割します。
今回のサイトの場合は、下記のようなブロックにわかれます。
ヘッダーはなく、メインコンテンツとフッターだけの構成です。
メインコンテンツの中は、写真と説明テキストが横並びに配置されているエリアとボタンエリアの2つに分かれます。
続いて、各パーツの中のレイアウト構成を考えていきましょう。
②：画像＋テキストエリアのレイアウト構成
まずは画像エリアの構成から見ていきましょう。
画像全体をdivタグで囲みます。このdivタグに対して後ほどCSSで横幅の設定を行います。
続いてテキストエリアの構成を見ていきましょう。
テキストエリア全体をdivタグで囲みます。こちらも、CSSで横幅とpaddingの設定を行います。
ページ全体のタイトルはh1タグで記述します。
「材料」や「作り方」といった各コンテンツのタイトルはh2タグで記述します。
材料の内容と個数はdl、dt、ddタグで記述します。
作り方の手順は順序性のあるリストなのでol、liタグで記述します。
以上で、画像とテキストのエリアは終了です。
③：ボタンエリアのレイアウト構成
続いてボタンエリアです。
ボタンを中央に配置するため、全体をdivタグで囲みます。
ボタンはaタグで記述してリンクにします。
以上で、ボタンエリアは終了です。
④：フッターのレイアウト構成
最後にフッターです。
フッターの構成は前回のレシピサイトと同様で、全体をfooterタグで囲み、SNSのリンクはul、liタグで記述します。
以上で、レイアウト構成は終了です。
それでは、後編のコーディングに入っていきましょう！
コーディングを仕事にしていきたい方へ
Codejump Proでは、実際の案件をモデルにした仮想案件で実務レベルのスキルと経験を身につけていきます。
- ポートフォリオに載せる実績がない・・・
- 実務経験がゼロ・・・
- 案件獲得に不安がある・・・
1つでも当てはまる場合は、今すぐ実務レベルの案件をスタートしてみてください。
模写の次に何を学ぶべきか迷っていませんか？
以下のようなお悩みに1つでも当てはまる場合、無料のメール講座をお受け取りください。
- 模写はできるようになってきたけど、実務に通用するか不安
- ポートフォリオに悩んでいる・載せる実績がない
- 案件に挑戦したいけど、自信がなくて一歩踏み出せない
今登録すると、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。
現場レベルのスキルを身につけたい方へ
現場レベルのコーディングスキルを身につけたい方は、書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』（出版社：技術評論社）がおすすめです。
本書は、入門編から実践編の6つのWebサイト制作を通して、現場で必要なコーディングスキルをステップアップしながら1冊で身につけていきます。
- 第1章【入門編】プロフィールサイト〜フレックスボックス
- 第2章【初級編】ブランドサイト〜ポジション
- 第3章【中級編】サービスサイト〜複数ページ
- 第4章【上級編】カフェサイト〜複数レイアウト
- 第5章【応用編】ランディングページ〜動きのあるWebサイト
- 第6章【実践編】コーポレートサイト〜実務を想定したWebサイト制作
現場レベルのコーディングスキルを身につけたい方は、こちらの書籍を一通り学習した後、Codejumpの練習課題に取り組むと効率良く学習できます。
著者：Codejump運営者
