初めてWeb大全

Similar documents
0605調査用紙(公民)

【試用版】AppStudioクイズアプリ作成手順

お 世 話 になります 斎 藤 真 一 です facebook ページのことがよく 分 からない と 言 った 問 い 合 わせが 多 かったので まずはこちらのマニュアルを 作 成 し ここから 始 めて 頂 くことにしました VMPでは facebook ページは 必 須 なので まずは fac

戦略担当者のための

Microsoft Word - WBT(PP応用編).docx

目 次 1 ご 使 用 の 前 に 1.1 動 作 環 境 1.2 セットアップ 方 法 2 使 用 方 法 2.1 起 動 方 法 2.2 操 作 方 法 効 果 音 設 定 アニメーション 設 定 スライドジャンプ 設 定 フラッシュカード 設 定

サッカーの話をしよう 旅するワールドカップ 立ち読み版

雇用保険被保険者資格取得届(様式)編

SchITコモンズ【活用編】

神の錬金術プレビュー版

Microsoft Word - repo15

PowerPoint プレゼンテーション

新 規 団 体 登 録 ボタンをクリック

1. 目 次 1 目 次 7 会 員 検 索 申 込 2 ログイン 方 法 ( 初 回 ) 8 活 動 状 況 ( 申 込 申 受 お 見 合 い 管 理 ) 3 ログイン 方 法 (2 回 目 以 降 ) 9 活 動 状 況 ( 不 成 立 履 歴 削 除 ) 4 パスワードを 忘 れた 時 は

Gmail 利用者ガイド

「報・連・相」の方法

<4D F736F F D F B B838082F090DD927582B782E995FB96405F E646F6378>

PowerPoint プレゼンテーション

著 作 権 について このレポートは 著 作 権 法 で 保 護 されている 著 作 物 です このレポートの 著 作 権 はカラバオに 属 します 著 作 権 者 の 許 可 なく このレポートの 全 部 又 は 一 部 をいかなる 手 段 においても 複 製 転 載 流 用 転 売 等 すること

東京都立産業技術高等専門学校

Microsoft Word - P doc

2. ど の 様 な 経 緯 で 発 覚 し た の か ま た 遡 っ た の を 昨 年 4 月 ま で と し た の は 何 故 か 明 ら か に す る こ と 回 答 3 月 17 日 に 実 施 し た ダ イ ヤ 改 正 で 静 岡 車 両 区 の 構 内 運 転 が 静 岡 運

第3章

補 図 100 Webページ 制 作 の 流 れ 2 HTML 文 書 とブラウザ 3 作 成 するページ Webページの 作 成 に 用 いるHTMLの これから 作 成 するWebページの 内 容 を 示 した 紹 介 と そのしくみを 簡 単 に 解 説 する リンク 機 能 など 基 本 的

Microsoft Word - Active.doc

返還同意書作成支援 操作説明書

Fckeditor の 基 本 的 な 使 い 方 Point!! fckeditor を 上 手 く 使 うコツ 始 めにページ 内 に 一 通 り 文 章 ( 画 像 や 表 を 含 む)を 書 いてから 文 字 装 飾 をして 下 さい 編 集 したいテキストや 画 像 を 選 択 し アイコ

CSI情報管理システム

2 この 講 座 では 苦 手 意 識 のある 先 生 方 も 多 い IT 系 の 知 識 について 基 礎 から 活 用 法 まで をご 説 明 し インターネット 上 でも 信 頼 される 行 政 書 士 事 務 所 運 営 ができるようにバ ックアップを 行 います フリーメールって 何?

■新聞記事


A

プロジェクトタイトル(HGP創英角ゴシックUB 24pt) サブタイトル(定例資料など、HGP創英角ゴシックUB 18pt)

測量士補 重要事項「写真地図作成」

スライド 1

目 次 1. 物 件 入 力 とページ 作 成 1.1. ドリームXジグソーの 一 覧 画 面 の 見 方 基 本 情 報 画 像 登 録 地 図 情 報 SEO 対 策 非 公 開 情 報

Microsoft Word - 資料5-1_資料掲載_ver docx

基本操作マニュアル[既存ページの編集と連載記事の作成・更新]編

PowerPoint プレゼンテーション

著 作 権 について 本 冊 子 と 表 記 は 著 作 権 法 で 保 護 されている 著 作 物 です 本 冊 子 の 著 作 権 は 発 行 者 にあります 本 冊 子 の 使 用 に 関 しましては 以 下 の 点 にご 注 意 ください 使 用 許 諾 契 約 書 本 契 約 は 本 冊

内 容 Office2013 の 動 きが 変!... 3 Lesson の 機 能 を 使 ってみる... 5 LESSON2 表 入 力 を 簡 単 にする... 8 Lesson3 簡 単 分 析 LESSON4 書 式 の 設 定... 18

<4D F736F F D B68F918DEC90AC89898F4B899E977095D2816A2E646F63>

は じ め に 懸 賞 フ ァ ン の 皆 さ ん 毎 日 応 募 し て い ま す か? 成 果 は い か が で す か? イ ン タ ー ネ ッ ト で は 毎 日 非 常 に た く さ ん の ホ ー ム ペ ー ジ で 膨 大 な 数 の 懸 賞 プ レ ゼ ン ト が 実 施 さ

「給与・年金の方」からの確定申告書作成編

<4D F736F F D20819C486F70658F6F93588ED297708AC7979D89E696CA837D836A B E A2E646F63>

4 調 査 の 対 話 内 容 (1) 調 査 対 象 財 産 の 土 地 建 物 等 を 活 用 して 展 開 できる 事 業 のアイディアをお 聞 かせく ださい 事 業 アイディアには, 次 の 可 能 性 も 含 めて 提 案 をお 願 いします ア 地 域 の 活 性 化 と 様 々な 世

(Microsoft Word - \203A \225\345\217W\227v\227\314 .doc)

Ⅰ 校 外 における 研 修 の 留 意 点 1 校 外 における 研 修 のコマ 数 の 考 え ア) 午 前 午 後 の 講 座 は 0.5 日 (0.5 コマ) イ) 全 日 の 講 座 は 1.0 日 (1.0 コマ) 2 校 外 における 研 修 として 選 択 できない 講 座 研 修

seo資料

Microsݯft Word - 91 forܠ2009November.docx

PowerPoint プレゼンテーション

介護保険制度改正にかかる事業所説明会

TIPS - 棚 割 りを 開 始 するまで Liteを 起 動 し 企 業 情 報 の 追 加 を 行 い 棚 割 を 行 う 企 業 の 追 加 をして 下 さい 企 業 情 報 の 追 加 時 に エラーメッセージが 表 示 された 場 合 別 途 TIPS トラブルが 発 生 した 場 合

スライド 1

<4D F736F F D2090C389AA8CA72D92F18F6F2D D F ED28CFC82AF91808DEC837D836A B E838B A815B816A2E646F6378>

目 次 動 作 環 境 について... 2 土 砂 災 害 情 報 マップとは... 3 更 新 情 報 を 見 る... 4 熊 本 県 の 防 災 災 害 情 報 を 見 る... 5 関 連 サイトのリンク 情 報 を 見 る... 6 用 語 を 調 べる... 7 利 用 上 の 留 意

Microsoft Word - FBE3A91F.doc

目 次 ログインする 前 に... 4 メンバー 管 理 編 ( 管 理 者 )... 5 ログインする... 6 トップページについて... 7 メンバー 管 理 をする... 8 メンバー 管 理 画 面 について 医 療 機 関 指 定 新 規 追 加 指 定...

R4財務対応障害一覧

表紙

PowerPoint プレゼンテーション

Microsoft Word - Jimdo基礎編(8版)

ez_meishi.ppt

の と す る (1) 防 犯 カ メ ラ を 購 入 し 設 置 ( 新 設 又 は 増 設 に 限 る ) す る こ と (2) 設 置 す る 防 犯 カ メ ラ は 新 設 又 は 既 設 の 録 画 機 と 接 続 す る こ と た だ し 録 画 機 能 付 防 犯 カ メ ラ は

<IE の 設 定 について> 従 来 版 をすでにご 利 用 の 方 の 場 合 互 換 表 示 設 定 がある 状 態 になっていると 思 わ れますので 必 ず 解 除 の 設 定 を 行 ってください 従 来 版 では IE の 10 以 上 では 互 換 表 示 設 定 が 必 要 でした

MetaMoJi ClassRoom/ゼミナール 授業実施ガイド

「1 所得税及び復興特別所得税の確定申告書データをお持ちの方」からの更正の請求書・修正申告書作成編

PowerPoint プレゼンテーション

1.2. ご 利 用 環 境 推 奨 ブラウザ Internet Explorer Google Chrome(バージョン 32 時 点 で 動 作 確 認 済 み) Mozilla Firefox(バージョン 26 時 点 で 動 作 確 認 済 み) Safari 7

自己アフィリエイト.docx

第1回

PowerPoint プレゼンテーション

【薄利多売だって

Microsoft Word - タスカレユーザ向けマニュアル_ver1-4-4

治 験 実 施 管 理 システム NMGCP 向 け Excel 形 式 プロトコール 作 成 手 順 書 V4.0.3 対 応 版 第 1 版 株 式 会 社 富 士 通 アドバンストエンジニアリング All Rights Reserved,Copyright 株 式 会 社 富 士 通 アドバン

決 算 時 の 流 れ-1 1 年 間 の 仕 訳 入 力 が 終 了 したら 以 下 の 手 順 で 決 算 書 を 作 成 します Step1 精 算 表 を 印 刷 する 1.[F2 入 力 ]タブより 合 計 表 を 選 択 し 月 度 の 指 定 で 期 首 ~12ヶ 月 目 を 指 定

<4D F736F F D204D46834E A6D92E8905C8D905F93B193FC819593FA8E9F95D C5292E646F63>


[2] 控 除 限 度 額 繰 越 欠 損 金 を 有 する 法 人 において 欠 損 金 発 生 事 業 年 度 の 翌 事 業 年 度 以 後 の 欠 損 金 の 繰 越 控 除 にあ たっては 平 成 27 年 度 税 制 改 正 により 次 ページ 以 降 で 解 説 する の 特 例 (

< F2D8E518D6C B83678C8B89CA >

2 科 学 研 究 費 助 成 事 業 のトップページ 画 面 が 表 示 されます [ 研 究 者 ログイン]をクリック します 掲 載 している 画 面 は 例 示 です 随 時 変 更 されます 3 科 研 費 電 子 申 請 システムの 応 募 者 ログイン 画 面 が 表 示 されます e

Microsoft Word - 養生学研究投稿規定(改)

2. データを 検 索 する なごやコレクションのデータを 検 索 するための 方 法 として キーワード 検 索 詳 細 検 索 の 二 通 りの 検 索 方 法 が あります 2.1. キーワードから 探 す キーワードを 入 力 する トップページの 入 力 ボックスに 検 索

2 県 公 立 高 校 の 合 格 者 は このように 決 まる (1) 選 抜 の 仕 組 み 選 抜 の 資 料 選 抜 の 資 料 は 主 に 下 記 の3つがあり 全 高 校 で 使 用 する 共 通 の ものと 高 校 ごとに 決 めるものとがあります 1 学 力 検 査 ( 国 語 数

3. 画 面 説 明 1 アドレスバー/Google 検 索 バー 4 ステータスバー 1 アドレスバー/Google 検 索 バー 現 在 表 示 されているホームページの URL 1 (ホームページアドレス)を 表 示 します URL を 入 力 すると 目 的 のページに 移 動 することがで

無料レポートのタイトル

その 方 法 は 自 己 アフィリエイトです! 1

2 シ ス テ ム が 2 4 時 間 日 安 定 的 に 稼 働 す る 機 材 と 設 置 環 境 を 整 え る こ と ( 2 ) ソ フ ト ウ ェ ア 1 既 に 導 入 実 績 の あ る CMS で あ る こ と 2 Windows7(Windows IE1 1 ) で

景品の換金行為と「三店方式」について

<4D F736F F D203193FA8AD45F95CA8E86325F89898F4B315F94F093EF8AA98D AD97DF914F82CC8FEE95F182CC8EFB8F C28E8B89BB2E646F63>

設 問 4(5) 主 として 知 識 に 関 する 問 題 地 球 自 然 事 象 についての 知 識 理 解 ( 短 答 式 ) (6) 主 として 活 用 に 関 する 問 題 地 球 科 学 的 な 思 考 表 現 ( 選 択 式 ) 水 が 水 蒸 気 になる 現 象 について 科 学 的

コンピュータ基礎実習(上級) 第二回

PowerPoint プレゼンテーション

目 次 1.はじめに 書 式 の 説 明 表 紙 スケジュール 組 入 れ 基 準 併 用 禁 止 薬 併 用 注 意 薬 同 種 同 効 薬 医 師 モニタリング..

【改訂中】office_install_merged_2016

項 目 設 定 設 置 可 能 項 目 数 100 項 目 投 票 フォームの 設 置 可 能 投 票 項 目 数 1 項 目 (10 選 択 肢 ) 必 須 項 目 設 定 条 件 項 目 設 定 添 付 ファイル 合 計 容 量 入 力 項 目 を 必 須 項 目 に 設 定 できます フォーム

ソ フ ト ウ ェ ア ト ー ク ン の ダ ウ ン ロ ー ド 方 法 以 下 の サ イ ト か ら ダ ウ ン ロ ー ド 方 法 の 確 認 を 行 っ て く だ さ い な お ソ フ ト ウ ェ ア ト ー ク ン に つ い て の 詳 細 や ご 利 用 方 法 よ く あ る

それでも 信 じないって 言 うなら もうちょっと 僕 のメルマガを 読 んでビジネスについて 勉 強 して 信 じられるようになった 段 階 でやるといいです もしかしたら やろうと 思 った 時 には 自 己 アフィリエイト 自 体 がなくなっているかもしれませんが やり 方 1 ハピタスに 登

財団法人○○会における最初の評議員の選任方法(案)

Microsoft Word - 佐野市生活排水処理構想(案).doc

Transcription:

初 めて WEB 大 全 プレビュー 版 あなたが 初 心 者 でもプロ 並 みのウェブデザインをするための 入 門 書 この PDF ファイルは 初 めて Web 大 全 がどのようなものかを 知 って 頂 くために 初 めて Web 大 全 のところどころをダイジェストでお 送 りするプレビュー 版 となっています 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 1

このマニュアルは あなたはこのようなウェブサイトを 作 れるようになります 今 回 の 初 めて Web 大 全 で 扱 う 内 容 は 基 礎 ではありませんが 基 本 となるものです つまり 今 後 あなたがどんなデザインのウェブサイトを 作 る 際 にも この 初 めて Web 大 全 で 培 った 経 験 が 基 になるでしょう また 今 回 は ウェブデザインに 必 要 な 工 程 の 全 てを あなた 自 身 にやっていただきます それ だけ 分 量 も 多 くなりますが 確 実 にあなたを 成 長 させると 思 います 期 待 していてください それでは 始 めましょう 島 岡 諒 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 2

は じ め に 初 めて Web 大 全 を 手 にして 頂 きありがとうございます そして おめでとうございます この 初 めて Web 大 全 では あなたがウェブサイトを 一 度 しか 作 ったことのないような 初 心 者 でもプロ 並 みのウェブサイトを 作 れるようになるための 方 法 を 一 つ 一 つ 段 階 を 踏 んで 行 きな がら 丁 寧 に 解 説 していきます つまり あなたは 何 も 考 えずに ただこのマニュアルを 実 践 するだけで 自 分 のウェブサイトを しかもプロが 作 ったようなウェブサイトが 作 れるようになるわけです もちろん 初 めて Web 大 全 は 実 践 するだけでもプロ 並 みのウェブデザインは 再 現 することが 出 来 ます しかし 実 はそれでは 大 変 もったいないのです( 笑 ) 本 マニュアルでは HTML や CSS といった 基 本 的 な 知 識 だけでなく 画 像 加 工 や デザインにお いてプロが 気 を 付 けている 点 なども 要 所 要 所 で 盛 り 込 んでいます なので 初 めて Web 大 全 をただ 実 践 するだけでなく 二 度 三 度 読 み しっかりと 理 解 を して 新 しく 自 分 のオリジナルのウェブサイトを 作 る 際 のベースとなる 力 に 育 てていって 欲 しい と 思 います 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 3

それでは さっそくウェブサイトを 作 り 始 めたい ところなのですが 初 めて Web 大 全 を 始 める 前 に いくつか 確 認 したいことと 用 意 してもらいたいものがあります 簡 単 に 言 いますと あなたには 初 めて Web 大 全 をやるに 値 する 力 がついていますか? あなたは 画 像 を 加 工 出 来 るようなソフトを 持 っていますか? という 二 点 についてです では 順 番 に 見 ていきましょうね あなたは 初 めて WEB 入 門 に 書 か れ て い る 内 容 を 理 解 し て い ま す か? あなたは 初 めて Web 入 門 をご 存 じですか? 知 らない 方 のために 説 明 しますと 初 めて Web 入 門 は 超 初 心 者 向 けのウェブサイト 作 成 マ ニュアルです この 初 めて Web 大 全 を 制 作 している 段 階 で 続 く こんな 感 じで 続 いていきます では 第 一 章 は こんな 感 じになります^^ 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 4

第 一 章. ウ ェ ブ サ イ ト を 企 画 す る さぁ いよいよ 始 まりました 初 めて Web 大 全 突 然 ですが あなたが 初 めて Web 入 門 で 初 めてのウェブサイトを 作 った 時 に ある 疑 問 を 抱 いたりしませんでしたか? それは どうやってこのレイアウト(デザイン)になったんだろう? という 疑 問 です 至 極 当 然 の 疑 問 ですね この 第 一 章 では そういった 疑 問 すなわち どうやって 綺 麗 なウェブデザインが 生 まれていく のか? という 過 程 を 見 せていきたいと 思 います 続 く 1. 初 めて WEB 入 門 は 間 違 っ て い ま す! いきなり かなり 過 激 なタイトルになりましたが( 笑 ) 実 は 初 めて Web 入 門 で 扱 った 作 り 方 というのは 間 違 っています 続 く 説 明 が 続 きます そして 実 際 の 企 画 の 段 階 に 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 5

紙 と 鉛 筆 でレイアウトを 考 える さて それでは 何 を 使 ってレイアウトを 考 えるか という 話 をしたいと 思 います これについてですが 私 は 紙 と 鉛 筆 でレイアウトを 決 めています 続 く ( 略 ) では 私 が 今 回 の 初 めて Web 大 全 サポートサイト を 作 る 際 につくった 下 書 きを 見 てみ ましょう 続 く 実 際 に 私 の 下 書 きを 見 てください あなたは どのような 印 象 を 受 けるでしょうか?( 笑 ) サイトデザインか ら 連 想 さ れ る 言 葉 を 考 え る 視 覚 的 なデザインが 決 まりましたので 今 度 は 感 覚 的 にどんなデザインのサイトにしたいのか ということを 明 確 にしていきます では 今 度 は 第 二 章 です 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 6

第 二 章. ト ッ プ ペ ー ジ を 制 作 す る さて どんなテーマ デザインのサイトにするか を 決 める 手 順 は 以 上 です 続 く ドキュメントタイプを 宣 言 する 今 まで 話 しに 出 したことすらありませんでしたが 実 は HTML にはバージョンがあります 当 たり 前 といえば 当 たり 前 ですね 人 が 作 ったプログラムなので どんどん 改 良 されていっているわけです (でも この 当 たり 前 のことを 知 った 時 私 は 結 構 衝 撃 でした( 笑 )) 続 く ドキュメントタイプ サイト 情 報 どちらもしっかり 学 んで 頂 きます サイトの 情 報 を 指 定 する 見 た 目 には 何 の 変 化 もありませんが そのサイトの 情 報 を 示 すタグがあります それが meta タグです いくつか 種 類 がありますので 続 く そして その 次 の shift_jis というところ 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 7

これは 文 字 コードと 言 って 文 字 の 種 類 のことを 指 します 日 本 語 の 文 字 コードで 有 名 なものでは Shift-JIS の 他 に EUC-JP UTF-8 などがあります この 違 いについては 難 しいので 理 解 しなくて 構 いません 大 切 なのは 文 字 コードを 間 違 うとどうなってしまうか こうなります 読 めませんね( 笑 ) 日 本 語 のところの 文 字 がおかしくなっています(この 現 象 を 文 字 化 け といいます) ちなみに 更 新 情 報 のところが 日 本 続 く サイト 制 作 が 始 まります では これはどういうような 仕 組 みになっているのか 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 8

結 論 から 言 いますと 繰 り 返 して 表 示 しています つまり こういうことです こんな 感 じで 繰 り 返 して 表 示 して 続 く 出 ました 画 像 の 解 説 は このように 行 われていきます 実 際 に 背 景 画 像 を 作 ってみる では これから 背 景 画 像 を 作 っていきます 手 順 通 りに 進 めて 行 ってくださいね 手 順 1: 最 初 にダウンロードした 体 験 版 の Photoshop を 起 動 してください 手 順 2: 残 り 日 数 が 書 かれているセットアップ 画 面 が 出 るので 次 へ をクリック 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 9

手 順 3: ファイル をクリック 後 新 規 をクリック 手 順 4: 幅 あるいは 高 さ の 単 位 を pixel に 変 更 し 幅 に 800 高 さに 50 の 値 を 入 力 し OK をクリック 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 10

手 順 5:グラデーションツールのマーク 上 で 右 クリックをし 塗 りつぶしツール をクリック 手 順 6: 画 面 中 央 の 白 い 長 方 形 の 上 でクリック 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 11

( 中 略 ) 手 順 20:レイヤーウィンドウの 背 景 の 目 のマークをクリック 続 く これで 画 像 作 成 はおしまいです まだまだ どれがどんな 効 果 が なぜその 動 作 をしたのか ということがわからないと 思 います が 初 めて Web 大 全 が 終 わるころには ウェブサイトの 素 材 作 成 に 困 らない 程 度 の 知 識 は ついていますので 焦 らず 進 めて 行 きましょう では 今 度 は CSS で 作 った 背 景 画 像 を 表 示 させます 続 く こんな 感 じで 進 んで 行 くんですね 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 12

他 の 画 像 についてもこのように 丁 寧 に 解 説 されているので 安 心 です ブラウザの 問 題 も ウェブデザインでは 大 きな 問 題 となっています これも 詳 しく 解 説 では 解 説 していきましょうね ブラウザによって 表 示 の 違 いが 起 こる 理 由 まず そもそもブラウザとは 何 か から 解 説 していかなければいけませんね ブラウザとは ウェブサイトを 見 るためのソフトのことです 例 えば Windows に 最 初 から 入 っているブラウザは Internet Explorer( 通 称 IE)です 他 にも 先 ほど 例 に 上 げた Mozilla Firefox や Google Chrome なども 有 名 です アイコンを 見 ればみたことがあるかも 知 れませんね ( 左 :Internet Explorer 中 央 :Mozilla Firefox 右 :Google Chrome) 続 く 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 13

お 待 ちかねの 空 の 画 像 文 字 の 反 射 だって 扱 いますよ 手 順 31: 左 右 には 動 かさず 十 字 キーの 下 で 反 転 した 文 字 がすぐ 下 につくように 移 動 続 く こんなことも 学 べちゃいます タグに JAVASCRIPT を 組 み 込 む とりあえず ひとくくりだけ 抜 いてきましょう <img src="./images/top-menu-nyumon.png" onmouseover="this.src='./imag 続 く 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 14

3カラムだって 当 然 扱 います^^ 3カラムを 作 る 二 つの 方 法 3カラムを 作 るには 二 つの 方 法 があります 順 番 に 見 て 行 きましょうね 続 く ちなみに float ってどんな 機 能? 左 と 右 に 段 組 みするためのもの? と 思 うかもしれま せんが 続 く そして デザインの 一 環 として アイコンも 作 れるようになりたいですね ちなみに やり 方 を 覚 えれば こんな 風 に 鮮 やかなアイコンを 自 在 に 作 れるようになります では 始 めましょう 続 く 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 15

これを 見 て 何 をやっているかわかりますか? わかれば 優 秀 あ ちなみに 初 めて Web 入 門 やっていればわかる 内 容 ですからね?( 笑 ) では 分 かりやすいように 図 にしてみましょう ここが border 写 真 ここに 更 新 情 報 高 さは 40px ここが padding ここが margin で 表 示 例 がこちら ね? 続 く 第 三 章 も 内 容 が 濃 いです 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 16

第 三 章. 通 常 ペ ー ジ を 制 作 す る では この 章 では 通 常 ページの 制 作 をしたいと 思 います といっても トップページのように1から 作 るというようなことはしません その 理 由 は 続 く こんなこともしています( 笑 ) HTML: <div id="pages-content"> <div id="pages-content-left"> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br ><br><br> 初 めて Web 入 門 ではやっていけないと </div> <div id= pages-content-right > </div> </div> 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 17

<br>がたくさんあるのは 続 く 背 景 表 示 について 一 歩 踏 み 込 んだ 解 説 をしています しかし #pages-content に 指 定 すると どっちが 長 くなっても いつでも 下 まで 表 示 される というわけです こういったことを 気 にしながら コーディング 出 来 るようになると 続 く 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 18

表 形 式 で サクサク 画 像 を 作 りましょう 文 字 色 三 角 のアイコン ファイル 名 通 常 黒 青 pages-.png オンマウス 青 青 pages- -on.png 現 在 地 黒 黄 pages- -pwd.png に 入 る 文 字 は [ 初 めて Web 入 門 :nyumon][ 初 めて Web 大 全 :taizen][ 感 想 の 投 稿 : comment][プレゼント:present][ 返 金 保 証 :guarantee]です という 感 じですね 続 く こんな 見 出 し 画 像 も 作 ったり 手 順 5:60px の 初 めて Web 入 門 の 文 字 を 作 成 丌 透 明 度 を 7%に 変 更 して 再 度 文 字 を 選 択 しドラッグ 右 クリックで 斜 体 を 選 択 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 19

第 四 章. ウ ェ ブ サ イ ト を 仕 上 げ る ここまでお 疲 れ 様 でした これで もうほとんど 初 めて Web 大 全 はおしまいです では これからやることは 何 かと 言 いますと 仕 上 げの 作 業 をしていきます 続 く 最 後 の 仕 上 げも 大 事 です おまけ.タイトルロゴで 遊 ぶ では 最 後 におまけコーナー( 笑 ) タイトルロゴで 遊 んでみたいと 思 います タイトルロゴでアニメーションを 作 ります アニメーションとは パラパラ 漫 画 のように 画 像 が 一 定 時 間 ごとに 変 わっていくことを 言 うん ですね 続 く こちらのアニメーションもおすすめですね 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 20

手 順 6: アニメーションの 再 生 をクリックし どのように 動 くかを 確 認 続 く 終 わ り に お 疲 れ 様 でした!! これにて 本 当 に 初 めて Web 大 全 はおしまいです さて 初 めて Web 大 全 を 実 践 してみて いかがだったでしょうか? これを 始 めたころ あなたは 初 めて Web 入 門 をなんとか 終 わらせることが 出 来 た といっ たレベルだったのに ここまで 成 長 することが 出 来 たわけです 初 めて Web 入 門 レベルは まぁ 難 なく 出 来 てたよ という 人 も 初 めて Web 大 全 の 中 に 何 らかの 気 づき を 見 出 すことが 出 来 たと 思 います あなたが 作 ることのできたレイアウトというのは プロとして 出 しても 恥 ずかしくないレベルの ものです 続 く 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 21

一 見 終 わりそうですが まだ 終 わっていないんです さらに 羽 ばたいていくために さらに 羽 ばたいていくために あなたが 進 む 可 能 性 のある 道 を 大 きくわけて5つ 用 意 しました 続 く Photoshop がなくなっても 大 丈 夫 なように 私 の 思 いつく 限 りの 代 替 案 を 提 示 しました PHOTOSHOP 以 外 で 画 像 を 作 る 方 法 もうひとつ 私 が 初 めて Web 大 全 でお 教 えしておきたいことがあります それは Photoshop の 無 料 体 験 の 期 限 が 切 れてからどうやって 画 像 を 作 っていくか ということ です マニュアルを 進 めつつも 尐 し 丌 安 に 思 うところもあったのではないでしょうか? 無 料 体 験 版 の 期 限 が 切 れてからの 対 策 は 二 つ 10 万 円 出 して Photoshop を 買 う(あなたが 学 生 ならもっと 安 く 買 えます 指 定 校 の 学 生 な ら 更 に 更 に 安 く 買 えます) フリーソフトで 代 用 する 続 く 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 22

あるソフトについて 特 徴 : Photoshop ほど 高 度 な 画 像 加 工 は 出 来 ませんが リサイズなどの 簡 単 な 画 像 加 工 にはお 勧 めです 私 は Photoshop は 持 っていますが 本 当 に 簡 単 な 作 業 をしたいときは サクサク 動 く 続 く なので あなたが Photoshop を 使 っていたとしても 上 手 く 使 い 分 けてみてくださいね 他 にも 特 徴 : 私 がウェブサイトを 初 めて 作 ったころに 使 っていたソフトです お 勧 めのサポートページはありませんが 感 覚 的 に 使 うことの 出 来 る 優 良 ソフトですので Photoshop が 使 えない 場 合 は ぜひ 試 行 錯 誤 して 使 ってみてください 以 上 です これらのツールを 上 手 く 組 み 合 わせれば Photoshop ほどで 無 いにしてもそこそこの 画 像 は 作 れ るようになります 続 く 組 み 合 わせて 使 えば 代 用 が 効 くと 思 います 私 も 昔 は 組 み 合 わせて 使 っていました 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 23

補 助 教 材 の 使 い 方 も アドバイスしています 補 助 教 材 の 使 い 方 では 最 後 に 補 助 教 材 の 使 い 方 を 説 明 したいと 思 います 本 当 にこれで 最 後 です^^; 今 回 あなたが 今 後 ウェブサイトを 運 営 していく 上 で 必 要 と 思 われる 内 容 で しかし 初 めて Web 大 全 には 書 ききれなかったものを 補 助 教 材 としてまとめました 補 助 教 材 は 全 部 で3つ 用 意 しました それは アクセスアップ 導 入 マニュアル アフィリエイト 導 入 マニュアル CGI PHP 設 置 導 入 マニュアル の3つとなります これら3つは 一 つ 一 つ 使 っても 十 分 効 果 がありますが 全 てまとめて 使 うことをお 勧 めします そうすることで ウェブサイト 運 営 を 円 滑 に 回 すことが 出 来 るでしょう 続 く 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 24

補 助 教 材 1: ア ク セ ス ア ッ プ 導 入 マ ニ ュ ア ル 最 初 の 補 助 教 材 は ウェブサイトにアクセスを 集 める 方 法 を 解 説 した アクセスアップ 導 入 マニ ュアルです インターネット 上 には 有 料 無 料 でさまざまなアクセスアップ 法 が 解 説 されていますが 私 は アクセスアップにおける 知 識 は この 補 助 教 材 1つで 十 分 だと 考 えています それ 以 上 の 知 識 は 知 識 を 獲 得 する 労 力 の 割 に 得 られる 効 果 が 乏 しいです なので アクセスアップが 全 くの 未 知 の 世 界 だ という 場 合 は 最 初 からしっかり 読 み 込 んで いつでもその 内 容 を 人 に 教 えられるレベルまでしてください 基 本 なので そのくらい 重 要 です 逆 に アクセスアップの 勉 強 をある 程 度 していると 言 う 人 は むしろ 今 の 自 分 はテクニックに こだわり 過 ぎていないか ということを 確 認 しながら 読 み 進 めて 行 って 下 さい サテライトサイトによる PageRank の 向 上 や リンクファーム などなどさまざまなテクニック がありますが 所 詮 テクニックです 検 索 エンジンをいかに 欺 くか ではなく 検 索 エンジンにいかに 褒 められるか ということを 考 えながらウェブサイトを 作 っていってほしいと 思 います(そして 検 索 エンジンに 褒 められるサ イトは 人 に 喜 ばれるサイトです) 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 25

では 人 に 喜 ばれるサイトはどのようなものか?ということを このアクセスアップ 導 入 マニュ アルでは 解 説 しています 補 助 教 材 2: ア フ ィ リ エ イ ト 導 入 マ ニ ュ ア ル あなたは アフィリエイトという 言 葉 をご 存 じでしょうか? アフィリエイトとは ネットでのお 小 遣 い 稼 ぎのことです 要 するに ネットで 収 入 を 得 ることができます しかし アフィリエイトという 言 葉 を 初 めて 聞 いたような 人 は アフィリエイトが 怪 しいんじゃ ないか などの 丌 安 を 抱 くと 思 います 確 かに アフィリエイトで 稼 げるようになります! 系 のマニュアルは 怪 しいものが 多 いです よね^^; しかし アフィリエイト 自 体 は 極 めて 健 全 です テレビ CM や 新 聞 広 告 のように 企 業 が 出 す 広 告 媒 体 の 一 つにネットがあります 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 26

そのネットの 広 告 を 手 伝 うことで 収 入 を 得 ることのできるサービスをアフィリエイトと 言 いま す この アフィリエイト 導 入 マニュアルでは そのアフィリエイトで 稼 いでいく 方 法 を 解 説 してい ます よくアフィリエイトで 稼 ぐ 相 談 をされると 楽 して 稼 ぐ 方 法 教 えてください とか 裏 技 を 教 えてください といった 要 望 を 受 けます 正 直 に 言 いますと アフィリエイトに 裏 技 はありません(というよりも 世 の 中 に 裏 技 というも のはないと 思 っています あってもテレビゲームくらいです^^;) なので このマニュアルでは 極 めて 正 攻 法 で 戦 略 的 に 稼 ぐ 方 法 を 解 説 いたします お 金 を 稼 ぐわけですので 決 して 簡 単 なことではありません しかし それでもチャレンジしてみたい!と 思 える 人 には 最 高 の 内 容 となっています こちらのマニュアルは 初 めて Web 大 全 と 同 様 一 度 読 んだだけでは 全 てを 頭 に 入 れるこ とは 出 来 ないと 思 いますので 何 度 も 読 み 返 して 何 度 も 実 践 してみてください そうすれば その 努 力 に 見 合 った 効 果 が 出 てくることでしょう 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 27

補 助 教 材 3: CGI PHP 設 置 導 入 マニュアル これが 最 後 の 補 助 教 材 となります CGI PHP 設 置 導 入 マニュアル あなたは CGI や PHP という 言 葉 を 聞 いたことがありますか? これらは ウェブサイト 上 でメールフォームだったり ショッピングサイトだったり 掲 示 板 や チャットだったりと 訪 問 者 とあなた 訪 問 者 と 訪 問 者 同 士 でも 交 流 に 必 要 なシステムやプログ ラムのことを 言 います しかし これらを 一 から 作 ることは 大 変 ですので 導 入 する 際 は 無 料 や 有 料 で 配 られているプ ログラムを 借 りて それをあなたのサイトに 設 置 します この 設 置 の 部 分 をサポートするのが CGI PHP 設 置 導 入 マニュアルです パーミッションって 何?などという 人 には このマニュアルは 役 立 つと 思 います ページ 数 を 尐 なくまとめましたので サクサク 進 めて 自 在 にそういったアプリケーションを 設 置 できるようになりましょうね 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 28

以 上 3つが 初 めて Web 大 全 の 補 助 教 材 です つまり 初 めて Web 入 門 初 めて Web 大 全 アクセスアップ 導 入 マニュアル アフィ リエイト 導 入 マニュアル CGI PHP 設 置 導 入 マニュアル の 全 てをマスターすれば ウェブ サイト 運 営 にまず 困 ることはありません 続 く そして 初 めて Web 大 全 も 本 当 におわりに それでは 初 めて Web 大 全 は これにて 終 了 です あなたのウェブデザインにおける 成 長 を 心 よりお 祈 りいたします 島 岡 諒 いかがだったでしょうか? 初 めて Web 大 全 初 めて Web 大 全 では このように あなたが 初 心 者 でも 安 心 して 勧 められる 設 計 になって います 補 助 教 材 も 充 実 しています ぜひ これを 機 に 綺 麗 なホームページを 自 力 で 作 れるようになってくださいね 初 めて Web 大 全 を 手 にしたい 方 は こちらから h t t p : / / f i r s t - w e b. j p / t a i z e n / 初 めて Web 大 全 プレビュー 版 Copyright C 2010 島 岡 諒 All Rights Reserved. 29