メディアデザイン演習3β
03 HTMLの基本を知ろう2

HTMLを書きながら要素を知る

前期は、ウェブサイトを表示するために必要なHTMLというプログラムを学びます。
前期合評時の製作目標は、自分が編集長となるウェブマガジンサイトをつくることです。

前回から、HTMLを実際に書いてみながらその構造と書式を勉強しています。
今週もさらによく使われる要素を、実際にタグを書きながら学んでいきましょう。
引き続き、「UNDER CONSTRUCTION」工事中のページを作成していきます。

この間のふりかえり

実際に真似して書いてみた

head と bodyでHTML
・そのHTMLファイル自身に関する情報
・ブラウザで開くと見える(読める)部分の情報

タグは要素の名前を山括弧( < と > )で囲んだものです。
つまりhead要素を示すタグは<head>となります。
"<" と">"で囲まれた部分がタグ。
タグは"<要素名>"で始まり、"</要素名>"で終わる。

先週作成したファイルを開きましょう

先週は以下のHTMLをそっくりそのまま写してもらいました。
今週はこれを改造してより自分の好きなデザインにしましょう。

準備:
デスクトップに、アルファベットで自分の名字を名付けたフォルダの中を作成し、現在作成中の工事中ページ、index.html を入れて下さい。



画像の表示

デスクトップに作ったフォルダの中に、imageという名前の新しいフォルダを作成し、その中に以下の月の画像をドラッグ&ドロップすることでダウンロードして、保存してください。



太字の部分の一文を以上の位置に入れて保存し、ブラウザで開いてみましょう。
画像が表示されましたか?


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>工事中</title>
</head>

<body>
<h1>(自分の名前)のウェブサイト</h1>
<h2>ようこそ!でもまだ完成していません。</h2>
<p>sorry, this web site is now under construction.<br />
この授業のウェブサイトへ
<a href="http://seian.okazawarina-design.info/">リンクする</a>
<img src="image/moon.jpg" alt="moon" width="100px" height="100px">
</p>
</body>
</html>


画像に関する要素と属性の紹介
[要素]
img 要素  画像を配置する:空要素
[属性]
src属性 ファイル名を指定
alt属性 画像の代わりに表示される文字列
height・width属性 画像の高さや横幅をピクセルまたはパーセンテージで指定 
 


ブラウザで表示できる画像の種類

ウェブサイトに使用する画像は、ブラウザが表示可能なデータ形式、さらに、データのサイズが小さいものであること、という制約が有ります。

GIF(ジフ・ギフ) Graphic Interchange Format
最も多くのブラウザがサポートする方式です。
256色以内ならかなり小さく圧縮する事が出来る為、古くからこの方式が使われてきています。
インタレース形式の場合は、読込途中でも画像がモザイク状に表示されて行きます。
一つのファイルに複数の画像を纏める事が出来、これを利用してアニメーションも可能です。アイコンやベタ塗りの多い画像、色数の少ない画像に最適です。

JPEG(ジェイペグ) Joint Photographic Experts Group
GIFに次いで最も普及している方式です。
GIFと違ってフルカラーやグレイスケールに対応しております。
但し、圧縮率を高める為に画質を落としてしまうという欠点もあり、このため圧縮率を指定する事も出来ます。
JPEG方式で圧縮すると元通りには復元できなくなってしまうという事です。このように100%元通りに復元できない圧縮を不可逆圧縮といいます。尚、GIFは元通りに復元できる可逆圧縮です。
GIFのインタレース形式と同様に、プログレッシヴ形式の場合は、読込途中でも画像がモザイク状に表示されて行きます。
また一本のファイルに一画像と限られており、従ってアニメは出来ません。
フルカラーの写真、グレイスケールでも微妙な濃淡がある場合(例えば写真や水墨画)に最適です。

PNG(ピング) Portable Network Graphics
GIFと同等の圧縮率を持ちながら、フルカラーにも対応しております。一方フルカラーではJPEGと違って可逆圧縮なので保存しても鮮度を維持できます。
但し、ローカルで画像を保存するのなら、PNGよりも圧縮TIFF(ティフ…オフライン印刷用の画像に用いられる形式。ウェブでは余り使われない)の方がファイルサイズの点及びプリントアウトの際に有利です。
また、PNGにはGIFと違って誰がやっても同じ圧縮率にならないという問題があります。ソフトに依ってはPNG画像はGIFより遙かに肥大したファイルとなります。
GIFと同様にインタレース形式もあり、読込途中でも画像がモザイク状に表示されて行きます。但し、PNGのインタレース形式は通常の形式よりかなり重くなるので注意しましょう。GIFと同様に、アイコンやベタ塗りの多い画像、色数の少ない画像に向いています。

一般にはフルカラーやグレイスケールならJPEG、その他の場合はGIFという使い分けがされています。




PHOTOSHOPなどのAdobe製品 : 「Web用に保存...」コマンドの使用方法
http://tv.adobe.com/jp/watch/learn-photoshop-cc/21907/

Web用の画像(GIF、JPEG、PNG)を書き出す方法




絶対と相対

絶対パスと相対パス

絶対パス http://~
絶対パスとは、http://から始まるアドレスの事です。
http://www.seian.ac.jp/
など

相対パス ../ / 
たとえば、作成した HTML ファイルが次のようなフォルダに置かれているとします。□ はフォルダ、◇ は HTML ファイルを表します


├□ part1
│├◇ aaa.html
│├◇ bbb.html
│└□ part1no1
│ └◇ ccc.html
├□ part2
│└◇ ddd.html

aaa.html から bbb.html にリンクするには次のようにします。
<a href="bbb.html">ジャンプ</a>

aaa.html から ccc.html にリンクするには次のようにします。
<a href="part1no1/ccc.html">ジャンプ</a>

aaa.html から ddd.html にリンクするには次のようにします。
ドットドット(..)は「ひとつ上のフォルダ」を意味します。
<a href="../part2/ddd.html">ジャンプ</a>

 


色について/ CSS(Cascading Style Sheet)

背景色 [CSS : background-color]

</title> のあと </head> のまえに

<style type="text/css">
<!--
body {background-color: #99ff00;}
-->
</style>

と書き足して保存し、ブラウザで表示してみる。背景の色が変わりましたか?
では、好みの色に設定してみましょう。

色について/16進法で色を表す

色の便利ツール:216色カラーチャート

16進数で00からFFまでを、33hずつ増やしながら等分していくと、00, 33, 66, 99, CC, FF の6個の数値が得られます。1色につき6個の数値を用いて3色組み合わせるので、6×6×6=216色のカラーチャートが得られます。これをWEBセーフカラーと呼びます。

CSS/文字のサイズと色  

CSS(Cascading Style Sheet)
本文とは別に表現ルールを設定するスタイルシートは、文書のメンテナンスを容易にし、また表現に一貫性を持たせる手段です。

実際に文字に色を付けてみる
先ほどイメージを入れた後ろに、青い文字を入れてみる

<p> sorry, this web site is now under construction.<br>
  この授業のウェブサイトへ
  <a href="http://seian.okazawarina-design.info/">リンクする</a></p>
  <img src="image/moon.jpg" alt="moon" width=100 height=100>
  <p style="color:blue;">成安造形大学</p>
 </body>

保存して、ブラウザで確認して下さい。
p要素のあとに、style属性で色の名前(もしくは値)を入れる事によってその段落内の文字の色が変わります。ほかにも、<h1> や <em> (強調のタグ) など、ほとんどのタグで style 属性を指定できます。
しかし、上記のような書き方はあまり現場では好まれません。


文章全体のデザインを決める

見出しや段落の文字色やサイズの指定を、まとめて行うことができます。
さきほど背景色を決めたところの下に、以下太字の内容を書き込んでみましょう

<style type="text/css">
<!--
body {background-color: #99ff00;}
h1 { color: red; }
-->
</style> 

タイトル部分が赤くなりましたか?
その下に続けて、

h2 {
color: green;
font-size: 12pt;
} 

と書き込み、保存してブラウザで確認してみましょう。

 

CSSの書き方

h1 {color : red;}

ここで、最初の h1 をセレクタ(Selector)
続く { } で囲まれた内容を宣言(Declaration)と呼びます。

宣言の中にはプロパティとその値をコロン( : )で区切って記述します。

セレクタは、あるスタイルを適用する対象(要素タイプなど)を示すもの、プロパティは定義するスタイルの性質(色、大きさなど)に相当します。

プロパティと値のペアはセミコロン( ; )で区切って
複数記述することができ、複数行にわたっても構いません。 


スタイルシートについては、次回以降の授業から、より詳しく触れていきます。
今週のここまでの知識で、工事中のページの文字の色やサイズを指定しましょう。

 

来週の内容

引き続き要素と属性の紹介
今日作ったファイルは保存して次週も使える様にしておいて下さい。

次週は、ゴールデンウイークのため休みです。
次回はスタイルシートについてもう少し詳しく見ていきます。
 
休みの間に、ウェブマガジンのテーマを決めて、どんなものにしようか決めておいてください。
これまでうけてきた授業をふまえて、書店でHTMLおよびウェブサイト製作の参考書の購また、入を検討しておいてください。

今日の内容を振り返って、よく理解しておきましょう。
わからない事は早めに質問して下さい。