Web Design - MID [Serendipity Weblog]

2008年04月21日(月)

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

あるコンテンツの表示を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でカバーするサンプル
このエントリに定義されたタグ: css, javascript, PHP, アクセシビリティ



            
            
            
                投稿者 MS-K
                                   in Web Design                
                                    at
                 09:01

                                                            | コメント (0)
                                    
                                                            | トラックバック (0)


        
                2007年06月21日(木)
        
                I.E6ではoverflow:autoのブロック内でホイールクリックスクロールができない

        
                        
                                                
                                        
            
            
                
「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で設定すればおそらく問題無いはず。
このエントリに定義されたタグ: css, IE6
            

            
            
            
                投稿者 MS-K
                                   in Web Design                
                                    at
                 10:35

                                                            | コメント (0)
                                    
                                                            | トラックバック (0)
                                    
                
                
            
        
        
        

        
        
        
            
        
                2007年05月27日(日)
        
                clearfixハックは本当に必要なのか

        
                        
                                                
                                        
            
            
                
いわゆる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, Firefox, IE6, IE7, Opera, Safari
            

            
            
            
                投稿者 MS-K
                                   in Web Design                
                                    at
                 11:06

                                                            | コメント (9)
                                    
                                                            | トラックバック (0)
                                    
                
                
            
        
        
        

        
        
        
            
        
                2007年04月19日(木)
        
                画像の使用を極力控えてかっこいいCSSデザインをやってみよう にエントリ

        
                        
                                                
                                        
            
            
                




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



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

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



誰か知り合いで参加する人いたら報告よろしく。
このエントリに定義されたタグ: css, fun, テンプレート
            

            
            
            
                投稿者 MS-K
                                   in Web Design                
                                    at
                 11:02

                                                            | コメント (0)
                                    
                                                            | トラックバック (0)
                                    
                
                
            
        
        
        

        
        
        
            
        
                2007年03月24日(土)
        
                大藤幹さんのCSSセミナー行って来ました

        
                        
                                                
                                        
            
            
                
昨日、アップルストア札幌で行われた「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="/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="/uploads/img/sample.jpg"
alt="float:leftのサンプル画像"  style="float: left; /">
あいうえおかきくけこ
</div>




あいうえおかきくけこ



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

IE7は未検証。



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

改めてお礼申し上げます。
このエントリに定義されたタグ: css
            

            
            
            
                投稿者 MS-K
                                   in Web Design                
                                    at
                 12:08

                                                            | コメント (3)
                                    
                                                            | トラックバック (0)
                                    
                
                
            
        
        
        

        
        
        
            
        
                2007年03月03日(土)
        
                IE7、ひどすぎるなあ

        
                        
                                                
                                        
            
            
                
しかしあれですね、本日ようやく決心して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="/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="/templates/nm/msie.css"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="/templates/nm/msie7.css"><![endif]-->



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

            
            
            
                投稿者 MS-K
                                   in Web Design                
                                    at
                 20:32

                                                            | コメント (0)
                                    
                                                            | トラックバック (0)
                                    
                
                
            
        
        
        

        
        
        
            
        
                2007年03月01日(木)
        
                北海道旅行に出かける前に

        
                        
                                                
                                                                
                                        
            
            
                




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

← 結果。

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



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


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










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

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

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



こちらもこれから進化する予定。
このエントリに定義されたタグ: fun, Internet, MySQL, PHP, 仕事, 北海道
            

            
            
            
                投稿者 MS-K
                                   in PHP, Web Design                
                                    at
                 11:39

                                                            | コメント (2)
                                    
                                                            | トラックバック (0)
                                    
                
                
            
        
        
        

        
        
        
            
    
    
           » 次のページ
    
            (ページ 1/4, 合計 22 エントリ)
    
    
    
    




        
        MS-K's アンテナ
        
         ockeghem(徳丸浩)の日記
2008-11-17
 セキュリティホール memo
2008-11-19
 高木浩光＠自宅の日記
2008-11-18
 HiromitsuTakagiのブックマーク
2008-11-19
 yohgaki's blog
2008-11-20
 がるの健忘録
2008-11-19
 ＠IT Security&Trustフォーラム
2008-11-11
 よくきたはてダ
2008-11-19
 1ka2ka.com
2008-11-13
 Giyu-Blog::札幌でホームページ制作
2008-11-18
 最速インターフェース研究会
2008-10-29
 Serendipity
2008-11-11
 Lucky bag::blog
2008-11-08
 Bamvivid.com
2008-11-18
 Mozilla Japan ブログ
2008-11-05
 スラッシュドット・ジャパン: トップページ
2008-11-20
 3ping.org
2008-09-01

        
    
    
        最新BGM
        
        


【Gal Yuh' Good
】
Shabba Ranks

2008-11-20, 15:55



【Kill Me Dead
】
Shabba Ranks

2008-11-20, 15:32



【Dem Bow
】
Shabba Ranks

2008-11-20, 15:15



【Peeny Penny
】
Shabba Ranks

2008-11-20, 15:11



【Roots & Culture
】
Shabba Ranks

2008-11-20, 14:52



【Roots & Culture
】
Shabba Ranks

2008-11-20, 14:09



【Mr. Loverman
】
Shabba Ranks

2008-11-20, 13:46



【Trailor Load A Girls
】
Shabba Ranks

2008-11-20, 13:23



【Zig It Up (Remix)
】
Ninjaman feat. Flourgon

2008-11-20, 13:18



【Permit to Bury
】
Ninjaman

2008-11-20, 13:14



ms-k / 2008-11-20, 16:11