2006年03月05日

WEBサイトの横幅はどうしましょう?

ウェブサイトの横幅についてのお話です。

現在、主流ディスプレイの解像度は1024×768です。

ただし、まだ
800×600の解像度の環境でネットサーフィンをされている方も多いです。

ので、結論としては
700px〜760pxがお勧めです。

760pxだと大解像度の環境で製作されている方は少しさびしいサイズになると思います。

そんな場合
解像度を下げてあなたの作品をチェックしてみて下さい。
ぎりぎりですよ。
アクセシビリティーを考えると700px〜760pxの方がいいんですよ。

しかし!
横幅を760pxに固定してしまうとデザインがすべて同じようになってしまいます。
(いや、センスのあるデザイナーさんならともかく僕のようにデザイン力が未熟だと)

そういう場合はリキットデザイン(可変サイズ)をお勧めします。
cssのfloatなどでサイドバーを回りこませておけば800×600などのブラウザで閲覧された場合、サイドバーがあふれてメインコンテンツの下部に移動します。
通常のコンテンツをスクロールだけで閲覧できる様になります。

デザイン760pxというweb標準サイズを超える場合は
見せる工夫を施して初めてwebデザイナーと言えるのでは?



ついでに、
印刷のお話。

現在、僕の会社ではプリンタで印刷できるサイズという理由で700pxが標準になっています。

個人的にはwebページを印刷するという行為は嫌いだしwebデザイナーは印刷まで考慮しなくてもいいと考えています。

webページはブラウザで見るものです。

しかし!
印刷すべきwebページも確実に存在します。

たとえば、商品の詳細情報ページであったりクーポンページや地図のページ。
webページの閲覧から次のステップ(購入であったり来店であったり)に移る為のページです。

こういうページに関しては印刷用CSS(@media print)を使用して
印刷する方が必要な情報だけA4で収まるサイズで表示した方がいいとおもいます。
posted by ねこまんま at 00:40
Comment(0) | TrackBack(0) | webのテクニック

2006年03月02日

リンクの色はどうしましょう?

『リンクの色は青色(#0000FF)に下線がいい』
という定説が昔からこの業界の定説であります。

個人的な意見で言うと最近はかならずしもYesと言えなくなってきていると感じます。

■リンクの色は青色(#0000FF)に下線がいい
ブラウザのデフォルトのCSSである為、視覚的にリンクであることが主張できる点という大原則に基づいています。
ユーザービリティーの点から見ても正しく多くの大手ポータルサイト(yahoo,楽天,infoseek,google)などもこの大原則を元にサイトを作成しております。

しかし最近は別の傾向も見られます。
■下線は可読性を損なうからないほうがいいよ
日本語フォントは複雑な形が多く文字に下線を引かれると読みづらくなります。
つまり、下線をとる事により可読性をあげるという考え方です。
これももっともです。
これまた多くの大手ポータルサイト(livedoor,MSN,goo)などが実践しており、事実読みやすい(=使いやすい)サイトに仕上げております。

でも最近の新興勢力がそんなweb業界の常識を覆してくれたと思います。
■リンクはリンクだとわかればよい。
たとえばボタンとして配置したリンクはどう思いますか?
上記2つの原則を無視しているのにエンドユーザーに対してリンクだと認識させています。
単なる画像ではなくそれはリンクだとわからせることに成功しているからです。
(たまにリンクとわからないボタンもいますが)
テキストに関しても同じです。
リンクと主張すればどんな色でもエンドユーザーにリンクだとわからせる事が可能になってきました。
そんなweb業界の常識を覆した新興勢力とは・・・・・・・

ずばり当サイト『WEBサイト+phpリファレンス』に他なりません

というのは冗談で当サイトのようなblogサイトです。
当サイトも上記2つのルールから外れておりますがリンクをリンクだと解らせています。

blogの普及はエンドユーザーに対して今までの常識以上のものを与えてくれているようです。

『リンクの色は青色(#0000FF)に下線がいい』
というweb業界の常識にとらわれず
サイトデザインに合ったエンドユーザーに解りやすい色でリンクを装飾してももういいんじゃないでしょうか?

PS
2006/02/28
当サイトは初のユニークユーザー数100人越えになりました。
より密な情報をご提供できるよう努力し行きますのこれからもよろしくお願いします。

人気のWEBクリエイターblogはここ


posted by ねこまんま at 01:45
Comment(0) | TrackBack(0) | webのテクニック

2006年02月12日

サイトのFaviconを作成する。

Faviconとは
Favicon画像
こんな感じのアドレスバーに表示されるアイコンです。

IEだとデフォルトだとすべてオリジナルのFaviconなので、それをサイト独自のアイコンに変更する方法です。

icoファイルを作成する

まずは表示するicoファイルを作成します。
サイズは16px×16pxです。
拡張子はicoになります。
photoshopやFireworksなんかで作ったbmpファイルの拡張子を手動でicoに変えてもOKだし
ico作成用のフリーウェアなんかもいっぱい出ているのでそれを使ってもよいです

DotWork(フリーウェア)

icoファイルを設置します

先ほど作ったicoファイルを設置します。

icoファイルのファイル名をfavicon.icoというファイル名にしてルート直下に設置してください。
これでOKです。簡単ですよね。

ルート直下にファイルの配置の権限がない場合は
任意のフォルダにicoファイル(ファイル名は自由)を設置して本文の<head>に以下の一文を追加してください。
<link rel="shortcut icon" href="icoファイル(パスから記述)" />

これも簡単なんで一度試してみてください。
posted by ねこまんま at 17:31
Comment(0) | TrackBack(0) | webのテクニック

2006年01月20日

xsl-最近知った用語

XSL (Extensible Stylesheet Language)
エックス・エス・エル

xmlを視覚的に見せるための言語。
これを使ってrssなんかをコンテンツとして利用している所もある。
結構めんどくさそうだけど、そのうち覚えよう。

------------------------------------以下引用
 XSLは、XML文書に対してスタイルを設定して、画面や印刷するための書式を整えたり、組み版を行うための仕様である。

 XSLは大きく3つの部分に分かれている。それらは、XML文書の変換を行うXSLT(XSL Transformations)、XSLTの中でXML文書内の特定の要素などを指定するときに使うXPath(XML Path Language)、そして組み版の指定を行うためのXSL-FO(XSL Formatting Objects)だ。しかし、XSLT、XPathは独立した仕様として存在しているため、現在ではXSLはXSL-FOの意味で使われている。W3CでもXSL-FOの内容がXSL仕様の名称で策定され、2001年10月に勧告となった。

 XSL-FOはHTML用のスタイルシート言語(Cascading Style Sheets:CSS)と異なり、SGML用のスタイルシート言語であるDSSSLの流れをくむもの。CSSは、HTMLの要素等に対して、どのような色やデザインを適用するかを記述するが、XSL-FOでは、変換言語(XSLT)を用いて、元のXML文書を全く別個のXSL文書に置き換えて、それを元に表示や印刷を行う。

 XMLではこのように、データとしてのXML文書と、それを整形するためのスタイルを分けているため、1つのデータからさまざまな出力を作り出すことができることが特徴の1つ。
posted by ねこまんま at 01:04
Comment(0) | TrackBack(0) | webのテクニック

BML-最近知った用語

BML (Broadcast Markup Language)
ビー・エム・エル

なんかデジタルテレビ放送向けのマークアップ言語らしいです。
ネットで調べてもほとんど記述仕様が見つからない。
難しいのか簡単なのかもわからない。

携帯にテレビが付いたら僕らでも書くレベルになるのかな??

------------------------------------以下引用
 社団法人電波産業会(ARIB:Association of Radio Industries and Business)によって規定されたデジタルテレビ放送向けのコンテンツ記述言語。BMLは、XHTMLをベースにして、表示制御はテレビ組込みのCSS指定書式とし、コンテンツから表示制御をかなり排除したものとなっている。そのため、見かけはHTMLに近いが、ほとんどの場合、作り直さないと使えない。また、拡張性の高いB-XMLも制定されている。

 B-XMLは、XMLをベースにしており、B-XMLコンテンツをテレビに表示するには、テレビ側でBMLに変換して表示する。変換には、XSLTが用いられ、B-XMLをBMLに変換しようという考え方である。

 BML、B-XMLともにスクリプト言語としてJavaScriptベースのECMA Scriptが使用される。ページデータとしてソースコードのままテレビに送り込まれ、操作に応じてテレビ内でローカルに解釈し、ダイナミックに動くページを構成することになる。

 なお、文字コードとしては日本語EUCを独自拡張したものを用い、BMLで独自に拡張された文字が存在することから、B-XMLは、Unicodeに存在しない文字の使用を認めないXMLとは整合しない可能性もある。

 BMLの仕様書はインターネット上で公開されておらず、紙に印刷されたものを社団法人電波産業会より購入しなければならない。
posted by ねこまんま at 00:57
Comment(0) | TrackBack(0) | webのテクニック

2005年11月21日

サーバーサイドで文字化けを防ぐ方法

phpの場合

header("Content-Type: text/html;charset=EUC-JP");

perlの場合

print "Content-type: text/html;charset=EUC-JP\n\n";


をソース内(タグを出力する前)に記述します
posted by ねこまんま at 19:28
Comment(0) | TrackBack(0) | webのテクニック

2005年07月26日

htmlやhtmのファイル名でphpを実行する

.htaccessを使ってhtmlやhtmの拡張子のままでphpを実行する方法です
.htaccessファイルの作り方については後日、記載します。

.htaccessに以下のコメントを追加してください。
AddType application/x-httpd-php .htm .html

これでhtmlやhtmの拡張子のままでphpを実行することが可能になります

月額125円からのレンタルサーバ

人気のWEBクリエイターblogはここ
posted by ねこまんま at 18:47
Comment(0) | TrackBack(0) | webのテクニック

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。