ホームページとWebサイト
Webサイト（ページ全体）
ホームーページ（Webページ）：ページそれぞれの名称
Webサーバー
Webページ、メール、データベースなどテキストや画像などの保管場所。
サーバー用アプリ（Webサーバー、メールサーバー、FTPサーバー、DBサーバー、DNSサーバーなど）
リクエスト+レスポンス（DNSサーバー、IPアドレス）
URL
スキーム+（ホスト名）+ドメイン
HTML
HTML（head + body）
CSS、Javascript、Flash
FFFTPTOP
登録した「ホスト名」「パスワード」を使いFTPの設定をし、アップロードします。
Favicon ファビコンTOP
Photoshop で .ico 形式のファイルを開いたり、保存したりできるプラグイン↓
Photoshop用プラグイン「iconformatICO」
Photoshop が起動していない状態で、ダウンロードした icoformat プラグインをApplications/Adobe Photoshop CS/プラグイン/ファイル形式 に置いて、Photoshop を起動
favicon.ico ファイルのカンパスサイズは、32px 四方ですが（実際は 16px 四方で表示される）64px 四方くらいで作成します。最終的には 32px 四方に縮小、実際は 16px 四方で表示される事を考えデザインする
※サイズダウンする際は『イメージ > 画像解像度』、バイキュービック法（シャープ）を利用
デザインが完成した favicon ファイルは 32px 四方のファイルにサイズダウンして、必ず favicon.icoというファイル名と拡張子で保存します。保存する際は先ほどインストールした icoformat プラグインで追加された ICO (Windows Icon) フォーマットを選択
出来上がった favicon.ico ファイルをサーバにアップロード
ルートディレクトリにアップロード
html ファイルの head 要素ブロックの中に以下のような link 要素を加えるとブラウザが favicon を発見する手助けができます
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico のURL" />
.png ファイルなどの画像ファイルも favicon として使えます。
（Microsoft Internet Explorer では利用できません）
<link rel="icon" type="image/png" href="favicon として利用するファイルの URL" />
favicon がうまく表示されない場合：
Microsoft Internet Explorer ではお気に入りに登録するまで favicon は表示されません。
Safari は favicon ファイルをキャッシュしているので、キャッシュをクリアしないと表示されない可能性があります。
Webデザイン 再確認TOP
●スライス時の注意
<li>の先頭アイコン：backgroundのイメージを使う場合、16px以下の正方形で作成する。
スライス画像GIFの書き出しオプション「知覚的」を確認。
●Webデザインの基本マナー
本文フォントには標準のゴシック体を
1ページあたりの情報量はほどほどに・・・
文字と文字の間の幅は整えよう
フォントサイズは大きめに！
背景色はやっぱり白が無難
インデントで文章にメリハリを！
良い余白、悪い余白
見やすい表組みをデザインするコツ
「集合」「近接」でスッキリ見せよう
「見えない線」に沿ってページをレイアウトしよう
大原則：目の疲れた状態でサイトを見直そう
XHTML ＋ CSSレイアウト and HTML5
●Web Developer (Firefox拡張機能)
●Font
●HTML5+CSS3
プログレッシブエンハンスメント（Progressive Enhancement）という考え方：
HTML5+CSS3をサポートしているブラウザには、技術をいかしたサイトデザインを提供し、
サポートが進んでいないブラウザにはそれなりの対応でデザインを提供する。
「クロスブラウザ」（どのブラウザでも同じような見え方）にこだわらない。
PC以外のスマートホンをはじめとするMobileにも対応。
ブラウザのレンダリングエンジンの種類：
Webkit (Safari, Chrome)
Gecko (Firefox)
Trident(IE)
Presto (Opera)
HTML5対応ブラウザ：Firefox3.5～、Safari4、Google Chrome3.0、IE8、Opera10
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
text-shadowプロパティ
box-shadowプロパティ
border-radiusプロパティ（角丸）
linear-gradient,radial-gradientプロパティ（グラデーション）
transition
animaion
その他
※各ブラウザごと設定が少し異なる
プロパティの前に独自の接頭辞(プレフィックス)を付けて指定する
Safari, Chrome(Webkit) → -webkit- text-shadow:
Firefox(Mozilla系 Gecko) → -moz- text-shadow:
CSSスプライトTOP
menu作成→CSSスプライト適用
GoogleやYouTubeで使用されている。
メリット：
リクエスト数の減少につながる
サイト内のサイズの削減
hover画像のプリロードの必要がない（javascript）
デメリット：
alt属性が使えない
サイズ変更するとき少し面倒
動的サイト（Ajax）TOP
jQuery
hoverattribute.js
tickertype.js
spritemenu.js
SEO：サイト内対策TOP
●注意ポイント
●Google Analytics設定
●ブログがSEOに効果がある訳
