書籍内容

制作サイト

入門編〜実践編の全6章のWebサイト制作を通して、現場レベルのコーディングスキルをマスターします。

書籍の特徴

1. レイアウト構成の解説

コーディングを行う際は、レイアウト構成をイメージすることが非常に大切です。本書では、最初にレイアウト構成を確認してからコードの解説を行うことで、デザインを形にするレイアウト構成力も養えるようになっています。

2. ソースコードの解説

ソースコードは書籍内に全て掲載し、新しい記述やテクニックが出てきた箇所は全てコードの解説を行なっています。これにより、実際のコーディングと同じ流れで学習を進めながらスキルアップしていくことができます。

3. OnePointの解説

ソースコードの中で特に実務でよく使用する重要な箇所は、「OnePoint」として掘り下げて詳しく解説しています。これにより、実務で使用する箇所を意識しながら重点的に学習することができます。

デザインカンプ&
仕様書&ソースコード付き

サンプルサイトには、「デザインカンプ」と「仕様書(5章と6章のみ)」がついているので、
実際のコーディングと同じくデザインカンプと仕様書からのコーディング練習を行うこともできます。

<デザインカンプ>

全てのサンプルサイトには、「Figma」と「Adobe XD」のデザインカンプが付いているので、より実践的なデザインカンプからのコーディング練習もできます。

<仕様書>

5章と6章には、各章のはじめに動きの仕様をまとめた仕様書が付いています。デザインカンプからのコーディング練習を行う際に、合わせてご確認ください。

<ソースコード>

全てのサンプルサイトには、完成版のソースコードが付いています。自分で作った制作物の動作確認やコードチェックにご活用ください。

目次

  1. 第1章 入門編 プロフィールサイトを作ろう
  2. 1-1 完成イメージの確認
  3. 1-2 コーディングポイントの確認
  4. 1-3 コーディングの準備をしよう
  5. 1-4 全体の枠組みを作ろう
  6. 1-5 ヘッダーを作ろう
  7. 1-6 メインビジュアルとイントロダクションを作ろう
  8. 1-7 Profileを作ろう
  9. 1-8 Worksを作ろう
  10. 1-9 フッターを作ろう
  1. 第2章 初級編 ブランドサイトを作ろう
  2. 2-1 完成イメージの確認
  3. 2-2 コーディングポイントの確認
  4. 2-3 コーディングの準備をしよう
  5. 2-4 全体の枠組みを作ろう
  6. 2-5 ヘッダーを作ろう
  7. 2-6 メインビジュアルを作ろう
  8. 2-7 Conceptを作ろう
  9. 2-8 New Productsを作ろう
  10. 2-9 New Typeを作ろう
  11. 2-10 Online Storeを作ろう
  12. 2-11 フッターを作ろう
  1. 第3章 中級編 サービスサイトを作ろう
  2. 3-1 完成イメージの確認
  3. 3-2 コーディングポイントの確認
  4. 3-3 コーディングの準備をしよう
  5. 3-4 トップページの枠組みを作ろう
  6. 3-5 ヘッダーを作ろう
  7. 3-6 メインビジュアルを作ろう
  8. 3-7 「選ばれる理由」を作ろう
  9. 3-8 「サービス」と「料金」を作ろう
  10. 3-9 「ご利用者の声」を作ろう
  11. 3-10 「お問い合わせ」を作ろう
  12. 3-11 フッターを作ろう
  13. 3-12 サービスページの枠組みを作ろう
  14. 3-13 共通パーツ(ヘッダー、フッター、お問い合わせ)を作ろう
  15. 3-14 ページヘッダーを作ろう
  16. 3-15 ページヘッダー下テキストを作ろう
  17. 3-16 「サービスの内容」を作ろう
  18. 3-17 「ご利用の流れ」を作ろう
  19. 3-18 料金ページの枠組みを作ろう
  20. 3-19 共通パーツ(ヘッダー、フッター、お問い合わせ)を作ろう
  21. 3-20 ページヘッダーとページヘッダー下テキストを作ろう
  22. 3-21 「料金表」を作ろう
  23. 3-22 お問い合わせページの枠組みを作ろう
  24. 3-23 共通パーツ(ヘッダー、フッター)を作ろう
  25. 3-24 ページヘッダーとページヘッダー下テキストを作ろう
  26. 3-25 フォームを作ろう
  1. 第4章 上級編 カフェサイトを作ろう
  2. 4-1 完成イメージの確認
  3. 4-2 コーディングポイントの確認
  4. 4-3 コーディングの準備をしよう
  5. 4-4 トップページの枠組みを作ろう
  6. 4-5 ヘッダーエリアを作ろう
  7. 4-6 「コンセプト」を作ろう
  8. 4-7 「メニュー」を作ろう
  9. 4-8 「ブログ」を作ろう
  10. 4-9 「アクセス」を作ろう
  11. 4-10 フッターを作ろう
  12. 4-11 コンセプトページの枠組みを作ろう
  13. 4-12 ヘッダーエリア、フッター、アクセスを作ろう
  14. 4-13 「コンセプト」を作ろう
  15. 4-14 ブログ一覧ページの枠組みを作ろう
  16. 4-15 ヘッダーエリア、フッター、アクセスを作ろう
  17. 4-16 ブログリストを作ろう
  18. 4-17 ブログ詳細ページの枠組みを作ろう
  19. 4-18 ヘッダーエリア、フッター、アクセスを作ろう
  20. 4-19 ブログ記事とサイドバーを作ろう
  1. 第5章 応用編 ランディングページを作ろう
  2. 5-1 完成イメージの確認
  3. 5-2 コーディング仕様の確認
  4. 5-3 コーディングポイントの確認
  5. 5-4 コーディングの準備をしよう
  6. 5-5 全体の枠組みを作ろう
  7. 5-6 ヘッダーを作ろう
  8. 5-7 メインビジュアルを作ろう
  9. 5-8 Aboutを作ろう
  10. 5-9 パララックスを作ろう
  11. 5-10 ツアー紹介を作ろう
  12. 5-11 reservationエリアを作ろう
  13. 5-12 アクティビティを作ろう
  14. 5-13 アクティビティMAPを作ろう
  15. 5-14 フッター上の背景を作ろう
  16. 5-15 追従ボタンを作ろう
  17. 5-16 フッターを作ろう
  1. 第6章 実践編 コーポレートサイトを作ろう
  2. 6-1 完成イメージの確認
  3. 6-2 コーディング仕様の確認
  4. 6-3 コーディングポイントの確認
  5. 6-4 コーディングの準備をしよう
  6. 6-5 トップページを作ろう
  7. 6-6 ヘッダーを作ろう
  8. 6-7 メインビジュアルを作ろう
  9. 6-8 「COMPANY」を作ろう
  10. 6-9 「PRODUCTS」を作ろう
  11. 6-10 「WORKS」を作ろう
  12. 6-11 「FAQ&CONTACT」を作ろう
  13. 6-12 フッターを作ろう
  14. 6-13 フェードインを作ろう
  15. 6-14 会社情報ページを作ろう 481
  16. 6-15 共通パーツ(ヘッダー、フッター)を作ろう
  17. 6-16 ページヘッダーを作ろう
  18. 6-17 ページ内リンクを作ろう
  19. 6-18 企業理念を作ろう
  20. 6-19 事業紹介を作ろう
  21. 6-20 会社概要を作ろう
  22. 6-21 アクセスを作ろう
  23. 6-22 商品一覧ページを作ろう
  24. 6-23 共通パーツ(ヘッダー、フッター)を作ろう
  25. 6-24 ページヘッダーを作ろう
  26. 6-25 タブと画像一覧を作ろう
  27. 6-26 実績紹介ページを作ろう
  28. 6-27 共通パーツ(ヘッダー、フッター)を作ろう
  29. 6-28 ページヘッダーを作ろう
  30. 6-29 実績紹介一覧を作ろう
  31. 6-30 よくある質問ページを作ろう
  32. 6-31 共通パーツ(ヘッダー、フッター)を作ろう
  33. 6-32 ページヘッダーを作ろう
  34. 6-33 Q&A一覧を作ろう
  35. 6-34 お問い合わせページを作ろう
  36. 6-35 共通パーツ(ヘッダー、フッター)を作ろう
  37. 6-36 ページヘッダーを作ろう
  38. 6-37 フォームを作ろう