webサイト作成の心得（入門） - 立命館大学 · 2014-03-04 · 1...
TRANSCRIPT
1
Web サイト作成の心得（入門）
下準備
1.Web サイトの構造について
Web サイトには、見た目の情報と、そのような見た目に表示させるための文字情報があ
ります。2013 年度 NHK 講座 Web サイトの見た目は、左図のようになっています。このよ
うに表示するために、インターネットでは右図のような文字ファイルを読み込んでいるの
です。実際に四角や丸の画像を差し込んでいくのではありません。この文字のことを「タ
グ」と呼びます。
タグは読み込まれることで、画像になったり色を変えたり、使い方や種類によってさま
ざまに姿を変えます。その「タグ」にもいくつか種類があるのですが、それについてはま
たあとで記述しますね。とりあえず、こういうもんやということは知っておいてください。
2.デザインを作成しよう！ Web サイトを作りたい！ならば、まずはどんなデザインにするか、考えてみましょう！
Adobeの IllustratorでもPhotoshopでも、はたまた手書きでも、何で作っても構いません。
好きなデザインを作ってみましょう！しかし、その時にいくつか注意点があります。
① Web で再現可能か？ ・Web 上では 1px 以下の線や点は表示することができません。 ※px=太さの単位 ・見ている人のパソコンの環境によっては、再現できないカラーがあります
2
（→Web セーフカラーで検索！） などなど、「タグ」で表示できることや使っているパソコンの環境によって、Web デザイ
ンにはさまざまな制約がかかります。ほかにもたくさんあるのでしょうが、とにかく上記 2点は抑えながらデザインをしたほうが、後でやり直し！なんてことにならないのでいいで
すよ。たとえば、Illustrator では px を小数点以下まで設定できますが、実際に Web サイ
トで表示できるのは 1 の位までの太さになります。設定しておかないと、Web 用に画像を
切り出したとき、少しずつずれていってしまいます。 ② マウスオーバー用の画像をつくる Web ページを見たときに、マウスを乗せるとアイコン
画像や文字の色が変わる！といったことを経験したこと
があると思います。これは「マウスオーバー」と言って、
「タグ」を書き込むことでできる技術の一つです。この
マウスオーバーを設定する方法は後で紹介しますが、設
定するには、元の画像と、マウスが乗って変化する用の画像の 2 種類が必要になります。 ③ ヘッダー画像を動かしたいときは Flash！ Web ページを訪問したときに、ちょっとしたムービーみたいなものが流れることがあり
ますよね。たとえば、平成 24 年度版 NHK 講座 Web サイトのヘッダー画像。こういうム
ービーは、先ほどから述べている「タグ」で動くように設定するのではなく、動く画像を
作ります。この動く画像のことを Flash といいます。イラレやフォトショでいくら考えた
としても作ることはできませんので、ご注意を。
※ 作成のおすすめはフォトショップ！ なんでもいいと言っていながら、一応おすすめのソフトはあります。Photoshop だと後
述の Web 制作ソフト「Dreamweaver」と連動していますし、設定しなくても 1px 以下の
図形ができることがないので、後々の作業が楽になります。使い慣れているのであればお
すすめです。でも、使い慣れたソフトが一番作業効率よく作業できることもあるので、好
きなもので作ってかまいません。筆者もイラレでやったので不可能ではありません。 あとは、あまり複雑なものにしすぎないように注意しましょう。 ざっと注意点は以上です！ あなたのセンスが光る、素敵な Web サイトを考えてみましょう！
～長期戦！頑張っていきましょう！～
3
3.タグの打ち込みに入る前に…。 ① サイズを指定する
さて、おおまかなデザインができたら、これからパソコンの画面の大きさに合わせて表
示できるよう、サイズを指定していきます。まず、全体のデザインは横幅を 800px か 950pxくらいに決定し、あとの素材や余白の大きさを逆算していきます。
上図に赤線で示した部分が大きさを指定する部分です（全ての素材と余白に縦幅・横幅
を指定してください）。例えば画像に示した NHK 講座の Web サイトでは、大枠の横幅を
800px にすることにしたので、下のヘッダー画像も 800px、その下の 4 つ並んだボタンは
200px×4=800px になりました。 画像だけでなく、忘れずに余白にも px で大きさを指定してください（後で必要になりま
4
す）！1px の差も出ないよう、電卓片手にやりましょう。ちなみに縦幅はスクロールできる
ので、ある程度テキトーに決めてしまって OK です。 ② 画像のデータにすべきもの 作ったデザインをもとに、Web サイトで使う画像にしていきます。
2013 年度の NHK 講座のサイトでは、以下の赤で囲ったものが画像データです。
上記のように、実はほとんどが画像データなんです。 画像にするものを決めて、必要な部分だけを jpg や png などに切り出していきます。 ちなみに、背景画像は敷き詰める設定にすることができますので、小さなものを 1 つ用意
すればそれで OK です。 画像として組み込むか、文字やタグで打ち込んでいくかの決定の基準を示しておきます。
5
文字は画像データにすることもできます。ていうか、画像にしたほうがずれないし簡単
じゃね！？楽じゃね！？と思う時がいつかきます。そのようなときは一度落ち着きましょ
う。文字を文字として打ち込むことに利点はあるのか？あります。SEO 対策といって、簡
単にいうと検索エンジンで検索したときに引っかかりやすくするための
工夫があります。その際、文字情報を多くするとサイト自体の信頼度が
高まり、検索に引っかかりやすくなります。だから、文字情報にできる
ところはしていくことが大事なんです。 切り出しの際、もう一つ斜めの線が使えないことに注意点してくださ
い。右図のような傾いた四角形を作るときは背景を透過することをおすすめします。
③ 画像の切り出し それでは前置きはこのくらいにして、これから作成したデータを切り出していく方法を
紹介します。今回は Photoshop での方法を紹介します。Photoshop を起動し、スライスツ
ールを選択します。スライスツールでドラッグして、切り出したい画像ごとに区切ります。
画像にするもの
・写真（そもそも画像） ・ボタンになるもの ・ロゴマーク ・どうしても書体を変えたい文字 ・特殊な効果をかけた背景など
文字にするもの
・できる限りの文字
タグですること
・背景や表のセルの色 ・文字の色
6
全部の画像の選択が終わったら、[ファイル]から[Web およびデバイス用に保存]を選択しま
す。すると、下図のようなウインドウが表示されます。
必要な画像をすべて Shift キーを押しながらクリックします。すると画像が選択され、
図を囲んでいる線が茶色になります。できたら[保存]ボタンをクリックします。すると、
指定した場所に[image]というフォルダが作成され、すべて画像ファイルに書き出されます。
必要な画像の確認ができたらそれらにわかりやすいタイトルをつけましょう。
そのとき拡張子の前は、小文字アルファベット、数字、ハイフン、アンダーバー（いずれ
も半角）だけで名前を付けてください。
これで切り出し完了です！！ ちなみにイラレで作成する場合は、このフォトショの機能は使えません。なので、切り
出し用の ai データをもう一つ用意します。そしてアートボードのサイズを決めた画像ごと
に変えて、コピペ、書き出し、サイズ変えて、コピペ、書き出し、（以下略）で切り出しを
していきます。仕上がりはきれいになりますが、手間暇がとてもかかるので、根気を持っ
て作業しましょう。
・推奨保存形式 写真ファイル：jpg その他作成した図形：gif
画質は gif＜jpg＜png の順によくなりますが、同時に容量が重くなるので場合によって使
い分けましょう。なお、gif と png に関しては背景を透明にすることができます。
7
ここからが本番
4.HTML に記述する さて、やっと下準備が終わりました。まだまだ。これからが本番ですよ。これまで作っ
てきたデザインや画像を、Dreamweaver というソフトを使って、「タグ」に起こしていき
ます。今回は、先ほどから使用している 2013 年度の NHK 講座の index（トップページ）
の構造をベースに説明していきたいと思います。コードはサイトを表示し、[右クリック]→[ソースを表示]から閲覧できます。まずは Dreamweaver を起動しましょう。
作業を始める前に、Dreamweaver を起動したら上図の印の部分をクリックしておきまし
よう。タグコードと見た目の両方が表示され見やすいので、PC の画面が大きな C3 で作業
するにはお勧めです。 ヘッダー解説 まずは頭の部分から。大事なところまたはいじるべきところだけ抜粋していきます。こ
こに書かれていないタグは、消さないようにだけ注意して、無視してもかまいません。気
になるのであれば検索してみましょう。
<head> <title>2013 年度 NHK 講座 大学コンソーシアム京都・単位互換科目</title> <style type="text/css"> body { background-image: url(haikei.gif); background-repeat: repeat; background-color: #99cc99; } img { vertical-align: text-bottom; } p{line-height: 1.3;} a {color:#009} a:hover{ text-decoration: none; color:#06F;} </style> <link href="mystyle_h25.css" rel="stylesheet" type="text/css" /> </head>
8
黄色：ヘッダーがここからここまでの意。 ※ヘッダー…実際に表示されるものではなく、注意書きみたいなもの。レポートで
いったらタイトル学生番号氏名日付。 水色：このページのタイトル。 緑 ：このページだけに適応させる書式みたいなもの。現時点ではいじらなくて OK。 あとから出てくる body や img、p、a といったタグと呼応しています。
｛ ｝で閉じた中に、どんな色にするか、といった指令を書きます。レポートでい
ったら書式設定のようなもの。 灰色：このサイトのすべてに反映する書式集がどこにあるか示しています。緑はこのペー
ジだけに反映するものでしたが、全ページに共通するものを別紙の書式全集にまと
めてしまうことでヘッダーがすっきりします。
ここまで見てお気づきでしょうか？タグは、
<○○>
</○○>
この二つが対になってはじめて意味を持ちます。
これはヘッダーに限らずすべてのタグに共通しているので注意してください。
本文解説 形式を書いたら、やっとホームページのデザインを書くことができます。大まかな機能
だけ解説していきます。細かい説明・タグの見本は別紙 ai のファイル（印刷には不向き）
に解説しているので、ご参照ください。また、本当にわからないことはインターネットで
本物のクリエイターがわかりやすく解説していることが多いです。早めに Google に頼って
みるのも手です。
Word やその他のソフトだと、画像を挿入する場合はドラッグ＆ドロップ、表を挿入した
ければ挿入タブを開いて必要なセル数を指定すれば、挿入完了です。ところが、HTML と
いう Web サイト用のデータでは、画像や表を文字に変換して挿入しなければなりません。
タグの記述がわからなくても、だれでも簡単に Web サイトを作ることができるようにした
のが、Dreamweaver というソフトです。 冒頭では、Web サイトのデータには見た目の情報と、そのような見た目に表示するため
の情報の二つがあると述べました。しかし、実質データとして存在するのは、そのような
見た目に表示するための情報【＝タグのデータ】のみです。見た目の情報は、Dreamweaverが読み取って表示してくれているプレビューに過ぎないことを理解しておいてください。
9
◎表の扱い方 表は、[挿入]タブの[テーブル]を選択して挿入することができます。
すると、右図のウインドウが表示されます
ので、[行]、[列]、[テーブルの幅]を入力しま
す。また、レイアウトのガイドとして表を使
うときは[ボーダー]は[0]にしておきます。（※
ボーダー：表の枠線のこと） 入力ができたら[OK]をクリックし、表の挿入
が完了します。 セルの境目にマウスポインタを移動すると、
カーソルがこのように 変化します。ド
ラッグでセルの幅を変更することができます。
表を挿入すると、同時に[コード]にタグが記述されます。タグの意味は以下の通りです。
現在ある表を組み替える場合には、直接<tr><td></td></tr>を打ち込んでいく方が楽です。 ★セルの結合 入れ子式になった表やレイアウトを見たことがあると思います。たとえば index の講座
ラインナップですが、以下のようになっています（間の余白は省略しています）。 1 写真 2 写真 単純な表に見えますが、この部分を作るのには上記のように 6 個の横並びのセルがあり、
そのうちグレーの 2 つずつのセルを結合しています。濃いグレーの部分の記述は以下の通
りです。
「colspan」このタグが、セルの結合を意味しています。右側のセルが順に結合されます。
「"2"」は、結合しているセルの数を表しており、もし「"3"」にすれば、隣の薄緑のセルも
結合されてしまいます。一番上から下まで、一行のセル数が同じになるように注意点して
ください。数が間違っていると、そこからずれていってしまい、おかしな表になってしま
<table></ table> これは表です。 <tr></tr> ここから一行目が始まります／終わります <td></td> ここから 1 セルの内容を記述します／1 セルの内容が終わります
<tr></tr>の中にたくさん<td></td>を記述していくことで、一行の列数を増や
していくことができます。
<td colspan="2" valign="middle" bgcolor="#CCCCCC" style="padding:0px 0px 0px 10px;">
10
います。 セルを結合するには、直接 colspan を打ち込んでもいいで
すが、左図のアイコン（画面の右下）をクリックするだけで、
簡単に結合することもできます。
※その他のタグ解説 valign="middle" このセル内の文字を真ん中寄せにします
style="padding:0px 0px 0px 10px;" このセルの中の右側を、10px 余白にします ←詳細は後述
◎画像の挿入の仕方 画像を挿入するには、下記のタグを書き込みます。 画像挿入にも、簡単に場所やサイズを合わせてタグを作ってくれる機能があります。画
像を挿入したい場所にカーソルを移動して、[挿入]→[イメージ]をクリックします。すると
選択ウインドウが表示されますので、挿入する画像を決定して、[OK]をクリックします。
画像そのもののピクセルと格納場所を自動的
に記述した img タグが書き込まれ、デザイン表
示を見ても、画像が挿入されていることが確認
できます。 alt とは、何らかの原因でページにアクセスし
た人が画像を表示できなかった場合に、ここに
入力した文字が画像の代わりに表示されるとい
うものです。画像に名前を付けることでページ自体の信頼度も上がるので SEO 対策にもな
<img src="画像の場所" alt="画像の名前" width="画像の幅" height="画像の高さ" border="0"/>
11
ります。できるだけ書き込むようにしましょう。 画像には自動的に枠線が付け足され書き込まれます。枠線を削除するには、「border="0"」
を画像タグ内に書き込むか、下方のプロパティからボーダーを「0」と入力します。
◎リンクの貼り方 自分が見たい情報をクリックすると、その情報の子ページに飛びさらに深い階層まで閲
覧できるというのが Web サイトの特徴的な構造となっています。リンクを貼るのも
Dreamweaver なら簡単です。リンクのタグは以下のようなものです。 リンクを貼るには以下の作業スペースを使います。
リンクを貼りたい文字をドラッグして選択します。そして、②のスペースからリンクを
貼りたい HTML ファイルを探します。 ①から、右図に示したマークを選択しドラ
ッグすると、線が伸びます。 その線を、先ほど②で探したリンクを貼
りたいファイルに伸ばし、ドロップすると
選択できたことになります。すると下図の
ようにリンク先が書き込まれ、[コード]にも
タグが書き込まれています。そして、[デザイン]でもリンクを貼りたい箇所が青くなってい
ることがわかります。
<a href="1_13/1_13.html">今年の NHK 講座のポイント</a>
① ②
12
★マウスオーバーの作り方 マウスを上に乗せると変化する画像がありますよね。それがマウスオーバーです。
Dreamweaver では簡単にマウスオーバーを作ることができます。先程と同じように[挿入]から、今度は[イメージオブジェクト]→[ロールオーバーイメージ]を選択します。
上図のウインドウが表示されますので、[参照]から画像を選択していき完了したら[OK]をクリックします。[元のイメージ]が平常時に表示される画像、[ロールオーバーイメージ]がマウスを重ねた時に変化して表示される画像です。また、[代替テキスト]は alt に反映さ
れます。最後に、青線で示した部分にリンク先のタグを書き込みます。[参照]から選択しま
しょう。 この機能を使って挿入されたマウスオーバーは、「JavaScript」を使ったものです。他に
「CSS」を使う方法もあります。こちらではタグの文字数を大幅に減らすことができ、アク
セスした際に早く読み込みこまれるという利点があります。同時に悪い面もあるので、サ
イトの大枠が完成したら CSS の特性を理解したうえで判断し、習得してみましょう！！ ★マージン（margin）とパディング（padding） 画像や表自体の周りに余白をつける記述があります。それが、margin と padding です。
上図に示したように、外周の余白には margin、内側の余白には padding を使います。外
側に余白をつけるということは、つまり新しくピクセル数が増えるということにもなりま
す。デザイン作成の時点で指定したページの幅（800px や 950px）からはみでていません
か？表のセルの大きさより大きな数字になっていませんか？padding は内側につけるもの
なので、ピクセルが増えることはありませんが、margin を使うときはきちんと確認しまし
ょう。
図 1 margin 図 2 padding
13
5.ブラウザで表示できるかチェック！ お疲れ様です！よくここまでサイト構築をしてきました。ここまできたら、ブラウザで
表示してチェックしてみましょう！うん？ブラウザ？…そう、ブラウザには Internet Explorer、Chrome、Firefox、などがありますね。各ブラウザでは特性が違い、同じタグ
を記入しても読み込んだ時に異なる表示になってしまう可能性があります。Dreamweaverのプレビュー（[デザイン]で表示されるもの）とほぼ同じようになっているか確認してみま
しょう。 [ファイル]→[ブラウザー
でプレビュー]より、上記
の 3 つのブラウザをそれ
ぞれ選びます。
特に私たちがよく使用する Internet Explorer は曲者で、他のブラウザでうまくいってい
るコードでもうまく読み込んでくれないことが多いです。バージョンによって仕様も違う
ので他のパソコンでも確認しながら、根気強く解決していきましょう。このときは、ピン
ポイントな症状に合わせて検索ができるインターネットが使いやすいです。うまく活用し
ましょう。
＊ 背景のくり返し ＊
背景は敷き詰めて貼ることができるので、用意するのは 3px×3px くらいの
ものでもかまいません。13 年度は（ ）←コレを一枚だけ用意して、CSS で 繰り返しの指定をして敷き詰めて使っていました。
background-image: url(haikei.gif); background-repeat: repeat;
14
よくあるミス集 ・書き込んだコードがうまく反映されない。 →タグは閉じ忘れていませんか？閉じたと思ったタグの<>が消えていませんか？
・表がずれる…。うまく表示されない。 →縦に長い余白を作るときは、半角スペース「 」を打ち込む →横に長い、3px くらいの極端に細い余白を作るときは、1px×1px の透明の画像データ
を作成し、挿入する（）←コレ →空のガイド用のセルを配置する
→colspan の数があっているか →2 列ある場合、両方の表の高さがあっているか
6. サーバーにアップしよう！ ブラウザのチェックも終わったら、最後にあなたの作ったサイトを公開しましょう！ 現在では「ローカル」で作った状態になっているので、これを誰でもアクセスできるよ
うに「アップロード」します。無料レンタルサーバーなどを利用しましょう。 無料サーバーだと、フォルダを認識してくれないものもあるので、ページに表示する素
材（HTML,jpg,gif や png などのデータ）はフォルダごとに分けたりせず、同じフォルダに
格納しておきましょう。 アップロードしたら、さっそくサイトをチェックしましょう。新たなバグが出ていなけ
れば… …これで完成です！！！！ 本当にお疲れ様でした。
15
参考サイト一覧 バグ修正関連 表について http://www.keynavi.net/ja/bugh/html.html height について
http://nobuko.biz/iebug-dtd/iebuglist.html http://liginc.co.jp/web/html-css/html/29465 http://webdesignrecipes.com/css-tips-for-beginner-ie7/
IE６での透過 png の表示 http://html-coding.co.jp/knowhow/tips/000274/ CSS で作るロールオーバーイメージ
http://hac-design.com/css/rollover.html http://webdesignmore.com/technique/css-rollover/ http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1175683396 謎の黒丸の正体 http://www.htmq.com/style/list-style-type.shtml
div でレイアウトを組む http://homutuku.com/beginner/210.html ノート罫線のつくり方
http://momonga365.blogspot.jp/2008/08/dreamweavercss_25.html http://allabout.co.jp/gm/gc/24003/3/