HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方
フロントエンドエンジニアから学ぶ制作現場の実践的なテクニック！
本書は、HTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ書籍です。
現在主流なWebページのデザインスタイル、「スタンダードレイアウト」「グリッドレイアウト」「シングルページレイアウト」を適用した3つのサイトを作りながら、各スタイルの特徴や使い分け、コーディングテクニックを学びます。
実際のWeb 制作の現場と同様に、サイトのデザインを基にして骨格を見極め、枠組みから中身までひと通りコーディングするというフローをなぞることで、HTML5/CSS3の実用的なコーディングスキルやテクニックを無理なく身につけることができます。
3つのサイトを作成することで、「本格的なレイアウトのサイトを作れた」「こういったレイアウトの場合こうコーディングすればいいという具体的なテクニックがわかった」というような手応えを得やすく、学ぶことへのモチベーションが下がらずに高まる構成にしています。
駆け出しのフロントエンドエンジニアや、HTML/CSSコーディングに興味はあっても実践の機会がないデザイナー、バックエンドエンジニアなどが、実際にサイトを作ることを通してスキルアップすることを目標とした一冊です。
A 本書で作成するサイト
B コーディングの進め方
C デベロッパーツールの使い方
D 本書の読み方
PART1 スタンダードレイアウト
01 このPARTで作るサイト
02 ベースのコーディング
03 ヘッダーのコーディング
04 メイン領域のコーディング
05 サイドメニューのコーディング
06 フッターのコーディング
PART2 グリッドレイアウト
07 このPARTで作るサイト
08 ベースのコーディング
09 ボックスのコーディング
10 中ボックスと大ボックスのコーディング
11 ナビゲーションのコーディング
PART3 シングルページレイアウト
12 このPARTで作るサイト
13 ベースのコーディング
14 ヘッダーのコーディング
15 セクション1（ABOUT ME）のコーディング
16 セクション2（WORKS）のコーディング
17 セクション3（MY SKILLS）のコーディング
18 セクション4（CONTACT）とフッターのコーディング
19 スマートフォン対応の下準備
20 スマートフォン対応のコーディング
感想・レビュー 
きゅろ さん
2018-07-05
他の方も書いているように中級者向けの本。 日頃Wordpressを使ってWEBサイトを更新し、CSSは検索して見つけたコードをコピペして使っていましたが、 それで目にしていたプロパティの解説を読んで勉強になりました。 辞典みたいにばーっと羅列してあるのではなく、コーディングしていきながら解説されているので、 実際に使っていく過程をイメージできました。 今後は見つけたコードをもっと気軽に自分でカスタマイズしていけそうです。
ｋｓｋ さん
2018-01-23
中級者以上向けの本。３つの事例を作りながら学んでいく本でわかりやすく、なかなかいい本であった。 問題も章末にあるので腕試しにもなる。
Predora さん
2019-08-18
タイトルの通り、3つの代表的なレイアウトの実装例を書いた本。例がかなり実用的なので、似たレイアウトであれば内容が異なっていても実装できるように作られていて良かった。また、書きながら読み進める形式で、身に付くように作られているのも良かった。
関連リンク
あなたへのおすすめ
関連商品
おすすめ特集
【2023年上半期 ベスト20】新刊IT書を筆頭に、エンジニア必携・マネジメント本など人気書籍をご紹介
小学校で必修に！話題のプログラミング教育の本はこちら
ベンダー資格に関する書籍を試験ごとに紹介！ベンダー資格試験対策本特集
プログラマ脳を鍛える！エンジニアが読むべきアルゴリズムと数学の本特集
基本的な描き方から高度なテクニック、デジタルツールの使い方まで！デジタルイラスト上達本のご紹介
開発・ビジネス・マーケティング・EC運営・営業支援など、幅広いジャンルの講座を開催
ログイン