MID [Serendipity Weblog] - Web Design

はてブの広告枠を消して各エントリーの表示枠を広げるCSS

nospam@example.com (MS-K) — Wed, 26 Nov 2008 14:59:58 +0900

はてなブックマークが新しくなりそれなりに洗練されましたが、右サイドバー（広告枠など）がじゃまなので消すことにします。
あと、各エントリの説明ブロックが狭いので広げます。

元の表示

右ブロック消去


@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("b.hatena.ne.jp") {
    div#container {
        padding-right: 10px !important;
    }
    div#sidebar {
        display: none !important;
    }
    .entry-body blockquote {
        max-width: 95% !important;
    }
    div#ad {
        display: none;
    }
}

あとはStylish（Firefoxのアドオン）にて有効にすれば幸せになれます。

DIVコンテンツの表示トグルをPHPでカバーする

nospam@example.com (MS-K) — Mon, 21 Apr 2008 09:01:44 +0900

あるコンテンツの表示をJavascriptでトグルする方法がいろいろありますが、別にエフェクトではったりを使う必要も無く、タブ切り替えの形で実装するにあたって最も洗練されているのははてなじゃないかと思っています。

ただ、最上部のこの部分についてはアクセシビリティも考慮されていて、Javascript=offの時でも動くのですが、その際は別ページに移動されてしまうので若干スマートさに欠けています。

中央部あたりのこの部分はJavascript=off では動きません。
同じような実装二つで動きが違うのは謎ですが。

そこで、はてなの実装を参考にしつつ（パクリとも言いますが）、PHPでそこらへんをカバーしたいと思います。

ところで、このはてなの表示トグルが非常に洗練されていると思う点ですが、
Javascriptで切り替えているのはCSSの一箇所だけというところです。
以下、本家とは引数名を変えていますが、つまり、「idがparentidのブロックのクラス名をclsに変える」という、ただそれだけのことしかしていません。
残りの制御は全てCSSで指定することによって、幅広いカスタマイズが可能となっています。

toggle.js （Javascript）


/* IDが parentid のクラスを cls にする */
function toggleBlock(parentid,cls){
    if(document.getElementById) {
        document.getElementById(parentid).className=cls;
    }
}



index.php 基本的実装（HTML）


<div id="cont1"> // このブロックのクラスをJavascriptで変更することで
<ul class="menu">
<li class="m1">
<a href="javascript:toggleBlock('cont1', 'show1');">
メニュー1
</a>
</li>

<li class="m2">
<a href="javascript:toggleBlock('cont1', 'show2');">
メニュー2
</a>
</li>

<li class="m3">
<a href="javascript:toggleBlock('cont1', 'show3');">
メニュー3
</a>
</li>
</ul>

	<div id="c1"> // ここと
	コンテンツその1（デフォ表示）
	</div>
	
	<div id="c2"> // ここと
	コンテンツその2
	</div>
	
	<div id="c3"> // ここの表示を切り替える
	コンテンツその3
	</div>
</div>



toggle.css 基本的実装（CSS）


/* デフォルトで表示のコンテンツ */
#cont1 #c1 {
	display: block;
}

/* デフォルトで非表示のコンテンツ */
#cont1 #c2, #cont1 #c3 {
	display: none;
}

/* 親のクラス名変更によって表示される */
#cont1.show2 #c2, #cont1.show3 #c3 {
	display: block;
}

/* 親のクラス名変更によって非表示される */
#cont1.show2 #c1, #cont1.show3 #c1 {
	display: none;
}




滅茶苦茶簡単な実装ですが、これはなかなか思いつかないのではないでしょうか。

さすがはてなと感じましたが、さらに使い勝手をよくしたいと思います。



まずはJavascript=off も考慮して、リンクアンカーを変更。

これ最重要点。

自身を呼び出すアンカーを設定、show変数にそれぞれshow1、show2、show3の引数を割り当てておきます。




<ul class="menu">
<li class="m1">
<a href="index.php?show=show1"
 onclick="toggleBlock('cont1', 'show1');return false;">
メニュー1
</a>
</li>

<li class="m2">
<a href="index.php?show=show2"
 onclick="toggleBlock('cont1', 'show2');return false;">
メニュー2
</a>
</li>

<li class="m3">
<a href="index.php?show=show3"
 onclick="toggleBlock('cont1', 'show3');return false;">
メニュー3
</a>
</li>
</ul>



自身が呼び出された際に$_GET['show']の中身によってクラスを切り替えます。



$newclass = '';

if(isset($_GET['show'])){
    switch($_GET['show']) {
        case 'show1':
        $newclass = ' class="show1"';
        break;

        case 'show2':
        $newclass = ' class="show2"';
        break;

        case 'show3':
        $newclass = ' class="show3"';
        break;
    }
}



$newclassを#cont1ブロックに割り当てます。


<div id="cont1"<?php echo $newclass ?>>



Javascript=onの時はもちろんJavascriptでスマートに切り替えられ、
Javascript=offの時は、ページの再読み込みが伴いますが、PHPによってCSSのクラスが切り替わり、
Javascript=onの時とほぼ同様に表示されます。



ほぼCSSによる実装なので、画像を伴ったメニューなどでも簡単にカスタマイズできる点がお勧めです。

Javascriptで画像切り替えをやろうとするとInnerHTMLを使う必要が生じてきてかなり面倒くさいことになりますから、私のようにJavascriptに詳しくない人だと卒倒ものです。



DIVコンテンツの表示トグルをPHPでカバーするサンプル



I.E6ではoverflow:autoのブロック内でホイールクリックスクロールができない
nospam@example.com (MS-K) — Thu, 21 Jun 2007 10:35:25 +0900

「clearfixハックは本当に必要なのか」の投稿に対していただいたSAIさんのコメントを実は昨日試そうとしたのですが、なんかうまいテストができなくてひとまず放っておいたところ、新たにご報告をいただきました。



このblogで症状を確認できるとのこと  


divのclass「serendipity_Entry_Date」に囲まれた領域



灯台もと暗しとは、まさにこのことですな  

さっそくWin I.E6で検証しましたが、おっしゃるとおりホイールクリックしても何も起きませんでした。

あまりにもFirefoxにどっぷりな上、私普段ホイールクリックを使わないので、
全然気づいていませんでした。反省です…



もしかしてマウスによるのかと思いましたが、overflow:auto; の部分をクリックしてアクティブにし、キーボードのスペースキーやページアップ・ページダウンキーを押した場合も同様にスクロール不可となります。



上記ご指摘いただいた部分は、まさに各エントリ表示部分（右コラムケイ囲み部分）ですので、
ほとんどの領域でホイールクリックスクロール不可ということになります。

少し端をクリックすれば大丈夫なのですが、現状だとやはり不親切な状態であることに間違いありません。

今週はこの問題の回避策探しが課題です。



コメントをくれたSAIさんに感謝いたします。





2006-06-21 10:58

取り急ぎ、overflow: auto; をはずしました。

ここで不思議なのが、レイアウトが変わらなかった（影響無かった）こと。

あれ？？？

じゃあなんでoverflow:auto; していたの？＜自分

全然憶えてません(^^ゞ

ここのCSSを書いたのは既に1年半前なので…

たぶん古いエントリのどこかで崩れているんだろうけど、ひとまず放置。





って、回避策を探していたら、Lucky bagさんのところにも同様の症状報告が出ていました。

しかもかなーり前のエントリ。。。。

しかもよくチェックしているサイトだし。。。。。





あ、回避方法。

よく考えたらWinI.Eはブロックの高さを自動的に広げる仕様だから、別途CSSでいいですね。

overflow: visible !important; をI.E用のCSSで設定すればおそらく問題無いはず。



clearfixハックは本当に必要なのか
nospam@example.com (MS-K) — Sun, 27 May 2007 11:06:55 +0900

いわゆるclearfixハックネタなのですが、あるブロック内にfloatさせた要素を並べると、状況によってレイアウトが崩れるわけです。
こいつを綺麗に整えるためにはfloatさせた要素の後でclear:leftなどで一旦解除させる、というのがclearfixの原点のように思います。
最近またこの手のネタがはてブで盛り上がっているようです。



floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。



少し遡って



解決法は2つある。ひとつは、「原因」で指摘している回り込みの解除を用いる方法（→サンプル2）。ただ、「HTMLは論理構造を記述し、見栄えはスタイルシートで定義する」という本来のあり方からすると、HTMLの中にレイアウトを制御する以外まったく意味を持たない要素が入り込んでくるのはやや気になる。
もうひとつは、全体を囲むボックスに高さを与える方法（→サンプル3）。ただし、コンテンツがテキスト主体で、高さを特定できない場合はこの方法を使えないのが難点である。



私といえばclearfixは実は一度も使ったことがなく、全て以下の方法で回避しています。



floatを内包する親ブロックにwidthとoverflow:autoを指定する。

詳細は「http://ms-k.serveblog.net/archives/152-CSS.html」に書いてあります。



HTMLソースとCSSは上記サイトから拝借しました。



<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<link rel="stylesheet" href="test.css" type="text/css" />
<title>クリアフィックスの実験</title>
</head>

<body>

<div class="column">
<div class="box-A"> </div>
<div class="box-B"> </div>
</div>
<div class="column">
<div class="box-A"> </div>
<div class="box-B"> </div>
</div>

</body>
</html>


body {
	background-color: #ffffff;
}
.column {
	width: 125px;
	margin-bottom: 5px;
	/* ↓これ */
	overflow: auto;
}
.box-A {
	width: 60px;
	height: 60px;
	background-color: #ff0000;
	float: left;
}
.box-B {
	width: 60px;
	height: 30px;
	background-color: #00ff00;
	float: right;
}



以下、レンダリング結果





Firefox2





Opera9





Safari1.3.2





IE6





IE7





Mac IE5






あまりにもclearfixが有名なので若干自信がないのですが、

それって要らないんじゃない？

と思っているのって私だけ？

でも、Lucky Bagさんの突っ込みも無いようだし、ここまで書いてさらに自信が…

他に何か盲点があるのかなぁ。



20:45 追記

うわっ。3ping.orgのwuさんからコメントいただきました。

MacIEがポイントですか。やっぱ。

以前、身内から指摘されたこともありまして、うすら予想はしていました。

上記の例に限っては問題無い（スクリーンショット追加しました）ようですが、状況によってはスクロールバーが出ることがあるようですね（シカトモードに入ってますけど）。



それを踏まえても今のところ自分的にはclearfixは不要かと判断しています。

今さらMacIEとつきあうにはさらなるとんでもない泥沼が待ち受けていますから  



画像の使用を極力控えてかっこいいCSSデザインをやってみよう にエントリ
nospam@example.com (MS-K) — Thu, 19 Apr 2007 11:02:06 +0900





画像の使用を（略）CSS大会についてはてブで盛り上がっているのですが、私もちょこっとエントリしてみました  
「画像を一切使用しない部門」です。



それにしても、ベースとなるHTMLファイルが公開されたのが4/11ですから、
エントリ数を見るとやはり結構な盛り上がりですね  

管理人さんのテストエントリを除いて既に22エントリも集まってます。



誰か知り合いで参加する人いたら報告よろしく。



大藤幹さんのCSSセミナー行って来ました
nospam@example.com (MS-K) — Sat, 24 Mar 2007 12:08:28 +0900

昨日、アップルストア札幌で行われた「CSSのハードルとその越え方」
セミナーに参加しました。

大藤さんの事前の話では「20人程度で行う小規模なものなので気軽に来てください」とのことでしたが、期待している人はやはり多かったようです。ぱっと見、5～60人くらいは参加していました！



内容はこれも大藤さんが事前に「どちらかというと初心者向けの内容になると思います」とおっしゃっていた通りのもので、
私にとってはほとんどのことが知っている話でしたが（って大藤さんの著書で勉強しているので当たり前ですね  ）、説明がわかりやすく、理解しやすいものだったので、復習になりました。

いいセミナーだったと思います。

これが無料ですから、アップルストアも捨てたもんじゃあありませんね。



ところでclearfixハックの件、私の質問がわけわからん方もいたかもしれませんので、実験したいと思います。



height指定のないブロック（parentblock）内にfloatした画像を配置すると、parentblockの高さは内容のテキストの高さしかなく、画像ははみ出します。

この状態はparentblockがoverflow: visible（初期値＝無指定）になっているため、正常な状態です。


<div id="parentblock" style="border: 1px solid #ff0000;">
<img width='200' height='150' src="http://blog.till-daylight.org/uploads/img/sample.jpg"
alt="float:leftのサンプル画像"  style="float: left; /">
あいうえおかきくけこ
</div>




あいうえおかきくけこ






parentblockにoverflow: auto;width: 100%;を指定してやります。

widthについては指定すればなんでもいいはず。

IDがかぶるため、以下ではparentblock2とします。


<div id="parentblock2" style="border: 1px solid #00ff00; overflow: auto;width: 100%;">
<img width='200' height='150' src="http://blog.till-daylight.org/uploads/img/sample.jpg"
alt="float:leftのサンプル画像"  style="float: left; /">
あいうえおかきくけこ
</div>




あいうえおかきくけこ



過去に「float させた要素を内包したボックスの高さ」で書いていますが、実はこれLucky bagさんで知った方法だったりします。

IE7は未検証。



あと、所持している大藤さんの書籍2冊を密かに持っていって、最後にサインしてもらいました  

改めてお礼申し上げます。



IE7、ひどすぎるなあ
nospam@example.com (MS-K) — Sat, 03 Mar 2007 20:32:56 +0900

しかしあれですね、本日ようやく決心してIE7をインストールしましたが、CSSの解釈ダメダメです。

このサイトもかなり横広がりになっているわけでして、近いうちにIE7だけCSSを別途用意しようと思います。　



ググるといろいろCSSハックが存在していますし、それもいいとは思うのですが、

私としては根本的に切り分けする方が見通しがいいし、将来的な修正もしやすいと思うので、
別途CSSを用意する派です。

ここの場合、


<link rel="stylesheet" type="text/css" href="http://ms-k.serveblog.net/serendipity.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="http://blog.till-daylight.org/templates/nm/msie.css"><![endif]-->



として、IE全般を切り分けていますが、ここにIE7を追加するわけです。


<link rel="stylesheet" type="text/css" href="http://ms-k.serveblog.net/serendipity.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="http://blog.till-daylight.org/templates/nm/msie.css"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="/templates/nm/msie7.css"><![endif]-->



で、関係無いですけど、ここではソース表示の際はいつも < と > を 変換面倒くさいので全角の＜と＞にしていましたが、今日は気が向いたので実態参照してみました。やっぱその方がコピペはしやすいですよね。わかってたけど  



北海道旅行に出かける前に
nospam@example.com (MS-K) — Thu, 01 Mar 2007 11:39:02 +0900





ひとまず抜け出しました（笑）

← 結果。

後送りにした作業の続きがまだ今月一杯ありますが、まずは安心。



で、今はまだ旅行シーズンではありませんが、これから北海道に来ようと目論んでいる方は「北海道旅行ナビ」が役に立つはず。


観、食、買 のカテゴリごとに各地の情報が登録されており、これからも進化していくはず。










サブコンテンツの「北海道ルートマップ」では、ものがものなのでほとんどフルFlash状態ですけれど、北海道の主要都市間の国道などの移動距離と移動時間がわかりやすく表示されるので、レンタカーでの観光ドライブ（結構多いそうです）の際にきっと役に立つと思います。

もちろん北海道に住んでいる人がドライブの際の参考にしてもGOOD  

環境によっては少し重いかもしれません…



こちらもこれから進化する予定。



スタイルシート ソース理解クイズ (T_T)
nospam@example.com (MS-K) — Wed, 14 Feb 2007 22:06:30 +0900





All Aboutで「スタイルシート ソース理解クイズ」というのをやっていました。



もちろん、一切の参照も検証も無しで、頭の中で組み立てました。

問題がどうだろうと、少なくとも90点はいけるはずで望んだのですが…

完璧に鵜呑みにはできません（いや、どう考えても自分よりは高レベルなので鵜呑みにすべきか）が、少なくともこのサイトのテストで己のレベルを垣間見たような気がします。



間違えた問題 ７、8、ともにブロックサイズの問題です。

実は結構苦手で、いつも試行錯誤しています。






問題７は純粋にCSS自体の解釈のものです。




ここでは、div要素の横幅として 420px が指定されています。

スタイルシートの仕様では、widthプロパティによる横幅に、余白や枠線の大きさは含みません。



ですから、「div要素の横幅420px」＋「内側の余白10px×2（左右）」＋「枠線の太さ1px×2（左右）」＋「外側の余白3px×2（左右）」の合計 448ピクセルが答えです。 




マージンも入るのか… 知らなかった…

私の答は 幅420+パディング10×2＋ボーダー1×2＝442px でした。



問題8はI.Eの解釈によるものです。



「div要素と内側の余白と枠線の合計 420px」＋「外側の余白3px×2（左右）」の合計 426ピクセルが答えになります。



マージンも入るのか… ボーダー入らないのか… 知らなかった…

いや、忘れていただけかも。

っつーか、知らなかったのか、忘れていたのかさえも憶えていないあたり。。。

私の答は 幅420+ボーダー1×2＝422px でした。



アップルストア札幌で大藤幹さんのセミナー
nospam@example.com (MS-K) — Thu, 08 Feb 2007 20:57:24 +0900

bamvividさん経由（ナイスな情報感謝です）、



私の心の師匠である 大藤幹 さんのセミナーが3月23日（金）にあるらしい。

地元札幌だし、これは絶対に行かなければなりません。

って、悲しいかな知り合いでもなんでもないです。

勝手に師匠にしています  



大藤幹さんが３月にアップルストアー札幌でセミナーやるんだって、CSSで悩んでいるときに、いつもこの本でお世話になっているから行ってみようかな。



ということで、はじめてアップルストアのサイトを確認したのですが、来月の予定はどこ？

使いづらいし  



何時？いくら？

全然不明なので、要調査です。



web屋としての姿勢が問われるべき時代（本当はとっくにですけど）
nospam@example.com (MS-K) — Sun, 24 Sep 2006 20:08:37 +0900


高木浩光さんの日記において先日言及されていた下記の件について、「あ～あ、レベルの低い制作者とレベルの低い依頼主が手を取ると本当きついなぁ」くらいに思っていました。









「お選び下さい」と言っているのは、このサイトの運営者がではなく、このサイトのデザインテンプレートを作成したWebデザイナーが言っているのだろう。東芝テクノはそれをそのまま掲載したわけだ。プギャー





～snip





会社のポリシーは会議室で決めていない。コピーして使いまわせば完了。理由を訊かれたら後付で辻褄合わせればオーケ。





リンク許諾制やディープリンク禁止方針の汚染源はWebデザイナーではないかという、これまで憶測で語られてきたことの傍証が発掘されたと言えよう。









ただ、その後、水無月ばけらのえび日記さんで言及されている内容を読んで、改めて考えました。ただし、上記の引用については十分にあり得るはず。







他社のことは分からないので絶対とは言い切れませんが、基本的にはこの手の文言を Web 制作側が作ることはありません。その会社のポリシーを勝手に決めることなどできるはずがないので、基本的には「御社のポリシーはどうなっていますか? 文言をください」と言って「素材」をもらい、それを掲載する形になります。







この通りだと思います。


ただ、、、と思ったらその先私が考えたことも書かれていました。







Web 屋が他人のポリシーを決めることはないと言いましたが、中には「Webは分からないんでサイトポリシーも御社で考えてほしい」というご依頼をいただくケースもあります。その場合は私が規約を書いたりするわけですが、当然「無断リンク禁止」などという規定が入ることはありません。







これもまた完璧にこの通りです。


私のところでは。


および


ある程度のレベルを保ったところでは。







ただ、高木さんも太田さんもおよそレベルの高い部分で活動していると思われますので、以下については気づいていないと思います。


または気づいていたとしてもそれは常識以下の範疇ってことでシカトですね（いや、本当は私もそうしたいですけど）。







プロというのはその生業で生計を立てているという人のことを差すわけでして、悲しいかなレベルは無関係なのです（もちろんこれは私の本意では絶対になく、存在としてそういうことだということです）。


代理店やデザイン屋がプロジェクトの上に立った場合、


おそらく大多数のケースで人選＝人脈（旧知の業者など）。


依頼主もプロジェクトリーダーもわかっていない。


故に、下請けに採用される業者もアレゲ、という恐ろしいケースが確実に存在しているはず。







でですね、これで結論にすると「じゃあ妥協するのか？」という声が聞こえてきそうなので、

締めとして明記します。


要するに私の微力な反撃としては太田さんと同様、そうではない業者が存在しますよと、せめて言っておきたいということなのです。


でないと誠実に制作しているweb屋の立場が無いじゃあないですか  




ウェブブラウザのウィンドウサイズ
nospam@example.com (MS-K) — Tue, 12 Sep 2006 21:05:21 +0900


現在制作中のウェブデザインについてクライアント様が、「トップページの画像の横幅をもっと」のように要求されているのですが、私、800×600でも問題なくブラウズできるように徹底していまして、その旨も説明したのですが、今のところ1024×768を基準にデザインすることになっています。


ただし、800×600でも（レイアウトは崩れるけど）閲覧は可能にしています。


幅固定は極力避けたいところですので。


つまり1024×768を基準にはしていますが、800×600の場合でも、まあ写真が回り込むとかその程度のレイアウト崩れで、あくまでもストレスの感じないデザインにしているということです。







最大の問題として、

クライアント様の環境が、ディスプレイのピクセルまでは把握していませんが、ワイドなので、なかなかわかっていただけない部分ですね。







「写真の横のスペースが余りすぎ」のようにおっしゃられるのですが、現時点で800×600環境ぎりぎり。


確かに1024×768を基準にする話はしましたが、それ以下の環境で横スクロールが出るのは絶対に阻止したいところです。





自分自身の環境としては1280×960ディスプレイで、いくつもアプリケーションを立ち上げますので、ウェブブラウザの最大化は絶対にしません。


っつーか、このサイズで最大化したら、文章を読む時の目線移動が大きすぎて、なおさら見づらいし。







勝手な憶測ですが、パソコン初心者や単にウェブブラウズするだけの人は最大化している割合が多いんじゃないかなぁ。


もちろんFireworksなどのグラフィックソフトやQuarkXPressなどのレイアウトソフトなんかは思い切りフルウィンドウですが。







気になったので、自分の現在のウィンドウサイズを計ろうとググったところ、

「技巧鍵盤」さんで ウィンドウサイズ取得：kl_windowwidth/height() というページがあり、やってみました。


計ったのはインナーサイズ（表示領域）です。







883,548 とのこと。







実際、大方の環境はどうなんだろうか？


このために自サイトにJavascriptを仕込んでログを取って統計を取るのが格好良いんだろうけど、面倒だし  







ps.


フルFlash＋全画面強制 というパターンが最悪極悪なのはいうまでもありません。


今時そんなサイト無いって？


あるんだなこれが。




StylishでLast.fmを幅狭く
nospam@example.com (MS-K) — Tue, 05 Sep 2006 16:25:52 +0900


Firefoxの機能拡張にはStylishというユーザースタイルシート切替用の拡張があるのですが、

こいつで、先日デザインが変わり鬱陶しくなったLast.fmのCSSを変更しちゃいます。


Last.fm用のユーザーCSSはuserstyles.orgで公開されているので、そいつを使わせていただきます。が、少し古いようなので不要な記述もあり、その部分は削除し、必要な設定を書き足します。













私の場合、ディスプレイは1280×960なのですが、いかんせん窓をいくつも開いて作業するので、ウェブブラウザの表示領域は800×600より少しでかいくらいでベストです。


サイドバーのSage領域を合わせて幅1024pxくらいですね。












以下、@-moz-document url-prefix(), url-prefix() についてはオリジナルのまま。





/*******************************************

7%25 - A Last.fm CSS Patch for 800x600 People

by Michael Camilleri 



1.0 (2006-08-18) - Initial release.

1.1 (2006-08-28) - Fixed forum view width problem.



Copyright 2006 Michael Camilleri

*******************************************/

@-moz-document domain(last.fm) {



/* 全体の囲み */

#LastWebsite {

    min-width: 780px !important;

}



/* 上部メニュー：間隔狭く */

#navigation li {

    margin-right: 5px !important;

}



/* 右サイドコンテンツ消去 */

#LastConnectionsSidebar {

    display: none !important;

}

}



@-moz-document url-prefix(), url-prefix() {

#LastContent3 {

	min-width: 500px !important;

	background: white !important;

	border: solid 1px #959595 !important;

}



#LastContextSidebar {

    margin-left: -505px !important;

}

}




音声ブラウザとアクセシビリティ
nospam@example.com (MS-K) — Fri, 21 Jul 2006 20:35:42 +0900


今まで音声ブラウザを試していなかった訳は、それらが全て有料だったからなのですが、

今回初めて無料のソフトを知ったのでさっそく導入し、8月公開に向けてリニューアル作業をしている自分の仕事サイト（このBlogではなく）で検証してみました。







導入したフリーソフトは音声ブラウザを含むALTAIRという統合ソフトです。


従いまして以下の文章はあくまでもALTAIRでのみの検証結果についてのものです。







最も気になった部分は以下の通り。









アイコンなどの画像＋テキストで表示されたメニューなどのリンクの場合、画像にalt属性やリンクアンカーにtitle属性を付けると非常にうるさく逆効果である。


つまりアンカーに付けたtitleを読み上げ、画像のaltを読み上げ、テキストを読み上げるという、二重三重読み上げ状態となる。


altは空白とし、titleはテキストを補助するような内容にすればベストか。


もっともテキスト表示が無い場合は当然altを用意するべきです。





確認する前からうすら気づいていたが、常に表示されるグローバルメニューは、やはりHTMLソース上において最上段近くではなく最後尾近くに書き、position:absolute; などで視覚表示の際に最上段の方に持っていくべき。









アクセシビリティについてはここ数年気をつけて制作するように心がけていましたが、

実際に音声で確認すると、頭で理解したつもりであった以上に、

なかなか説得力のある発見ができるものです。







ただ、今回検証した印象としては、音声ブラウザを導入していない人でも、

w3mなどで表示確認をすれば（実際私もしていますが）、かなり近いイメージをつかめるように思えます。




Ajaxで画像編集
nospam@example.com (MS-K) — Tue, 13 Jun 2006 15:16:19 +0900










次に始まるプロジェクトのネタとして、Ajaxで画像を編集せざるを得ないアイディアを自分で考えてしまったのですが、自前で制作というのはあまりにも無理がありまして、まあいわゆるライブラリ探しをしています。


PXN8なんかはすごく強力で、まさしくこいつの機能の一部がほしいのですが、いかんせん高価です。







A license for use on a single web server costs just $749 USdollars.

















ところが日本でも同様のものがありました。


AJAX PICS。


まだベータ版としての公開とのことですが、この先どうなっていくのか非常に楽しみです。







2006-06-15追記


近い将来仕事で使えるかもと思い、ライセンスと著作権の扱いについて問い合わせをしたのですが、2日経っても返信いただいておりません。


怪しまれてる？（笑）

MID [Serendipity Weblog] - Web Design

はてブの広告枠を消して各エントリーの表示枠を広げるCSS

DIVコンテンツの表示トグルをPHPでカバーする

toggle.js （Javascript）

index.php 基本的実装（HTML）

toggle.css 基本的実装（CSS）

I.E6ではoverflow:autoのブロック内でホイールクリックスクロールができない

clearfixハックは本当に必要なのか

画像の使用を極力控えてかっこいいCSSデザインをやってみようにエントリ

大藤幹さんのCSSセミナー行って来ました

IE7、ひどすぎるなあ

北海道旅行に出かける前に

スタイルシートソース理解クイズ (T_T)

アップルストア札幌で大藤幹さんのセミナー

web屋としての姿勢が問われるべき時代（本当はとっくにですけど）

ウェブブラウザのウィンドウサイズ

StylishでLast.fmを幅狭く

音声ブラウザとアクセシビリティ

Ajaxで画像編集

MID [Serendipity Weblog] - Web Design

はてブの広告枠を消して各エントリーの表示枠を広げるCSS

DIVコンテンツの表示トグルをPHPでカバーする

toggle.js （Javascript）

index.php 基本的実装（HTML）

toggle.css 基本的実装（CSS）

I.E6ではoverflow:autoのブロック内でホイールクリックスクロールができない

clearfixハックは本当に必要なのか

画像の使用を極力控えてかっこいいCSSデザインをやってみよう にエントリ

大藤幹さんのCSSセミナー行って来ました

IE7、ひどすぎるなあ

北海道旅行に出かける前に

スタイルシート ソース理解クイズ (T_T)

アップルストア札幌で大藤幹さんのセミナー

web屋としての姿勢が問われるべき時代（本当はとっくにですけど）

ウェブブラウザのウィンドウサイズ

StylishでLast.fmを幅狭く

音声ブラウザとアクセシビリティ

Ajaxで画像編集

画像の使用を極力控えてかっこいいCSSデザインをやってみようにエントリ

スタイルシートソース理解クイズ (T_T)