SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

翔泳社 新刊紹介(AD)

Webサイトを「ブロック分解→コーディング」して脱初心者!『HTML/CSSブロックコーディング』発売

  • X ポスト
  • このエントリーをはてなブックマークに追加

  • X ポスト
  • このエントリーをはてなブックマークに追加

 CodeZineを運営する翔泳社から、11月16日(水)に書籍『HTML/CSSブロックコーディング デザインをすらすら再現できる』が発売となりました。Webサイトの要素をブロックに分解して1つずつコーディングすることで、どうすればラフどおりに組み立てられるのかを学べる1冊です。

 Web制作の基礎を学んだ初心者がつまずくのは、いざサイトを作ろうとしても、どうやってコーディングすれば希望のデザインを実現できるかわからないことです。

 本書はそんな悩みを解決し、狙いどおりにWebサイトを作れるようになるためのテクニックを解説しています。

 Webサイトを作る一連のプロセスを体験でき、実践的な作業フローとコーディングスキルが身につきます。脱初心者を目指している方は、ぜひチェックしてみてください。

目次

Ch01 モックアップをブロック分解
1-1 モックアップとは
1-2 モックアップはこうして渡される
1-3 初心者がコーディングでつまずきがちなこと
1-4 サイトを構成する基本要素
1-5 モバイル版のブロック分解
1-6 タブレット版のブロック分解
1-7 ラップトップ版のブロック分解

Ch02 ファイルの準備
2-1 ファイル構成
2-2 画像の確認
2-3 normalize.cssとreset.css

Ch03 HTMLのコーディング準備
3-1 分解したモックアップの確認(HTML)
3-2 レスポンシブ対応する上で確認すること
3-3 ボトムアップのアプローチ方法
3-4 トップダウンのアプローチ方法
3-5 今回のアプローチ方法を考える

Ch04 HTMLのコーディング
4-1 骨組みのコーディング
4-2 ベースのコーディング
4-3 Headerのコーディング
4-4 Mainのコーディング
4-5 Footerのコーディング
4-6 ナビゲーションの設定

Ch05 CSSのコーディング準備
5-1 分解したモックアップの確認(CSS)
5-2 デザイナーに確認しておきたいこと
5-3 ファイルの準備
5-4 スタイリングする際に気にかけること

Ch06 CSSのコーディング
6-1 ベースのコーディング
6-2 共通クラスのコーディング
6-3 Headerのコーディング
6-4 Mainのコーディング
6-5 Footerのコーディング

Ch07 CSSでのレスポンシブ対応
7-1 モバイル版のコーディング
7-2 タブレット版のコーディング
7-3 ラップトップ版のコーディング
7-4 リファクタリング

Ch08 自分のプロフィールページへ
8-1 コンテンツの差し替え
8-2 カラーパレット作成
8-3 (もう一歩)下層ページを作成

HTML/CSSブロックコーディング

Amazon  SEshop  その他

HTML/CSSブロックコーディング
デザインをすらすら再現できる

著者:笠井枝理依
発売日:2022年11月16日(水)
定価:2,860円(本体2,600円+税10%)

本書について

本書は、モックアップ(サイトのデザインラフ)をもとに、サイトの構成要素を【ブロック分解】してから、ひとつずつコーディングして【組み立てる】…という本格的なWeb制作さながらのプロセスを、ハンズオンで学習します。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/16684 2022/11/16 07:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング