HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方（吉田 真麻）｜翔泳社の本
  1. ホーム >
  2. 書籍 >
  3. HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方

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

著

形式：
書籍
発売日：
ISBN：
9784798141572
定価：
2,948円（本体2,680円＋税10%）
仕様：
B5変・256ページ
カテゴリ：
Web制作
キーワード：
#グラフィックソフト・ツール,#デザイン,#ビジネスデザイン,#イラスト集・作品集
シリーズ：
Web Engineer's Books
紙の書籍
電子書籍

購入はこちら

企業・教育機関での一括購入

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

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

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

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

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

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

PART0　イントロダクション
　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　スマートフォン対応のコーディング

付属データはこちら

お問い合わせ

内容についてのお問い合わせは、正誤表、追加情報をご確認後に、お送りいただくようお願いいたします。

正誤表、追加情報に掲載されていない書籍内容へのお問い合わせや
その他書籍に関するお問い合わせは、書籍のお問い合わせフォームからお送りください。

利用許諾に関するお問い合わせ

本書の書影（表紙画像）をご利用になりたい場合は書影許諾申請フォームから申請をお願いいたします。
書影（表紙画像）以外のご利用については、こちらからお問い合わせください。

  • 55ページ完了段階で.hot-topic .descの文字が大きいままとなる件について

    サンプルサイトを作成する際、Chromeを使用して55ページの記載どおり（以下）にコーディングしていくと、フォントサイズが大きく表示されてしまう場合があります。

    .hot-topic .desc {
    color: #ddc;
    }

    これは、bodyのrem指定を継承したときに発生する、Chromeの不具合のようです（Chrome以外のブラウザではこの現象は発生しません）。

    ▼対処法▼
    以下のいずれかの方法を使うと正常に表示されます。

    ・Chrome以外のブラウザで見る

    あるいは、

    ・その要素に以下のように明示的にフォントサイズを指定する

    .hot-topic .desc {
    color: #ddc;
    font-size: 1.2rem; ←明示的にフォントサイズを指定
    }
この商品の「よくある質問」はありません。

ご購入いただいた書籍の種類を選択してください。

書籍の刷数を選択してください。

刷数は奥付（書籍の最終ページ）に記載されています。

現在表示されている正誤表の対象書籍

書籍の種類:

書籍の刷数:

本書に誤りまたは不十分な記述がありました。下記のとおり訂正し、お詫び申し上げます。

対象の書籍は正誤表がありません。

最終更新日:2021年03月29日
発生刷 ページ数 書籍改訂刷 電子書籍訂正 内容 登録日
1刷 000
「追加情報」があります		 未 未
誤
正 本書の補足事項等は、「追加情報」のページに掲載しています。そちらも併せてご覧ください。
2015.12.07
1刷 021
図2.2		 2刷 済
誤 headerとsidemenuの間→35px sidemenuとfooterの間 →35px
正 headerとsidemenuの間→30px sidemenuとfooterの間 →40px
2015.11.04
1刷 044
リスト「リンクのトランジション効果」		 2刷 済
誤
正
備
考		 緑枠内を訂正します。
2015.11.13
1刷 053
図4.4		 2刷 済
誤
正
2015.11.10
1刷 070
デザインの指定のコードのすぐ下		 2刷 済
誤 　中の画像と日時部分をposition: absolute;で配置するため、親となる.article-boxにはposition: relative;を指定し、画像と日時が入る上下のエリアをpaddingで確保します。
正 　中の画像をposition: absolute;で配置するため、親となる.article-boxにはposition: relative;を指定し、画像が配置されるエリアを上方向のpaddingで確保します。
2016.04.22
1刷 071
最初のCSSコードの2行下		 2刷 済
誤 右端寄せで下から15pxの位置に表示されるようにしましょう。親である.article-boxのpadding部分に収まる形になります。あとはデザインにあわせて背景色、文字色、文字サイズ、文字間隔を指定すれば完了です。
正 右端寄せで下から15pxの位置に表示されるようにしましょう。あとはデザインにあわせて背景色、文字色、文字サイズ、文字間隔を指定すれば完了です。
備
考		 赤字部分を削除します
2016.04.22
1刷 074
ランキングのCSS[中身]		 2刷 未
誤 } .ranking .text { display: inline-block; width: 182px; color: #000; vertical-align: top; line-height: 1.5; }
正 } .ranking .text { display: inline-block; width: 182px; color: #000; vertical-align: top; font-size: 1.2rem; line-height: 1.5; }
備
考		 「font-size: 1.2rem;」を追加します
2019.12.26
1刷 081
ランキングのCSS［順位の数字のカウントアップ］7行目		 2刷 済
誤
正
2015.11.13
1刷 085
【ONE POINT】CURSORプロパティ　右列3番目		 7刷 済
誤 not-arrowed
正 not-allowed
2019.06.03
1刷 151
図14.1		 2刷 済
誤 変更前
正
備
考		 図の赤枠部分を「正」の図のように修正します（ボタンの上下左右の余白がわかりやすいように淡く着色し、「間隔 50px」の範囲を修正します）。修正後のp.151はこちら。
2015.11.13
1刷 157
「ONE POINT」図の下の文章2行目		 2刷 済
誤 （:hoveの定義は省略しています）。
正 （:hoverの定義は省略しています）。
2015.11.13
1刷 166
ONE POINT 上から3行目		 未 未
誤 値を２つ指定すると上下／左右を別々に指定できます。
正 値を２つ指定すると左右／上下を別々に指定できます。
2021.03.29
1刷 221
コードの上の本文		 4刷 済
誤 文末に以下の文章を追加します。
正 最後に、transform: scaleY(-1);による画像の上下反転をtransform: none;で上書きし、元に戻します。
2017.02.27
1刷 221
コード		 4刷 済
誤 .work-box::after { top: 0; height: 100%; background-size: cover; }
正 .work-box::after { top: 0; height: 100%; background-size: cover; transform: none; }
備
考		 5行目に「transform: none;」を追加します。
執筆当時のiOSのバージョンでは表示に不具合があったため、不具合に対応したコードで掲載していましたが、最新のバージョンでは不具合が解消され、書籍掲載の実行結果と異なる表示になるので掲載コードを修正します。
ダウンロードで提供しているサンプルファイルは差し替え済みです（2017年2月27日）。
2017.02.27
1刷 224
リスト「メディアクエリと背景指定の追加」		 2刷 済
誤
正
備
考		 緑枠部分を追加します。
2015.11.13
1刷 239
1行目の前に追加		 2刷 済
誤 　幅と高さを指定できるように…
正 　こちらのコードは、Chapter15で記述した.heading::beforeと.heading::afterのスタイルを コメントアウトしてから適用してください。
　幅と高さを指定できるように…
2016.04.22
1刷 239
本文 下から3行目		 2刷 済
誤 スマートフォンでは2×50.3で7.5px
正 スマートフォンでは25×0.3で7.5px
2015.11.13

感想・レビュー

きゅろ さん

2018-07-05

他の方も書いているように中級者向けの本。 日頃Wordpressを使ってWEBサイトを更新し、CSSは検索して見つけたコードをコピペして使っていましたが、 それで目にしていたプロパティの解説を読んで勉強になりました。 辞典みたいにばーっと羅列してあるのではなく、コーディングしていきながら解説されているので、 実際に使っていく過程をイメージできました。 今後は見つけたコードをもっと気軽に自分でカスタマイズしていけそうです。

ｋｓｋ さん

2018-01-23

中級者以上向けの本。３つの事例を作りながら学んでいく本でわかりやすく、なかなかいい本であった。 問題も章末にあるので腕試しにもなる。

Predora さん

2019-08-18

タイトルの通り、3つの代表的なレイアウトの実装例を書いた本。例がかなり実用的なので、似たレイアウトであれば内容が異なっていても実装できるように作られていて良かった。また、書きながら読み進める形式で、身に付くように作られているのも良かった。