ホームページの作り方!1番やさしい説明を目指します!!

   

ホームページを作ってみる

難しい説明をする前に簡単なホームページを自分の作ってみよう!

※大事な話を最後のまとめに書いているので最後まできちんと読んでみて下さいね!

メモ帳に文字を入力する

メモ帳を開いてください。※こちら ⇒ メモ帳の開き方

ホームページを作ります。まずはメモ帳に文字を入力します。文字は以下の文をコピーしてメモ帳に貼り付けてみましょう。

※この文章は著作権フリーの文章です。

ジイドとそのソヴェト旅行記
宮本百合子
『中央公論』の新年号に、アンドレ・ジイドのソヴェト旅行記(小松清氏訳)がのっている。未完結のものであるが、あの一文に注目をひかれ、読後、様々の感想を覚えた読者は恐らく私一人にとどまらなかったであろうと思う。
間もなく、去る一月六日から四日間、『報知新聞』の学芸欄に「ジイドの笑いと涙」という題で、『プラウダ』が社説として発表したジイドのソヴェト旅行記批判が、山村房次氏によって訳載された。
その文章は何月何日の『プラウダ』に出たものであったのか、執筆者の署名があったのか無かったのか、完訳であるのか抄訳であるのかそれ等の点については、説明されていない。
ジイドの旅行記と『プラウダ』の批評とは、その性質上、対立的なものとして我々の前に現れているのである。今日の如き世界事情の裡に生きる一人の日本の作家としてジイドの旅行記を読むと、ジイドが自身の作家的特質倒れになって、結局新社会の存在が語っている歴史的現実を客観的につかんでいないことが感じられる。『プラウダ』の批評は、対立の益々激化している世界の情勢並にトロツキイズムとの闘争の必要の上に立って、政治的な新聞の立場から執筆されている。私たちは更に時代的・性格的ポーズのつよい作家ジイドの諸矛盾の内から独自性にふれて分析し、批評の本質の真理を理解しようとする要求を禁じ得ない。

 

貼り付けると下の画像のようになっていると思います。

この文章にHTML言語でマークアップという作業を行います。

マークアップとは、この文章は見出し、この文章は小見出し、この文章は普通の段落。といった具合に文章に目印をつける作業だと思ってください。

最初に行うのはこれは「HTMLの文章だよ」と、知らせるマークアップです。

文章の最初に<html>最後に</html>マークアップすれば完了です。

下の文章のようにします。

<html>

ジイドとそのソヴェト旅行記
宮本百合子
『中央公論』の新年号に、アンドレ・ジイドのソヴェト旅行記(小松清氏訳)がのっている。未完結のものであるが、あの一文に注目をひかれ、読後、様々の感想を覚えた読者は恐らく私一人にとどまらなかったであろうと思う。
間もなく、去る一月六日から四日間、『報知新聞』の学芸欄に「ジイドの笑いと涙」という題で、『プラウダ』が社説として発表したジイドのソヴェト旅行記批判が、山村房次氏によって訳載された。
その文章は何月何日の『プラウダ』に出たものであったのか、執筆者の署名があったのか無かったのか、完訳であるのか抄訳であるのかそれ等の点については、説明されていない。
ジイドの旅行記と『プラウダ』の批評とは、その性質上、対立的なものとして我々の前に現れているのである。今日の如き世界事情の裡に生きる一人の日本の作家としてジイドの旅行記を読むと、ジイドが自身の作家的特質倒れになって、結局新社会の存在が語っている歴史的現実を客観的につかんでいないことが感じられる。『プラウダ』の批評は、対立の益々激化している世界の情勢並にトロツキイズムとの闘争の必要の上に立って、政治的な新聞の立場から執筆されている。私たちは更に時代的・性格的ポーズのつよい作家ジイドの諸矛盾の内から独自性にふれて分析し、批評の本質の真理を理解しようとする要求を禁じ得ない。

</html>

 

メモ帳の文章の最初と最後にそれぞれ<html></html>が付いています。

 

ここまでできたら保存します。

ファイルをクリックします。

 

名前を付けて保存をクリックします。

 

ファイル名を決めます。今回は「bunko.html」にしてみましょう。

ファイル名を入力したら「保存(S)」ボタンをクリックします。

今回は保存場所を「デスクトップ」にします。

 

デスクトップを確認すると「bunko.html」という名前のファイルができています。

ファイルをクリックします。※「.html」が表示されていない場合はこちら ⇒ 拡張子を表示する

 

ブラウザが開いて文字の羅列が表示されました。これがホームページです。

ここから更にもう少しマークアップしてみましょう。

 

デスクトップの「bunko.html」という名前のファイルを「右クリック」「プログラムから開く」「メモ帳」をクリック。

 

bunko.htmlが開かれました。この文章のマークアップは<html></html>だけです。

次は見出しのマークアップをしてみます。

 

マークアップに<h1></h1>を使用してみます。下の画像のようにマークアップしてみましょう。

マークアップが終わったら上書き保存します。

 

保存し終わったらまたhtmlファイルを開いて確認してみましょう。

赤枠で囲まれている文字が太く大きくなっています。<h1></h1>でマークアップした効果が出ています。

 

<h1></h1>のマークアップは「見出し1」という意味があります。他にもマークアップ用のタグは数多くあります。多くのマークアップ用のタグを掲載してあるサイトがあるので確認してみて下さい。

外部サイト ⇒ ウェブランサー

つまりホームページとは文章や画像に、HTML言語のタグを利用してマークアップしたファイルの事です。

更にマークアップを進めた後はデザインを整えていきます。そうやって出来上がるのがみなさんのいつも目にしているホームページです。正直面倒な作業が多かったと思います。

ですが安心してください。この後のまとめで大事なことを教えています。最後まで目を通してみて下さい。

 

まとめ

いかがだったでしょうか?

ホームページは中身を作成し、HTML言語でマークアップしていきます。このマークアップを細かく指定していき、見た目を整えていきます。最後にファイルをサーバーにアップロードすればホームページの完成です。

地味な作業ですが丁寧にやっていくことで様々なWebサイトを作成することが可能です。想像つかないかもしれませんがメモ帳のようなテキストエディタしか使わないプロも数多くいます。

とは言え、初心者の方がプロと同じようにメモ帳のようなテキストエディタを使いで数あるWebサイトのようなデザインのホームページを作るにはかなり大変です。へたをすれば数年かかりますし、途中であきらめてしまうでしょう。

テキストエディタを極めたいと思う人はホームページを作るというよりWEBデザイナーの志向が強いと思いますので、先にPhotoshopやIllustratorを覚えた方が楽しいと感じるかもしれませんね。

 

ホームページを簡単作成する方法

いまはホームページを簡単に作成する方法が数多くリリースされています。

いくつかご紹介しますので一度ご覧になってみて下さい。

無料でホームページを作りたい場合

  • 1. Wix(ウィックス) ⇒ いち押し!!
  • 2. Goope(グーペ) ⇒ ネットショップを作りたいなら いち押し!!※有料

無料テンプレート配布サイト

 

無駄な行動はさける!

いかがでしょうか?想像以上にハイレベルだったと思います。いまはこのレベルのホームページが無料で配られているんですね。

初心者がこの無料テンプレートのレベルまで1から作れるようになるにはかなりの時間を必要とすると思います。

WEBデザイナーを目指したいのであればHTMLのソースから正しいマークアップの方法、次にCSSを使用したデザインHTMLコードのデザイン操作とユーザビリティを兼ね備えたコーディングなどいろいろ勉強して覚えていく事になります。そして楽しいと感じるでしょう。

そうではなく、何かを提供したいと考えていた場合。例えば、自分は絵を描いている、それを「いろんな人に見てもらいたい」。そのためにホームページを作りたい。そう思っているのならこのHTMLを使用したホームページ作成はきっと苦痛でしかないでしょう。そして、かなり目的への遠回りになってしまうでしょう。

ですが幸いなことにホームページで大事なのは提供するコンテンツであり中身です。デザインは二の次でOKなのです!

  • 提供したいものがある!
  • 漠然とではあるが何かを提供したい!

そう考えるなら、自分で1から作る必要はありません。すでに安価で高品質なサービスは提供されているのですからそれを利用するべきです。インターネットはとにかく行動すること。そしてスピードがとても大事です。

ホームページを作る前に自分の原動力を整理してください。するとなぜ自分がホームページを作ろうと思ったのか明確になります。理由が明確になれば次は行動が明確になります。原動力に基づいたホームページを作成することでモチベーションの維持に繋がり提供するコンテンツにも熱が篭り、訪問した読者にもそれが伝わっていきます。

わたしの原動力はありきたりなのですが家族との時間を大事にしたいという想いです。

過去に忘れないように書いておいた記事があるので参考までに読んで貰えると嬉しいです。

関連 ⇒ なぜブログ運営するのか信念を記録しておく

 - ホームページの作り方

%d人のブロガーが「いいね」をつけました。