標準テキストシリーズ例題30+演習問題70でしっかり学ぶ HTML5CSS標準テキスト

書籍の概要

この本の概要

好評いただいた「例題50+演習問題50でしっかり学ぶ HTML5+CSS標準テキスト」の改訂版です。Windows10,Microsoft Edgeに対応しました。本書は,HTMLの主要なタグの使い方を例題を通してわかりやすく紹介し,HTML+CSSによるWebサイトの作成法を解説する書籍です。節末には実力アップのための演習問題(やってみよう!)も用意しています。教育現場での事例や要望にマッチした例題&演習問題と,習熟度の確認・弱点チェックができ,苦手な問題は解説部分に戻って学習できる巻末問題とで,HTMLの基本をしっかり身に付けることができます。

こんな方におすすめ

  • HTMLとCSSの基礎を学習したい人

目次

PART1 ホームページとHTMLの仕組み
Lesson 1 ホームページが見える仕組み

  • 1. ホームページを見るには
  • 2. ホームページの中身
  • 3. ホームページの公開時に気をつけること
  • 4. ホームページ作成には,ブラウザとエディタが必要

Lesson 2 HTMLの基本構造

Lesson 3 ホームページを公開するために必要な知識

  • 1. ホームページ公開領域とURLの取得
  • 2. 公開用の各種ファイルの作成
  • 3. 作成したファイルをFTPでWebサーバに転送

Lesson 4 前準備(HTMLファイルを保存するフォルダーの作成)

  • 1. フォルダー作成の手順

PART2 テキストに意味をつける
Lesson 1 基本のテキスト要素

  • 例題01 日記を書いてみよう

Lesson 2 引用

  • 例題02 読書メモを作ってみよう

Lesson 3 さまざまな文字表現を覚えよう

  • 例題03 強調,略語・定義語,ルビ・下付き・上付き文字

Lesson 4 その他のタグを使ってみよう

  • 例題04 その他のタグ
  • やってみよう! 1 日記を書いてみよう
  • やってみよう! 2 読書メモを作ってみよう
  • やってみよう! 3 強調表現
  • やってみよう! 4 略語や定義語
  • やってみよう! 5 ルビ・下付き・上付き文字
  • やってみよう! 6 整形済みテキスト
  • やってみよう! 7 コピーライトの表示

PART3 画像を表示する
Lesson 1 画像を利用するための準備

  • 1. 主要なWebブラウザで表示できる画像ファイル形式
  • 2. 画像ファイルを格納するフォルダーの用意
  • 3. フォルダー[image]を作成する

Lesson 2 画像ファイルを用意する

  • 1. 本書で利用する画像ファイル

Lesson 3 画像の表示

  • 例題05 写真を表示してみよう
  • やってみよう! 8 画像を表示しよう

PART4 リンクの指定
Lesson 1 リンクとは

  • 例題06 基本的なリンクの指定方法を覚えよう

Lesson 2 相対パスと絶対パス

  • 例題07 相対パス,絶対パスについて理解しよう
  • やってみよう! 9 作成したHTML にリンクを張ろう
  • やってみよう! 10 ページ内リンクを設定しよう
  • やってみよう! 11 新しいタブで開いてみよう
  • やってみよう! 12 画像にリンクを張ろう

PART5 CSSで文字を装飾する
Lesson 1 CSSの役割

  • 1. CSSとは
  • 2. なぜCSSが必要なのか
  • 3. CSSの基本的な記述方法

Lesson 2 CSSをHTMLで読み込むには

  • 例題08 CSSファイルを作り,HTMLからリンクしよう

Lesson 3 背景・文字の装飾

  • 例題09 背景・文字を装飾しよう

Lesson 4 引用部分の装飾

  • 例題10 読書メモを整えよう
  • やってみよう! 13 CSS の読み込み
  • やってみよう! 14 背景色の変更
  • やってみよう! 15 文字色の変更
  • やってみよう! 16 見出しの位置変更
  • やってみよう! 17 文字の大きさをpx,%,emで変更しよう
  • やってみよう! 18 文字の大きさをキーワードで変更しよう
  • やってみよう! 19 フォントを変更しよう
  • やってみよう! 20 読書メモの引用部分を線で囲ってみよう
  • やってみよう! 21 読書メモの引用部分の幅を狭くしよう
  • やってみよう! 22 本文と引用部分の間に余白を作ってみよう
  • やってみよう! 23 引用部分の余白と線の太さ,背景色を調整しよう

PART6 リストを作る
Lesson 1 箇条書きリスト

  • 例題11 リストのマーカーを変更しよう

Lesson 2 順番のついたリスト

  • 例題12 欲しいものリストを作ってみよう

Lesson 3 定義リスト

  • 例題13 料理リストを作ってみよう
  • やってみよう! 24 項目の先頭に「・」がついたリストを作ろう
  • やってみよう! 25 リストのマーカーを変更しよう
  • やってみよう! 26 リスト番号の表示を変更しよう
  • やってみよう! 27 文字色の変更

PART7 ページにファイルを埋め込む
Lesson 1 様々なファイルを埋め込んでみよう

  • 例題14 様々なファイルを埋め込んでみよう
  • やってみよう! 28 HTML ファイルを埋め込もう
  • やってみよう! 29 PDF を埋め込もう
  • やってみよう! 30 サンプル動画のサイズを変更しよう
  • やってみよう! 31 サンプル音声を自動再生しよう
  • やってみよう! 32 Youtube とGoogle マップの表示サイズを変えてみよう

PART8 テーブルを作成する
Lesson 1 テーブルとは

  • 1. テーブルの基本構造

Lesson 2 テーブルの基本要素

  • 例題15 簡単な表を作り,タイトルをつけよう

Lesson 3 表のヘッダー

  • 例題16 表にヘッダー行の指定をしよう

Lesson 4 見出しセルの方向と列のグループ化

  • 例題17 見出しセルの方向を定義し,列のグループ化をしよう

Lesson 5 表のフッター

  • 例題18 合計にあたる部分をフッターに指定しよう

Lesson 6 表を見やすく整える

  • 例題19 テーブルに線を引き,セルに色をつけ見やすく整えよう
  • やってみよう! 33 テーブルを作成しよう
  • やってみよう! 34 tbody要素に色を付けたテーブルを作成しよう
  • やってみよう! 35 thead要素に色を付けたテーブルを作成しよう
  • やってみよう! 36 caption 要素を左寄せにしたテーブルを作成しよう
  • やってみよう! 37 見出しセルに色をつけたテーブルを作成しよう
  • やってみよう! 38 商品名の列をグループ化し色をつけたテーブルを作成しよう
  • やってみよう! 39 tfoot要素に色をつけたテーブルを作成しよう
  • やってみよう! 40 表を見やすく整えよう

PART9 フォームを作る
Lesson 1 フォームとは

  • 1. formの基本構造

Lesson 2 テキストエリアとラジオボタン

  • 例題20 名前入力欄と性別選択のフォームを作ってみよう

Lesson 3 フォームのグループ化と,同意文がセットになったボタン

  • 例題21 フォームをグループにして説明を加えてみよう

Lesson 4 便利なフォーム機能

  • 例題22 フォームに便利な入力欄を追加しよう
  • やってみよう! 41 ふりがなの入力欄を追加しよう
  • やってみよう! 42 フォームを見やすくしよう
  • やってみよう! 43 その他の値を入れてみよう
  • やってみよう! 44 パスワード入力欄を作ってみよう
  • やってみよう! 45 検索用入力欄を作ってみよう
  • やってみよう! 46 日付入力欄を作ってみよう

PART10 カテゴリーとセクション
Lesson 1 カテゴリーとコンテンツモデルについて理解しよう

  • 1. カテゴリーとは
  • 2. コンテンツモデルとは

Lesson 2 アウトラインとセクション

  • 例題23 文章を内容で切り分けてみよう

Lesson 3 記事を作ってみよう

  • 例題24 ブログ記事を書いてみよう

Lesson 4 ナビゲーションとフッター

  • 例題25 ナビゲーションとフッターを追加しよう

Lesson 5 特定の意味がない要素

  • 例題26 適切な要素がない場合に使ってみよう
  • やってみよう! 47 セクションを追加しよう
  • やってみよう! 48 hr 要素を追加しよう
  • やってみよう! 49 新着商品ページを作ろう
  • やってみよう! 50 おすすめ商品をのせよう
  • やってみよう! 51 キャプションつきの画像を使おう
  • やってみよう! 52 連絡先情報を追加しよう
  • やってみよう! 53 フッターに要素をまとめよう
  • やってみよう! 54 ナビゲーションを作ろう
  • やってみよう! 55 div 要素と span 要素を使おう

PART11 ホームページをデザインする
Lesson 1 レイアウトとは

Lesson 2 ページ全体の設定

  • 例題27 ページ全体の設定をしよう

Lesson 3 要素を左右に並べる

  • 例題28 マークアップしたものを並べてみよう
  • やってみよう! 56 背景画像を指定しよう
  • やってみよう! 57 背景画像の繰り返しを指定しよう
  • やってみよう! 58 ナビゲーションを並べよう
  • やってみよう! 59 幅を変更してみよう
  • やってみよう! 60 上部のあきを狭くしよう
  • やってみよう! 61 サイドバーの位置を右にしてみよう

PART12 ホームページを飾る
Lesson 1 色,図形,アニメーション

  • 例題29 CSSで設定してみよう
  • やってみよう! 62 グラデーションと影の距離を変えてみよう
  • やってみよう! 63 クリックすると重なる四角を描こう
  • やってみよう! 64 メニューを角丸ボタン風にしてみよう
  • やってみよう! 65 四角の動きを変えてみよう

PART13 スマートフォンやSNSの対応
Lesson 1 基本的なルールとWebサービスの利用

  • 例題30 スマートフォン向けのCSS を設定する
  • やってみよう! 66 viewport を入れてみよう
  • やってみよう! 67 スマートフォン用にCSSを追加してみよう
  • やってみよう! 68 Web フォントを使ってみよう
  • やってみよう! 69 Web フォントを変更してみよう
  • やってみよう! 70 ソーシャルアイコンを入れてみよう

索引