本書をご購入する前に、注意事項、学習内容詳細、サンプルを必ずお読み下さい

本書に興味を持っていただき、誠にありがとうございます。

（本文から一部抜粋）

-------------------------------------------------------
赤色がコンテンツ部分一杯に広がる理由ですが、
floatを設定した「section」タグの親タグ「article」が、
高さを失っていることが原因です。
これが世に名高い、、、

『崩壊ダーーー！！HTML崩壊ダーーー！！』

HTML崩壊ではなくて、「floatの親タグ高さ失う問題」です。、、、
-------------------------------------------------------

目標

オーソドックスな段組（レイアウトの大枠）を作成する技術を学習します。
成果物の特徴は次の通りです。

1、画面遷移なし。１画面のみ
2、グローバルメニュー、コンテンツ部分、サイドメニュー、フッターを作成
3、HTMLファイルは50行以内です。学習用なので非常にシンプルです。
4、CSSファイルは80行以内です。

段組で必要な技術を習得します。

想定読者

HTMLとCSSを一通り学習した方で、
「floatを利用してWebレイアウトをすると表示が崩れる」
とお悩みの方

構成

成果物を作成する技術を学習します。

HTMLの学習

1、ブロックレベル要素
2、インライン要素

CSSの学習
主にfloatの学習

その他、初学者のための章もあります。
簡単と思ったら、スキップして頂いて問題ありません。

成果物作成
1画面のWebサイトを作成します。
次の手順で少しずつ進みます。

[CSSを適用]→[失敗!!]→[なぜ?]→[やり直し]→[できた!!]

トライアンドエラーを繰り返しながら、理解を深めます。

最終到達点

clearfixがどのようなものか理解できる。
（本書の内容にclearfixの学習は含まれません。その手前まで学習します。）

動作確認

Firefox 48.0、IE11、Chrome50で動作確認済み

注意事項

1. HTMLタグを1つずつ解説する事はありません。


2. CSSを1つずつ解説する事はありません。


3. WEBセキュリティは対象外です。


4. WEBデザインの書物ではありません。


5. プロフェッショナル用の書物ではありません。


6. 正確性よりも参考書として適切なサイズのサンプルになるように心がけました。


7. 表紙のイラストは事前の予告なく大幅に変更する可能性があります。


8. レスポンシブ非対応


9. 画像はご自身でご用意下さい。


10. グラフィックスの学習はありません。


11. Web技術の参考書ではありません。


12. Fire HDX、Fire HD、Fire HDX 8.9、Kindle Voyageのプレビューツールで表示確認を行ないました（それ以外の端末でレビューしていません）。


13. 本書は画面キャプチャを使用しません。Webブラウザの表示は全てイメージ図です（実際の表示と異なります）。


14. ご利用する端末がカラー未対応の場合、本書は役に立ちません（色を指し示しながら例題を解説するからです）。


15. 本書はリフロー型なので、利用する端末により見え方が異なります

学習内容詳細

Hello HTML
学習環境
Hello_HTML（初めてのタグ）
Hello_HTML（タグの解説）
Hello_HTML（初めてのHTML）
ブロックレベル要素
インライン要素
画像を表示１
画像を表示２
アンカー

CSS
セレクタ１
セレクタ２
idとクラス
サイズ指定（ px、em、rem の違い）
marginとpadding
float
img
リスト
アンカー（　擬似クラスを少々　）
色の指定
枠の指定
HTML要素（header、main、article、section、navi）

課題作成
課題作成（ヘッダー部分）
課題作成（画面中央部分）
課題作成（コンテンツ部分とサイドメニュー）
課題作成（コンテンツ作成）
課題作成（完成）
課題作成（clearfixの手前）

参考サイト

https://momdo.github.io/html5/Overview.html
HTML5の新しいセクションタグの解釈は、このサイトに準拠します。


floatの挙動を学習する書物と言えます。