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 (もう一歩)下層ページを作成
この記事は参考になりましたか?
- この記事の著者
-
渡部 拓也(ワタナベ タクヤ)
翔泳社マーケティング課。MarkeZine、CodeZine、EnterpriseZine、Biz/Zine、ほかにて翔泳社の本の紹介記事や著者インタビュー、たまにそれ以外も執筆しています。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社