memo.xight.org

日々のメモ

カテゴリ : Web Design

1ページ目 / 全1ページ

ウェブデザイン向け定規とグリッド

Posted on | Tagged :

Summary

ページの背景画面に定規のイメージを配置し，
CSS による要素の配置や微調整を行いやすくする．

layout_grid.gif

layout_grid.gif (GIF 画像, 1200x800 px)
http://www.smileycat.com/miaow/archives/images/misc/layout_grid.gif

利用例

Smiley Cat Web Design - Web Page Layout Grid
http://www.smileycat.com/miaow/archives/layout_grid.html

grid.gif

grid.gif (GIF 画像, 200x200 px)
http://www.lucky-bag.com//appendix/gird-layout-tips/grid.gif

利用例

Lucky bag::blog: グリッドレイアウトのための背景画像のサンプル
http://www.lucky-bag.com//appendix/gird-layout-tips/grid-layout..html

Reference

Smiley Cat Web Design - 2006-07-16 - Using a Background Image Grid to Lay Out Your Web Site
http://www.smileycat.com/miaow/archives/000264.html

Lucky bag::blog - 2006-07-19 グリッドレイアウトのための背景画像
http://www.lucky-bag.com/archives/2006/07/grid-layout.html

via

秋元@サイボウズ研究所プログラマーBlog - 2006-07-19 - ウェブデザイン向け定規とグリッド
http://labs.cybozu.co.jp/blog/akky/archives/2006/07/background_image_for_webdesign.html

SEO,ユーザビリティ,アクセシビリティ関連の本

Posted on | Tagged :

Summary

  Amazon - 本: スタイルシート スタンダード・デザインガイド—SEO/ユーザビリティ/アクセシビリティを考慮した実践的HTML&CSSデザイン術Amazon - 本: WebアクセシビリティJIS規格完全ガイドAmazon - 本: ウェブ・ユーザビリティ&アクセシビリティ・ガイドライン—誰もが使いやすく、アクセスしやすいウェブサイトをデザインするための80の指針Amazon - 本: スタイルシート・ステップアップ・アレンジブック—基本とそのバリエーションでマスターするCSS活用術

Reference

  本: スタイルシート スタンダード・デザインガイド—SEO/ユーザビリティ/アクセシビリティを考慮した実践的HTML&CSSデザイン術
  本: WebアクセシビリティJIS規格完全ガイド
  本: スタイルシート・ステップアップ・アレンジブック—基本とそのバリエーションでマスターするCSS活用術
  本: ウェブ・ユーザビリティ&アクセシビリティ・ガイドライン—誰もが使いやすく、アクセスしやすいウェブサイトをデザインするための80の指針

css Zen Garden Shot - css Zen Garden のサムネイル集

Posted on | Tagged : ,

Reference

  css Zen Garden Shot
  http://antenna.readalittle.net/thumblink/zenGarden/
  css Zen Garden: The Beauty in CSS Design
  http://www.csszengarden.com/

via

  antipop2.0 - 2005-03-05
  http://antipop.zapto.org/mt/archives/001255.php
  オレンジニュース - 2005-03-07
  http://secure.ddo.jp/~kaku/tdiary/20050307.html#p13

Jakob Nielsen 博士の Alertbox

Posted on | Tagged : ,

ユーザビリティテスト

  5ユーザでテストすれば十分な理由

リンク関連

  リンクを視覚化するためのガイドライン
  訪問済みリンクの色は変えるべし
  直リンクのすすめ
  リンク切れとの戦い
  リンクタイトルは行き先が予想できるものに

Reference

  Usability.gr.jp -Jakob Nielsen 博士の Alertbox
  http://www.usability.gr.jp/alertbox/
  useit.com - Jakob Nielsen's Website
  http://www.useit.com/jakob/

視覚バリアフリー

Posted on | Tagged :

Summary

  色盲の人は色相の判断が苦手なぶんだけ，明度や彩度にはむしろ敏感な傾向がある

Reference

  Watson君 | 細胞工学 | 色覚の多様性と視覚バリアフリーなプレゼンテーション
  http://www.watsonkun.com/shujunsha/barrierfree.html
  3.7 学会でのスライドや PowerPoint、ポスター、さらにホームページのデザイン
  http://www.watsonkun.com/shujunsha/barrierfree3-7.html
  カラーバリアフリーガイド ver.1.01
  http://homepage3.nifty.com/ondo/cbfg-ver101/
  MSDN - 色覚に障害を持っていたとしたら、あなたのサイトは見えるでしょうか ?
  http://www.microsoft.com/japan/msdn/columns/hess/hess10092000.asp
  マイクロソフト アクセシビリティ ホーム
  http://www.microsoft.com/japan/enable/
  国立遺伝学研究所 - 色盲の人にもわかるバリアフリープレゼンテーション法
  http://www.nig.ac.jp/color/

via

  Passion For The Future - 2003-11-23
  http://www.ringolab.com/note/daiya/archives/000522.html

Internet Explorer の CSS 対応状況，バグ情報

Posted on | Tagged : ,

Reference

  CSS Laboratory
  http://is.vis.ne.jp/start.xhtml
  Internet Explorer 6 における CSS の拡張
  http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp
  Internet Explorer (Windows) CSSバグリスト
  http://cssbug.at.infoseek.co.jp/detail/winie.html
  Internet Explorer 5.5(Win32版)
  http://members.jcom.home.ne.jp/pctips/ua/IE55.html
  Internet Explorer 6.0(Win32版)
  http://members.jcom.home.ne.jp/pctips/ua/IE60.html

あれこれポップアップ

Posted on | Tagged :

Summary

  ウェブページ (HTML) にて，マウスポインタの下にある任意の箇所 (要素) の情報 (属性値)
  あれこれをポップアップに出すJavaScript と CSS のセット．

設置方法

<head>
	<link href="ArekorePopup/ArekorePopup.css" rel="stylesheet" type="text/css">
	<script src="ArekorePopup/ArekorePopup.js" type="text/javascript"></script>
</head>


画像のaltをポップアップ

  ArekorePopup.js を編集
this.attrs = ['ap:banner', 'title', 'href', 'cite', 'datetime', 'alt'];
this.requiredAttr = { 'a' : 'title' , 'img' : 'alt' ,'abbr' : 'title' };


title属性の色の変更

  titleクラスのcolorを変更する．

Reference

  あれこれポップアップ
  http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/ArekorePopup.html

via

  Driftkingdom - Drift Diary - 2003-10-21 - Development Diary : あれこれポップアップを組み込んでみました。
  http://drikin.com/