ホームページの作り方 ～作業手順～
2019年12月06日
みなさま、こんにちはー(*´ω｀*)ﾉ
花です(*´ω｀*)
12月になって増えるもの。それは詐欺です。
特に12月は振り込め詐欺が多いと聞いたことがあります。
やっぱり、年末年始に向けて、特に人やお金が動く時期ということがあるのでしょうね。
我が家には今の所、振り込め詐欺の電話などは来ていません。
あるとすれば、かなり昔に父が架空請求詐欺にひっかかりそうになったことがあることと、ほんの数週間前に、訴えられています的なはがきが来たことだけです。
前者はたまたま、私が父が変な電話をしていることに気付き大丈夫でした。
後者は母がテレビの知識で大丈夫でした。
とはいえ、父も母も高齢になってくると今後何が起こるかわかりません。
なのできちんと、こういうときどうすればいいかなど話しておかないといけないなと思います。
みなさんも、振り込め詐欺など本当に気を付けてくださいね＞＜
では、今回もホームページのお話をしたいと思いますが、前回と前々回でCSSファイルを作って、今後CSSに関してはそちらに全部書くというお話をしました。
ですので、実際作業としてどのようにやっていくかというお話をしたいと思います。
それでは、質問です。
今日は、あるなしクイズです。
ある：会社 日曜 日本 中年
なし：農村 火曜 インド 若者
今回はさほど難しくないのでヒントはなしです！
さて、本題です。
今回の内容は私なりのやり方なので、参考にならないという方もいますので、先に謝っておきます。
では、私は作業をする時、ファイルを3つ開きます。
まず、私の作ったファイルで言えば、index.htmlをブラウザで開きます。
次に、同じくindex.htmlをメモ帳で開きます
そして、これも同じく私の作ったファイルで言えば、style.cssをメモ帳で開きます。
この3つを開きます。
さて、ここで作業に入るわけですが、まずhtmlの方から書き始めます。
基本的に、htmlファイルは内容を全て書くため、書く内容がすべて決まっているのであれば、内容を全部先に書きます。
私も勉強し始めた頃は、完全にデザインも含め作りながらやりたかったのですが、そのやり方だとかなり効率が悪いんです。
なので、出来ることならhtmlは先に完成させて、必要であればhtmlファイルの追加をしていくといいと思います。
htmlがほぼ完成すると、今度はブラウザとCSSファイルの出番です。
ブラウザを見ながら、cssファイルでデザインを作っていくわけです。
ただこの時、
cssで何か記述する → ブラウザの更新（F5を押す） → 確認後、CSSに何か記述する → ブラウザの更新（F5）
と繰り返していかなければいけません。
忘れてはいけないのは、「ブラウザの更新」です。
cssに記述したからと言って、リアルタイムで自動では変わってくれません。
そこで、ブラウザを更新してあげるんです。
ちなみに、この更新とは、どういうことかというと、htmlファイルとcssファイル、またそれに関連する色んなファイルを再度読み込んでいるという状態なんです。
リアルタイムで更新してくれればいいんですけど、実際はなかなかそういうわけにはいかないんです。
ということで、cssの記述をすれば、その都度ブラウザを更新し確認していくわけです。
そして、以前お話した、ブロックレベル要素のdivタグやインライン要素のspanタグを必要であれば追加し、またこれも以前お話した、そのタグに目印（名前）を付けるためのclass属性をつけたりしていくわけです。
それを踏まえた上で、ホームページを作っていくということになっていくんです。
では最後に簡単にですが、まとめたいと思います。
①htmlファイルをブラウザで開く。
②htmlファイルをメモ帳で開く。
③cssファイルをメモ帳で開く。
④htmlの記述をする。（出来ればdivなども含めて完全な形に作る）
⑤cssを記述する。
⑥ブラウザを更新（F5）し確認する。
⑦必要に応じてhtmlにタグ追加。
あとは、⑤～⑦を繰り返す。
といった感じです。
さて、次回は、お得情報のお話をしたいと思います。
ホームページを作るとき、この情報を知っていたらかなりお得だよ！という情報です。
知っているのと知らないのとで、ホームページを作る効率がだいぶ変わるので、しっかり説明できるよう私も頑張ります！(｀・ω・´)
それでは、今回はこの辺でー(*´ω｀*)ﾉ
あるなしクイズの答えは、あるの方は漢字を反対にすると別の意味の言葉になるでした(*´ω｀*)
では、~~~ヾ(*'▽'*)o マタネー♪
花です(*´ω｀*)
12月になって増えるもの。それは詐欺です。
特に12月は振り込め詐欺が多いと聞いたことがあります。
やっぱり、年末年始に向けて、特に人やお金が動く時期ということがあるのでしょうね。
我が家には今の所、振り込め詐欺の電話などは来ていません。
あるとすれば、かなり昔に父が架空請求詐欺にひっかかりそうになったことがあることと、ほんの数週間前に、訴えられています的なはがきが来たことだけです。
前者はたまたま、私が父が変な電話をしていることに気付き大丈夫でした。
後者は母がテレビの知識で大丈夫でした。
とはいえ、父も母も高齢になってくると今後何が起こるかわかりません。
なのできちんと、こういうときどうすればいいかなど話しておかないといけないなと思います。
みなさんも、振り込め詐欺など本当に気を付けてくださいね＞＜
では、今回もホームページのお話をしたいと思いますが、前回と前々回でCSSファイルを作って、今後CSSに関してはそちらに全部書くというお話をしました。
ですので、実際作業としてどのようにやっていくかというお話をしたいと思います。
それでは、質問です。
今日は、あるなしクイズです。
ある：会社 日曜 日本 中年
なし：農村 火曜 インド 若者
今回はさほど難しくないのでヒントはなしです！
さて、本題です。
今回の内容は私なりのやり方なので、参考にならないという方もいますので、先に謝っておきます。
では、私は作業をする時、ファイルを3つ開きます。
まず、私の作ったファイルで言えば、index.htmlをブラウザで開きます。
次に、同じくindex.htmlをメモ帳で開きます
そして、これも同じく私の作ったファイルで言えば、style.cssをメモ帳で開きます。
この3つを開きます。
さて、ここで作業に入るわけですが、まずhtmlの方から書き始めます。
基本的に、htmlファイルは内容を全て書くため、書く内容がすべて決まっているのであれば、内容を全部先に書きます。
私も勉強し始めた頃は、完全にデザインも含め作りながらやりたかったのですが、そのやり方だとかなり効率が悪いんです。
なので、出来ることならhtmlは先に完成させて、必要であればhtmlファイルの追加をしていくといいと思います。
htmlがほぼ完成すると、今度はブラウザとCSSファイルの出番です。
ブラウザを見ながら、cssファイルでデザインを作っていくわけです。
ただこの時、
cssで何か記述する → ブラウザの更新（F5を押す） → 確認後、CSSに何か記述する → ブラウザの更新（F5）
と繰り返していかなければいけません。
忘れてはいけないのは、「ブラウザの更新」です。
cssに記述したからと言って、リアルタイムで自動では変わってくれません。
そこで、ブラウザを更新してあげるんです。
ちなみに、この更新とは、どういうことかというと、htmlファイルとcssファイル、またそれに関連する色んなファイルを再度読み込んでいるという状態なんです。
リアルタイムで更新してくれればいいんですけど、実際はなかなかそういうわけにはいかないんです。
ということで、cssの記述をすれば、その都度ブラウザを更新し確認していくわけです。
そして、以前お話した、ブロックレベル要素のdivタグやインライン要素のspanタグを必要であれば追加し、またこれも以前お話した、そのタグに目印（名前）を付けるためのclass属性をつけたりしていくわけです。
それを踏まえた上で、ホームページを作っていくということになっていくんです。
では最後に簡単にですが、まとめたいと思います。
①htmlファイルをブラウザで開く。
②htmlファイルをメモ帳で開く。
③cssファイルをメモ帳で開く。
④htmlの記述をする。（出来ればdivなども含めて完全な形に作る）
⑤cssを記述する。
⑥ブラウザを更新（F5）し確認する。
⑦必要に応じてhtmlにタグ追加。
あとは、⑤～⑦を繰り返す。
といった感じです。
さて、次回は、お得情報のお話をしたいと思います。
ホームページを作るとき、この情報を知っていたらかなりお得だよ！という情報です。
知っているのと知らないのとで、ホームページを作る効率がだいぶ変わるので、しっかり説明できるよう私も頑張ります！(｀・ω・´)
それでは、今回はこの辺でー(*´ω｀*)ﾉ
あるなしクイズの答えは、あるの方は漢字を反対にすると別の意味の言葉になるでした(*´ω｀*)
では、~~~ヾ(*'▽'*)o マタネー♪
この記事へのコメント
コメントを書く
