できるホームページHTML&CSS入門 Windows 10/8.1/7対応 できるシリーズ 【読書感想文】　普段何気なくみているホームページの裏側と作り方

★★★★☆
Amazonでレビューしたものです

1.ホームページの作り方

こちらの本からの引用です。

すごいわかりやすい説明だなと思いました。

2.HTMLとはCSSとは

①HTML＝HyperText Markup Language

そもそもHTMLとはなんぞや、という話ですが、

こちらの本では、

と説明されています。

wikipediaでは、ハイパーテキストを記述するためのマークアップ言語の1つと記載されています。

なんで日本語じゃないの、日本語使えや、と思いますが、

コンピュータは人間の言葉は理解できないんだそうです。
0か1。0100011011001010、、、という数字の世界に彼らはいるようです。

０か１だと今度は人間が理解できないので、
橋渡しするために、多くのコンピュータ言語が生まれているようです。

で、そのコンピュータ言語なかにもさらに種類がありまして、

そのうちの１つの種類が、データ記述言語になり、さらにその中にマークアップ言語が含まれるようです。

半角の＜＞で囲んで、title、body,などと記載していくのが特徴的です。

このnoteで半角の＜＞を入れると変な表示になる理由がわかりました。。

②CSS=Cascading Style Sheets

CSSについてはこちらの本では、

となっています。

HTMLでホームページの骨格を整えて、その見栄えを良くするためにさらに別の言語を使って修飾するということのようですね。

二重にやるのは面倒そうにも見えますが、
昔々、20年以上前のホームページって今みたいに綺麗じゃなかった記憶があります。
それがHTMLだけだったのでしょうね。
ということは、今のホームページが見やすいのはCSSの効果もあるのでしょうね。

こっちの方がいいかなあ、とおもいます。二段重ねなのはちょっと面倒ですが。

こちらの本は、飼っている犬を紹介するホームページを作っていくという設定で、そのホームページを作る流れを解説しています。
まず、HTMLについて解説をして、途中からCSSについて解説されています。

3.さらにTeraPadを使って

で、さらにさらに、

HTMLファイルを作っていくには、TeraPadという無料のテキストエディターを使うように進めています。

テキストエディターとは、メモ帳とかも含まれるので、メモ帳でもHTMLファイルは作れるようなのですが、TeraPadはタグが色分けされて見やすく、作りやすいとこの本では行っています。

TeraPadで、HTMLファイルを作り、ライブラリに保存。
レンタルサーバーを申し込む。
そして、「FTPソフト」でホームページをサーバーに保存する。
という流れになっています。
こちらではFTPソフトとして、FFFTPを紹介しています。

https://ja.osdn.net/projects/ffftp/

有志の作っている無料ソフトだそうです。

でも、うち、、

Macなんですよねえ。。。

Macでもテキストエディットというのがあるらしいです。

おそらく探せば、似たようなものがあるでしょうし、HTMLやCSSは共通なので、無駄にはならないと思います。

とにかくタグが多くって、、覚えるのはだいぶ大変そうです。
実際に作れば多少覚えられるのでしょう。

今やっているブログ（blogger)でHTMLビューというのがあるので、それを見ながら対照させていきたいと思います。

4.目次

まえがき
できるシリーズの読み方
本書で作成するホームページと身に付くスキル

第１章　ホームページの仕組みを知ろう
1 ホームページって何？　＜ホームページ＞
2 ホームページ作りを理解しよう　＜ホームページ作成の流れ＞
3 ホームページの基本を知ろう　＜HTMLファイル＞
4 ホームページを無料で作ろう　＜テキストエディター＞
5 ホームページのテーマを決めよう　＜テーマの決定＞
この章のまとめ

第２章　ホームページを作る準備をしよう
6 ファイルの種類が分かるようにするには　＜フォルダーオプション＞
　テクニック　ファイルの種類は拡張子で判断する
7 HTMLファイルを保存するフォルダーを作るには　＜新しいフォルダー＞
8 HTMLファイルを作るには　＜名前を付けて保存＞
　テクニック　既存のWebブラウザーを変更するには
9 HTMLファイルを更新するには　＜HTMLファイルの更新と確認＞
この章のまとめ

第３章　ホームページに表示する文章を作ろう
10 文章を構成するタグを知ろう　＜文章を構成するタグ＞
11 HTMLファイルの基本部分を作るには　＜DOCTYPE, htmlタグ＞
12 ホームページの基本部分を作るには　＜headタグ、bodyタグ＞
13 日本語を正しく表示するには　＜文字コードの指定＞
14 ホームページにタイトルをつけるには　＜titleタグ＞
15 見出しを付けるには　＜h1タグ、h2タグ＞
テクニック　タグの内容に「＜」「＞」「＆」を使いたいときは
16 本文を段落と改行を使って入力するには　＜pタグ、brタグ＞
17 文字を強調するには　＜emタグ＞
18 箇条書きのリストを作るには　＜ulタグ、liタグ＞
テクニック　番号付きのリストを作る
この章のまとめ
練習問題　解答

第４章　リンクを張ってホームページをつなげよう
19 リンクでホームページを充実させよう　＜リンク＞
20 属性の仕組みを知ろう　＜属性と値＞
21 ほかのホームページにリンクを張るには　＜aタグ＞
22 見出しにリンクを張るには　＜href属性、id属性＞
テクニック　リンクの色は元に戻せる
この章のまとめ
練習問題　解答

第５章　ホームページを公開しよう
23 ホームページ公開の準備をするには　＜レンタルサーバーの申し込み＞
24 ファイルを保存する準備をするには　＜FFFTP＞
25 ホームページのファイルをサーバーに保存するには　＜アップロード＞
26 公開したホームページを確認するには　＜URLの確認＞
テクニック　「index.html」は入力しなくても表示される
27 検索サイトに登録するには　＜検索サイトへの登録＞
テクニック　Googleにホームページを登録しよう
この章のまとめ

第６章　スタイルシートでデザインを整えよう
28 スタイルシートって何？　＜スタイルシート＞
29 スタイルシートの仕組みを知ろう　＜デザインの統一＞
30 スタイルシートを使う準備をするには　＜スタイルシートの基本設定＞
31 背景の色を変えるには　＜backgroundプロパティ＞
32 文字の色を変えるには　＜colorプロパティ＞
33 見出しの大きさを変えるには　＜font-sizeプロパティ＞
34 行間を空けて読みやすくするには　＜line-heightプロパティ＞
35 ページの左右に余白を作るには　＜margin-leftプロパティ、margin-rightプロパティ＞
36 強調文字の見た目を変えるには　＜font-styleプロパティ、font-weightプロパティ＞
37 リンクが設定された文字の色を変えるには　＜リンク色の変更＞
テクニック　ほかは違うリンク文字に設定してみよう
38 スタイルシートだけのファイルを作るには　＜CSSファイルの作成＞
39 CSSファイルを編集するには　＜CSSファイルの利用＞
40 サーバーのHTMLファイルを更新するには　＜ミラーリングアップロード＞
この章のまとめ
練習問題　解答

第７章　ホームページに画像を表示しよう
41 いろいろな画像を表示しよう　＜画像ファイルの利用＞
42 ホームページ用に画像を加工するには　＜サイズ変更＞
テクニック　画像の明るさやコントラストはリサイズ前に調整する
43 画像を表示するには　＜imgタグ＞
44 スタイルシートで画像を飾るには　＜text-alignプロパティ、box-shadowプロパティ＞
45 タイトルゴロを作るには　＜タイトルロゴの作成＞
テクニック　フォントを変えれば、雰囲気も変わる
46 タイトルロゴを表示するには　＜タイトルロゴの表示＞
47 アイコン画像を表示するには　＜アイコンの表示＞
テクニック　スタイルシートでアイコンを指定するには
この章のまとめ
練習問題　解答

第８章　表を使って項目を見やすくしよう
48 ホームページに表を入れよう　＜表作成の流れ＞
49 項目を表にして表示するには　＜tableタグ、trタグ、tdタグ＞
50 表の見出しを目立たせるには　＜thタグ＞
51 表に枠線を付けるには　＜borderプロパティ＞
52 セル内のすき間を設定するには　＜paddingプロパティ＞
53 表に背景色を付けるには　＜backgroundプロパティ＞
この章のまとめ
練習問題　解答

第９章　たくさんのページでホームページを構成しよう
54 ホームページ全体の構成を考えよう　＜複数ページの構成＞
55 トップページを作るには　＜トップページの作成＞
テクニック　フォルダーを開いてキー操作でコピーする
56 サブページを作るには　＜サブページの作成＞
57 リンク集を作るには　＜リンク集の作成＞
58 アバウトページを作るには　＜アバウトページの作成＞
この章のまとめ
練習問題　解答

第１０章　たくさんの画像を使ってギャラリーページを作ろう
59 ホームページにギャラリーページを追加しよう　＜ギャラリーページ作成の流れ＞
60 ファイルを新しいフォルダーに分けるには　＜相対パス＞
テクニック　上のフォルダーは「../」で表す
61 ギャラリーページを作る準備をするには　＜画像の準備＞
この章のまとめ
練習問題　解答

第１１章　ホームページをパワーアップしよう
63 ホームページにさまざまな効果を付けよう　＜効果の追加＞
64 ホームページの背景に画像を敷くには　＜背景画像＞
65 Googleマップを表示するには　＜Googleマップの設置＞
66 YouTubeの動画を埋め込むには　＜YouTube動画の設置＞
67 Facebookの[いいね！]ボタンを付けるには　＜[いいね！]ボタンの設置＞
テクニック　Twitterのツイートボタンも付けられる
この章のまとめ

付録１　付属CD-ROMの構成
付録２　サンプル画像の使い方
付録３　フリーソフトをインストールするには
付録４　すぐに使えるフリー素材集５１０点
付録５　スタイルシートで使う単位
付録６　お試しCSSファイルの使い方
付録７　本書で使うタグとスタイルシートのプロパティ一覧

用語集
索引

できるサポートのご案内
本書を読み終えた方へ
読者アンケートのお願い

よろしければこちらもどうぞ〜