概要
本書は,コーダー,フロントエンジニアを目指す人のためのHTMLとCSSのコーディング独習書です。業界を目指すためにはコーディングは必須です。ホームページ時代のタグの記述方法ではなく,これからWeb業界を歩んで行く人たちに正しいコードの書き方,より現在の業界水準にあった正しいコードの書き方が求められています。実際にコードを書くことで刷り込むように覚えられます。サンプルはダウンロードして確認することができます。「基礎」「応用」「実践」の3部構成で,段階的にステップアップしながら学びます。
こんな方におすすめ
- コーダー,フロントエンジニアをこれから目指す人
- Web業界標準の正しいHTML,CSSコードのマークアップ方法を知りたい人
- 実際にHTML,CSSコードを試しながら学びたい人
目次
Chapter1 HTMLとCSSを学ぶ準備
- Lesson1 HTMLとCSSの役割と関係
- Lesson2 パソコンの設定をする
Chapter2 HTMLとCSSの基本
- Lesson1 HTMLの基本
- Lesson2 CSSの基本
- Lesson3 HTMLとCSSを連携する
- COLUMN セレクタの詳細度と優先度
Chapter3 テキストと画像
- Lesson1 テキストをマークアップする
- Lesson2 テキストにスタイルを指定する
- Lesson3 他のページへリンクする
- Lesson4 リンクにスタイルを指定する
- Lesson5 項目と説明リストを作成する
- Lesson6 画像と動画を表示する
- COLUMN 正しいHTMLを書こう
Chapter4 テーブル
- Lesson1 表組みをマークアップする
- Lesson2 テーブルにスタイルを指定する
- Lesson3 複数行・列にまたがるセルを作る
Chapter5 レイアウト
- Lesson1 ボックスとは
- Lesson2 ボックスに背景をつける
- Lesson3 ボックスに余白をつける
- Lesson4 ボックスの大きさを指定する
- Lesson5 displayプロパティを使ってレイアウトする
- Lesson6 floatプロパティを使ってレイアウトする
- Lesson7 positionプロパティを使ってレイアウトする
- Lesson8 flexboxを使ってレイアウトする
- COLUMN セクショニング要素とコンテンツ構造
Chapter6 フォーム
- Lesson1 フォームの仕組み
- Lesson2 テキスト入力欄を作成する
- Lesson3 選択肢を作成する
- Lesson4 入力欄にスタイルを指定する
- Lesson5 フォーム用ボタンを作成する
Chapter7 スマートフォン対応
- Lesson1 モバイルサイズで表示を確認する
- Lesson2 コンテンツのサイズを調整する
- Lesson3 メディアクエリの使い方
Chapter8 いろいろな実践パターン
- Lesson1 ボックスに影をつける
- Lesson2 リストのマーカーを変更する
- Lesson3 テキストの前後にアイコンをつける
- Lesson4 画像のサイズをコントロールする
- Lesson5 ウェブフォントを使ってみる
- Lesson6 凝った日本語表現をする
- Lesson7 凝ったデザインのテーブルを作成する
- Lesson8 ページ内リンクとボタンの固定方法
サポート
ダウンロード
(2018年5月21日更新)
本書で使用しているサンプルファイルをダウンロードすることができます。
なお,すべてのサンプルファイルを用意しているわけではありませんので,あらかじめご了承いただき,ご利用をお願いいたします。
- ダウンロード
- サンプルファイル(HTMLCSS_Samplefile.zip)
サンプルファイルのご利用方法は本書P.4「本書の使い方」およびP.6「サンプルファイルのダウンロード」をご覧ください。
サンプルファイルは圧縮されていますので,お使いのコンピュータにダウンロードしたあとは,フォルダを展開してからご利用ください。
ダウンロードしたファイルは著作権法によって保護されており,本書の購入者が本書学習の目的での使用に限定し、許諾します。それ以外の目的に利用すること,二次配布することは固く禁じます。また購入者以外の利用は禁止します。
サンプルファイルは任意のダウンロードサービスです。ご利用についてはご自身の判断,責任で行っていただきますよう,お願いします。
お使いのPC およびインターネット環境下でのダウンロードの不具合に関するお問い合わせは,ご遠慮ください。
正誤表
本書の以下の部分に誤りがありました。ここに訂正するとともに,ご迷惑をおかけしたことを深くお詫び申し上げます。
(2019年1月11日最終更新)
正誤表のPDFファイルを用意しました。