HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門

［表紙］HTM

紙版発売

B5判／576ページ

定価3,520円（本体3,200円＋税10%）

ISBN 978-4-297-14643-6

電子版
  • 電子化の予定があります

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

HTML&CSSの基本を学んだだけでは，Webサイトは作れません！

就活，転職，副業，開業など，仕事としてのWebデザインが人気を集めています。Webデザイナーを目指す人が最初に学ぶのはHTML&CSSですが，コーディングの基本を学んだだけでは，Webサイトを制作する力は身につきません。納品レベルのWebサイトを1から作るためには，HTML&CSSに関する実践的な知識と，実際のWebサイトをもとにしたデザインの引き出し，そしてなにより経験の積み重ねが必要になるからです。これらの条件は，本来，制作会社に入って実制作を重ねることで身につけられるものですが，独学やフリーランスの道を進んだ人にとっては，そうはいきません。本書は，HTML&CSSの最初の学習を完了し，Webデザインを仕事にするレベルへと進みたい人のために，
実案件をもとに作成した練習サイトを使って制作方法をマスターし，現場レベルのコーディング・スキルを身につけることのできる書籍
です。オンラインでコーディング学習教材を提供するCodejump主催の小豆沢健が，多くの学習者をサポートしてきた制作ノウハウを提供します。本書のポイントは，以下の3点です。

ポイント①実案件をもとに作成した練習サイト
実案件をもとに作成した練習サイトを，入門編から実践編まで計6種類用意しています。

ポイント②レイアウト構成をしっかり確認
これから作成する練習サイトのレイアウト構成を，しっかり予習してから学習を始められます。

ポイント③実務で定番の技術をピックアップ
実案件のWebサイト制作でよく使用する定番の技術をピックアップし，練習サイトに盛り込んでいます。

これら3つのポイントに沿って練習サイトの制作を繰り返し学習することで，コーディング・スキルを高め，「Webデザインを仕事にする」ための実力が身につきます。本書掲載の練習サイトは，ソースコード（.html，.css）はもちろんのこと，123RF（jp.123rf.com）提供によるすべての画像をダウンロードできるので，本書購入後，今すぐ学習を始められます。Webサイト制作の実務を想定した，画期的なコーディング実践本の登場です！

●本書の内容
第1章【入門編】プロフィールサイト〜フレックスボックス
第2章【初級編】ブランドサイト〜ポジション
第3章【中級編】サービスサイト〜複数ページ
第4章【上級編】カフェサイト〜複数レイアウト
第5章【応用編】ランディングページ〜動きのあるWebサイト
第6章【実践編】ポートレートサイト〜実務を想定したWebサイト制作

●本書で学べる内容
フレックスボックス／ポジション／グリッドレイアウト／CSSアニメーション／JavaScript（jQuery）／ドロップダウンメニュー／ハンバーガーメニュー／アコーディオン／モーダルウィンドウ／パララックス／スライダー／シングルカラム／2カラム／タイル型／ブロークングリッド／LP（ランディングページ）

こんな方におすすめ

  • HTML&CSSの基本はマスターしたが，自力でWebサイトを作れず悩んでいる人
  • HTML&CSSの実務で使えるスキルをマスターしたい人

目次

  • はじめに
  • この本の使い方
  • この本で学べること
  • ダウンロードファイルの使い方
  • 123RFについて

第1章　入門編　プロフィールサイトを作ろう

  • 1-1　完成イメージの確認
  • 1-2　コーディングポイントの確認
  • 1-3　コーディングの準備をしよう
  • 1-4　全体の枠組みを作ろう
  • 1-5　ヘッダーを作ろう
  • 1-6　メインビジュアルとイントロダクションを作ろう
  • 1-7　Profileを作ろう
  • 1-8　Worksを作ろう
  • 1-9　フッターを作ろう

第2章　初級編　ブランドサイトを作ろう

  • 2-1　完成イメージの確認
  • 2-2　コーディングポイントの確認
  • 2-3　コーディングの準備をしよう
  • 2-4　全体の枠組みを作ろう
  • 2-5　ヘッダーを作ろう
  • 2-6　メインビジュアルを作ろう
  • 2-7　Conceptを作ろう
  • 2-8　New Productsを作ろう
  • 2-9　New Typeを作ろう
  • 2-10　Online Storeを作ろう
  • 2-11　フッターを作ろう

第3章　中級編　サービスサイトを作ろう

  • 3-1　完成イメージの確認
  • 3-2　コーディングポイントの確認
  • 3-3　コーディングの準備をしよう
  • 3-4　トップページの枠組みを作ろう
  • 3-5　ヘッダーを作ろう
  • 3-6　メインビジュアルを作ろう
  • 3-7　「選ばれる理由」を作ろう
  • 3-8　「サービス」と「料金」を作ろう
  • 3-9　「ご利用者の声」を作ろう
  • 3-10　「お問い合わせ」を作ろう
  • 3-11　フッターを作ろう
  • 3-12　サービスページの枠組みを作ろう
  • 3-13　共通パーツ（ヘッダー，フッター，お問い合わせ）を作ろう
  • 3-14　ページヘッダーを作ろう
  • 3-15　ページヘッダー下テキストを作ろう
  • 3-16　「サービスの内容」を作ろう
  • 3-17　「ご利用の流れ」を作ろう
  • 3-18　料金ページの枠組みを作ろう
  • 3-19　共通パーツ（ヘッダー，フッター，お問い合わせ）を作ろう
  • 3-20　ページヘッダーとページヘッダー下テキストを作ろう
  • 3-21　「料金表」を作ろう
  • 3-22　お問い合わせページの枠組みを作ろう
  • 3-23　共通パーツ（ヘッダー，フッター）を作ろう
  • 3-24　ページヘッダーとページヘッダー下テキストを作ろう
  • 3-25　フォームを作ろう

第4章　上級編　カフェサイトを作ろう

  • 4-1　完成イメージの確認
  • 4-2　コーディングポイントの確認
  • 4-3　コーディングの準備をしよう
  • 4-4　トップページの枠組みを作ろう
  • 4-5　ヘッダーエリアを作ろう
  • 4-6　「コンセプト」を作ろう
  • 4-7　「メニュー」を作ろう
  • 4-8　「ブログ」を作ろう
  • 4-9　「アクセス」を作ろう
  • 4-10　フッターを作ろう
  • 4-11　コンセプトページの枠組みを作ろう
  • 4-12　ヘッダーエリア，フッター，アクセスを作ろう
  • 4-13　「コンセプト」を作ろう
  • 4-14　ブログ一覧ページの枠組みを作ろう
  • 4-15　ヘッダーエリア，フッター，アクセスを作ろう
  • 4-16　ブログリストを作ろう
  • 4-17　ブログ詳細ページの枠組みを作ろう
  • 4-18　ヘッダーエリア，フッター，アクセスを作ろう
  • 4-19　ブログ記事とサイドバーを作ろう

第5章　応用編　ランディングページを作ろう

  • 5-1　完成イメージの確認
  • 5-2　コーディング仕様の確認
  • 5-3　コーディングポイントの確認
  • 5-4　コーディングの準備をしよう
  • 5-5　全体の枠組みを作ろう
  • 5-6　ヘッダーを作ろう
  • 5-7　メインビジュアルを作ろう
  • 5-8　Aboutを作ろう
  • 5-9　パララックスを作ろう
  • 5-10　ツアー紹介を作ろう
  • 5-11　reservationエリアを作ろう
  • 5-12　アクティビティを作ろう
  • 5-13　アクティビティMAPを作ろう
  • 5-14　フッター上の背景を作ろう
  • 5-15　追従ボタンを作ろう
  • 5-16　フッターを作ろう

第6章　実践編　ポートレートサイトを作ろう

  • 6-1　完成イメージの確認
  • 6-2　コーディング仕様の確認
  • 6-3　コーディングポイントの確認
  • 6-4　コーディングの準備をしよう
  • 6-5　トップページを作ろう
  • 6-6　ヘッダーを作ろう
  • 6-7　メインビジュアルを作ろう
  • 6-8　「COMPANY」を作ろう
  • 6-9　「PRODUCTS」を作ろう
  • 6-10　「WORKS」を作ろう
  • 6-11　「FAQ&CONTACT」を作ろう
  • 6-12　フッターを作ろう
  • 6-13　フェードインを作ろう
  • 6-14　会社情報ページを作ろう
  • 6-15　共通パーツ（ヘッダー，フッター）を作ろう
  • 6-16　ページヘッダーを作ろう
  • 6-17　ページ内リンクを作ろう
  • 6-18　企業理念を作ろう
  • 6-19　事業紹介を作ろう
  • 6-20　会社概要を作ろう
  • 6-21　アクセスを作ろう
  • 6-22　商品一覧ページを作ろう
  • 6-23　共通パーツ（ヘッダー，フッター）を作ろう
  • 6-24　ページヘッダーを作ろう
  • 6-25　タブと画像一覧を作ろう
  • 6-26　実績紹介ページを作ろう
  • 6-27　共通パーツ（ヘッダー，フッター）を作ろう
  • 6-28　ページヘッダーを作ろう
  • 6-29　実績紹介一覧を作ろう
  • 6-30　よくある質問ページを作ろう
  • 6-31　共通パーツ（ヘッダー，フッター）を作ろう
  • 6-32　ページヘッダーを作ろう
  • 6-33　Q&A一覧を作ろう
  • 6-34　お問い合わせページを作ろう
  • 6-35　共通パーツ（ヘッダー，フッター）を作ろう
  • 6-36　ページヘッダーを作ろう
  • 6-37　フォームを作ろう
  • おわりに

著者プロフィール

小豆沢健（あずきざわけん）

三重県出身。大学卒業後，IT系のソフトウェア開発会社に入社し，多数のシステム開発案件に従事。独立後は，スタートアップから大手企業まで様々な会社のWebアプリケーション開発やWebサイト制作に携わる。2020年に実践的なコーディングが学べる学習サイト「Codejump」を立ち上げ，累計10万人以上の人が利用。現在もCodejumpの運営を行いながら，様々な企業の開発や制作に幅広く携わっている。

Webサイト：Codejump（https://code-jump.com）
SNS：https://x.com/codestep_com