ホームページの作り方に関すること

ホームページの作り方には色々な方法があるわけですが、
例えば近年使用されるのが当たり前になってきたCSSなど、覚えるまでが大変ですよね。
でも覚えてしまえば非常に便利なものでもあります。

ですが、最近ではCSSを自動でしかも簡単に作ってくれるものがあったり
文法などの間違いを指摘してくれるツールがあるので
作り方としては非常にハードルが低くなってきてるように思います。

ずっと自分ひとりでおこなっていると、その文法が
合っているのか間違っているのかもわからなくなってきたりして
そのまま「デザインが完成したからいいや」と間違いに気がつかずに
覚えるべきことを覚えないまま作れるようになってしまっている人も多いです。

「デザインが完成したからいいじゃないか。」

確かに人間の視覚の点で言うと全くその通りなのですが、
せっかく作ったサイトを人の目に触れるようにするには
SEOの力で上位表示させることも必要になってきますし、
その為には人間の視覚からじゃなく検索エンジンのクローラーに
確実に読み込んでもらうためにも文法の間違いは致命傷なのです。

ホームページの作り方というのは簡単にできる方法もありますが
こういった便利ツールを使って、自分の何が間違っているのか
作りながら学びながら制作していくことが大事だと思いますよ。

ある程度できるようになってきた頃、
最初の頃に作ったもののソースを見てみると間違いだらけなことに気付き
初心者のつまづきやすいポイントがわかると
それもまた非常に勉強になりますよ。

ホームページの作り方の中でも一気にガラッと雰囲気を変えられるのが
「背景」だと思います。

背景を設定した作り方なだけでかなり雰囲気が変わりますからね！
ホームページの雰囲気というのはこの背景の設定の仕方によって
左右されると言っても過言ではありません。

背景をどこに置くかでまた印象が変わりますが、
かつては文字を書き込むコンテンツの部分に派手な背景を入れてしまって
文字が見にくくなってしまっているサイトなんかをよく見ました。

特に携帯で簡単にホームページが作成できる
携帯サイトに多かったのですが、最近はそういったものを見なくなりましたね。

背景が模様になっているのだけじゃなく、
例えば水色に白文字なんていうのもかなり見にくくなっているので
作り方において色の組み合わせにも注意したいものですよね。

また、bodyに背景を入れるのか、inner要素に入れるのかによって
背景の反映のされ方が違います。

どちらにも入れればどちらにも入りますが、
bodyの方に背景を設定し、bodyよりも内側にタグをおいているinnerに
白を設定すると、ブラウザにうつる周りだけが背景になり、
文字は見やすいままなので全く問題ないかと思います。

また、背景をうっすらと映るくらいの淡い模様にすれば、文字は見えやすくなるので
inner要素に背景を入れるという方法でもいいと思いますけどね。

全体的に真っ白にしたいのならinnerに白を指定すれば
全体的に真っ白になるはずなのでシンプルでいいですけどね。

ただ、ワンポイントに1～3色程度の色を入れることをおすすめしますが。
あまり色はいれすぎないようにしましょう。

ホームページを作り方として色々紹介してきましたが
最後の仕上げとして必要となるのがサーバー。
このサーバがなければ、せっかく作り方を調べて制作したホームページも表から見ることができません。

レンタルサーバを契約するとともにドメインも取得できるのですが、
できればこれは独自ドメインを取得する方がseo的にはいいそうです。

ドメインというのはホームページのURLのことですね。
一般的にはレンタルサーバのサブドメインを使用できるはずなのですが、
独自ドメインにすることによって、サイトのキーワードに合わせたドメインを使用することが可能なので、
ぜひ独自ドメインの取得を行いましょう。

また、良心的な会社で契約できた場合には、レンタルサーバを契約した際に
ドメインの取得を代行してくれるところもありますから、
まず最初に聞いておくことによって、後々自分の手間を省くことができるかもしれませんね。

ちなみにドメインというのは、基本的には年間契約をするのが普通です。
ですが一度ドメインを手放してしまうと、その使っていたドメインが転売されたり、
嫌なことですが、悪用されてしまうこともよくあるそうなので、
面倒ではありますが更新はしっかりとしておき、気をつけましょう。

そしてサーバーにつなぐにはFTPなどのアップする為のツールが必要です。

サイトの作り方を調べて実行し、サーバを用意。・・でもそれだけではないんですね。
最後の最後に、自分のPC内にあるホームページのデータ（フォルダや加工して作った画像など）を
FTPなどのツールを使い、サーバーにアップしなければいけないのです。
それも作り方のひとつだと思えば面倒なことはありません。

それはレンタルサーバの共有タイプだから、買い取した専用サーバだから、などは一切関係なく、
どのサーバであれその工程は必ず必要な作業となります。
最初は意味がわからないという人もいるかもしれませんが、慣れればあっという間に終わる作業でしょう。

そして表から改めて全体的な表示などを確認してみて、完成です。

ホームページの作り方について色々と紹介してきましたが、便利なサイトがあります。

それは、こうしたいけどそのタグのつづりなどがわからないという場合にタグを作ってくれるサイトや、あらかじめ作られているタグをコピーできるようになっているサイトなど、便利なサイトが沢山あるので、最初のうちはそういったものを利用してみるとスムーズに作っていけるので、勉強がてら作っていくのにいいかもしれませんね。

ホームページというのは全く同じデザインにする場合でも、いくつものパターンの作り方があるもので、自分がやりやすい方法で作り上げることができるので、そこがまた面白いところのひとつなんですよね。

また、サイトタイトルや見出しのタイトルなどをテキストで作るのか、画像で作るのかによって、同じ色合いでもまた雰囲気がガラッと変わったりするので楽しいです。２パターン作ってみて見比べてみてから決めるのもいいでしょう。

ホームページを作るのはなかなか大変なものですが、こういったことの一つ一つの積み重ねがまた新たな知識が増えていくことになり、自分でできることの幅がどんどん広がっていくというのが、ホームページ面白いところなんですよね。

いろんなことができるようになってくると、次はああしてみたい、もっとこうしてみたい、こうするにはどんな方法で行えばいいだろう・・・という風な考え方になるので、そこがまた新たに成長できるきっかけになります。

そういうやりたいことが向上心につながるので、どんどん成長してできることが増えていけば、いずれ仕事にすることも可能になってくると思いますよ。

制作したホームページを公開できるようにするには、自分でサーバーを借りなければいけません。
もしくは、自分の契約してるインターネット接続会社に聞けば、だいたい借りれたりするので解決できると思います。

また、月額がいらないのにホームページを公開できるスペースをレンタルできるところもあるので、そういった所を使って気軽に作るというのもいいかもしれませんね。

ただ、そういった所は無料で貸してくれる代わりに、表示広告がある場合が多いので、レイアウトが自分の思い通りにならず、ちょと嫌だなと思う人もいると思います。そういった人におすすめなのは、容量が多くて、広告を省くことができる所を探すのがいいと思います。

作り始める前は、自分のパソコンの中でホームページを制作するので、作り方さえある程度知っていればすぐに始められます。ホームページを公開できるそのスペースに関しては、ホームページ制作が完成してから借りるという流れでもＯＫですよ。

あと、そのサーバーに接続する為のファイル転送ソフトは無料で入手できるので、大丈夫です。

1つ作ってしまえば後は慣れてくるので、ホームページの作り方に慣れてきたら、有料のいいサービスのレンタルサーバーを借りるというのもいいと思います。有料とは言っても格安な月額何百円といったところもあるので、利点が沢山あるレンタルサーバーに移すのもいいかもしれませんね。

また、利点としてはプロバイダを変更してもホームページが残るというとことがあります。

他には、無料ところの場合は今流行っているアフィリエイトをしようと考えている人にとってはダメなパターンもあるので、
商用利用ができる有料のレンタルサーバーにした方ができることも広がります。

作り方さえわかれば、後はどうとでもなる簡単なものなので、まずはしっかりと作りましょう。

ホームページの基本構造は
－－－－－－－－－－－－－－－－－－－－－－
＜html＞
＜head＞
＜title＞タイトル＜/title＞
＜/head＞
＜body＞実際に表示される文書の内容＜/body＞
＜/html＞
－－－－－－－－－－－－－－－－－－－－－－

というようになっています。（“＜”や“＞”の部分に関しては半角での記入が必須です。）

タグがある程度理解できている人にはわかるかと思います。

一番最初にある＜html＞と最後の＜/html＞についてですが、＜html＞～＜/html＞で囲まれている部分というのが、“ＨＴＭＬ言語で作成されている文書ですよ”という指定です。

このタグでの指定によって、ブラウザが情報をHTMLファイルとして認識してくれるということです。

そして＜html＞の次にある＜head＞から＜/head＞ですがこの部分をヘッダと言います。

この部分にそのページのタイトル（＝＜title＞タイトル＜/title＞）だったり、キーワードだったり、ホームページの基本情報を記述するのです。

ちなみに上にもある＜body＞から＜/body＞のタグの中には　
実際にブラウザ上のページに表示されるはずの文章の部分を入れてください。画像や表なども全てこの中に書いていきます。

以上が大体の基本なのですが、たったこれだけでもホームページの基本は完成です。

後はデザインを変えていく為に、画像を作ったり、文章の一部分に色をつけたり、表示させる場所を指定したりしていくと、かなりホームページらしくなってきます。

慣れてくると、次はＣＳＳというものを使い、それに色々な指定をして、そこから呼び出してくるようにすると、もっともっとデザインの幅が広がっていき、楽しいですよ。

あけましておめでとうございます！
今年もホームページの作り方について色々と自分の数少ない知識を紹介していきます。

今年はどんどん新しいホームページを作っていくことを目標にしています。
早く、キレイなホームページが作れるようになりたいです。

今回はホームページとＳＥＯについて紹介していきます。

ＳＥＯと言えば検索エンジンの上位にあげる為の対策のことです。最近はよく聞くので皆さんもご存知かと思います。

SEO的に言うと、ホームページの作りにも細かく影響するようです。ＳＥＯについてはそれほど詳しくないのですが、今回は知っているＳＥＯの知識とホームページのタグなどについて紹介します。

例えば画像タグ。
普通に記入すると画像を呼び出すタグを＜img src=”画像ファイルの名前”＞もしくは＜img src=”画像ファイルの名前” border=”0″＞という書き方をするかと思うのですが、ＳＥＯ的に言うと＜img src=”画像ファイルの名前” border=”0″ alt=”コメント”＞というように「alt」をつけたりすることをおすすめしているようです。

「これは〇〇の画像です」と書いているようなものなので、検索エンジン側にも伝わりやすくなるので、細かなことですが、これを入れるか入れないかで、意外と影響があるようです。また、テーブルタグを入れる際にも「alt」と同じようなかんじで「summary」を入れた方がいいでしょう。

summaryは、音声ブラウザなどの非視覚系のブラウザに対し、そのテーブルで記されている表の簡単な説明（目的や構造）を伝えることができるSEO的にも重要なタグです。

入れなくても、デザイン的にはちゃんと反映されるので重要視しない人もいますが、検索上位にあげたければ、こういった細かな部分にも気を配りましょう。

ホームページと言えばスタイルシート。

そのスタイルシートに関する単位についてですが

【px】・・・ピクセル
【em】・・・フォントのサイズを“１”とする
【%】・・・パーセント
【in】・・・インチ
【pt】・・・フォントのサイズを指定

などが使われます。これらだけ覚えるのはなら簡単なのですが、そのスタイルシートに書き込む文字だったり、呼び出すタグだったりを覚えていくのが大変です。基本的に英語ですから綴りもある程度は覚えなくてはいけないですしね。

指定する時によく使われる言葉についても紹介しておきます。

【margin（マージン）】・・・余白
【padding（パディング）】・・・余白

これらはどちらも余白なのですが意味は微妙に違います。それは例えば囲まれたコンテンツの外側の余白を指定する場合はmarginを使い、コンテンツ内の文字などの間に余白をもうけたい場合はpaddingを使って指定します。

例
margin-top:10px;　　（※コンテンツの外側の上の余白を１０ピクセルあける）
padding-bottom:5px;　　（※コンテンツの内側の下の余白を５ピクセルあける）

といった感じです。

【background(バックグラウンド)】・・・背景
⇒background-color（バックグラウンドカラー）・・・背景色の指定
⇒background-image（バックグラウンドイメージ）・・・背景画像の指定

例
background-color:#ffffff;　　（※背景の色は白にする）
background-image:url(“../images/haikei.jpg”);　　（※背景画像を（haikei.jpg）にする）

といった感じです。

このような指定を細かくしていって、デザインを決めていくんですね。

ホームページの作り方というか、作るにあたって楽しい部分でもあるのがデザインを考えたり、画像を作ったりすることですよね。

サイズを指定して、そのサイズに合わせて画像を作ることで自分好みの好きなデザインに仕上げることができる、というところが、何といってもホームページを作る１番の醍醐味と言えるですよね。

ホームページの作り方としてスタイルシートというものがありますが、そのスタイルシートに色々な指定をすることで、もっと細かいデザインに仕上げる作り方を学ぶのも楽しいところですよね。

例えばそのスタイルシートを取り入れる場合に、まず「宣言」しなければいけないのですが、＜title＞～＜/title＞の下で、＜/head＞よりも上にあたるところに入れなくてはいけません。

【例】
＜html＞
＜head＞
＜meta http-equiv=”content-type” content=”text/html; charset=Shift_JIS”＞
＜title＞ホームページの作り方＜/title＞

↓ココからスタイルシートの宣言↓
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
＜style type=”text/css”＞
＜!–
a { text-decoration: none;　　　　　　　　←ココにテキストの色は何色ですなどといった指定をする
text-color;#333;}
–＞
＜/style＞
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
↑ココまで。↑

＜/head＞
＜body＞
ここにホームページのコンテンツ
＜/body＞
＜/html＞

という感じです。

わかりにくいですかね・・・（苦笑）

ホームページの作り方とは言っても、「こうやって作る！」という決まりはなく、自分がしたいデザインにどう近づけていくか、ということがホームページ作りの基本だと思ってください。

まずどういったホームページにしたいのか、コンテンツを考えます。その後にそのコンテンツをどういった配置にするか、どのページにこのリンクを持って行くかというような構成を考えなければいけないのですが、とりあえず絵に書いてみることが大事です。デザインも含めて書いていくと、イメージがわいて作りやすいかもしれませんね。

そしてその後に、ここを大きい文字にしたい、ここを何色にしたい、ここだけ枠で囲みたい、文字の下に線をひきたい、トップの画像にタイトルを入れたい、というようにやりたい事をひとつひとつを調べながら徐々に対処していくといいと思います。

また、自分がやりたいデザインの方法を調べていくうちに、別バージョンのやり方などもありますから、自分がやりやすい方法で作っていくと無理なく作ることができます。

また、今は難しそうだからいいけど、後々できるようになってきた時の為に、覚えていきたいなと思うような説明がそこにあれば、テキストエディタなどにコピペして、自分専用の「作り方の説明書」を作っておくと、次から検索して調べなくても済みますし、なによりタグなどを打ち込まなくても済むので楽ですよ。

これはそれほど頻繁に使わないタグなどはすぐに忘れてしまうので、思いだす際にも便利ですよ。