概要

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

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

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

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

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

本書掲載の練習サイトは，ソースコード（.html，.css，.js）はもちろんのこと，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　フォームを作ろう

• おわりに

サポート

ダウンロード

本書で使用するデータは，以下よりダウンロードできます。パスワードの入力が必要となりますので，本書P.450のボタンの名称を英字8文字で入力してください。ファイルの内容について，詳しくは本書P.8を参照してください。

本書提供のダウンロードファイルは，本書の学習用途でのみ利用が可能です。本書の学習用途に限り，個人的かつ非商用な目的のためにのみダウンロード・利用可能であり，複製・再配布は禁止されています。本書の学習以外の目的では利用できませんので，ご注意ください。

ダウンロードファイル内の画像ファイルは，すべて123RFより提供された画像となります。本書の学習用途に限り，個人的かつ非商用な目的のためにのみダウンロード・利用可能です。商用目的での利用，営業用ポートフォリオでの利用など，本書の学習以外の目的では利用できませんので，ご注意ください。123RFについて，詳しくは以下のURLを参照してください。
jp.123rf.com/