概要

「ホームページを手づくりしよう！」
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　ホームページ用語集

サポート

ダウンロード

電子版用ダウンロード

電子版用に，付録CD-ROM収録コンテンツを以下から入手できます。ダウンロードには電子版本紙に掲載されているIDとパスワードが必要です。