Harder Labo ハダラボ Web を もっとハードに 探 究 しよう! 無 料 レンタルサーバー NINJA TOOLS 数 ある 無 料 レンタルサーバーから NINJA TOOLS を 使 います 特 に 選 定 の 大 きな 理 由 はありません その 他 land.to ゼロ ウェブ サーバー (PHP 使 用 可 ) 他 たくさんあります 有 料 のレンタルサーバーですが ロリポップ さくらインターネット などを 使 用 されている 方 が 多 いようです http://www.ninja.co.jp/register FFFTP 登 録 した ホスト 名 パスワード を 使 い FTP の 設 定 をし アップロードします http://www.ninja.co.jp/hp/help/item/use.html Favicon ファビコン favicon ( ファビコン ) はウェブブラウザのアドレスバーや ブックマークした URL の 横 に 表 示 される 小 さなアイコンです favicon.ico ファイルのカンバスサイズは 32px 四 方 ですが( 実 際 は 16px 四 方 で 表 示 される)64px 四 方 くらいで 作 成 します 最 終 的 には 32px 四 方 に 縮 小 実 際 は 16px 四 方 で 表 示 される 事 を 考 えデザインします favicon に 使 われる ファイル 形 式 : Windows Icon (.ico) 形 式 GIF アニメ 形 式 PNG 形 式 Photoshop で.ico 形 式 のファイルを 開 いたり 保 存 したりできるプラグインを 使 用 して 作 成 します * Photoshop icoformatico (Windows Icon) Format Plugin(Telegraphics) (http://www.telegraphics.com.au/sw/#icoformat) また オンラインサービスを 使 い ICO 形 式 ( 又 は GIF アニメ 形 式 )に 作 成 することもできます FavIcon from Pics http://www.chami.com/html-kit/services/favicon/ Favicon Generator http://www.antifavicon.com/ 出 来 上 がった favicon.ico ファイルをサーバにアップロードします アップロード 先 はどこでも 良 いですが ルートディレクトリにアップロードするといくつかのブラウザでは 下 位 ディレクトリの ファイルでも favicon を 表 示 してくれます さらに html ファイルの head 要 素 ブロックの 中 に 以 記 述 します ICO 形 式 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico の URL" /> GIF アニメ 形 式 <link rel="shortcut icon" href="/favicon.ico" /> <link rel="icon" type="image/gif" href="favicon として 利 用 するファイルの URL />
PNG 形 式 <link rel="icon" type="image/png" href="favicon として 利 用 するファイルの URL" /> IE は 仕 様 できない favicon がうまく 表 示 されない 場 合 : Microsoft Internet Explorer ではお 気 に 入 りに 登 録 するまで favicon は 表 示 されません Safari は favicon ファイルをキャッシュしているので キャッシュをクリアしないと 表 示 されない 可 能 性 があります Web デザイン 再 確 認 Internet(ドメインの 名 称 ) www.zzz.zz.jp (ホスト 名.サードレベルドメイン.セカンドレベルドメイン.トップレベルドメイン) Web デザインの 基 本 マナー 特 別 な 理 由 でもない 限 り 標 準 的 なゴシック 体 のフォントを 使 ったほうが 無 難 本 文 フォントには 標 準 のゴシック 体 を 1 ページあたりの 情 報 量 はほどほどに 文 字 と 文 字 の 間 の 幅 は 整 えよう フォントサイズは 大 きめに! 背 景 色 はやっぱり 白 が 無 難 インデントで 文 章 にメリハリを! 良 い 余 白 悪 い 余 白 見 やすい 表 組 みをデザインするコツ 集 合 近 接 でスッキリ 見 せよう 見 えない 線 に 沿 ってページをレイアウトしよう 大 原 則 : 目 の 疲 れた 状 態 でサイトを 見 直 そう プログレッシブエンハンスメント(Progressive Enhancement)という 考 え 方 HTML5+CSS3 をサポートしているブラウザには 技 術 をいかしたサイトデザインを 提 供 し サポートが 進 んでいないブラウザにはそれなりの 対 応 でデザインを 提 供 する クロスブラウザ (どのブラウザでも 同 じような 見 え 方 )にこだわらない PC 以 外 のスマートホンをはじめとする Mobile にも 対 応 Web Developer (Firefox 拡 張 機 能 ) 様 々な Web 開 発 ツールを 統 合 したツールバーです 例 えば CSS や JavaScript を 無 効 化 した 状 態 で Web ページがどのように 表 示 されるかを 確 認 したり フォーム 画 像 その 他 あらゆる 要 素 に 関 する 情 報 を 表 示 することができます グリッド 表 示 要 素 の 枠 線 表 示 ウィンドウサイズの 変 更 といった 便 利 な 機 能 も 備 えています 主 な 機 能 : ページを 表 示 させながらの CSS の 編 集 テーブルの 枠 や DIV タグの 枠 をページ 上 に 色 線 で 表 示 表 示 ページの CSS の 無 効 化 ページの 詳 細 を 表 示 (ページサイズ リンク 一 覧 画 像 一 覧 フォーム 詳 細 等 ) Web Developer の 機 能 一 覧 は 下 記 サイトを 参 考 に http://lab.tubonotubo.jp/tools/webdeveloper/features.html
スライス 時 の 注 意 <li> の 先 頭 アイコン:background のイメージを 使 う 場 合 16px 以 下 の 正 方 形 で 作 成 する スライス 画 像 GIF の 書 き 出 しオプション 知 覚 的 を 確 認 Font デザインをする 上 で タイトル 見 出 しなどフォントに 気 を 使 います Typo( 文 字 ) 以 外 に 飾 り 罫 やロゴ フレームなど 豊 富 にそろえてあるフリーフォントをネット 上 からダウンロードし デザインソースとして 利 用 してみましょう da-font(www.dafont.com) などの 利 用 フォントインストール 法 : http://www.aboutfont.com/manual/instol.html ダウンロードしたフォントファイルを C ドライブ /WINDOWS フォルダ /Fonts フォルダ 内 に 直 接 コピーもできます フォントベンダー モリサワ の Font-Park (fontpark.morisawa.co.jp) 一 見 の 価 値 あり HTML5+CSS3: ブラウザのレンダリングエンジンの 種 類 : Webkit (Safari, Chrome) Gecko (Firefox) Trident(IE) Presto (Opera) HTML5 HTML5 で 作 られているサイト labs.edgi.jp html5gallery.com(web サイトの 紹 介 ) HTML5 対 応 ブラウザ: Firefox3.5 ~ Safari4 Google Chrome3.0 IE8 Opera10 HTML5 マークアップの 注 意 点 DOCTYPE 宣 言 : <!DOCTYPE html> CSS リンク: <link hrerf=".css" rel="stylesheet"> HTML5 追 加 要 素 : article figure section embed aside audio nav video header source footer
canvas 要 素 と javascript を 使 うとベクターグラフィックの 描 画 が 可 能 (http://o--o.jp/ 参 照 ) video 要 素 による FlashPlayer を 使 わない 動 画 再 生 が 可 能 に CSS3 特 徴 : 間 接 セレクタ 属 性 セレクタ セレクタ 擬 似 クラスに 対 応 より 表 現 の 幅 を 広 げることができるようになった Javascript ライブラリ jquery でも CSS3 に 対 応 している アニメーション 機 能 も 使 えて 表 現 力 アップ 主 な 追 加 プロパティ: text-shadow プロパティ box-shadow プロパティ border-radius プロパティ( 角 丸 ) linear-gradient,radial-gradient プロパティ(グラデーション) その 他 各 ブラウザごと 設 定 が 少 し 異 なる プロパティの 前 に 独 自 の 接 頭 辞 ( プレフィックス ) を 付 けて 指 定 する Safari, Chrome(Webkit) -webkit- text-shadow: Firefox(Mozilla 系 Gecko) -moz- text-shadow: 3 コラムのレイアウト(margin を 使 わず float でレイアウト) css_layout_sample.html(css: layout_style.css) 支 給 データ ネガティブマージンを 使 ったレイアウト css_layout_sample.html(css: layout_style.css) 支 給 データ HTML5 で 作 成 したレイアウト html5_sample.html(html5_style.css) html5_style.css = HTML5 用 リセット CSS を 記 述 支 給 データ CSS スプライト Google や YouTube で 使 用 されている メリット: リクエスト 数 の 減 少 につながる サイト 内 のサイズの 削 減 hover 画 像 のプリロードの 必 要 がない(javascript)
デメリット: alt 属 性 が 使 えない サイズ 変 更 するとき 少 し 面 倒 支 給 データ 内 css_layout_sample.html のグローバルナビで 作 った CSS スプライトを 確 認 してください メニューの 作 成 法 および CSS スプライトの 設 定 の 参 考 に http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites CSS デザイン ワンポイントアドバイス CSS ボックスモデル 住 宅 の 敷 地 がボックス 幅 ( 家 (width)+ 庭 (padding)+ 塀 (border)) 隣 の 家 との 間 の 距 離 が margin margin の 相 殺 垂 直 方 向 の 隣 接 するボックス 同 士 : margin が 正 の 値 だったら 大 きいほうの margin サイズになる 垂 直 方 向 の 隣 接 するボックス 同 士 : margin が 正 と 負 の 両 方 の 値 があるときは その 差 が margin サイズになる 垂 直 方 向 の 隣 接 するボックス 同 士 : margin が 負 の 値 だったら 負 の 大 きいほうの margin サイズになる 例 外 あり(float, position のボックスが 隣 接 の 場 合 ) padding は 相 殺 の 対 象 ではない 継 承 フォント テキスト 関 連 のプロパティは 継 承 される <p> タグは 背 景 色 が transparent( 透 明 ) が 初 期 値 なので 透 けてみえる ( 継 承 されているわけではない) 相 対 数 値 (%)には 注 意 (body に font-size : 80% p 要 素 に font-size : 120% を 指 定 した 場 合 p 要 素 のフォントサイズは 16px 80% 120% のサイズになる ) 強 制 継 承 inherit (プロパティの 値 に inherit を 指 定 すると 親 要 素 のスタイルを 強 制 的 に) ネガティブマージン margin はマイナス( 負 )の 数 値 指 定 ができる (IE6 でも 対 応 ) 支 給 データ css_layout_sample.html を 参 照 IE のハック IE のよく 発 生 するバグに 対 して マージンが2 倍 になる: display : inline; の 指 定 を 加 えるか padding で 指 定 みる IE だけ 機 能 する 指 定 を 書 く IE6 * html IE7 *:first-child+html IE6,IE7 プロパティの 前 に スラッシュ をつける プロパティの 前 に エックス をつけると プロパティの 無 効 になる その 他 スクロール 時 ボーダーや 背 景 が 消 える リンクにカーソルを 乗 せるとマージンが 変 化 する など おかしいなと 思 ったら zoom : 1; の 指 定 を 加 えてみる
(IE の haslayout が 原 因 なので haslayout には false(デフォルト)と true の 値 がある IE での CSS のバグを 回 避 するためには haslayout の 値 を true にする 必 要 があります height : 1%; zoom : 1; で true にして バグを 回 避 します ) Illustrator: サイト 構 築 講 座 時 のガイドの 重 要 性 ガイドのロック 効 率 のよい 作 成 法 Photothop: Photoshop の Web デバイス 用 に 保 存 オプション srgb に 変 換 Safari Firefox IE など 色 が 違 って 見 えることがあることの 対 処 スライス(オプション)の 注 意 : GIF オプション: 知 覚 的 を 選 択 します フリーウェア: Illustrator Inkscape Photoshop Gimp Flash Suzuka Dreamweaver Kompozer など 動 的 サイト(Ajax) 最 近 急 速 に 人 気 を 増 してきている JavaScript ライブラリ(プログラムをまとめたもの) 短 いコードで 多 くの 処 理 を 安 全 で 簡 単 に 実 行 できる 優 れたライブラリのひとつ CSS の 書 き 方 を 知 っている 方 ならほぼ 直 感 的 に 記 述 できる 書 き 方 が 採 用 されている この jquery は JavaScript なので CSS だけではできないいろいろなプログラム 処 理 を 行 うことができる jquery の 記 述 場 所 : 基 本 的 には script 要 素 内 の 次 の 箇 所 に 記 述 : <script type="text/javascript"> $(function(){ /* ここに jquery を 記 述 */ }) </script> jquery 基 本 文 法 (http://blog.webcreativepark.net/2010/02/02-111519.html) 支 給 データ 内 の labs_jq.html では 3 つの Ajax が 使 われています jquery.spritemenu.js メニューの 切 り 替 りの 動 きをアニメーション 化 http://webcre.seesaa.net/article/153767401.html jquery.tickertype.js jquery.hoverattribute+1.0.7.min.js メニュー ギャラリー フォームなどたくさんの jquery がオンラインからダウンロードできます ダウンロードしたフォルダには DEMO サンプルが 含 まれています <head> に 配 置 し CSS を 適 用 してお 好 みの jquery を 盛 り 込 んでみましょう
膨 大 な Javascript + Ajax のサンプル 集 (http://jsajax.com/default.aspx) を 利 用 して 動 的 サイト を 作 りましょう SEO/ サイト 内 対 策 検 索 エンジンには ヤフーとグーグルがあります ヤフーは HPの 内 部 的 要 因 を 重 要 視 して 上 位 表 示 します (HPの 構 成 や HTMLタグなど) グーグルは HPの 外 部 的 要 因 を 重 要 視 しています ( 外 部 からのリンクなど) SEO 対 策 の 一 例 : ディレクトリ 型 検 索 エンジン への 登 録 Yahoo! ビジネスエクスプレス Jエントリー など ウェブサイトの 構 造 化 (リスト 化 ) タイトル:<title> 大 見 出 し:<h1> 見 出 し:h2> リスト:<li> のように 論 理 タグで 構 造 の 整 理 をする 事 で 検 索 エンジンから 最 適 な 評 価 を 得 ることができる SEO 対 策 に 重 点 を 置 くと フル CSS コーディング が 最 も 適 している meta description タグは 検 索 結 果 の 順 序 にさほど 影 響 を 与 えません 不 必 要 なキーワードで 埋 めるより ユーザーがクリックしたくなるような 文 章 作 成 が 重 要 です meta keywords タグは 検 索 結 果 の 順 序 に 与 える 影 響 はありません 競 合 サイトへ 利 用 される 場 合 もあり 入 力 しないサイトも 増 えています イメージタグの alt や title にキーワードを 使 用 する コンバージョン 率 の 高 いキーワード 見 極 め 常 にキーワードの 最 適 化 を 行 なう 事 が 重 要 目 的 のキーワードを <strong> タグで 囲 む 事 で そのキーワードを 重 視 させる 事 ができる リンク 先 ページとのキーワードの 関 連 性 が 重 要 関 連 性 のあるウェブサイト ページへの 外 部 リンクが 重 要 視 される ブログが SEO に 効 果 がある 訳 : ブログを 更 新 するだけで 正 しいマークアップ(TITLE,H1,H2 などのタグ)が 簡 単 に 実 現 できる 月 別 カテゴリー 別 ページなどで 内 部 被 リンク 数 増 大 になる トラックバックによる 外 部 被 リンク 数 の 増 大 になる これらが 簡 単 に 実 現 できる Google Analytics( 無 料 アクセス 解 析 = Google サービス) Google アカウント(G メールを 使 用 されている)をお 持 ちの 方 は Analytics の 登 録 の 際 コードを 取 得 して 解 析 するサイトの </body> の 直 前 に 配 置 Google Analytics の レポート にて Web サイトを 訪 問 する 直 前 にいた Web サイトを 表 示 Web サイトを 訪 問 する 直 前 にいた Web サイトを 表 示
どのような 組 み 合 わせで 単 語 が 使 われているかもあわせてチェック ページビュー 検 索 キーワードの 解 析 ユーザーのサイト 内 でのページ 移 動 の 確 認 ユニークユーザー 数 参 照 元 の 確 認 AdWords 広 告 の 効 果 測 定 商 品 購 入 完 了 ページの URL を 目 標 ページとして 登 録 しておくと アクセスした 人 の 何 割 が 購 入 したか 確 認 できる = コンバージョン 率 最 初 にアクセスしたページから どのページへ 遷 移 したか 調 査 国 別 都 市 別 のアクセス 状 況 を 確 認