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

入門編から実践編まで6種類のサンプルサイトで
現場レベルのスキルが身につく!【デザインカンプ&ソースコード付】

114発売!

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

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

入門編から実践編まで
6種類のサンプルサイトで
現場レベルのスキルが
身につく!
【デザインカンプ&コード付】

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

114発売!

メッセージ

この度、2025年1月14日(火)に、Codejumpから初となる書籍の発売が決定いたしました。

書籍名は、『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』です。1冊で現場レベルのコーディングスキルが身につく、Web制作の実践本になります。

Codejumpを立ち上げてから約5年、多くの人にご利用いただいた結果としてこのような機会をいただくことができました。ご利用者の皆さまには改めてお礼を申し上げます。

さて、今回は書籍のご紹介の他に、皆さまにお伝えしたいことがありメッセージを書かせていただきました。そもそもなぜこの書籍を出版することになったのかという経緯と合わせて、今後の皆さまの学習の進め方についてもお話しさせていただきたいと思います。

出版ブログ

書籍の発売日(1/14)までの間、執筆の裏側の話や書籍の内容など
書籍にまつわる情報を発信していきます。

書籍の内容

1

【入門編】プロフィールサイトを作ろう!

学習テーマ:フレックスボックス

難易度:

ページ数:1

第1章で学ぶメインのテーマは「フレックスボックス」です。フレックスボックスはコンテンツを横並びにする技術で、Webサイト制作を行う際のレイアウト配置でもっともよく使う技術の1つです。本章では、簡単なプロフィールサイトを作りながら、フレックスボックスの使い方について学びます。

Coding Point!

  • HTMLの基本タグ(header、 footer、 main、 nav、 section、 div、 img、 p)の使い方
  • 見出しタグ(h1、 h2)の使い方
  • Flexbox を使用した横並びの方法
  • リストタグ(ul、 li)の使い方
  • レスポンシブ対応
2

【初級編】ブランドサイトを作ろう!

学習テーマ:ポジション

難易度:

ページ数:1

第2章で学ぶメインのテーマは「ポジション」です。ポジションはコンテンツを任意の場所に配置する技術で、1章のフレックスボックスとあわせて実務で頻繁に使用する技術です。本章では、シンプルな1ページのブランドサイトの制作を通して、ポジションの使い方について学びます。

Coding Point!

  • position を使用したコンテンツの固定
  • position を使用したコンテンツ同士の重ね方
  • position を使用した擬似要素の重ね方
  • フォント指定
  • 画像の高さ固定
  • 背景の設定
3

【中級編】サービスサイトを作ろう!

学習テーマ:複数ページ

難易度:

ページ数:4

第3章で学ぶメインのテーマは「複数ページのサイト制作」です。複数ページのWebサイトを作る際のファイル構成やページ間でのリンクの貼り方などについて、サービスサイトの制作を通して学びます。

Coding Point!

  • 複数ページのサイト制作
  • ラインが斜めのボックス
  • 吹き出し
  • 擬似要素で図形
  • フォーム
  • Google フォント
  • ハンバーガーメニュー
4

【上級編】カフェサイトを作ろう!

学習テーマ:複数レイアウト

難易度:

ページ数:4

第4章で学ぶメインのテーマは「さまざまな種類のレイアウト」です。Webサイトでよく見かける、シングルカラム、2カラム、タイル型、ブロークングリッドレイアウトの作り方について、カフェサイトの制作を通して学びます。

Coding Point!

  • 複数レイアウトのサイト制作
  • グローバルナビゲーションのサイド配置
  • 縦書き
  • CSS Grid Layout(グリッドレイアウト)
  • Googleマップの埋め込み
  • YouTubeの埋め込み
5

【応用編】ランディングページを作ろう!

学習テーマ:動きのあるWebサイト

難易度:

ページ数:1

第5章で学ぶメインのテーマは「動きのあるWebサイト」です。ランディングページの制作を通して、CSSアニメーションやJavaScript(jQuery)を使った、動きのあるWebサイトの作り方について学びます。

Coding Point!

  • CSSアニメーション
  • パララックス
  • イベントによる要素制御
  • jQueryのメソッド
  • スライダー
  • PCとスマートフォンの画像切り替え
6

【実践編】コーポレートサイトを作ろう!

学習テーマ:実務を想定したサイト制作

難易度:

ページ数:6

第6章では、第1章から第5章までの内容をすべて含んだコーポレートサイトの制作を通して、実務を想定したWebサイト制作について学びます。また、アコーディオンやモーダルウィンドウといった、実務で定番のテクニックについても学びます。

Coding Point!

  • ドロップダウンメニュー
  • スクロール時のフェードイン
  • タブ切り替え
  • モーダルウィンドウ
  • アコーディオン

購入はこちら

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

価格
3,520円(税込)
ページ数
576ページ
発売日
2025年1月14日
出版社
技術評論社
著者名
小豆沢 健
ISBN
978-4297146436
  1. 第1章 入門編 プロフィールサイトを作ろう
  2. 第2章 初級編 ブランドサイトを作ろう
  3. 第3章 中級編 サービスサイトを作ろう
  4. 第4章 上級編 カフェサイトを作ろう
  5. 第5章 応用編 ランディングページを作ろう
  6. 第6章 実践編 コーポレートサイトを作ろう