こんにちは。すのうです。

 

今回のテーマは、「Webサイトの作り方」について。

今回は、具体的にWebサイトを作るには最低限何が必要で、何をどうしたら良いのか、説明したいと思います。

 

〇必要なもの
・パソコン
・エディタ(メモ帳など)
・HTML、CSSの知識
・インターネット環境
・サーバー(レンタルでも可)
・ドメイン
・作ったWebサイトをサーバーに送るためのツール(WindowsだとFFFTPだとか)
・アルプスの少女ハイジのような純真な心

特に最後が一番重要です。

 

STEP1

まずはパソコンが必要です。
あなたのお家にもきっとポンコツのようなパソコンがあるはずです。
Windows MEとか98とか入っているポンコツがあるはずです。

ちなみに、私の家にはパソコンが存在しませんでした。
そう、ポンコツは私自身だったのです。。。

と言うことで、無ければ購入してください。
OSが入っているパソコンであれば何でも良いです。

 

STEP2

次にエディタが必要です。
Windowsであれば、標準で”メモ帳”と言うアプリケーションが搭載されています。
エディタはHTMLやCSSを記述するために必要です。

なるべくであれば使い慣れたエディターを使うのが一番です。Sakura エディタや秀丸エディタなんかも良いかと思います。Vimmer の方はこのブログを読む必要はありません、去ってください。

というか、最近であれば絶対 Visual Studio Code を使うのが良いかと思います。プラグインも多いし。フォーマット自動整形してくれるエディタ使った方が絶対良いです。

 

 

STEP3
そもそもHTMLとは、HyperText Markup Languageの略で、Webページ作成言語のことです。
何ができるかと言うと、文字、画像、動画をページに埋め込めます。
他のサイトへのリンクも貼れたりします。
文書の構造を設定します。

 

CSSとは、Cascading Style Sheetsの略で、見栄えを決めます。
実は見栄えはHTMLでも設定できます。
では、なぜHTMLとCSSでファイルが分かれているのか、構造と見栄えの定義は分かれていた方が便利だからです。

「”xx”のタグに対して、~のフォント、~のサイズ、~の色をすべて適用したい」と言うケースで、HTMLにすべて埋め込むとどうしても冗長な内容になってしまいます。

 

☆ポイント
・HTMLは文書の構造を決める
・CSSは見栄えを決める

 

詳しくは、ネットで調べたりして実際にファイルを作って試してみてください。
正直HTMLやCSSの使い方については、本を買うまでもないと思いますが、具体的な応用テクニックなんかは、本を買うなりした方が良いかもしれません。

エディタから保存する際に「.html」と拡張子をつければHTMLファイルとしてOSが認識してくれます。

厳密に言うと、Windowsの場合、レジストリに対して「拡張子.html はGoogle Chromeで開くよ」みたいな設定が登録されて、登録されたアプリケーションにて.htmlファイルが開かれます。ブラウザーは.htmlを解釈できるので、解釈した通りに表示してくれるというわけです。

拡張子は所詮拡張子なので、そのファイルを開くアプリケーションでどう扱うか、という動きに依存しますが、これはまた別のお話なのでポイッ!!!

同様に、「.css」と拡張子を指定すればCSSファイルとして認識されます。

 

STEP4

インターネットに接続できる環境がなければ外部には公開できません。
ない方は、用意してください。もしかして山奥にでも住んでる?

 

STEP5
作ったWebサイトをインターネットを通じて外部に公開するためのサーバーが必要です。

個人で用意するのは大変なので、目的に応じたレンタルサーバーを借りてください。
のちほど説明しますが、ドメインと言うものが無料で1つ付いてくるパターンもあります。
ですが、できれば、ドメインとサーバーは切り離した方が良いです。

 

ちなみに、私は、レンタルサーバーはロリポップを使っています。

ドメインは、ムームードメインで取得しました。

正直どこが良いか、という比較調査はしなかったので、検索にヒットしたところで適当に契約した感じでしたが、料金も高くないですし不便は全くないです。


STEP6

ドメインについて。ドメインは身元のようなものです。

住所を分かりやすくするもの。住所自体はIPアドレスがありますので、まあ重複することはありません。
でも、192.168.…なんて分かりづらいので、人間が読みやすい名前に変換しましょう、とそういう目的で存在しています。

独自ドメインは信頼の証です。見る人が見れば、お金をかけたことが一目瞭然。
「.jp」だとかは、認証などに時間がかかる等の制約があるそうで、これがついているサイトは信頼できる、といった見方もできますね。この信頼を逆手に取った悪徳サイトもある可能性はゼロではないので、そこは注意が必要ですが。

 

STEP7

作ったWebサイトをサーバーに送るためのツールが必要です。(WindowsだとFFFTP)
サーバーを契約したら、実際にファイルを送ってみましょう。

 

STEP8
アルプスの少女ハイジのような純真な心は何よりも必要です。

ちなみにこのサイトはWordpressで作っています。
WordPressとはCMSと呼ばれるものの一種で、使い方はまたの機会にでもご説明させて頂きます。

 

以上、「Webサイトの作り方」でした。

投稿者 snow

ジョボジョボジョボジョボミラジョボビッチ。はじめまして。すのうと申します。エンジニアの仮面をかぶりながら、人間の皮をかぶっあっだめだ上手いこと何も思いつかない。とにかくこのブログでは、日々生活している中で何か面白いと思ったことや自分が勉強になったことなど、日々のネタになりそうな投稿を心がけてそのまま心の中にしまおうかと思っています。小さい脳みそでよく考えてから投稿するようにしますが、たまに大きな脳みそになることもありますので、そのあたりはご容赦願います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です