備忘録

徐々に記述が増えていくはずです

備忘録

仕事をしていく過程の中で、使えるテクニックを発見したときに、メモ用としてのスペースを設けました。
今は情報が乱雑になってしまっていますが、ある程度、書きたまった時点で整理します。

<br style="clear:both;" /> を使わないfloatクリア（IE対応）

複雑なデザインのサイトをコーディングしていてfloatを多用すると、クリアするのをを忘れたりすることがあって、その原因を探すのに無駄な時間を使ってしまうことがあります。floatをクリアする方法として一番楽なのは<br style="clear:both;" />を用いた方法です。しかしこの方法も完璧ではありません。例えばリストを使った時などです。

<div>～</div>の中でfloatをクリアするのはさほど難しくありません。
floatした後続の要素でクリアすれば良いだけです。

html

<div>
<img src="写真">
<p id="date">撮影日時</p>
<p>テキスト</p>
</div>

css

div img{
float: left;
}
div #date{
float: right;
}
div p{
clear: both;
}

もし後続する要素がなくても<br style="clear:both;" />を一番下に書き込めば良いだけです。例えば以下のように。

<div>
<img src="写真">
<p id="date">撮影日時</p>
<br style="clear:both;" />
</div>

しかし以下のようなhtmlとcssを書いた場合、floatをクリアするにはどうしますか？

html

<ul>
<li>リスト1<l/i>
<li>リスト2<l/i>
<li>リスト3<l/i>
</ul>

css

ul li{
float: left;
}

FirefoxやSafariで見るぶんにはafter擬似要素でクリアするだけで良いのですが、IE6、7のことを考えるとそうもいきません。そこでhtmlに通常は必要のない無駄な記述を追加することになります。

<ul>
<li>リスト1<l/i>
<li>リスト2<l/i>
<li>リスト3<l/i>
<li style="display: none;"><br style="clear:both;" /></li>
</ul>

<br style="clear:both;" />を<ul>～</ul>内に直接書くことは出来ませんのでこのような面倒な書き方になります。一応これでW3CのチェックでもValidになります。しかし、腑に落ちない。なぜスタイルのためだけに通常は必要のないhtmlを追加しなくてはいけないのか、それもIEのためだけに。<div>～</div>に<br style="clear:both;" />を記述するのもちょっとためらうのに。

そう思っていたのですが、とても有用な方法を見つけました。いつも拝見させて頂いているの小粋空間さんの『CSS の after 擬似要素で回り込みを解除する』というエントリーです。

方法は至って簡単、cssを以下のように記述するだけです。

ul{
zoom: 100%;
}
ul:after{
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

FirefoxやSafariなどのafter擬似要素に対応したブラウザはul:afterでfloatをクリアし、IE6、7対策として、ulに zoom: 100%;を指定します。zoomプロパティは、もともとIEの独自拡張で、指定要素を拡大表示するためのものですが、これを記述すると自動的にfloatがクリアされるようです。

この方法を使うとfloatのクリア忘れなどが減ってコーディング作業がとても効率化しました。唯一デメリットはzoomはIE独自のものなのでCSS valid にならなくなります。

Ajaxの共存について、prototype.jsを使用した「ライトボックス」とjQueryを使用した「チックボックス」を共存させようとするとエラーが発生しました。
なので、prototype.jsを使用しない元祖ライトボックスを発見しましたのでサイトに組み込んであります。
これでライトボックスの軽快な表示とチックボックスの多機能を両方使えるサイトになりました。。

ちなみに、左メニューの折りたたみ式ツリーメニューはjQueryを使用していますので「チックボックス」とぶつかることもありません。

Facebookに参加しました（2009/01/30）

悪質サイト判定webアプリ「gred（グレッド）」
URLを指定するだけでそのサイトが危険なサイトかどうかを判定してくれます。

ThickboxとFlashの連携について

HTMLヘッダーにThickboxのデータを読み込ませるそしてFlash側のボタンにアクションスクリプトを記述

on (release) { getURL("javascript:tb_show('説明タイトル,'http://natural-harmony.net?keepThis=true& TB_iframe=true&height=500&width=640')") }

AjaxSearch 1.7 でオプション追加

parents
検索する親ドキュメントのIDをカンマ区切りで指定。次のdepthとあわせて使用。デフォルトは全てのドキュメント。
depth
検索する階層の深さを指定。デフォルトは全ての階層。
documents
検索するドキュメントのIDをカンマ区切りで指定。
extractLength
検索キーワード周辺の文字列を何文字まで結果に表示するか、80から800までで指定。デフォルトは(200)。
opacity
ajaxSearchの結果表示DIVの透明度を0から1で指定（小数点の使用も可能）。デフォルトは(1)。
useAllWords
全てのキーワードを含めるかどうか。デフォルトは(0)。
config
設定をファイルで指定。設定ファイルは「<config_name>.config.php」という名前で、configsフォルダにアップロードしておきます。使用する場合は、<config_name>でファイル名を指定。

IE6でも全体を印刷できるようにしました。
レイアウトを含めた全体を印刷できる仕様にしました。

▼IE6のみにプリント時に読み込ませるCSS

▼IE5.5からzoomプロパティは有効だと分かりましたので条件分岐IE5.5にも適用

▼CSSの記述（zoomプロパティはIE独自です。）

body { zoom: 65%; }

▼Modx条件分岐スニペット「StartIf ＆ EndIf」
テンプレート変数に入力されていない場合、タグを非表示にしたい等の「条件分岐」させたい場合に有効なスニペットです。
配布元サイト

※配布サイトでは[[EndIfの後に?が書かれていませんがそれが無いと動作しないらしいですので要注意。

netscape７においてpositionプロパティ「relative」の中に「absolute」で配置したときに大元となるボックスにfloat:leftなどをかけているとrelativeが効かないバグがあります。
そんなときは、floatをかけるボックスとrelativeをかけるボックスを別々にするとうまくいくようです。
参考サイト

▼wayfinderのスニペットコールで、現在ページの子ページのみを展開表示させるためのサンプルです

&startId=`0` &level=`2` &hideSubMenus=`1`

上記をstartIdの中にスニペットコールUltimateParentと記述し、併用すると便利かもしれません。

pixivに参加しました

thickboxの使い方　参考ＵＲＬ
◆画像を表示
class="thickbox"でthickbox化 rel="imagw01"でグループ表示
◆別URLを表示
URLのあとに?KeepThis=true&TB_iframe=true&height=400&width=600
class指定thickbox
以上

▼IE8でもIE7互換モードで、表示されるようにできるメタタグです。

<meta http-equiv="X-UA-Compatible" content="IE=7" />

▼metaスイッチには、複数のレンダリングモードを指定することができます。

<meta http-equiv="X-UA-Compatible" content="IE=7; IE=9">

metaスイッチをサポートする今後のIEは、指定される値の中から、一番適したモードを選択します。上記の例ではIE7モードとIE9モードを選択していますが、IE8でその文書を表示させると、IE8モードではなくIE7モードでレンダリングすることになります。

▼しかし、複数のmeta要素を記述しても、最初の指定のみが有効になります。

<meta http-equiv="X-UA-Compatible" content="IE=7"> <meta http-equiv="X-UA-Compatible" content="IE=8">

この場合、IE8モードではなくIE7モードでレンダリングされます

▼スニペット「Dittoによるタギングの記述の仕方」
（例）「海」というタグがついている記事のみ出力）

Ditto? &startID=`3` &id=`tag_search2` &summarize=`10` &display=`10` &paginate=`1` &tpl=`thum-article` &extenders=`tagging` &tagData=`テンプレート変数などを指定` &tagMode=`onlyTags` &tags=`海` &tagDelimiter=`,` &sortBy=`pub_date` &dateSource=`pub_date` &dateFormat=`%Y.%m.%d %R (%a)` &language=`japanese-utf8`

テンプレート変数にはカンマ区切り「,」で単語（タグを）を指定する。
チェックボックスの場合だと区切りが||ではうまく動作しないので、そのような場合、テンプレート変数の作成・編集の「ウィジェット」に「Delimited List」を設定し、パラメータ「Delimiter」に、「||」の代わりに使う文字を設定します。（デフォルトでDelimiterは「,」になっています）

▼下記の条件分岐サンプルは一番上の親IDが10とか2とか3とかの場合だと＜p＞IDを複数指定できます。＜/p＞を吐き出すという記述になります（※注意：ＰＨＸに関する記述は半角にする）

phx:if=`23`:eq=`10`:or:eq=`2`:or:eq=`3`:or:eq=`1`:or:eq=`13`:or:eq=`8`:or:eq=`6`:or:eq=`11`:or :eq=`17`:or:eq=`18`:or:eq=`20`:then=`＜p＞IDを複数指定できます。＜/p＞`

▼下記の条件分岐サンプルはテンプレート変数linkに情報が記述されている場合といない場合に吐き出すタグを変えるという記述になります

phx:if=``:ne=``:then=``:else=``

▼スクリーンショットを共有して、話し合う

http://www.bounceapp.com/

IE7、FireFoxでサイト印刷時のレイアウト崩れを解決～CSS

IE7、特にFireFoxでサイトを印刷する際、２ページ以上になると２ページ目以降のfloatが解除されレイアウトが崩れてしまう、という症状が出てしまいます。そのレイアウト崩れを解決するプリント用CSS。

サイトレイアウト用のCSSとは別に、『media="print"』と記述して、以下のように印刷用CSSを読み込みます。

『media="print"』と記述する事で印刷時のみ適用されます。

以下を参考に、印刷用CSSにレイアウトの崩れを解決するための内容を記述します。IE7とFireFoxそれぞれ解決方法が異なるため、PHPでブラウザごとに違うCSSを読み込む等の工夫が必要になります。

「レイアウト例」

div.all

div.left

div.right

「IE7対策」
IE7対策は float を指定している箇所に zoom:1 を追記します。

div{ zoom:1;}

「FireFox対策」
FireFox対策は display:table と display:table-cell で float を指定している箇所をテーブルレイアウト化します。

div.all{ display:table;}

div.left{ display:table-cell; float:none;}

div.right{ display:table-cell; float:none;}

「PHPでブラウザごとに違うCSSを読み込むサンプル」
<?php
$agent = getenv( "HTTP_USER_AGENT" );
if( ereg( "Firefox", $agent ) ) {
$print_css = "<link href=\"FireFox用CSS\" rel=\"stylesheet\" type=\"text/css\" media=\"print\" />";
}else if( ereg( "MSIE 7.0", $agent ) ) {
$print_css = "<link href=\"IE7用CSS\" rel=\"stylesheet\" type=\"text/css\" media=\"print\" />";
}
echo $print_css;
?>