動画で学ぶ!
ホームページ作成

自分で作れる!
ホームページ作成

動画で学ぶ!ホームページの作り方

ホームページの作り方の基本を紹介していきます。一通り修得すればこのサイトぐらいのホームページであれば誰でも独力で作れるようになります。『簡単に』、とは言いません。プロ並みの制作速度やコードの綺麗さというのは難しいです。

しかし、時間を掛けさえすれば『見えるホームページ』にはなると思います。最先端なホームページでなければデザインセンスは必要ありません。レイアウトの基本や、最近の流行りのポイントさえ抑えればそれなりのホームページは誰でも作れます。

これ以上となると、デザインセンスの他にカラーコーディネーターやイラストレーター、カメラマンやプログラマーの知識も必要になってくるので、独学や一人では難しいと思います。ただ、出来ない部分だけ外注するとプロ並みのホームページを作ることも可能です。ちなみにこのサイトはすべてフリー(無料)素材と自分で撮った写真のみで作成しています。

これぐらいのホームページであれば誰でも作成できますよ。

まずはホームページの仕組みを知ろう!

ホームページはテキストファイルとフォルダで出来ています。基本的にはカテゴリーがフォルダと思っていれば間違いありません。なので、メモ帳のようなテキストエディタがあればホームページを作成することが可能です。

しかし、これだけでは自分のパソコンのなかにあるだけで、世界中の人に見られるわけではありません。世界中の人に見てもらうためには、世界中の人がアクセスできるサーバとドメイン(URL)が必要になります。

サーバはそれようのソフトウェアを組み込んだ24時間稼働しているパソコンで、月掛けでレンタルすることが一般的です。月掛けとはいえ1年契約をすることがほとんどですね。

このサーバに作ったファイルや画像をアップロードすることによって世界中の人に公開されます。しかし、ただアップロードするだけではまだ見ることが出来ません。アクセスするためのドメイン(URL)が必要になります。この辺りは追々見ていきましょう。まずはホームページを作ることからはじめます。

ホームページ作成初級編 ホームページの基本

初級イメージ

完成の見本サイト

笹岡理容店という高知県梼原町にある散髪屋さんのサイトを簡単に作成して行きます。全部で3ページ。HTMLファイルの基本と画像の表示や見出し、リストタグやリンクの貼り方といったホームページの基本を学びます。

CSSでの段組みレイアウト

CSSレイアウトで学べること

ホームページ作成中級編 CSSでの装飾

中級イメージ

中級編で学べること

  • 1カラムの実用的なCSS段組みレイアウト
  • CSSでのボタン作成 / 写真への枠付けやシャドウ / 角丸の仕方
  • ページ内リンクの貼り方
  • JSの設置と使い方
  • Google Mapの貼り付け

完成の見本サイト