世界一わかりやすい教科書シリーズ世界一わかりやすい HTMLCSSコーディングとサイト制作の教科書
[改訂2版]

[表紙]世界一わかりやすい HTML&CSSコーディングとサイト制作の教科書[改訂2版]

紙版発売
電子版発売

B5判/352ページ

定価2,948円(本体2,680円+税10%)

ISBN 978-4-297-12547-9

電子版

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

言語の基本学習からサイト作成と管理までを1冊にまとめた入門書!

webサイト制作者を目指す人が必ず習得しなければならない言語「HTMLとCSS」の記述と,サイト制作の基礎知識から公開・管理方法までを15レッスンで解説。HTMLパートはコーディングの基本から画像とリンク,リストとナビゲーション,テーブルおよびフォームのマークアップ方法を,CSSパートでは文字のスタイリングからレイアウト手法までを丁寧に解説。ダウンロードした実習ファイルに記述することで,細かくステップ分けした各単元の内容を手を動かしながら学びます。
専門学校の教壇に立つ著者陣が実際の講義内容を体系立て,さらに学校実施のテストと同等の練習問題を各レッスンの章末に用意した,HTMLとCSSの教科書です。最新エディタ「Visual Studio Code」に対応の改訂版。

こんな方におすすめ

  • Webサイト制作の初学者,Webデザイナー志望者,学生,Webデザインやサイト制作について勉強したい人
  • 各種学校の教師,講師,受講者/セミナーを主催する中堅のWeb制作会社

本書のサンプル

本書の一部ページを,PDFで確認することができます。

本書の紙面イメージは次のとおりです。画像をクリックすることで拡大して確認することができます。

サンプル画像1

サンプル画像2

サンプル画像3

サンプル画像4

サンプル画像5

目次

Lesson01 wwwやwebサイト制作の基本を理解しよう

  • 1-1 webサイトが表示される仕組み
  • 1-2 webサイト制作のキーワード
  • 1-3 webサイトに使用される言語
  • 1-4 コーディングに必要なアプリケーション
  • 1-5 webサイトに使用される画像
  • 1-6 エディタの使い方を学ぶ
  • lesson01─ 練習問題

Lesson02 HTMLコーディングの基本を学ぼう

  • 2-1 HTMLとは
  • 2-2 マークアップとは
  • 2-3 タグと要素と属性
  • 2-4 head要素とbody要素
  • 2-5 head要素の中に入る要素
  • 2-6 webサイトを構成するファイルの管理
  • 2-7 HTMLファイルを作成して保存する
  • 2-8 webサイトの全体像を見てみる
  • lesson02─ 練習問題

Lesson03 画像表示とリンクをマークアップしよう

  • 3-1 画像を表示する
  • 3-2 リンクを設定する
  • 3-3 パスを指定する
  • lesson03─ 練習問題

Lesson04 リストとナビゲーションをマークアップしよう

  • 4-1 順不同リストを作る
  • 4-2 順序付きリストを作る
  • 4-3 定義リストを作る
  • 4-4 リストでナビゲーションを作る
  • lesson04─ 練習問題

Lesson05 表組みをマークアップしよう

  • 5-1 シンプルな表組みを作る
  • 5-2 セルを結合する
  • 5-3 より高度な表組みを作る
  • lesson05─ 練習問題

Lesson06 フォームをマークアップしよう

  • 6-1 フォームの基本を身につける
  • 6-2 入力形式に合わせたフォームパーツを作る
  • 6-3 お問い合わせフォームを作る
  • lesson06─ 練習問題

Lesson07 CSSコーディングの基本を学ぼう

  • 7-1 CSSとは
  • 7-2 CSSの基本ルールを身につける
  • 7-3 HTMLにCSSを組み込む3つの方法
  • 7-4 よく使うセレクタを知る
  • 7-5 特殊なセレクタ「疑似クラス」と「疑似要素」
  • lesson07─ 練習問題

Lesson08 見出しや段落をスタイリングしよう

  • 8-1 文字サイズを調整する
  • 8-2 行間を調整する
  • 8-3 書体を指定する
  • 8-4 文字の色を指定する
  • 8-5 見出しを背景色で装飾する
  • 8-6 見出しを線で装飾する
  • 8-7 見出しの先頭を装飾する
  • 8-8 段落のスタイルを整える
  • lesson08─ 練習問題

Lesson09 CSSレイアウトの基本を学ぼう

  • 9-1 ボックスモデルを理解する
  • 9-2 余白を調整する
  • 9-3 ボックスサイズ(幅・高さ・余白)を計算する
  • 9-4 webサイトの基本レイアウト
  • lesson09─ 練習問題

Lesson10 ページ全体をレイアウトしてみよう

  • 10-1 4つのwebレイアウトパターン
  • 10-2 段組みでレイアウトする
  • 10-3 自由に要素を配置する
  • 10-4 要素を回り込ませる
  • 10-5 要素の横・縦方向の位置を指定してレイアウトする
  • lesson10─ 練習問題

Lesson11 リストとナビゲーションをスタイリングしよう

  • 11-1 リストの装飾について学ぶ
  • 11-2 ナビゲーションを装飾する
  • 11-3 グローバルナビゲーションを作る
  • 11-4 パンくずリストを作る
  • lesson11─ 練習問題

Lesson12 表をスタイリングしよう

  • 12-1 表の装飾について学ぶ
  • 12-2 横線・縦線のみの表を作る
  • 12-3 さまざまな装飾の表を作る
  • lesson12─ 練習問題

Lesson13 フォームをスタイリングしよう

  • 13-1 フォームの装飾について学ぶ
  • 13-2 使いやすい装飾を施す
  • 13-3 ボタンをデザインする
  • lesson13─ 練習問題

Lesson14 webサイト制作を実践してみよう

  • 14-1 コーディングの準備をする
  • 14-2 トップページのHTMLを記述する
  • 14-3 トップページのCSSを記述する
  • 14-4 コース紹介ページを作る
  • 14-5 アクセスページを作る
  • 14-6 レスポンシブデザインにする

Lesson15 webサイトを公開しよう

  • 15-1 サーバーとドメインを準備する
  • 15-2 FTPソフトでアップロードする
  • 15-3 webサイトのデータをチェックする
  • 15-4 webサイトを管理する

著者プロフィール

赤間公太郎(あかまこうたろう)

Lesson01,02,15
株式会社マジカルリミックス 代表取締役CEO。ウェブ制作だけにとどまらず,社内向けのセキュリティ・IT活用トレーニング,セミナー出演,執筆なども意欲的に手がける。全国からの講演依頼も多数。「専門学校デジタルアーツ仙台」の非常勤講師も担当。主な著書に『いちばんやさしいJimdoの教本』(インプレス)『10日で作るかっこいいホームページ Jimdoデザインブック 改訂新版』(エムディエヌコーポレーション)ほか多数の執筆実績。


狩野咲(かりのさき)

web制作会社「株式会社マジカルリミックス」に所属。webサイトのデザイン・コーディング,リスティング広告の運用が主な担当業務。その他,「専門学校デジタルアーツ仙台」で非常勤講師をしている。


鈴木清敬(すずききよあき)

web制作会社「株式会社マジカルリミックス」所属のwebデザイナー。webサイト制作業務の他に「専門学校デジタルアーツ仙台」の非常勤講師を担当。また,ホームページ運営や更新を自分で行いたい人向けの個別レッスンやセミナー講師も務める。