2007年04月アーカイブ

2007年04月01日

Web 2.0時代の新しい名刺

ニューヨーク発--Web 2.0には実はサイズがあり、縦28mm×横70mmの長方形をしているなどと、考えたことがあるだろうか。Web 2.0時代の新しい名刺「MiniCards」--ブロガーらの間で人気という記事を某知人に対してトラックバックをしてみる。ただ、某知人のサイトは現在存在していないくさいので念力で送る。届くかな。というか既に読んでいるかもしれないが、仕事で名刺もよく制作するのでDTP関係者も一応知っておいて損はないでしょう。んー、実験的に作ってみようかな。限定1名にオレデザインのWeb 2.0(だかなんだか知らないが)名刺を無料で制作致します、とか書くとコメントやトラックバック(だかなんだか知らないが)がわんさか来るのかな。あ、どっちもないや、笑い。

2007年04月02日

6年目のCSS

Cross Talk - 2007年 4月 - SiRで懐かしいものを見た。6年前の今頃にオレが立てた/*CSSでイケてるデザインサイト!*/。そう、実にあれから6年という時間が経過していたのだ。当時は今ほどCSSも普及はしていなかったが、「ブログ」なんていう駄文作成ツールもそれほど存在していなかったので、君らは好きではないかもしれないがオレ好みな良質な文書が多々存在していた良き時代だったと今は思う。

さて、この6年でCSSはどう変わったのかというとそれほど目覚しい変化はなかったのではないだろうか。むしろ『ウェブサイトデザインはCSSで行うべき』という最も外側の部分のコンセプトだけが一般の人々に浸透し、結局は「ブログ」サービス運営側が与えるものをそのまま受け入れて使うというtableレイアウト時代とは精神面において何ら変わりないものが蔓延しただけではないか。相対的比率からするとCSSを『使える人』は増えたけど『解る人』はそんなに増えてはいないように思う。文書公開というものの考え方がそもそも変化してきて、もはやCSS云々ということではないのだけど、何の為のCSSか、そのCSSを使うHTMLの発表にどんな意味があるのか、そもそも文書公開とは何か、というようなことをいまだに考え続けている。

6年前のあの日、オレは確かにウェブデザインすることが楽しくて面白かったけど、今はまったくと言って良い程興味が無い。好きだったサイトも軒並み更新が停滞をはじめ、世の中は「ブログ」を筆頭にweb2.0的サービスなるものが溢れ返って、ソーシャルブックマークと呼ばれる謎の集団群がり君生成装置の恩恵により他力だけで事足りるようなものばかりで、ものすごく便利なのだろうけど使ったら負けみたいな気持ちがどっかにあって使えなくて、悶々とする中でオレはこれからも変わらないのだろう。

またハナシが逸れてしまったけど、6年経って変わったのは頭髪の本数と体重くらいなもんですよと。歳は重ねたけど精神的にはまだまだ厨房です。(どんなオチだ)

2007年04月03日

サイト名はとびっきりダサい方が良い

どうせなら誰だってカッコ良くてオサレなサイトの製作者でありたいでしょう。そして、そうなれなかったアナタはせめてサイト名だけでも・・・とか思って思いっきり横文字でオサレチックなサイト名にするわけです。

「The Ultimate Invincibility Milky Way is Strongest」

というのは大げさな例ですが、多かれ少なかれ何となく格好よさげな横文字サイトというのは多いものです。パソコンの前にいるときはブックマークを見ればそこにその文字列があるから「コレはあのサイトだ」と認識できますが、一旦お外へ出ますと「あのサイト名なんだっけ・・・?」という経験が多いオレが認知症予備軍でないことを信じたいので賛同意見を募ります、というのはウソで、とにかく「The Ultimate Invincibility Milky Way is Strongest」なんてのはとても憶えきれん!ということはご理解いただけますでしょう。

さて「ダサい方が良い」なんて断言してしまいましたが、ただダサいだけではマジでダサいだけのものになってしまうのでそこにちょっとした付加要素をつけるわけです。人々の脳に残りやすいちょっとした仕掛けです。今から発表する理論は、昔雑誌の背表紙に載っていた「記憶術」を必至の思いで親に頼み込んでいざやってみたら「また騙されたのね」で終わったものを今初めて「理論」として昇華させた最初で最期の記憶術が役に立った!的なそれはとても大きなとても貴重な理論です。是非、今後のおホームページ作成にでも役立てて下さい。といっても一言で済む内容なので理論も糞もないですが。

有り得ない組み合わせが脳に焼きつく。これがその「術」だそうです。「サルがハルヒの本を肛門に入れた」とかいうムチャクチャなシチュエーションを作ってそこに憶えたい要素を入れ込んでいく、という理論だそうです。当然、記憶力の悪いオレはその入れ込んだ要素さえも憶え切れなかったのでダメだったのですが少なくとも今書いた「サルがハルヒの本を肛門に入れた」という状況はなかなかインパクトがあって忘れにくいものでしょう。これを踏まえてサイト名の作成に応用するわけです。

つづく。(というか面倒なのでもう終わっていいすか。大体想像つくでしょ?)

CSSデザインのこと

以前もどこかに書いたと思うけど、あることをきっかけとしていわゆるデザイン的なCSSデザインをするのを止めた。そのきっかけというのはMushlineというサイト(旧デザイン)を見た時で、その独特のレイアウトもさることながら一つの画像を読み込ませて計算されたpxずらしでhover時の読み込みズレを防ぐ等のテクニック(だったと記憶しているが違ったらすまんです)等にも驚き、まあそれへの嫉妬と己のセンスの無さに絶望した、とまではいかないまでもそのような衝撃を覚えたからだった。

また、それとは別にhkn?というはてなダイアリーを見たときにも衝撃を受けたというか心臓に一発、打ち込まれたようなそんな感覚で、何かがどうでもよくなったという経緯がある。2007年3月31日付で更新停止が発表されているのがとても残念。

気持ちの良いデザインを見ると気持ちの良い気分になる。画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会にてそのようなものが多数見ることができれば良いなと割と期待している今日この頃。

2007年04月04日

仕事しろ仕事しろ、女房、子供が泣いてるぜ

本日のワロタ記事。RedLine Magazine : 仕事に集中するために。

あるある、と思わず言いたくなります。つまり、=ダメ人間を宣言しているようなものですが。

主にAU携帯電話(ezweb)からの閲覧の為のCSS

何故iモードではないのかというとiモードHTMLシミュレータIIを使用してみた感じ、スタイルシートはサポートしていないからです。というわけで今回は、なかなかのCSS実装度を誇る(とオレは思っている)AU携帯電話に内蔵されているOpenwave社のWAP端末用SDKを教材として「携帯端末へのCSS」というものを考えてみることにしましょう。

個別のCSSファイルを設ける
いくら「ユニバーサルだよう!」と叫んだところで膨大な内容のCSSをそのまま使うのは愚者の極み。例えばbody要素の margin や padding の単位にemを使っていたりするとする。そして、それが4辺 3em だったりすれば携帯電話の画面で3em四方(或いは二方)の空白スペースができることになります。酷いものになると文章全体が縦1行に表示されてしまったりします。実際そのようなサイトに遭遇して泣きながらスクロールしたことがあります。もはやそれは読み物ではなく拷問です。そうならない為にも適当な別シートを設けるべきでしょう。(AU携帯電話はオレの知る限りメディアタイプなんて理解できませんので)CSS振り分けスクリプトなどは多数発表されているので適当に探して見て下さい。※PHPでよければオレが使っているものを最後の方に書いてますのでそれを使うのも良いでしょう。以下、注意点など。間違いがあるかもしれません。あっても心の中で「バカめ!」とだけ思って脳内修正願います。
スタイル継承は出来ない
「divの中のH3へ」なんて指定はできませんので男らしくH3要素そのものへ指定してあげてください。
最低限のスタイルに留める
驚くほど最低限で十分です。個人的には見出しのマージン、段落の行間(line-height)と空白(margin)或いは字下げ(text-indent)、body要素への数px(或いは数%)の余白(margin or padding)だけで十分だと思います。特に「body要素への数px(或いは数%)の余白」は重要です。デフォルトだと画面いっぱいに文字が広がってとても気持ちが悪い。まあ気にならない人が多数だとは思いますが。あとはサイトにイメージカラーを用いてる場合はそれをちょろっとどっかに入れりゃあいいんじゃないですかね。

まあそんな感じでやや大げさに書いてみましたが、別にどうということもないです。携帯電話へのスタイル指定なんてそれこそオナニーみたいなものです。読めりゃあいいんです。ただ「読ませる」為にちょっとした計らいを行う、ということをほんの少しだけ考えてみるということは大切かもしれません。

ここまで書いてこう結論付けるのもなんですが、はてなダイアリーやその他携帯端末対応のサービスで文書発表するのが最も安全です。全ての責任を企業へ押し付けてしまいましょう!!やった!!

付録:CSS振り分けPHP

PHPでアクセスしたブラウザ(UA)の違いでCSSを切り替えます。大雑把なものなので適宜改良されるのも良いでしょう。


<?php
$UserAgent = getenv('HTTP_USER_AGENT');
if( eregi("MSIE",$UserAgent) ) {
// MSIE 6.0
$extend = 'msie';

} elseif( eregi("Firefox",$UserAgent) ){
// Firefox
$extend = 'fox';

} elseif( eregi("Gecko",$UserAgent) ){
// Firefox
$extend = 'fox';

} elseif( eregi("Opera",$UserAgent) ) {
// Opera
$extend = 'opera';

} elseif( eregi("KDDI",$UserAgent) ) {
// KDDI
$extend = 'kddi';

} else {
// common
$extend = 'common';
}
?>
<link rel="stylesheet" href="<?= $extend ?>.css" type="text/css">

2007年04月05日

キミらはアホかw

ちょっと今日だけブラウザのCSS切ってネットサーフィンするわwww

冗談ですょ。というわけで本日はCSS Naked Day だそうです。

2007年04月09日

たぶん独立します

うだつのあがらねー平民出にやっとめぐって来た幸運か?それとも破滅の罠か?

変化か安定かの続き。

一昨日入社したばかりの新入社員がもう辞めてしまったので、もうこれ以降の人材には見切りをつけてオレが独立して何とかする(できるのか)ことになった。起業の方法も知らんし税金の類はおろかその他一切合財何も知らないゼロからのスタートである。何かと大変な人生になるのは明白だが、毎朝の満員電車通勤から開放されるのはその移動時間も含めて大いなる幸福であると思う。

つづく

2007年04月11日

正しくHTMLを書く為の5か条

世の中には間違ったHTMLが満ち溢れていて、でもそれに気付く人なんてほとんどいなくて、それでも何かしらのきっかけでそれに気付いて、或いは気付かされて、その全体からしてみればあまりにも少ないそんな人々の中から「HTMLを正しく書こう」という人が出てくるというワケワカラン世の中です。

世の中には間違ったHTMLが満ち溢れているけど、間違ったHTMLが存在しているということを知るということがすでに正しくHTMLを書く為に作用する某かのエネルギーみたいなものかなと思います。ただ、正しいHTMLの発表なんて大した意味はありません。正しくHTMLを書こうとする熱意が重要なのです。では正しくHTMLを書こうと心がけている人に5つの質問 : 雑記帳 : der Gegenwartに回答してみましょう。

  1. HTML文書を制作する際に使用しているプログラムをお答えください。(Webプログラムも含む)
  2. 採用しているDTDとその理由をお答えください。
  3. 何故正しくHTMLを書いているのですか?
  4. W3CとWHATWG、どちらに期待してますか?
  5. あなたにとってHTMLとは何ですか?
  1. Movable Type、Tera Pad。
  2. XHTML 1.0 Frameset + XHTML 1.0 Transitional。自論においてユーザビリティが極めて高いから。
  3. 何故、というよりも正しいとされる記述を憶えてしまったというだけで。
  4. 望むものは現状維持。
  5. CSSを被せる為の土台。

2007年04月13日

body要素の幅を固定し、中央に配置する方法

説明し辛いのですが、body要素の幅を固定し、中央に配置する方法は無いでしょうか。余計なdiv要素を含めなずに。


body {
width:500px;
margin:1em auto;
}

こういうことなのだろうか。

2007年04月20日

いまふと思ったこと

うちのサイトのロゴがデカすぎる。

大会始まったな、あとPNナビ一部変更

カススタファン並びにモダンブラウザオーナーの皆ぁ、お待たせしました。 ついに始まったぜ、画像(略)大会。contentプロパティでstrictHTMLを追いまわすスーパーカステクニックはどうだったかな? 最高に決まったよね。分かる人には分かる、こだわりいっぱいの画像(略)大会。 次回も熱いカスりを見てくれよな。Don't miss it.

というわけで5年前の気持ちで挑んでみたわけだが、今まで書いたものの中で最低かもしれん、笑い。まああれです、「後は若い人達にまかせて・・・」と。やー、歳とった。

Prev / Next ナビを以前割と好評だった画面左右配置にした(今のところFirefoxにしか割り当ててないが)。前回は両サイドに縦ラインで視覚的に圧迫感があってよろしくなかったので、今回はわかりにくく、しかし気付きやすくしてみた。CSSを切った時に「なるほど」と思ってもらいたいというコンセプトで作ってみた。

2007年04月21日

CSSで横三角。「半キャラずらし」

たまには役立つ記事でも発表するか。

今回はお題の通りインターネット帳面でもやってる「CSSで横三角をやる方法」。2バイト文字の三角記号は▲や▼しかないので横方向を示すことができませんでした。これをなんとかどーにかできんものかと。でも画像を使いたくはないぞと。そう思う人も多いだろうと勝手に思ってるので何かしら役立てば、と。 相変わらずFirefoxでしか確認してなければ他のブラウザのアイコンをクリックするのもしんどいのでハイブリッドマニアは勝手に修正されたし。アンカーにhoverした時だけピョッと出るとかするとイケますよ。多分な。

基本的にはソースはこんな感じで。言葉で言うと「◆を半分隠す」だけ。擬似要素にせずとも文の頭に◆があればfirst-letterとかで代用できるかもしれませんが、まあどうでもいいです。0.55という数値は別に0.5でも可です。0.55の方がエッジが効いて良いなと感じただけなので。ブラウザのフォントサイズに依存しないのが見所だよ。


/* 一例 */
h1,ul li {
overflow:hidden;
text-indent:-0.5em;
padding-left:0.5em;
}

h1:before,ul li:before {
content:"◆";
margin-left:-0.55em;
}

2007年04月23日

ふつうに横三角

半キャラずらしの続きというか、その後ツッコミが来まして。ぼくはまちちゃん!(Hatena) - ふつうに横三角

ボ、ボクの苦労はなんだったんスかーつう感じで、笑い。というわけで、皆様にはそちらの実体参照の方を推奨していただきたく。▷や◁といった半キャラずらしでは出来なかった文字列もあるみたいなので、これはむしろオレが使わせてもらおうと思うとです。本当にありがとうございました。

2007年04月24日

画(略)会

最近このハナシばっかり書いてる気がするが一言だけ言っていいか。

キミら、そんなに画像使うのイヤなんか。

オレもだ。

MSIEに対応するということ

今日やったこと色々とメモ。

というようなことを今やっておるわけですが、Firefox・Operaでは出来て当たり前、MSIEで如何に同様に表現できるか、という生きる上で最も馬鹿馬鹿しいことをやるのがウェブ製作者の努め。かどうかは知る由もないのですが、チマチマとやっております。

以前は男らしく(?)UA別にまったく違うデザインを用意したりしてましたが(現在もある意味そうなのだけど)、今回は拘ってみようと思います。なんかMSIEで妙な部分ありましたらジャンジャン御指摘下さい。まあ指摘していただこうにもコメントフォームも掲示板も無いけど。

どんなもんじゃい!(壊

2007年04月25日

エディタで書くという行為

僕の会社の、僕が所属している部署は、やっぱりブログとか書いてる人が多いわけで、そういう人たちにまた書き物をはじめたよ、しかもエディタでちょくせつ HTML書いてるよ、なんて言ったら「自由な感じでいいなあ」と言われた。いやあ、エディタで書くのは気楽でいいですよ。型にはまらない感じ……と言おうと思ったんだけど、逆に言えばエディタで書くという旧態依然としたカタにはまってるとも言えるので、なんとも言えないとこではあるか。なんかこれから公開するぞって感じがあると、上手いこと言わなきゃいけない気がしちゃってね。エディタで書いてアップするのだと、なんか、とりあえず上げといたから見てよ、ぐらいの気楽さがある。

自由な感じでいいなあ。


書いた人:l-_-l
このページのURL:http://ima.pandach.com/cgi-bin/mt/2007/04/index.php

Powered by Movable Type Version 3.31-ja