現場で迷わない実務レベルのテクニックを身につける
本書では、長年の講師経験を持つ、現役Webクリエイターの著者が、入門レベルの知識だけでは切り崩せない、実務ならではのコーディングの悩み・課題をわかりやすく解説。仕様書を読むだけでは得られない「現場の経験則」をもとに、状況や目的に応じた、適切なコーディングがわかります。また、練習問題ではサンプルコードもダウンロードできるので、手元で実際の表示を確かめながら理解を深めることができます。Web制作には無数ともいえるアプローチがあり、ただなんとなく知識を蓄えているだけでは、実務で求められるコーディングの攻略は困難です。本書を通して、仕様書では得られない、現場の生きたノウハウを身につけましょう。
▼本書で解説しているトピック例
・sectionとarticle、どのように使い分ける？
・background-imageではなく、imgを使うべき画像とは？
・カラムレイアウトに適しているのは、float・flex・gridのどれ？
・Class名の位置はどのように判断すればいい？
・運用しやすいコードを書くためには何に配慮する？
■書籍概要
『プロのコーディングが身につくHTML/CSSスキルアップレッスン すぐに活かせてずっと役立つ現場のテクニック』
著者：千貫 りこ
発売日：2023年1月17日
定価：2,750円（本体2,500円＋税10%）
判型：B5変・264ページ
https://www.shoeisha.co.jp/book/detail/9784798173009
全国の書店、ネット書店などでご購入いただけます
・翔泳社の通販 SEshop: https://www.seshop.com/product/detail/25051
・Amazon: https://www.amazon.co.jp/dp/4798173002
■目次
Lesson1 デザインカンプを正しく理解する
1-1 カンプから画像を書き出す
1-2 HTML/CSSファイルを新規作成する
Lesson2 プレーンなHTMLを作成する
2-1 HTMLについて知っておきたいこと
2-2 マークアップの準備
2-3 見出しをマークアップする
2-4 情報を区分化する
2-5 テキストをマークアップする
2-6 定番パーツをマークアップする
2-7 文法チェックする
Lesson3 デザイン実装のための情報を追加する
3-1 divタグでグループ化する
3-2 class/id名をつける
3-3 CMS に組み込みやすいコードを考える
Lesson4 ページのレイアウトを実装する
4-1 ページ全体をレイアウトする
4-2 実際にレイアウトしてみる
4-3 ナビゲーションのレイアウト
4-4 数値の単位に配慮する
Lesson5 パーツのデザインを作り込む
5-1 定番のパーツをスタイリングする
5-2 テキストのスタイリング
Lesson6 レスポンシブ対応する
6-1 レスポンシブ対応とは
6-2 異なる画像を表示する
6-3 テキストの改行位置を制御する
6-4 サイトナビゲーション
6-5 運用を見すえたカラムの実装
6-6 ブレイクポイント
Lesson7 ワンランク上のコーディングを目指す
7-1 「よいコード」を考える
7-2 開発者向けツールを活用する
7-3 Sassをはじめる
■著者プロフィール
千貫 りこ（せんがん・りこ）
フリーランスのWebサイトクリエイター。主な業務はWebサイトの企画・制作。街のクリニックから誰もが知るナショナルブランドまで、クライアントは多種多様。プロクリエイター向け講座の講師を10年、専門学校での非常勤講師（現在は休止中）をつとめる他、2018年より株式会社メンバーズの技術顧問に就任。若手社員育成のため月1回の講座と新入社員研修を担当。これまでにレビューしたコードの数は1000を超える。