Harder Lab　|　ハードに勉強しよう！　ハードに探求していこう！　|　ハダラボ

Harder Lab | Web Powerup 2012

「Harder Lab | ハダラボ」：より良いWeb Design、豊かな表現のサイト、ユーザーがまた訪れたくなるようなページ。
新しいことに日々トライし続ける努力が必要です。
コツコツとデザインの「コツ」をよりハードに探求していきましょう！　|　ハダラボ
2011年1月のWebの集中講座の補足資料をPDFファイルで用意しました。

無料レンタルサーバー「NINJA TOOLS」

数ある無料レンタルサーバーから、「NINJA TOOLS」を使います。
特に選定の大きな理由はありません。
その他、「land.to」「ゼロ・ウェブ　サーバー」（PHP使用可）他たくさんあります。
有料のレンタルサーバーですが、「ロリポップ」「さくらインターネット」などを
使用されている方が多いようです。

「NINJA TOOLS」

FFFTP上へ戻る

登録した「ホスト名」「パスワード」を使いFTPの設定をし、アップロードします。

「NINJA TOOLS -FTP設定-」

Favicon ファビコン上へ戻る

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 では利用できません）

favicon がうまく表示されない場合：
Microsoft Internet Explorer ではお気に入りに登録するまで favicon は表示されません。
Safari は favicon ファイルをキャッシュしているので、キャッシュをクリアしないと表示されない可能性があります。

Webデザイン　再確認上へ戻る

●スライス時の注意
<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:

Web PowerUp 2012

Harder Lab | Web Powerup 2012

無料レンタルサーバー「NINJA TOOLS」

FFFTP上へ戻る

Favicon ファビコン上へ戻る

Webデザイン　再確認上へ戻る

CSSスプライト上へ戻る

動的サイト（Ajax）上へ戻る

SEO：サイト内対策上へ戻る

Menu

Search