今すぐ使えるかんたんシリーズ今すぐ使えるかんたん
ホームページHTMLCSS入門
[改訂2版]

書籍の概要

この本の概要

「ホームページを手づくりしよう!」
Webサイトの構成やデザインが複雑になり,コーディング専用のエディターで効率よく制作する時代ですが,コードを丁寧に記述しながらホームページをつくりあげるのも楽しいもの。本書は豊富なビジュアルと細かな入力&操作解説で,シンプルなページを作成しながらHTMLとCSSが学習できる入門書です。「古都さんぽ」をテーマとした①トップページと②風景紹介の記事ページ,③観光サイトへのリンク集ページ,④写真ギャラリーページ,⑤自己紹介の5ページ構成のサイトをチュートリアル形式で作成し,無料ホームページサービスで公開するまでを解説します。Windows10付属のアプリとCDに収録したフリーソフトでサイト作成がすぐにはじめられます。解説のステップごとに用意したHTML,CSS,画像や動画ファイルも収録しているので,迷わずに学習を進めることができます。

こんな方におすすめ

  • HTMLやCSSを記述しながらホームページづくりを楽しみたい方
  • ビジュアルの多い操作解説方式でWebサイト制作を学びたい方
  • 手を動かしながらHTMLとCSSの記述を身につけたい方

目次

第1章 ホームページづくりをはじめよう

  • Section 01 ホームページってなに?
  • Section 02 ホームページのしくみを知ろう
  • Section 03 ホームページをつくる手順を学ぼう
  • Section 04 パソコンに作業場をつくろう
  • Section 05 テキストエディターの準備をしよう

第2章 文章を表示するホームページをつくろう

  • Section 06 HTMLってなに?
  • Section 07 HTMLファイルをつくってみよう
  • Section 08 ホームページの基本部分をつくろう
  • Section 09 文字を正しく表示しよう
  • Section 10 ホームページにタイトルを付けよう
  • Section 11 文章を段落ごとに分けよう
  • Section 12 見出しを付けて読みやすくしよう
  • Section 13 改行を入れて見やすくしよう
  • Section 14 文章の一部を強調しよう
  • Section 15 箇条書きで文章をまとめよう

第3章 ホームページをつなぐリンクを設定しよう

  • Section 16 リンクのしくみを確認しよう
  • Section 17 リンクの張り方を学ぼう
  • Section 18 外のホームページにリンクを張ってみよう
  • Section 19 同じページ内にリンクを設定しよう

第4章 ホームページを装飾しよう

  • Section 20 スタイルシートってなに?
  • Section 21 スタイルシートの書き方を学ぼう
  • Section 22 スタイルシートを使ってみよう
  • Section 23 文字の色を変えよう
  • Section 24 背景の色を変えよう
  • Section 25 文字のサイズを変えよう
  • Section 26 見出し文字の太さを変えよう
  • Section 27 新しいCSSファイルを追加しよう
  • Section 28 箇条書きの記号を変えよう
  • Section 29 リンク文字の下線を消そう
  • Section 30 見出し文字に影を付けよう

第5章 画像をホームページに掲載してみよう

  • Section 31 画像をホームページで使おう
  • Section 32 ホームページ用に写真サイズを調整しよう
  • Section 33 ホームページのタイトルを画像でつくろう
  • Section 34 ホームページの中に画像を配置しよう
  • Section 35 画像のまわりに文章を配置しよう

第6章 表をホームページに掲載してみよう

  • Section 36 表のあるホームページをつくるには
  • Section 37 表全体をまずは作成しよう
  • Section 38 表の見出し行をつくろう
  • Section 39 罫線の太さを設定しよう
  • Section 40 背景に色を付けてみよう
  • Section 41 罫線と文字のあいだを整えよう

第7章 ホームページを見やすくレイアウトしよう

  • Section 42 スタイルシートでレイアウトを調整しよう
  • Section 43 文字を好きな位置でそろえよう
  • Section 44 行間を空けて文章を読みやすくしよう
  • Section 45 文字と文字のあいだを調節しよう
  • Section 46 見出しと段落のあいだを空けよう
  • Section 47 画像のまわりの余白を調節しよう
  • Section 48 文章の幅を調整しよう
  • Section 49 横並びのメニューをつくろう
  • Section 50 画像とメニューの隙間をなくそう
  • Section 51 レイアウトを変更してみよう
  • Section 52 2段組みのレイアウトに変えよう

第8章 いろいろなページをつくってみよう

  • Section 53 新しいページをつくってリンクさせよう
  • Section 54 トップページをつくろう
  • Section 55 トップページをレイアウトしよう
  • Section 56 ギャラリーページをつくろう
  • Section 57 ギャラリーページをレイアウトしよう
  • Section 58 プロフィールページをつくろう
  • Section 59 リンク集ページをつくろう
  • Section 60 ページどうしをリンクさせよう

第9章 ホームページを公開しよう

  • Section 61 ホームページの公開に必要な作業
  • Section 62 無料ホームページサービスを利用しよう
  • Section 63 ファイルを転送しよう
  • Section 64 つくったホームページを確認しよう
  • Section 65 ホームページを更新しよう

第10章 ホームページをさらに工夫してみよう

  • Section 66 リンクの文字の色を変えよう
  • Section 67 ポインターをあわせると画像が半透明になるようにしよう
  • Section 68 検索エンジン用のキーワードを設定しよう
  • Section 69 SNS用に表示する情報を設定しよう
  • Section 70 スマートフォンでもきれいに表示しよう
  • Section 71 ホームページにアイコンを追加しよう
  • Section 72 ホームページにGoogleマップを表示しよう
  • Section 73 Facebookのいいね!ボタンを設置しよう
  • Section 74 YouTubeのアカウントを作成しよう
  • Section 75 YouTube動画をホームページに表示しよう

Appendix

  • Appendix 01 ホームページがうまく表示できないときには?
  • Appendix 02 本書で使用したHTMLとCSSのまとめ
  • Appendix 03 スタイルシートで使う単位
  • Appendix 04 ホームページ用語集