Web Developer plusで、知っておきたい使えるCSSテクニックが紹介されています。 いくつかご紹介しますね。 ・テキストハイライト時の色を変更する SafariやFirefoxでテキストを選択した時の色を変更できる。コードサンプルは以下 ::selection{ /* Safari and Opera */ background:#c3effd; color:#000; } ::-moz-selection{ /* Firefox */ background:#c3effd; color:#000; } ・プリント時にページを指定箇所で分割する 以下のクラスを指定することで印刷時のページを分割できる .page-break{ page-break-before:always; } ・テキストの代わりに画像を表示する よく見られるSEOテクニック。ユーザーには画像を見せ、検索エ

Internet Explorer 7 は、 8 月にも beta3 がリリースされるかも知れないんだけど、今現在、IE7 beta2 を含むモダンブラウザに有効そうだと思われる CSS ハックを自分用にまとめておく。以前に IE 7 用の CSS ハックを紹介したことがあったけど、今回の Easy CSS hacks for IE7 - Nano See, Nano Do で紹介されていたハックは、比較的シンプルかも知れない。想定ブラウザは下記のとおり。 バージョン 6 以下の IE IE7 それ以外のモダンブラウザ（Safari、Opera、Firefox） ブラウザごとのハック 全てのサンプルは body 要素を指定の対象としている。 バージョン 6 以下の IE にのみ適用 * html body サンプルページ バージョン 7 の IE にのみ適用 *+html body サンプ

ランダムモーションの第3弾は、これまたFLASHの定番、雪の降る動きである。　雪の降る動きを表現する方法としてはいろいろあるようだが、ここで使った表現方法は、 （１）雪をステージに描くときに、深度をランダムに設定し、深度が小さいほど（下層にいくほど）、アルファー値を小さくして遠近感を出す工夫をした。 （２）雪の大きさをランダムに、発生する場所を画面上部全域にランダムに発生させた。 （３）落下速度をランダムに設定した。 （４）横方向の動き（揺らぎ）をcos関数で表現し、周期（振幅の長さ）をランダムに変化させた。 雪の作成 ３５０×２５０のキャンバス（色：#999999）内に雪の粒（白色、5×5pix）を描き、シンボルに変換、インスタンス名をsnowとする。　リンケージプロパティーで識別子をsnowに、「actionscriptに書き出し」にチェックを入れる。　ここでは、雪を描くのに、２０角星

投稿日：2006年6月6日　　　レベル：−　　　　ソフトウェア： イントロダクション このチュートリアルではダイナミックな雪を降らせる方法を紹介しようと思います。クリスマスに向けて最後の仕上げに使えるんじゃないでしょうか？この雪はアクションスクリプトによって制御されており、それぞれの雪片をトウィーン制御しているわけではありません。雪はマウスを動かした方向に刺激を受けて流れます。また、それぞれの雪片はそのスピードもまちまちです。小さな雪(遠くにある)はゆっくりと降ります。少しだけランダムな効果を与えてやれば、雪片は同じ方向に降ることもなくなります。 ステージの設定 フレームレートを25fpsに設定します。違うフレームレートを使いたければ、コードを編集してください。そうしなければ、速過ぎるか、遅すぎる結果になってしまいます。では、小さな円をステージに作ってください。サイズはあなたが、雪片にした

2006年9月、総合Proコースの受講生作品を対象とした「総Pro GRAND PRIX」を開催致しました。この「総Pro GRAND PRIX」は総合Proコースを受講された方を対象に優秀作品を選出するイベントです。 今回、記念すべき第一回を迎えたこの「総Pro GRAND PRIX 2006 AUTUMN」では、第1ステージで全国のデジハリの各スクール審査により63作品がノミネートされ、第2ステージでは杉山学校長を始めとする審査員のもと、栄えあるグランプリ、各部門賞が決定致しました。 「総Pro GRAND PRIX」では、“技術力”や“完成度”の高い作品のみならず、アイデアやエンターテインメントとしての面白さ、企画力の高さにも注目しております。総合Proコースを代表するこの優秀作品をどうぞご覧下さい！！

サムネイル画像をクールに拡大表示する Highslide JS を利用する方法を紹介します。内容は Movable Type をサンプルにしていますが、他のブログ等でも応用できると思います。 WordPress ではプラグイン WPJ-Highslide 0.2 が利用できるみたいです。 とりあえず下記のサンプル画像をクリックしてください。拡大表示された画像の上でクリックすると元に戻ります。 拡大ツールでは、当サイトでも紹介している Lightbox JS が有名ですが、この Highslide JS は下記の特徴があります。 拡大画像の下にキャプション（タイトル）の挿入が可能 ウィンドウサイズに収まるように拡大（右下のアイコンをクリックすると 100% 表示） 拡大画像のドラッグが可能 以下、カスタマイズ方法です。ここではダウンロード時のバージョン 2.2.74.0.6 で話を進めます。

全カテゴリー用 --> Dreamweaver 8 & CSS 1.Dreamweaver 8 とマークアップの基本 1-1 Dreamweaver 8 の TIPS [3] 1-2 XHTML 準拠のマークアップ [3] 2.CSS の基本 2-1 CSS の基本の再確認 [5] 2-2 崩れない複数カラム [1] 3.CSS の現在 3-1 画像置換、リセット CSS 、パンくずリストなど [6] 3-2 便利な Javascript のインクルード [4] 4.コーディング演習（その1） 4-1　マークアップ設計、実習 [10] 5.コーディング演習（その2） 5-1 CSS 設定、完成 [5] Fireworks 8 & Photoshop & Illustrator 1.パス演習 1-1 ロゴ作成演習 [1] 1-2 Map 作成演習 [1] 2.画像補正演習 2-1 レベル補正

clearfixでfloatを解除 2007-03-07 1 0 XHTML/CSS clear, CSS 枠や背景が消えたり，途中で切れたりしたことはありませんか。 floatした要素（ボックス）を含む親要素（ボックス）のborderやbackgroundが途中で切れてしまうことがあります。 左の例では，右側のメニューが終わったあたりで，左右にあるラインも切れています。 floatした要素の高さは親要素の高さに反映されない 分かりやすいようにXHTMLとCSSの例を書いてみましょう。 <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="menu"> <p>menu</p> </div> </div> #wrapper { width: 200px; border: solid 3px #999999;