2006年03月14日

最強のCSS編集ツール by Firefox

CSS編集の際に今一番便利と感じているのは
Firefoxの拡張機能であるWeb Developer日本語版1.0です。

CSS>CSSを編集する(ショートカット『Ctrl』+『Shift』+『E』)でCSSのリアルタイム編集ができます。

CGIやPHPなどの動的サイトの場合CSSでデザイン時に
CSS編集→FTPでアップ→リロードして確認
なんて処理が必要になりサーバーに無駄な負担がかかり作業的にも無駄な作業が必要です。

BlogなどのCSSを編集する場合も
CSSを編集→再構築→リロードして確認
と、これまたサーバーに負担がかかり無駄な作業が発生します。

Web Developerのリアルタイム編集を使えば効率よく作業ができます。

ただ以下のような欠点もあります。
●タブでインデントできない。
●検索機能が付いてない。
これは結構かゆい所に手が届いてないですね。
一度ローカルに保存してテキストエディタにコピーして使用する
なんて方法で解決できます。
(もっと効率のいい方法募集中)

●CSSで設定している背景画像を表示できない。
これはCSSファイルの位置が擬似的に移動している為おこる現象です。
設定しているファイルを絶対パスで指定する事で解決します。

まだまだ効率いい方法がありそうですが
ローカルでCSS作成→Web Developerで微調整→ローカルでCSSを再整形
これが今のところ一番効率がいいと思います。

また、
その他>HTMLを編集するではhtmlのリアルタイム編集ができます。
これも便利ですよ。

関連リンク
firefoxの便利な拡張機能
quickedit - HTMLリアルタイム編集ってすごくない?
posted by ねこまんま at 01:03
Comment(0) | TrackBack(1) | 開発環境

2006年03月13日

phpPgadminでログインしたユーザーのDBしか閲覧できないようにする。

phpPgadminはどのユーザーでログインしてもすべてのDBが閲覧できるようになってます。
conf/config.inc.php

$conf['owned_only'] = true;
と変更することによりログインしたユーザーのDBしか閲覧できないようになります。
posted by ねこまんま at 16:24
Comment(0) | TrackBack(0) | SQL

2006年03月12日

CSSで無理やりfloatをclearする方法

MozillaやFirefoxで
『親ボックスに背景画像や背景色を指定して
 子ボックスでfloatが行われている場合
 親ボックスの背景画像や背景色は
 floatが行われない子ボックスまでにしか反映されない』
という挙動があります。

図解するとこんな感じ
csssample1.gif

対応策としては親ボックスの次の要素に
'clear:both'を
適応させてfloatを解除すればいいのですが
'clear:both'を
適応させる為の要素が何も存在しない事があります。

そんな場合
親要素に対して以下のCSSを適応させることで解決します。

div#main:after {
content : "";
display : block;
height : 0;
clear : both;
}


通常だと空要素でもIEは解釈して空白の行を出力しようとしますが。
擬似要素afterやcontentなどのIEが解釈しないCSSで記述する事で解決できます。

posted by ねこまんま at 14:57
Comment(0) | TrackBack(0) | CSS

2006年03月10日

伝わるWeb文章デザイン100の鉄則

伝わるWeb文章デザイン100の鉄則
伝わるWeb文章デザイン100の鉄則
益子 貴寛

CYBER@GARDEN代表の益子 貴寛さんの本です。

益子さんはxhtml+CSSデザイン(web標準)の日本での第一人者で、雑誌webクリエイターなどでも連載を持ってるくらいすごい有名な人です。

本書ではxhtmlつまり完全に構造化されたWEB表現や、WEBページにおける視覚的な見せ方、日本語で表現する上でのつたえ方、メールマガジンの記述の仕方など多岐にわたってwebにおける表現方法が書かれています。

web的な項目に関しては面白く読めたんですけど、
国語的な内容に関しては苦手意識が出て少し読むのがしんどかったです。

ただ、blogなどを記述する上で、少しでも表現力を上げていかないといけないので『ざっと読む』を何回か繰り返してちゃんとした表現力を身につけないといけないと思いました。


posted by ねこまんま at 00:59
Comment(0) | TrackBack(0) | 読書

2006年03月08日

あんまり知らないけど便利なタグ達。

XHTMLの構造化を考えると文章に意味を持たせる為のHTMLタグは必要不可欠です。

覚えても普段使わないとすぐ忘れます。

忘れた時はこのページを見に来てください。

del
視覚的には取り消し線が表示されます。
意味的にはその内容を削除された物として扱います。
こんなかんじ

ins
視覚的には下線が表示されます。
意味的にはその内容を追加された物として扱います。
こんなかんじ

em
視覚的には斜体で表示されます。
意味的にはその内容を強調されたものとして扱います。
(よく使われるstrongはより強い強調として扱われます)
こんなかんじ

blockquote
視覚的には上下左右に余白が挿入されます。
意味的には引用文として扱われます。
こんなかんじ


q
視覚的には左右にダブルクウォーテーションが挿入されます。
意味的には引用文の一部として扱われます。
こんなかんじ

addr
視覚的にはマウスオーバー時にtitle属性に設定している文字列をツールチップ(小見出し)として表示します。
意味的には略語(XHTMLCSSなどスペルごとに区切って発音される物)として扱われます。
こんなかんじ

acronym
視覚的には下線として点線が表示され、マウスオーバー時にtitle属性に設定している文字列をツールチップ(小見出し)として表示します。
意味的には略語(LANNATOなど頭字語として発音される物)として扱われます。
※実際問題頭字語で発音される例文を探すのに困難するくらいレアな使い方です。
こんなかんじ

pre
視覚的には(X)HTMLソース中のスペースや改行をそのまま表示します。
意味的には整形済みテキスト(?)らしいです。よくわかります。後述するcodeタグと合わして本当の利用価値を発揮します。
こんな
かんじ


code
スクリプトなどをブラウザ上に表示する時に使用します。
意味的にはずばりコード(スクリプト)です。

fieldset
フォームの入力項目をグループ化する際に使用します。

legend
fieldsetでグループ化されたものに対してタイトルを付けます

使用例(html)
<fieldset>
<legend>タイトル</legend>
こんなかんじのなかみ
</fieldset>

使用例(ブラウザ)
タイトルこんなかんじのなかみ


随時追加していくってことで
posted by ねこまんま at 00:19
Comment(0) | TrackBack(0) | HTML

2006年03月07日

ウェブ進化論 本当の大変化はこれから始まる

ウェブ進化論 本当の大変化はこれから始まる

ウェブ進化論 本当の大変化はこれから始まる-梅田 望夫-

英語で読むITトレンドというblogを執筆している梅田さんの本です。

web業界の、ことシステムなどにかかわっている人間は読むべきです。
最近のwebの急激な進化(ことgoogleが上場してからというもの)のめまぐるしさを長年IT世界で生きてきた筆者が語ってくれます。

『石と玉を振り分ける技術』
彼はgoogleの検索エンジンの本質をこう捉えます。

そしてgoogleに振り分けられるのはわれわれの作ったサイトでありシステムであります。
『ロングテール』『web2.0』『api』・・・・・・
乱雑にweb業界に入ってきた現象たちを起源から現在そして行く末といろいろな観点から観察してます。

読み終わったあとに表紙に書かれたサブタイトルを見て
『本当の大変化はこれから始まる』
これからの大きな困難と若干の期待でため息が出ました。
posted by ねこまんま at 23:31
Comment(0) | TrackBack(0) | 読書

2006年03月05日

Amazon Web サービス登録の方法。

Amazonの膨大な商品を使って広告を作れるAmazon Webサービスに申し込んでみた。
とりあえず

登録情報の入力の際に
"The address you provided appears to be invalid. Please check the required fields and try again."
というエラーがでて登録できなかった。

住所を何パターンか書き換えてみても登録できず
ググッてみたところ
pomo123の日記さんで解決策を発見。

ZIP or Postal Codeを3桁にすると登録できるらしい。

とりあえず登録はできたので次は何か作ってみます。
posted by ねこまんま at 18:36
Comment(0) | TrackBack(1) | 戯言

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月03日

リンクをクリックした際に表示される点線を消す方法

リンクをクリックした際に表示される点線を消す方法です
a:focus{
outline:none;
}

Firefoxで有効。IEじゃ利かないです。
posted by ねこまんま at 01:33
Comment(0) | TrackBack(0) | CSS

2006年03月02日

「へんな会社」のつくり方

「へんな会社」のつくり方

「へんな会社」のつくり方

近藤 淳也

(株)はてなの近藤社長の本です。

僕が始めてはてなという会社を知ったのは『人力検索はてな』のサービスが始まって結構たってからだと思います。

正直へんな名前の会社がへんなサービスを始めたなと感じました。

すべての情報が検索エンジンを通して無料で手に入る時代にお金を払って検索する人がいるのか?
と正直このサービスを馬鹿にしていました。(でも大成功してるみたいですね。)

その後、なんどかIT関連の記事ではてなの事を目にしました。
へんな名前の会社がへんな運営方法らしいという物でした。

やっぱり変な会社なんだなと思いました。

GooglがGoogl map APIを公開した直後に
ある特集記事ではてなマップ を見て衝撃が走りました。

あの変な会社はすごかったのか!と

yahoo!web search apiの公開直後に
はてな検索を見たときは、やっぱりはてなが最初に作るんだね。と思いました。

最近はweb2.0の先駆者として、日本のgoogleとしてもてはやされてるはてなですが
この本をみると
そんなへんな会社の作り方がわかります。

PS
はてな本社ビル計画が冗談に聞こえないんですけど、そこんとこどうなんでしょう?

人気のWEBクリエイターblogはここ
posted by ねこまんま at 02:17
Comment(0) | TrackBack(1) | 読書

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

『リンクの色は青色(#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のテクニック