35歳から始めるHTML

• TOP
• MENU
• ABOUT
• WORDPRESS
• CONTACT

• まずは下準備
• HTMLとCSS?
• HTMLでよく使うタグ
• 画像を使おう

• CSSは整理する箱
• 箱を作ろう
• とにかく形にしよう
• オシャレにしよう

まずは下準備

ホームページ作成の目的を考える

このサイトを見てると言う事は、ホームページを作りたいと言う思いがあってたどり着いた事と思います。 そしてきっと「こんなホームページが作りたんやけど」と言うイメージも少なからずあるのではないでしょうか？
ホームページを作る目的は細かく分けると色々とあると思います。

集客の為、商品や価格情報の提供、予約やキャンペーンなどetc・・

しかし根本的にはホームページを見る人への「情報の提供」が前提にあると思います。「おもてなし」の心を持ち、見る方に分かりやすく伝えれる、そんなホームページ作成を心がけましょう。
では、どんなホームページがおもてなしの心をもっているサイトなのか？逆に、どんなサイトがおもてなしの心が無いホームページなのか？私自身がおもてなしの心が足りないと思うホームページを挙げてみます。

私個人がおもてなしの心が足りないと思うホームページ
• 開くと勝手に音が流れる（最近は少ないですが、昔流行りました）
• ムービーやFlashの読み込みなどが長い
• 背景や文字などが蛍光色で目が痛いし読みにくい
• 背景が真っ黒で文字が蛍光色。
• 本文の文字が大きく、文字の間が詰まっていて息苦しい。
• 見たい情報がどこにあるのか分からない。

とまぁ、ざっと挙げてればこんなもんですかね？
皆さんも当てはまる項目あるのでは無いでしょうか？

ホームページは「人に見てもらう事を前提に」を忘れないように！
せっかくアクセスしてもらっても、どれだけ良い情報があっても、見る人が不快と感じればすぐにページを閉じてしまう事になりかねませんので。

自己満足が出来ないと製作のモチベーションが保てないので、ある程度の自己満足は大切にしつつも 見る人の事を考えたサイト作りを目指しましょう！

何でもいいから紙に書こう！

作成するホームページの内容が決まっていれば、まずは紙にでも伝えたい項目をざっくりと書き出しましょう。
作りながら考えるのも方法として間違えではありませんが、ページ内容を見直したり書き出す事で新しいアイデアやイメージが膨らむ事もあるので、とりあえず書く事をオススメします。

こんな事を書き出してみよう！
• コンテンツ
• 簡単なレイアウト
• 動き
• 文章や写真などもあれば、先に用意しておきましょう。

コンテンツ

メニュー内容ですね。
このサイトで言うとこの上に並ぶ項目になります。
メニューが多すぎるのも見る人が困惑するので、多くなりそうな場合はドロップダウンリストやこのサイトの右にある様なカテゴリー表示を作ったり、リンクなどを使って、見る人の欲しい情報を分かりやすく提供してあげる工夫もしましょう。

簡単なレイアウト

手書きでも良いので、レイアウトを考えましょう。 「ここにこれくらいの幅のメインタイトルがあって、写真がここに入って・・メニューはここで・・ あとお世話になってるサイトへのリンクはバナーを作ってここへ・・・」
印刷物よりもホームページを作ってて便利だと思う事は、いつでも修正が可能と言う事。
出来る事なら最初から完璧な設計図を作って完成させる事が理想ですが、いざ作り始めてから思ってたのと違うと感じたり、それにでレイアウトを変えたりする事は多々あると思います・・・
だから、この時点でキッチリ設計する事にそれほどこだわる必要は無いと個人的に思います。

動き

コンテンツとレイアウトを考えたら、ページとの繋がりを考えましょう。
専門的な言葉で表現するなら「サイトマップ」と言われるものです。 ページとページの繋がり、クリックするとどのページに移動するのか？
外部で運用しているBlogなどをホームページに設置する場合、クリックして正しく移動する設定をする必要があります。この作業はホームページを作る上で欠かせない作業になります。
クリックしたはいいけど

• 目的とは違うページに移動する。
• ページが表示されない。など

迷子にならない為にもページを作る際には必ず「HOME」(index.html)に戻れる仕組みを作っておくと良いでしょう。

文章や写真

このページを私はmacのテキストエディットであらかじめ文章を打ち、それをマークアップする流れで作成しています。
エディターで文章を打ちながらマークアップして行くのも良いですが、文章を先に作ってから作業をする方を私はオススメします。

自分で撮影した写真を載せる為のホームページを作成したい人もいると思います。
写真がホームページよりも先にあるのであれば、画像サイズを変えれるアプリケーションを前もってパソコンに入れておきましょう。

フリー
有料

画像のサイズや解像度についてはこちらサイトを参考にして下さい。
特に最近のスマホ、デジカメやデジタル一眼は解像度が高いので、加工をしていない写真データはデータの容量が大きく、そのまま使うには後々困る事になると思います。
その辺は「サーバーを用意しよう」で触れたいと思います。

サーバーを用意しよう

サーバーってなんぞ？

「初心者でもサーバーくらいは分かるよー」とおっしゃるかもしれません。
一応、自分なりに分かりやすいかな？ってまとめましたので、「サーバーとかわからん。」「ドメインとかちんぷんかんぷん」な方はこちらも見てもらえると嬉しいです。

サーバーを選ぶ

サーバーは基本的にレンタルサーバーであれば何を選んでもらっても問題無いと思います。
しかし、小さなサーバーだと集中アクセスに耐えれ無かったり、画像などを利用する際に容量が少なかったり、セキュリティが脆弱な場合はハッカーなどに簡単にアクセスされ情報の流出に繋がる事もあります。
インターネットで「無料サーバー」や「有料サーバー」で検索し上位にある有名どころのサイトはしっかりしたサイトだとは思います。
特にこだわりが無ければ、上位にある有名どころのサーバーを利用するのが無難ではないでしょうか？

FTPソフトを用意しよう

FTPソフトとは、サーバーに自分の作ったhtmlデータなどをアップロードするソフト。
サーバーってなんぞ？読んで頂いた方への例に例えるなら
フリーマーケーットへ商品を運ぶ交通機関と思ってもらったらいいと思います。

私のオススメ（と言うか使った事のあるソフトですが・・・）
・Cyberduck (mac用ダウンロード)
現在、Macで作業を行っていますが、このSyberduckを使用してます。
特別難しくもなく、シンプルで使い勝手は良いのではないでしょうか？
・FFFTP (windows用ダウンロード)
以前働いていた職場の取引先が自社サーバーを持っており、データのやり取りをFTPサーバーを使って行う方法を採っていたのですが、その時の取引先の担当さんに教えられたFTPソフトです。 始めてFTPと言う存在を知ったのもこのソフトからでした。

と言う事でオススメと言う程の内容ではないと思いますが・・・
参考になればと思います。

テキストエディタを用意しよう

私はmacのtextエディタで文章を準備してからAdobe Dreamweverで作り込みをしているのですが、Adobeのアプリケーションはどうしても値段が貼るので、無料のエディタと安価なエディタを紹介しておきます。