jsdo.it
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
IE6対応！jQueryで透過PNGのロールオーバーを作る (1/3)
透過PNGに対応したロールオーバーのサンプル。メニュー画像は半透明になっており背景が透けている。IE6を含むクロスブラウザーに対応している（画像クリックでサンプルページを表示します） ロールオーバーの基本部分をおさらい 「透過PNG対応」といっても、IE6以外のブラウザーでは単に透過PNG画像を用意するだけですので、通常のロールオーバーと変わりません。まずは前回のおさらいをかねて、通常のロールオーバーを作成しましょう。以下のようなHTML／XHTML（以下、HTML）を用意します。メニューはul/li要素で記述し、img要素のclass属性には「rollover」を設定します。ここでは、次のような半透明の透過PNG画像を用意し、img要素のsrc属性に指定しています。 ▼サンプル01（HTML部分） <ul> <li><a href="#"><img src="images/jquery.
Web開発周りのVimの設定
HTML/CSS/JavaScriptを書くために行ったVimの設定やインストールしたスクリプト等をざっとまとめてみた。「VimでWeb開発を100倍効率的にする方法」といったような生産性を上げるための設定の類ではない。 HTMLファイルを:makeで文法チェック tidy.vimが用意されているので、HTML Tidyをインストールし、.vimrcに以下のように書くだけで良い。 autocmd FileType html :compiler tidy autocmd FileType html :setlocal makeprg=tidy\ -raw\ -quiet\ -errors\ --gnu-emacs\ yes\ \"%\" tidy.vimのmakeprgでは日本語が化けるので-rawを追加する。 HTMLファイルのインデントをやり直す gg=G ノーマルモードではggでファイ
ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ
ウィンドウサイズを変えると コンテンツ（記事等）が再配置される 可変グリッドレイアウトに関する サンプルサイトやWPテーマ、 ライブラリなどの情報のまとめです。 詳しい方には参考にならないっぽいです。 いろいろ意見は分かれそうですが、知っておいて損は無いかなぁと思いますのでメモ。 可変グリッドレイアウトサイト可変グリッドレイアウトを使用したサイトの例。 D&DEPARTMENT PROJECT ECサイト。綺麗にまとまってます。MT使用。 D&DEPARTMENT PROJECT daily vitamins 暇つぶしが出来るサイト？どういう趣旨か分かりませんが、可変グリッド。WPです。 daily vitamins 小林聡美.jp 小林聡美さんのサイト。凄く見やすいです。MT使用。 小林聡美.jp Marunouchi.com 丸の内の情報サイト。ハイクオリティです。写真をダイナミックに
RedLine Magazine : jQueryでリストを開閉させたい
jQueryでリストを開閉させたい こちらの記事、サンプルを拝見して。 Css Globe - Sitemap Styler: Style your Sitemaps with CSS and Javascript 英文なのだが、上記ページの「Examples」の部分の各サンプルを見れば何がしたいかはすぐに分かると思う。サイトマップだけでなく、いろんな場所で使えそう。動きも気持ちいいし、是非使ってみたいと思ったのだが、実際使ってみるとダダーと下階層のulリストを開くためには左の「+」マークを的確にポチっとしないといけない。またjs無効の際、下階層のulリストはCSS側で「display:none;」になっているので、そのままでは中身が表示されない。 じゃあそれ、jQueryでやってみよう。 もう少し自分好みな感じにできないかなーということで、jQueryでやってみることにした。対象となるペ
IE 6で泣かないための、9つのCSSハック (1/3) - ＠IT
有限会社タグパンダ 喜安 亮介 2009/10/8 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） 最も多く使われているのに……、いや、だからこそ 多くのWebデザイナの悩みの1つは、レイアウトの表示ずれ問題だと思います。これは、各Webブラウザが採用しているレンダリングエンジンの違いから起因している場合が多いです。その中でも、最もWebデザイナ泣かせのWebブラウザなのは、マイクロソフトが開発しているIE（Internet Explore）のバージョン6です。 IE 6は、発売開始当初のWindows XPにデフォルトでインストールされていたWebブラウザということもあり、世の中の多くのユーザー
[JS]ホバー時に光源が移動するエフェクトがかっこいいスクリプト
マウスのホバー時に、光源がカーソルに追従するエフェクトがかっこいいスクリプトをcoders.meから紹介します。
【特集】詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 (1) 本特集の趣旨 | エンタープライズ | マイコミジャーナル
本特集は、HTML 5の仕様や実装状況に関する現時点での最新レポートとして、実際に動作するサンプルを添えた詳細な解説をお届けするものである。特集の後半となる今回は、Webアプリケーションを作成するにあたって有用な、JavaScript APIを中心として取り上げる。今回紹介する内容は以下の通りだ。 アプリケーションキャッシュ クロスドキュメントメッセージング Web Workers Web Storage Web Database Web Sockets Geolocation API HTML5で新しく導入されたタグなどに関しては、前回の特集を参照していただきたい。 今回調査対象としたブラウザは、前回と同じく次の通り。ベータバージョンも含めた最新のバージョンをチョイスした。Internet Explorerについては、最新バージョンの8でもHTML 5への対応があまり進んでいなかったため
【特集】詳解! HTML 5と関連APIの最新動向 - 新タグ&API編 (1) はじめに - 本特集の趣旨 | エンタープライズ | マイコミジャーナル
Google I/Oの基調講演で大きく取り上げられて以来、HTML 5に対する注目度は増すばかりだ。仕様に関する議論もWHATWGのメーリングリストで日々活発に行われ、ブラウザによる実装も着々と進んでいる。 本記事は、HTML 5の仕様や実装状況に関する現時点での最新レポートとして、実際に動作するサンプルを添えた詳細な解説をお届けするものである。HTML 5の仕様はまだまだ流動的であり、実装状況も刻一刻と変化しているが、HTML 5に対して強く興味を持っている方々に少しでも詳しい情報をお届けできれば幸いである。また、HTML 5で追加される各種の新機能について短時間で把握したい場合は、「5分で把握するHTML 5 - Google Developer Dayセッションリポート」という記事があるのでそちらもお薦めだ。 本特集は全2回から成り、前半となる今回では「HTML5 - HTMLとX
ブラウザのCSS3、HTML5絡みの対応が一発で分かるようにできるライブラリ「Modernizr」:phpspot開発日誌
ブラウザのCSS3、HTML5絡みの対応が一発で分かるようにできるライブラリ「Modernizr」 2009年07月07日- Modernizr ブラウザのCSS3、HTML5絡みの対応が一発で分かるようにできるライブラリ「Modernizr」 ライブラリを使って、Canvas、opacity、Multiple backgrounds といったCSS3やHTML5の機能に対応しているかを簡単に調べることが出来るようです。 Google Ghrome の場合で対応を明示 Firefox 3 の場合で対応を明示 JavaScript では、次のように使えるようです。 if (Modernizr.cssgradients) { alert('対応'); } else { alert('未対応'); } cssgradients の他には以下のようなプロパティが利用可能。 Modernizr.ca
どのWebブラウザをサポートするべきか？ 「プログレッシブ・エンハンスメント」という考え方
Webアプリケーションを開発、運用する側にとって、どのWebブラウザのどのバージョンをサポートするのかを決めることは非常に重要です。サポートするWebブラウザを絞り込んでしまえば開発は容易になりますが、利用者には狭い選択肢を強いることとなります。サポート対象を広げるほど利用者には便利になりますが、開発時に各Webブラウザの互換性の問題に気をつけなければならず、またテストの工数もねずみ算的に膨らみ、開発工数の増大からコストの増大へとつながります。 いま業務アプリケーションも含めて多くのアプリケーションがWebアプリケーション化しています。社内のスタッフだけが使うことを想定するのならば、Webブラウザの種類とバージョンを限定してもいいでしょう。 しかし今後は社内に複数のベンダから調達したWebアプリケーションが混在することになるでしょう。そのときに、それぞれのWebアプリケーションがサポートす
古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log
uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました。 「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」 「CSS3セレクタを古いブラウザでも使いたい!」 といった現場の声にお応えして、ほぼ全てのブラウザで CSS3 セレクタを利用したページデザインが可能になるJavaScript ライブラリを作ってみました。 特徴 軽いよ いろんなブラウザで動くよ(Firefox2+, Opera9.2x+, Safari3+, IE6+, Google Chrome1+) 95%〜98%ぐらいのシェアをカバーできるんじゃない
テキストを動的にアンチエイリアスがかった綺麗な画像にする仕組み色々:phpspot開発日誌
Dynamic Text Replacement Solutions | Dezinerfolio テキストを動的にアンチエイリアスがかった綺麗な画像にする仕組みが色々とあるみたいです。 FlashやPHP、CSS、JavaScriptの要素をトリッキーに混ぜ合わせているところも見所です。 P+C DTR PHP+GDで綺麗なテキストを生成し、JavaScriptでbackground-image設定して表示します。 そもそもがテキストになっているので、HTMLもクリーンです。 見え方は以下のように、綺麗なテキスト 生成されたHTMLはh5要素として、次のようになっています。 <h5 style="background-image: url(image.php?text=You%27re+Look%27n+At+It&tag=h5);">You're Look'n At It</h
jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法:phpspot開発日誌
Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。 何ができるか？というのは次の図を見て頂くのがはやいでしょう。 ビフォア ↓↓↓↓ アフター これを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。 具体的には、次のように、label の中で width がもっとも大きいもののサイズを得て、そのサイズにJavaScriptで調整しちゃうというものです。 $(document).ready(function() { var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); });
8のjQueryのすごいTIPS
8のjQueryのすごいTIPS 原文：8 awesome JQuery tips and tricks 微妙なTIPSもあるのですが、役に立つのもあるのでご紹介。 target="_blank" のリンクの作成 XHTML 1.0 Strict ではtarget=blank属性が利用できない。そこでjQueryを利用して別ウィンドウを開く方法を紹介しよう。 $('a[@rel$='external']').click(function(){ this.target = "_blank"; }); <a href="http://www.lepinskidesign.com.br/" rel="external">lepinskidesign.com.br</a> [to-R補足] 実際に利用する際はjavascript部分を$(function(){...})などで包む必要があります。[
"吹き出し"を画像使わずにCSSで作る方法 | エンタープライズ | マイコミジャーナル
Filament Group ツールティップとしての吹き出しエフェクトはWebページでは広く使われるようになったUIのひとつだ。吹き出しの四隅は丸みを帯びて角の外側は透過表示になり、吹き出しを示すための小さい突起がついているところに特徴がある。多くの場合で背景画像がこれらUIを実現するために使われる。 Filament Groupにおいて、これに背景画像を使わずCSSと若干のHTML、それに多少のJavaScriptを使って実現する例がImage-free CSS Tooltip Pointers - A Use for Polygonal CSS?として紹介されている。Filament GroupではjQuery UIウィジェットの開発中にこの問題にあたり、CSSで多角形を描画するためのよく知られたトリックといくつかの工夫を凝らすことでこれを実現したと説明している。 背景画像を使わないで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IDEA * IDEA
[JS]クロスブラウザ対応、背景をアニメーションで変更するスクリプト -Blend
http://www.designwalker.com/2009/03/form-design-2.html
