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

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


形式:
書籍
発売日:
ISBN:
9784798141572
価格:
本体2,680円+税
仕様:
B5変・256ページ
分類:
Web制作

本書籍の他の形式を確認する

  • このエントリーをはてなブックマークに追加

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

本書は、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; ←明示的にフォントサイズを指定
    }

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

ご購入刷数  紙:  電子書籍 最終更新日:2017年02月27日
発生刷 ページ数 書籍改訂刷 電子書籍訂正 内容 登録日
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行目
2刷
line-height: 1.5;
font-size: 1.2rem;  line-height: 1.5;

font-size: 1.2rem;の1行が抜け
2015.11.04
1刷 081
ランキングのCSS[順位の数字のカウントアップ]7行目
2刷
2015.11.13
1刷 151
図14.1
2刷
変更前

図の赤枠部分を「正」の図のように修正します(ボタンの上下左右の余白がわかりやすいように淡く着色し、「間隔 50px」の範囲を修正します)。修正後のp.151はこちら
2015.11.13
1刷 157
「ONE POINT」図の下の文章2行目
2刷
(:hoveの定義は省略しています)。
(:hoverの定義は省略しています)。
2015.11.13
1刷 221
コードの上の本文
文末に以下の文章を追加します。
最後に、transform: scaleY(-1);による画像の上下反転をtransform: none;で上書きし、元に戻します。
2017.02.27
1刷 221
コード
.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刷 221
コード
.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

関連書籍