ウェブサイトの横幅についてのお話です。
現在、主流ディスプレイの解像度は1024×768です。
ただし、まだ
800×600の解像度の環境でネットサーフィンをされている方も多いです。
ので、結論としては
700px〜760pxがお勧めです。
760pxだと大解像度の環境で製作されている方は少しさびしいサイズになると思います。
そんな場合
解像度を下げてあなたの作品をチェックしてみて下さい。
ぎりぎりですよ。
アクセシビリティーを考えると700px〜760pxの方がいいんですよ。
しかし！
横幅を760pxに固定してしまうとデザインがすべて同じようになってしまいます。
（いや、センスのあるデザイナーさんならともかく僕のようにデザイン力が未熟だと）
そういう場合はリキットデザイン（可変サイズ）をお勧めします。
cssのfloatなどでサイドバーを回りこませておけば800×600などのブラウザで閲覧された場合、サイドバーがあふれてメインコンテンツの下部に移動します。
通常のコンテンツをスクロールだけで閲覧できる様になります。
デザイン760ｐｘというweb標準サイズを超える場合は
見せる工夫を施して初めてwebデザイナーと言えるのでは？
ついでに、
印刷のお話。
現在、僕の会社ではプリンタで印刷できるサイズという理由で700pxが標準になっています。
個人的にはwebページを印刷するという行為は嫌いだしwebデザイナーは印刷まで考慮しなくてもいいと考えています。
webページはブラウザで見るものです。
しかし！
印刷すべきwebページも確実に存在します。
たとえば、商品の詳細情報ページであったりクーポンページや地図のページ。
webページの閲覧から次のステップ（購入であったり来店であったり）に移る為のページです。
こういうページに関しては印刷用CSS(@media print)を使用して
印刷する方が必要な情報だけA4で収まるサイズで表示した方がいいとおもいます。
2006年03月05日
2006年03月02日
リンクの色はどうしましょう？
『リンクの色は青色（#0000FF）に下線がいい』
という定説が昔からこの業界の定説であります。
個人的な意見で言うと最近はかならずしもYesと言えなくなってきていると感じます。
■リンクの色は青色（#0000FF）に下線がいい
ブラウザのデフォルトのCSSである為、視覚的にリンクであることが主張できる点という大原則に基づいています。
ユーザービリティーの点から見ても正しく多くの大手ポータルサイト(yahoo,楽天,infoseek,google)などもこの大原則を元にサイトを作成しております。
しかし最近は別の傾向も見られます。
■下線は可読性を損なうからないほうがいいよ
日本語フォントは複雑な形が多く文字に下線を引かれると読みづらくなります。
つまり、下線をとる事により可読性をあげるという考え方です。
これももっともです。
これまた多くの大手ポータルサイト(livedoor,MSN,goo)などが実践しており、事実読みやすい(=使いやすい)サイトに仕上げております。
でも最近の新興勢力がそんなweb業界の常識を覆してくれたと思います。
■リンクはリンクだとわかればよい。
たとえばボタンとして配置したリンクはどう思いますか？
上記２つの原則を無視しているのにエンドユーザーに対してリンクだと認識させています。
単なる画像ではなくそれはリンクだとわからせることに成功しているからです。
（たまにリンクとわからないボタンもいますが）
テキストに関しても同じです。
リンクと主張すればどんな色でもエンドユーザーにリンクだとわからせる事が可能になってきました。
そんなweb業界の常識を覆した新興勢力とは・・・・・・・
ずばり当サイト『WEBサイト+phpリファレンス』に他なりません
というのは冗談で当サイトのようなblogサイトです。
当サイトも上記２つのルールから外れておりますがリンクをリンクだと解らせています。
blogの普及はエンドユーザーに対して今までの常識以上のものを与えてくれているようです。
『リンクの色は青色（#0000FF）に下線がいい』
というweb業界の常識にとらわれず
サイトデザインに合ったエンドユーザーに解りやすい色でリンクを装飾してももういいんじゃないでしょうか？
PS
2006/02/28
当サイトは初のユニークユーザー数100人越えになりました。
より密な情報をご提供できるよう努力し行きますのこれからもよろしくお願いします。
人気のWEBクリエイターblogはここ
という定説が昔からこの業界の定説であります。
個人的な意見で言うと最近はかならずしもYesと言えなくなってきていると感じます。
■リンクの色は青色（#0000FF）に下線がいい
ブラウザのデフォルトのCSSである為、視覚的にリンクであることが主張できる点という大原則に基づいています。
ユーザービリティーの点から見ても正しく多くの大手ポータルサイト(yahoo,楽天,infoseek,google)などもこの大原則を元にサイトを作成しております。
しかし最近は別の傾向も見られます。
■下線は可読性を損なうからないほうがいいよ
日本語フォントは複雑な形が多く文字に下線を引かれると読みづらくなります。
つまり、下線をとる事により可読性をあげるという考え方です。
これももっともです。
これまた多くの大手ポータルサイト(livedoor,MSN,goo)などが実践しており、事実読みやすい(=使いやすい)サイトに仕上げております。
でも最近の新興勢力がそんなweb業界の常識を覆してくれたと思います。
■リンクはリンクだとわかればよい。
たとえばボタンとして配置したリンクはどう思いますか？
上記２つの原則を無視しているのにエンドユーザーに対してリンクだと認識させています。
単なる画像ではなくそれはリンクだとわからせることに成功しているからです。
（たまにリンクとわからないボタンもいますが）
テキストに関しても同じです。
リンクと主張すればどんな色でもエンドユーザーにリンクだとわからせる事が可能になってきました。
そんなweb業界の常識を覆した新興勢力とは・・・・・・・
ずばり当サイト『WEBサイト+phpリファレンス』に他なりません
というのは冗談で当サイトのようなblogサイトです。
当サイトも上記２つのルールから外れておりますがリンクをリンクだと解らせています。
blogの普及はエンドユーザーに対して今までの常識以上のものを与えてくれているようです。
『リンクの色は青色（#0000FF）に下線がいい』
というweb業界の常識にとらわれず
サイトデザインに合ったエンドユーザーに解りやすい色でリンクを装飾してももういいんじゃないでしょうか？
PS
2006/02/28
当サイトは初のユニークユーザー数100人越えになりました。
より密な情報をご提供できるよう努力し行きますのこれからもよろしくお願いします。
人気のWEBクリエイターblogはここ
2006年02月12日
サイトのFaviconを作成する。
Faviconとは
こんな感じのアドレスバーに表示されるアイコンです。
IEだとデフォルトだとすべてオリジナルのFaviconなので、それをサイト独自のアイコンに変更する方法です。
サイズは16px×16pxです。
拡張子はicoになります。
photoshopやFireworksなんかで作ったbmpファイルの拡張子を手動でicoに変えてもOKだし
ico作成用のフリーウェアなんかもいっぱい出ているのでそれを使ってもよいです
DotWork（フリーウェア）
icoファイルのファイル名をfavicon.icoというファイル名にしてルート直下に設置してください。
これでOKです。簡単ですよね。
ルート直下にファイルの配置の権限がない場合は
任意のフォルダにicoファイル(ファイル名は自由)を設置して本文の<head>に以下の一文を追加してください。
これも簡単なんで一度試してみてください。
こんな感じのアドレスバーに表示されるアイコンです。
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ファイル（パスから記述）" />
これも簡単なんで一度試してみてください。
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つ。
エックス・エス・エル
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つ。
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の仕様書はインターネット上で公開されておらず、紙に印刷されたものを社団法人電波産業会より購入しなければならない。
ビー・エム・エル
なんかデジタルテレビ放送向けのマークアップ言語らしいです。
ネットで調べてもほとんど記述仕様が見つからない。
難しいのか簡単なのかもわからない。
携帯にテレビが付いたら僕らでも書くレベルになるのかな？？
------------------------------------以下引用
社団法人電波産業会（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の仕様書はインターネット上で公開されておらず、紙に印刷されたものを社団法人電波産業会より購入しなければならない。
2005年11月21日
サーバーサイドで文字化けを防ぐ方法
phpの場合
header("Content-Type: text/html;charset=EUC-JP");
perlの場合
print "Content-type: text/html;charset=EUC-JP\n\n";
をソース内(タグを出力する前)に記述します
header("Content-Type: text/html;charset=EUC-JP");
perlの場合
print "Content-type: text/html;charset=EUC-JP\n\n";
をソース内(タグを出力する前)に記述します
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はここ
.htaccessファイルの作り方については後日、記載します。
.htaccessに以下のコメントを追加してください。
AddType application/x-httpd-php .htm .html
これでhtmlやhtmの拡張子のままでphpを実行することが可能になります
月額125円からのレンタルサーバ
人気のWEBクリエイターblogはここ
