4月
21
strictなXHTMLでは,target=”blank”を書くことは禁止されれています。
ということで、jQueryでそれを実現してしまいましょうというTips。
サンプルはこちらを御覧下さい。
まず、headの中に
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a[rel=_blank]').click(function(){
this.target = "_blank";
});
});
</script>
↑と書きます。（説明は後述）
そして、別ウインドウで開きたいリンクに
<a href="http://www.google.co.jp/" rel="_blank">blankだ </a>
↑このように「rel=”_blank”」を追加します。
ｊQueryでは、
$(‘タグ名[属性=値])
とすると、指定のタグのうち「属性=”値”」が設定された要素を検索することができます。
今回の例では、$(‘a[rel=_blank]‘)と設定していますので、
aタグのうち「ref=”_blank”」という属性が設定されたaタグのみを抜き出しています。
そして検索されたaタグに対して、
「.click( function(){ } );」
を行っているわけですが、これはクリックされたとき{ }の中を実行せよという意味です。
aタグのうち「ref=”_blank”」という属性が設定されたaタグがクリックされたとき、
{ }の中を実行せよと行っているわけですね。
ではその、{}を見てみましょう。
thisという言葉が現れました。
これはそのまんまですね「コレ」。つまり、検索されたaタグのことですね。
このthisに「.target = “_blank”;」がついています。
これはこのまんま。thisに対して「target = “_blank”」をつけろって言ってるわけです。
注意点としては、たぶんこのTipsは、
strictなXHTMLでは「target = “_blank”」を書けないってだけで、
ブラウザ自体にはこの機能があるので、無理やりつけたっていうTipsになります。
したがって、HTML5の時代になっても通用する方法なのかは、正直疑問はあります。
正しくやるとすれば、LightBox系のライブラリや擬似ウインドウライブラリを利用するべきでしょう。
4月
20
まずは、問題を抱えたサンプルページを。
（ソースも見てね※超適当だけど。）
何が問題かっていうと、floatでメインコンテンツとサイドナビを左右に振ってるわけなんだけど、
サイドナビにカラーをひいているとき、メインコンテツの高さの方が高かったとき、
↑こんな風にサイドナビが切れちゃう。なんかイヤ。メインコンテンツの高さまでサイドナビも伸ばしたい(>_<)
背景画像を使うとか、divタグを何十にも囲むとか、やりようがいくつかあるけど、
今回はjQueryで解決してみよう。
といいつつ、説明をするのが面倒なので、解決したページを見てもらいたい。もちろんソースも見てね。
ページを見ると、問題が解決されている！
そしてソースを見ると、問題のあったページに、何行かのJavascriptが書き加えられているだけ！
コメントがあるため長く見えるけど実際は短い。
なお、コメントは説明になっているので、これを読みながら下に進んでね。
今回のキモは、「.height()」という書き方。
これを使うことで、操作対象の高さを取得できたり、設定できたりする。
例えば、
$(‘#idname1′).height();
ってやれば、ID「idname1」の高さが取得できる。
おぉｗ！ なんか、CSSがわかればなんとなく意味分かる！！！
そして、
$(‘#idname2′).height( 100 );
ってやると、ID「idname2」の高さを「100px」にしろっていう命令になる。
おぉｗ！最初の例に数値を足しただけだ！！！
解決したサンプルページのソースを見ると、
ｊQueryのロードや、$(document).ready( function(){ } )といった、
jQueryを使うときの決まり文句を除くと、
たった3行でそれが実現できているのがわかる！
jQueryってすげぇ！！！
以上、説明適当だけど、何かでお使いいただけたらと。
3月
30
CSSで<a>のスタイルを変えるってのはよくやる。。
▲たとえばこんな感じかな。hoverしたときにオーバーラインもでるように操作してる。
<div style="background-color:#FFC; padding:5px;">
<a href="javascript:void(0);">リンク1</a>
</div>
<br />
<br />
<div style="background-color:#FFC; padding:5px;">
<a href="javascript:void(0);">リンク2</a>
</div>
▲HTMLはこんな感じでぇー、
a{
color:#333;
}
a:hover{
text-decoration: underline overline;
}
▲CSSのソースはこんな感じ。
でも！
▲こんなこともしたいよねぇ。一つ上の階層になる<div>のスタイルを変更してバックの色変更って感じ。
もちろん<a>をブロック要素にして、幅を指定してやれば同じようなことができるんだけどね、
場合によっては、それができなかったり、2つ上の階層のタグまで変更したいってこともなくはない（っていうか、デザイナのわがままでそういうこともけっこうある）
こんなときjQueryが便利なんですよ。（石原良純風に。）
<script type="text/javascript">
$(document).ready( function(){
//「a」タグに対して動作を定義する。
//hoverメソッドでonmouseoverとonmouseoutが一気に指定できる。
$('a').hover(
//over時の動作指定
function(){
//parentでaの一つ上のHTML要素つまり親要素を取得できる。
//そしてその取得した親要素に対してcssメソッドで背景色を変更
$(this).parent().css( 'background-color', '#FCF' );
}
,
//out時の動作指定
function(){
//over時と同じ。色を元に戻している。
$(this).parent().css( 'background-color', '#FFC' );
}
);
});
</script>
▲こんなコードを書いてやれば比較的簡単に実現できます。（もちろん、このコードを書く前にjQueryをロードしてね）
・$(document).ready()は、HTMLの読込完了時、ready()のカッコの中の動作しろよこんにゃろー！
・$(‘a’)は、タグ<a>に対して何かしますよっていう意味。$(‘#id’)ってやれば特定IDが取得できる！$(‘.class’)ってやれば特定セレクタを取得できる！（←CSSと一緒だ！！）
・.parent()は、呼び出した要素の親要素を取り出したいよというときにつかう。上の例だと<a>の上位タグの<div>を取得していることになる。
・.hover( 1, 2 )は、$(xx)で呼び出した要素に対して、onmouseoverのとき1の内容、onmouseoutのとき2の内容を実行せよという意味。
・.hover()の引数はそれぞれ関数形式で指定する。
・.hoverの中ではわざわざ$(‘a’)とかやらなくても、$(this)で対象要素を取得できる！
・css( 1, 2 ) はそのまんま。その要素のCSSの1のプロパティを2に変えろ！っていう意味。
まったくもってプログラミング勘というか、JS勘がないと理解苦しいかもしれないけど、コピペでJSのコードをHTMLの中に埋め込んだことがある人なら、コピペでちょっといじるとうまいことつかえるんじゃないかなー。
なによりいいのは、HTMLとCSS自体はわりとすっきりとしているってところがいい。メンテナンス性の悪いHTMLやCSSほどタチの悪いものはないからねぇー。
ほぃじゃぁーねー(^-^)ﾉｼ
