CSSアニメーションを実行するトリガーのまとめ５＋１個
先日『CSS3のtransitionプロパティでアニメーションを試してみた』をエントリーしましたが、とりあえずは:hoverで動作するものばかりを試作していたのですが、:hover以外はどんなのがあるか？と思い、とりあえず調べてまとめてみた。 E:hover まずは前回同様:hoverから。マウスを要素に乗せることで動作します。 .demo1 div{ width:150px; height:100px; background-color:#0066cc; border:3px solid #ffffff; color:#ffffff; -webkit-border-radius: 5px; -moz-border-radius:5px; border-radius: 5px; -webkit-transition: 1s; -moz-transition: 1s; -o-transiti
もっとシンプルかつ簡単にフォントサイズを変える「大・中・小」ボタンを実装する方法
フォントサイズを変える「大・中・小」ボタンを画像も使って実装する方法 先にエントリーした内容の別版。前のはボタン部分をimgの画像として読みこんで、そのsrcを変えることで実現をしていたのですが、なんだか有用性が低かったきがしてならなかったので、もう少しシンプルに且つ画像でもCSSのボタンでもどちらでもOKなようなスクリプトに変えてみた。 今回の仕様 先に紹介しているものは、画像リンクを変えて実装していたのに対し、今回はボタンを背景画像を利用して実装。同時に:hove時とクリックした部分につけるactiveに対して、CSSを予め用意しておく。 ちなみに、今回はCSS Spriteにて実装。 利用したソース・CSS・画像 JavaScriptのソースは最初に作ったものに、activeのclassをつけたり削除する機能をつけただけ。 ■JavaScript jQuery(function($)
float関連の問題で覚えておくべき５つの対策
CSSのfloat関係って、基本的に覚えておくべき事ですが、 動作がいまいちわかり辛かったり、バグが多かったりと、 float一つとっても覚えておくべきことって多いと思います。 なのでfloat関連の問題で覚えておくべき解決方法や 回避方法のことなどについてをまとめてみた。 １）floatしたボックスの下にコンテンツがこないようにする 写真の横に文字をもってきて、その文字が多ければ 写真の下にも文字をもってくる・・・というような場合は、 単純にimgにfloatをつけるだけでできるのですが、 コンテンツが下に来ないようにしたい場合はどうしたらいいか。 ■例１ー１（imgにのみfloat:left、下に回り込む） ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキス
フォントサイズを変える「大・中・小」ボタンを実装する方法
知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか？という質問をいただきました。 CSSとJavaScript（場合によってはJSのみ）で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し
第９回北海道WEBコンソーシアム終了 セミナーのまとめ
19日金曜日に第9回北海道WEBコンソーシアムのセミナーがありました。 今回はモバゲーで有名なDeNAのセミナー。 主にモバイルマーケティングとかのお話でした。 今後はケータイがパソコンでのネットを越える！？ かなり刺激になる話でした。今回もメモ程度にまとめます。 親指文化がビジネスに変わる時 今回のスピーカーは、DeNAの栗山さん。 モバイルECについてなどをお話いただきました。 さて、いつものようにざっくり書いていきます。 ■メモ ・モバイル市場は今後も伸びて行く ・いつかはPCを抜く（といいな。） ・モバイルコンテンツとモバイルコマース、今はコンテンツの方が市場が上。 ・でも今後はコマースがコンテンツよりも伸びる！ ・インターネットを見るのはケータイもPCも今はかわらない。 ・今後はケータイで見る方が多い。 ・ケータイは短い時間でもネットにつなげられる利点で利用者増。 ・その分使いや
ブログやサイトで使う写真や画像を自動的にLightBoxで表示する方法
とある友人が、先日エントリーした「札幌の花火大会を見てきた：フォトアルバム」をみて、 「写真をクリックしたら、画面に綺麗に表示されるJavaScript、 それの導入方法が知りたい。！」 という様な連絡があった。 メールで書いて送ろうかとも思ったんだけど、 自分でも再度復習を兼ねて、ブログのエントリーにしてみた。 以前にもエントリーしたことがあるのですが、 今回もjQueryとそのプラグインを使って、 ブログとかサイトで写真や画像をLightboxを使って表示させる方法を説明します。 写真を張って、その写真へのリンクをつけるだけで、 自動的にLightboxで表示させる方法も書いておきます。 ちなみに以前のエントリーは関連エントリーを参照してください。 まずはjQueryを使えるようにする 今回もjQueryを使ってのものになります。 jQueryはサイトからダウンロードしたのをアップして
文章中の文字をJavaScriptとして動作させてみる
文章中に使ったサンプルの文字とかを 直接動作させる方法はないかなと思い探してみたら、 どうやらevalという関数で動作させることができるようだ。 今後作って動作させてみたいことがあるので、 今回はその時のために、evalの使い方を勉強してみる。 eval(○○) eval(○○)は、○○に入れた文字を動作させられるらしい。 つまり、書いている文字を引っ張ってきて、そこに入れれば、 書いた文字が動作するのでしょう！ 引っ張ってくるのをjQueryの構文にしてみたら、 その構文通りに動くのではないだろうか？ ってことで実験。 サンプル ■設定ソース $(function(){ $("input.run").click(function(){ var code = $("#samp").text(); eval(code); }); }); 今回から、$(document).ready(func
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
