できるホームページHTML&CSS入門 Windows 10/8.1/7対応 できるシリーズ 【読書感想文】 普段何気なくみているホームページの裏側と作り方
★★★★☆
Amazonでレビューしたものです
●知識ゼロでもはじめられる入門書の決定版
ホームページの仕組みや構成の考え方など基礎的な知識はもちろん、FTPソフトを使ったホームページの公開やメンテナンスを解説。
もちろん、HTMLやCSSのコーディングもしっかりと解説しています。
●HTMLやCSSのタグ、プロパティを丁寧に解説
HTMLやCSSのコーディングを解説した章では1つ1つのタグやプロパティを効率的に学べます。
順序よく読み進めていけば、自然とスキルアップができるようにレッスンが構成されています。
●フリーソフト・フリー素材付きですぐにはじめられる
本書で解説に利用しているテキストエディターやFTPソフト、画像編集ソフトをダウンロードデータに収録。
また、練習用ファイルも含まれているのでダウンロードする手間なく、すぐに学びはじめられます。
●本書はこんな方にオススメです！
・HTMLやCSSのコーディングをゼロから学びたい
・ホームページ作成ソフトで作ったデータを手直しできるようになりたい
・Web制作に携わる職業を目指していて、基礎を学びたい
1.ホームページの作り方
”ホームページは「サーバー」と呼ばれるコンピューターに保存されています。サーバーは世界中にあり、インターネットに接続されています。パソコンをインターネットにつなげて、ホームページ閲覧用ソフトウェア「Webブラウザー」に見たいホームページのURL（ホームページの住所）を入力すれば、誰でも好きなホームページを見ることができます。Webブラウザーには、Microsoft EdgeやGoogle Chrome、Mozilla Firefoxなどがあります”
”ホームページは、「HTML」（エイチティーエムエル）と呼ばれるファイルで作られています。ホームページを見る時には、Webブラウザーがインターネットを通してサーバー上に保存されたHTMLファイルを読み取り、ホームページとして表示します。
ホームページを作るには、この逆の作業をします。「HTMLファイルを自分で作る」→「インターネットを経由してサーバーに保存（アップロード）する」という流れが、ホームページ作成の手順です。”
"ホームページを作るには、最低でも３つの道具を揃えておかなければいけません。
１つ目は、HTMLファイルを作るソフトウェアです。HTMLファイルの中身はテキストで作られているので、フリーソフトの「TeraPad」などのテキストエディターと呼ばれるソフトウェアで作成できます
２つ目は、HTMLファイルを保存して公開する場所になるサーバーです。サーバーは、ホームページサービスやレンタルサーバーなどのサービスに申し込んで使えるようにします。
３つ目は、HTMLファイルをサーバーに保存するのに使うソフトウェアです。
この３つに加えて、ホームページで画像を表示するには、画像を加工するソフトウェアが必要になります.”
こちらの本からの引用です。
すごいわかりやすい説明だなと思いました。
2.HTMLとはCSSとは
①HTML＝HyperText Markup Language
そもそもHTMLとはなんぞや、という話ですが、
こちらの本では、
”ホームページを記述するための言語のこと。タグを使って言語に印を付け、見出しや段落、リンクなどを作り、ホームページを組み立てるのに使われる。”
と説明されています。
wikipediaでは、ハイパーテキストを記述するためのマークアップ言語の1つと記載されています。
なんで日本語じゃないの、日本語使えや、と思いますが、
コンピュータは人間の言葉は理解できないんだそうです。
0か1。0100011011001010、、、という数字の世界に彼らはいるようです。
０か１だと今度は人間が理解できないので、
橋渡しするために、多くのコンピュータ言語が生まれているようです。
で、そのコンピュータ言語なかにもさらに種類がありまして、
そのうちの１つの種類が、データ記述言語になり、さらにその中にマークアップ言語が含まれるようです。
半角の＜＞で囲んで、title、body,などと記載していくのが特徴的です。
このnoteで半角の＜＞を入れると変な表示になる理由がわかりました。。
②CSS=Cascading Style Sheets
CSSについてはこちらの本では、
”スタイルシート言語の一種で、現在多くのWebブラウザーでサポートされている。HTMLのタグの種類ごとに、色やフォント、余白の大きさなどの指定できる”
となっています。
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ファイルの使い方
付録７ 本書で使うタグとスタイルシートのプロパティ一覧
用語集
索引
できるサポートのご案内
本書を読み終えた方へ
読者アンケートのお願い
著者：佐藤 和人 (著), できるシリーズ編集部 (著)
ASIN : B06W9JDHVF
出版社 : インプレス (2017/2/17)
発売日 : 2017/2/17
言語 : 日本語
ファイルサイズ : 126426 KB
本の長さ : 289ページ
よろしければこちらもどうぞ〜
この記事が気に入ったらサポートをしてみませんか？