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