超初心者のための Web作成特別講座

第2回 色を変更しよう

初めてのWebページは、読みやすく仕上がりましたでしょうか?

さて、グループでテーマ性のある作品を共同開発する前に、Webページを作るための便利なソフトについてご紹介しましょう。

HTMLファイルの修正と確認

画像説明

 Web作成のプロの人はDreamweaver(ドリームウィーバー)という本格的なソフトを使っている場合が多いですが、高機能で高価なソフトですので、ここではフリーの Crescent Eve 紹介をしましょう。

 まず、サーバからダウンロード(こちら)します。

  Crescent Eve をダウンロードして、解凍すると、Crescent Eveというフォルダができます。これをCドライブなど、プログラムを置いておく場所に移動します(C\program filesが適当)。Crescent Eve のフォルダの中に Eve.exeというアプリがありますので、このエイリアスを作成して、デスクトップなどに置いておきます。

 利用の方法は、「メモ帳」の場合と同じです。

(はじめに)
 1)Eve.exeのエイリアスをダブルクリックします。
     → Eveの窓「空白」が開きます。
 2).htmlのファイルを、ダブルクリックします。
     → ブラウザが起動され、Webが表示されます。
 3)同じ.htmlのファイルをEveの窓「空白」の部分にドラッグします。
     → htmlがテキストで表示されます。
     ※大事な単語に色がついたり、行番号が表示されたりで、わかりやすいですね。

(修正・保存・確認)
 4)Eveの窓内のテキストを修正します。
 5)修正中のテキストを保存します。
   Ctrl + s でも保存できますが、上部に保存のマークがあり、それを押しても保存できます。
 6)ブラウザの再表示マークをクリックして、変更されているか確認します。
     ※4)~6)を満足いくまで、繰り返す。

 Eve.exeは、Web作成に特化された便利なソフトなので、単なるテキストエディタとしてではなく、いろいろな機能があります。詳しくは、ヘルプ(H)の【Crescent Eveを10倍活用する方法】をご覧ください。ただ、これらを使いこなすのは、Web作成に慣れ、操作の意味が分かってからのほうがいいですので、

 はじめのうちは、上記の1)~6)の手順で進めるようにしてください。

写真縮小のアプリ

画像説明

 最近のカメラは、高解像度で、画像サイズはL(4928×3264画素)、M(3696×2448画素)、S(2464×1632画素)というように、1000万画素を超えるものまであります。また、スマートフォンで撮影した写真も同様に高解像度(3264x2448画素)で保存されています。
 このような大きさサイズの写真は、jpg(ジェーペグ)で圧縮されていたとしても、数十Mbyte~数百Mbyteというサイズのものもあり、このままWebの写真として使用するわけにはいきません(通信に時間がかかって、実用に耐えない)。したがって、必ずサイズを縮小して利用する必要があります。

 スマートフォンの場合、数枚程度であれば自分のPCメールのアドレス宛に送信するのが簡単です。送信時には画像のサイズを「大中小」といった具合に選択することもできます。それぞれ

のサイズに縮小されます。
また、スマートフォンをパソコンとUSBケーブルで繋ぎ、デジタルカメラと同様に写真をとりだすこともできます。

 さて、デジタルカメラやスマートフォンからパソコンに移動した高解像度の写真を縮小するにはどうしたらいいでしょう。
第1回で紹介した、「ペイント」というwindows アクセサリのアプリが便利ですので使いましょう。

 写真の縮小は、次のようにします。

画像説明

1)「ペイント」をダブルクリック
 して開きます。
2)利用する写真をimagesの
 フォルダにコピーします。
3)ファイル名を、引用する
 名前に変更します
 (半角の英数字で、拡張子(.jpg)は変更しない).
4).jpgのファイルを、「ペイン
 ト」の窓「空白」の部分に
 ドラッグします。
 → 写真が表示されます。
5)左から二つ目の「ホーム」
 タブの「サイズ変更と傾斜」
 をクリックします。 倍率設定の窓が表示されていると思うので、縦横比固定を選択し(ここが重要)
 単位のラジオボタンで「ピクセル」を選択し、値を変更します。
6)「OK」を押すとサイズの変更が実施され、写真が縮小されて表示されます。

 ※サイズの目安ですが、Webの横サイズが700px(画素)程度ですので、一面で使うものなら、幅:700、文章の横の写真は、幅:400で十分です(width=値と対応しています)。

▼ページの色を変えてみよう!

 2で説明した方法で、色を変更してみましょう。
 第1回の page1.htmlの色情報は、すべて、ヘッダー部に書かれています。

 まず、11行目から13行目に以下のような記述があります。ここでcolor:の右に書かれているのが、タイトル(h1)、章の表題(h2)や節の表題(h3)に関する色情報で、green(緑),gray(灰色),dimgray(暗い灰色)が使われています。

 h1 {padding: 15px 5px 15px 10px; color:gray; }
 h2 {margin-top:30px; padding: 3px 3px 0px 10px; color:green; border-left:solid 5px green; }
 h3 {padding: 8px 3px 3px 0px; color:dimgray; border-bottom: 1px solid dimgray; }

この色を別の色に変更して表示してみましょう。ただし、どんな英単語を使ってもいいわけではありません。 以下のURLを見てください(色見本表)。
 ここに示されている140色(例えば、黒はblack, #000000となっている)は、対応する英単語が使えます。選んでスペルを間違えないように、書き換えてください(他の部分は消さないよう)。

 いかがですか、どこを変更すると、どのように変わるか確認できましたか?

画像説明

ところで、Web画面全体の色は、現在規定値の白(white #ffffff)となっていますが、これを変更することもできます。

 body {width:900px; background-color: white}
      ↑ 横幅が900画素、背景色:白色の意味 を
 body {width:900px; background-color: lightyellow}
                  うす黄色の意味 ↑ 

 と追加・変更すると、随分雰囲気が変わります。
 (※英語で読めば、そのままの意味ですね)

 色の組み合わせには、相性があります。暖かい感じ、クールな感じなど、テーマによって背景色を選び、見出しの文字の色を変更して、美しく読みやすいWeb表現をを追及してください。

次回は、いよいよグループで協力して、一つの作品を企画・作成しましょう。