Web サイトをどんな外見にするか

始める前に、いくつか考えておかなければいけないことがあります。あなたの Web サイトは実際に何をすべきでしょうか？普通 Web サイトは様々なことができます。しかし、はじめは単純なことにとどめておくべきでしょう。まずは、一つの見出し、一つの画像、そして少しの文章をもつシンプルな Web ページを作ることから始めましょう。

まずはじめに、次の質問に答える必要があります。

1. 何について書かれた Web サイトですか？ 犬、ニューヨーク、それともパックマン？
2. テーマについてどんなことを書きますか？ タイトルと少しの文章、それからページに表示させたい画像を考えます。
3. Web サイトをどんな見た目にしますか？ シンプルで高いレベルから考えます。背景の色は何色にする？サイトにピッタリのフォントの種類はどんなもの？フォーマルなフォント？漫画みたいなフォント？くっきりとした太字？それとも、繊細な細字のフォントでしょうか？

次に、ペンと紙を取って、あなたのサイトの見た目をどういう風にしたいのか、大まかに描き出します。はじめてのシンプルな Web ページでは、描き出すものもあまりないですが、Web サイトを作るうえでの習慣として身につけるべきです。ヴァン・ゴッホのようになる必要はありませんので！

この時点で、あなたの Web ページについて、将来どう表現したいかをまとめ始めるとよいでしょう。

あなたが先ほど考えたちょっとした文章やタイトルは、まだそのまま残しておきます。手近なところに置いておきましょう。

色を選ぶときは、色選択ツール (カラーピッカー: Firefox のアドオンやアプリもあります) のサイトへ行き、自分の好みの色を見つけましょう。色をクリックすると、 #660066 のような6文字の奇妙なコードが出てきます。これはヘキサコード (16進法コード) と呼ばれ、あなたの選んだ色を表しています。今はどこか安全なところにコピーしておきましょう。

画像を探すには、Google 画像検索にアクセスし、ぴったりなものを探しましょう。

1. 欲しい画像が見つかったら、クリックして拡大表示にします。
2. 画像を右クリック (Mac では Ctrl +クリック) し、[名前を付けて画像を保存...] を選択して、画像を安全に保存する場所を選択します。または、後で使用するためにブラウザーのアドレスバーから画像の Web アドレスをコピーします。

なお、Web 上のほとんどの画像には、 Google 画像検索にあるものも含め、著作権があります。あなたが著作権を侵害してしまう可能性を減らすために、 Google のライセンスフィルターを使うと良いでしょう。 ツールボタンをクリックすると、ライセンスオプションが下に表示されます。再使用が許可された画像などの選択肢を選択してください。

次のような手順でフォントを選びます。

1. Google Fonts に行き、ページをスクロールして気に入ったフォントを見つけます。右側のコントロールを使って、結果をフィルタすることもできます。
2. 使いたいフォントの上にあるプラス (追加) アイコンをクリックします。
3. ページ下部のパネルにある "* Family Selected" と書かれたボタンをクリックします ("*" は選択したフォントの数によって変わります)。
4. ポップアップボックスに、Google が用意してくれた数行のコードが表示されるので、あとでテキストエディタに入力する時のためにコピーしておきます。

• 前のページ
• Overview: Getting started with the web
• 次のページ

• 基本的なソフトウェアのインストール
• Web サイトをどのような外見にするか
• ファイルの扱い
• HTML の基本
• CSS の基本
• JavaScript の基本
• Web サイトの公開
• Web のしくみ