HTML5/CSS3モダンコーディング: フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シ

著者 : 吉田真麻

• 翔泳社 (2015年11月1日発売)

作品紹介・あらすじ

フロントエンドエンジニアから学ぶ制作現場の実践的なテクニック！

本書は、HTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ書籍です。

現在主流なWebページのデザインスタイル、「スタンダードレイアウト」「グリッドレイアウト」「シングルページレイアウト」を適用した3つのサイトを作りながら、各スタイルの特徴や使い分け、コーディングテクニックを学びます。

実際のWeb 制作の現場と同様に、サイトのデザインを基にして骨格を見極め、枠組みから中身までひと通りコーディングするというフローをなぞることで、HTML5/CSS3の実用的なコーディングスキルやテクニックを無理なく身につけることができます。

3つのサイトを作成することで、「本格的なレイアウトのサイトを作れた」「こういったレイアウトの場合こうコーディングすればいいという具体的なテクニックがわかった」というような手応えを得やすく、学ぶことへのモチベーションが下がらずに高まる構成にしています。

駆け出しのフロントエンドエンジニアや、HTML/CSSコーディングに興味はあっても実践の機会がないデザイナー、バックエンドエンジニアなどが、実際にサイトを作ることを通してスキルアップすることを目標とした一冊です。

感想・レビュー・書評

[koogawaさんの感想 · 2017年6月9日]

HTML4/CSS2 の知識で止まっていたので購入しました。実際に手を動かしながら進められるのがとても良いです。セクションの最後にセルフコーディングに挑戦するコーナーがあるので、そこで力試しができます

[全ての本さんの感想 · 2021年9月7日]

例は少ないけど、その分、ひとつひとつを深く知ることができる。「ONE POINT」というコラム的に書かれているものがとても良い。サンプルのCSS読込を解除したものと比較しながら勉強すると良い。HTMLではひたすらsectionを作って、CSSで大胆に見た目を変えるものなのだな〜とわかった（初心者）。
scriptについては触れていない。

[冬野 ぺんぎんさんの感想 · 2019年5月19日]

マークアップの基礎能力は上がります。
flexに対応してないので 独自に書き直したり、scss にしたりしてみるといいかもです

[sakaenetさんの感想 · 2017年10月11日]

HTML4の名残が残っているコーディングをしていたので、アップデートのために手を動かしてみました。

なんとなくでやっていた部分のCSS3が理解できてよかったし、おそらく一番使うだろうと思うチュートリアルがたくさんあっておすすめです。

また、よく使うであろうレイアウトをまとめて書かれているので、コーディング早い人だったら1日もなく全部コーディングできるのではと思う内容。

ただし、width100%を指定した際のMozilla系でのスペースができてしまう問題などに関しては書かれておらず、そこはもう少し配慮してほしいなと思いました。

とはいえ、良書は良書です。

[sampickさんの感想 · 2016年10月15日]

個人的に、スタートこれから入りました。最初は「アレっ？動かない」という場面がありましたが、メニューボタンが動いたり、WRAPPERの設定でうまく枠に納めたりできたり、よく見るWEBサイトのメニューボタンなどが自分で出来てとても楽しく覚えることが出来ました。だいたい出来ないところはネットで少し調べたら、出来ました。
クラス指定、マルチクラスが分からなかったりして、うまくホバーが当てれなかったりしたところがありました。

[nabeliwoさんの感想 · 2016年9月16日]

フロントエンドのエンジニアを始めて2年半になるが、恥ずかしながら今読んでも勉強になることが多い本だった。
HTML5からの新要素で全然使っていなかったものや、しっかり理解できていなかったルールを把握することができた。
初心者向けではあるが、初心者でなくても一読しておくと学びが多いと思う。
flexboxについて省いているのは仕方ないとは思うが、著者の方のflexboxの使い方について詳しく聞きたいなと感じた。

[whitemindさんの感想 · 2016年7月16日]

2016 7/16
HTML5&CSS3 レッスンブック&デザインブックができたので少し難易度の高い本に挑戦してみようと購入。
結論から言うと挫折。
冒頭から目からウロコの裏技を効率の良い教えてもらって感激したが、やっているうちに段々と疲れてくる。htmlとcssの理解が弱い上にJQueryとJavaScriptも同時に勉強しているのであんまりトリッキーな話を理解する余裕がない！
しかしHTMLとCSSの勉強は続けたいので「HTML5&CSS3標準デザイン講座」を購入、この本はまた改めて挑戦します！

[yuh♂さんの感想 · 2016年5月15日]

実例を挙げて説明してあるので分かりやすい。
フルカラーの上、ページの端に色や見出しを配置されているから、栞を挟まなくてもページを探しやすい。

[ちりちゃんさんの感想 · 2016年2月18日]

実際にソースとして使える！ものすごく参考になりました

[いちりさんの感想 · 2015年11月4日]

古い知識を刷新する入口にちょうどいい足掛かり

著者プロフィール

「2015年 『HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方』 で使われていた紹介文から引用しています。」