チートシートってなんじゃろって思ってたんですが、要するに元の意味合いはカンニングペーパーらしいです。そこから転じて(?)覚えておくべきものの纏め書き…みたいなもの、として扱われているっぽい。(厳密な意味は知りません、ごめんなさい)
で、Web制作関連のチートシートは愛用してます。
普通にWebで検索する事も多いんですが「あれー、あの構文ってどう書くんだっけ?」とか「あの要素のスペルってLとRどっちだっけ??」とか、ぽかっと忘れたときにすごく便利です。
私が使ってるのは、「ILoveJackDaniels.com」さま(英語)のサイトのもの。チートシートのカテゴリが独立してるので探しやすいです。
英語サイトだとわかりにくいよ〜って思うかもですが、どうせタグ自体はニホンゴじゃないのでキニシナイ(…)。探せばあるのかもしれないけど、現状これで大満足なので。
デザインが好きなんですよね。妙にカラフルなつくりではなく、黒+1色というシンプルな色の作りが、すごく気に入っています。色が種類毎に違うので、ぱっとみで「○色はXXの奴〜」とか覚えられてイイ♪
主に愛用してるのはCSSのシートですね。BOX MODELの図が書いてあるのも好き。
PDF版とPNG版両方丁寧に用意されているのもありがたい限りです。
これ以外のチートシートとしては「TechCheatSheets.com」さま(英語)もおすすめですね。
ジャンル毎にTagで分けられて、様々なチートシートへのリンクが収集されています。(※リンク集なので、このサイトで直接サンプルが見られるわけではない事に注意は必要ですね)
|
|
チートシート(cheat-sheet) |
Category : [Web]HTML/CSS
|
|
CSS Decorative Gallery |
Category : [Web]HTML/CSS
Web Designer Wallさまのサイト(※英語)にあったCSS Decorative Galleryの記事がすごく面白かったです。
サンプルはこちらのページから見ていただくとして…大雑把な内容としては、Aタグで囲まれている画像を、特定のclass(サンプルの場合「photo」)を持つDIVタグで囲っています。で、そのAタグ内に、画像の前(=IMGタグの前)に中身がカラのSPANタグを入れています。
↓こんな感じ。
<div class="photo">
<a href="#">
<span></span>
<img src="images/image.jpg" alt="image" />
</a>
</div>
で、そのclass="photo"&class内のspanに対してデザインをCSSで設定する事で、お洒落に飾られた画像が表示される…と言う風になっています。spanに対してdisplay: block; を設定し、positionを駆使して位置をずらし、背景画像を設定して…と言う風にしてデザインをつけているようです。
更に、この場合「画像の前に空タグのspanを挿入してCSSを設定すればデザイン設定完了」なので、jQueryの「.prepend」を使用して、
$(document).ready(function(){
$(".photo a").prepend("<span></span>");
});
ってな具合に、.photo a の前に<span></span>を自動で挿入する…というサンプルも掲載されています。(というかリンクしてるデモページがそうなってるかも。)
こういう風にすれば、いちいち空タグを挿入したり、もしくは過去作ったページにある画像にspanを再度入れたり、とかしなくてすむから楽ですね。

サンプルはこちらのページから見ていただくとして…大雑把な内容としては、Aタグで囲まれている画像を、特定のclass(サンプルの場合「photo」)を持つDIVタグで囲っています。で、そのAタグ内に、画像の前(=IMGタグの前)に中身がカラのSPANタグを入れています。
↓こんな感じ。
<div class="photo">
<a href="#">
<span></span>
<img src="images/image.jpg" alt="image" />
</a>
</div>
で、そのclass="photo"&class内のspanに対してデザインをCSSで設定する事で、お洒落に飾られた画像が表示される…と言う風になっています。spanに対してdisplay: block; を設定し、positionを駆使して位置をずらし、背景画像を設定して…と言う風にしてデザインをつけているようです。
更に、この場合「画像の前に空タグのspanを挿入してCSSを設定すればデザイン設定完了」なので、jQueryの「.prepend」を使用して、
$(document).ready(function(){
$(".photo a").prepend("<span></span>");
});
ってな具合に、.photo a の前に<span></span>を自動で挿入する…というサンプルも掲載されています。(というかリンクしてるデモページがそうなってるかも。)
こういう風にすれば、いちいち空タグを挿入したり、もしくは過去作ったページにある画像にspanを再度入れたり、とかしなくてすむから楽ですね。

|
|
Flash(swf)の上にレイヤー表示 |
Category : [Web]HTML/CSS
CSSやJavaScriptで作るマウスオーバーetcでサブメニューが出るタイプのメニューナビゲーション(ドロップダウンメニュー/プルダウンメニュー)などが、Flashエリアにかかるような時とかが想定対象。

「wmode」プロパティを「transparent」に設定すればOKらしい。
実際には、IEのactiveXのアクティブ化対策を兼ねてJavaScriptで出力させるのが殆どでしょうから、そのスクリプトでwmodeの設定をしてあげればいいでしょう。
あとは上に表示したいレイヤーの方のz-index値をCSSで上に来るように設定してあげるのをわすれないこと。
参考にさせて頂いたサイトはこちら (大変助かりました!!!)

「wmode」プロパティを「transparent」に設定すればOKらしい。
実際には、IEのactiveXのアクティブ化対策を兼ねてJavaScriptで出力させるのが殆どでしょうから、そのスクリプトでwmodeの設定をしてあげればいいでしょう。
あとは上に表示したいレイヤーの方のz-index値をCSSで上に来るように設定してあげるのをわすれないこと。
参考にさせて頂いたサイトはこちら (大変助かりました!!!)
| BLOG TOP |


Writes




