css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
IE6ではselect要素にz-indexが定義されていない - F.Ko-Jiの「一秒後は未来」
IE6(おそらくIE6以前)では、select要素にCSSのz-indexが定義されていません。z-indexというのはレイヤーの重なりの順番です。 そのため、select要素のある画面にdiv要素でレイヤーを被せようとすると、IE6ではレイヤーの上にselect要素だけ残って表示されてしまいます。 これを防ぐためには、レイヤーをiframe(インラインフレーム)にするか、レイヤーを表示するときにJavaScriptを使ってselect要素を visibility:hidden にする必要があります。 var elems = document.getElementsByTagName("select"); for (i = 0; i < elems.length; i++) { elems[i].style.visibility = "hidden"; } もしくは、 /* CSS */
jQueryでアコーディオンパネルUIを自作する (1/3)
「アコーディオンパネル UI」の完成画面。ラベル部分をクリックすると、下に隠れていたパネルが表示される（画像クリックでサンプルページを表示します） シンプルなアコーディオンを作ってみよう アコーディオンの基本動作から作ります。HTML／XHTML（以下、HTML）は次のとおりで、ラベル部分をdt要素、パネル部分をdd要素で記述する定義型リストで設定します。 ▼サンプル01（HTML部分） <dl> <dt>Step.1</dt> <dd><p>Lorem ...（中略）... venenatis.</p></dd> <dt>Step.2</dt> <dd><p>Integer ...（中略）... accumsan. </p></dd> <dt>Step.3</dt> <dd><p>Integer ...（中略）... imperdiet. </p></dd> </dl> デザインはCSS
『ロールオーバー今昔物語』サポートページ
鷹野雅弘（スイッチ） 2009年7月17日に開催したCSS Nite in OSAKA, Vol.17のフォローです。 Webは「クリックされてナンボ」。そこがクリッカブルであることが伝わらなければ、意味がありません。 クリッカブルであることを表現するひとつの手段として王道のロールオーバー効果も、DreamweaverやFireworksが自動的にはき出すJavaScriptを使ったものから、画像置換を使ったもの、そして、jQueryを使ったもの、さらにCSSのみで透明度を変更するものなど、その実装は変遷を遂げてきています。 これまでの流れをざっくり復習しながら、作り手/使い手両方がハッピーなロールオーバーはどこに向かうのかを一緒に考えましょう。 ロールオーバーの意味と意義 ロールオーバー（マウスオーバー）とは？ マウスポインタが重なったときに、次のいずれかのような変化を起こすこと 文字
Chrome 拡張機能でウェブ制作をより快適に
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
ブラウザの画面を100%使い切ってページを表示する - jiroの日記
デスクトップアプリケーションを開発していると、ウィンドウの大きさに合わせてウィンドウのメイン部の中身の大きさが動的に変わったりします。しかし、Webアプリケーションでは、なかなかそういう風に作ったりはせずに、画面が小さければ、スクロールバーで移動することが多いです。 でも、やっぱりそういう事をしたいときもあるので、ブラウザの画面の高さを100%使い切って表示してみます。 とりあえず動かしてみる とりあえず動作画面。表示したウィンドウを大きくしたり小さくしたりしてみてください。真ん中の部分が大きくなったり、小さくなったりしていると思います。 ポイント 標準化されていないもののJavaScriptではViewPortを取得する事ができます。クロスブラウザ用のソースコードはここを参照させていただきました。 var getViewPort = function() { var width, hei
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
jQuery でページスクロール - daily dayflower
jQuery 1.2 以降だと scrollTop（と scrollLeft）という疑似スタイルが利用できるようになったので，jQuery UI を使わずとも，jQuery Core 本体だけでページ内スクロールができるようになりました。 たとえば， <html> <body> <p> blah, blah, blah, ... blah, blah, blah, ... </p> <p> <a href="#" id="link_to_top">ページの先頭へ</a> </p> </body> </html> このような HTML で「ページの先頭へ」というリンクをクリックしたときに，スムーズにスクロールしたいのなら， $(function () { if (! $.browser.safari) { $('#link_to_top').click(function () { $(thi
RedLine Magazine : jQueryでnの倍数だけに何か処理する（追記有）
jQueryでnの倍数だけに何か処理する（追記有） >>081007：追記1 :nth-child について追記しました。 >>081007：追記2 :lt について追記しました。 今までのバックナンバーリストを一覧でダダダーと並べてるページがあって、（このサイトで言うと全エントリのアーカイブページみたいなページ）リストの件数が少なかった時は特に何も感じなかったんだけど、サイト公開から時間が経って「数が増えてなんか見難くない？」みたいな話になった。 で、5件分ごとに区切り線入れたいっていう提案をされて了解したけど、なんかどんな方法が効率いいんか迷った。手作業で5件目ごとにclass振っていく様な手数増える方法でもいいんだけど、今新しいのが上、古いのが下ってなってる状態で上から順番に5件目毎にclass付けした所で更新の度に1つずつズラしていくの？手数増えるにも程があるｗｗｗみたいな発想にな
AptanaでWebページ作成はここまでできる！（1/3） ― ＠IT
AptanaでWebページ作成はここまでできる！：どこまでできる？ 無料ツールでWebサイト作成（1）（1/3 ページ） 以前、無償版のWebオーサリング（サイト作成）ツールを特集でカタログ的に紹介したが、皆さまの興味は「業務レベルでどの程度使えるのか」という部分にあるのではないだろうか？ そこで、本連載では各ツールを使用したサイト開発を掘り下げていこう。 まずは第1弾として、2回にわたり「Aptana」の紹介を進めていく。第1回では静的なサイト構築を想定した開発、第2回ではプラグインの追加により可能となるAdobe AIRなどの動的コンテンツ開発を中心に紹介していこう。 無料Webサイト作成ツールの最有力候補「Aptana」 EclipseベースのIDE（統合開発環境）であるAptanaは、コード補完機能やリファレンス機能など、充実度の高さが売りのオーサリングツールである。 オープンソー
IE5～8をCCS3の疑似セレクタ対応にするスクリプト - ie-css3.js
CSS3に対応していないIE5/6/7/8をCSS3の擬似セレクタに対応させるスクリプトを紹介します。 ie-css3.js 対応するセレクタは、下記の11種類です。 :nth-child :nth-last-child :nth-of-type :nth-last-of-type :first-child :last-child :only-child :first-of-type :last-of-type :only-of-type :empty スクリプトの動作は、セレクタを見つけたらシミュレーションしたものに変更されて適用されている、とのことです。 スクリプトの使用方法は、DOMAssistantと併用し、外部スクリプトとして記述します。 <textarea name="code" class="html" cols="60" rows="5"> <head> <script t
MdN Design｜総合情報サイト
Web制作が楽しくなるCSS3/JavaScriptのテクニック50 - 海外デザイン事情第6回 新規会員登録 ログイン管理 Twitter facebook はてなブックマーク RSS 2025.7.16 WED 第6回「Web制作が楽しくなるCSS3/JavaScriptのテクニック50」 2010年02月15日 ブラウザ対応が進み、本格普及が間近となったCSS3。海外ではすでに多くのCSS3を使ったデザインテクニックが公開されている。ここではSmashing Magazineに掲載された「50 Brilliant CSS3/JavaScript Coding Techniques」をもとに、CSS3に関する海外の最新テクニックを紹介しよう。 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：50 Brillian
corner.js (with IE 6/7 support)
corner.js 2.1 allows you to add corners (and also shading and shadow) to images on your webpages (alternatively: glossy.js). It uses unobtrusive javascript to keep your code clean. It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing. CVI-lab: Get a fast impression of the effects and their illu
Google製、JavaScript/CSSの難読化＆キャッシュ·Reducisaurus MOONGIFT
ReducisaurusはJava製/Google App Engine用のオープンソース・ソフトウェア。Webアプリケーションが隆盛になり、JavaScriptを多用したシステムやCSSによる凝ったデザインのサイトが増えてきた。それぞれフレームワークを使ったりして複数のファイルを扱うケースも多い。 設定方法 JavaScriptやCSSのファイルを複数読み込むにはその分だけコネクションを行う必要があり、負荷がかかってしまう。そこで使ってみたいのがReducisaurusだ。ローカルファイルやリモートのファイルを読み込んで一つにまとめてアクセスできるようになる。 ReducisaurusはGoogleのエンジニアでJaikuの開発にも関わっているプログラマによるソフトウェアだ。実行はGoogle App Engine上で可能になっている。自分でサーバを立てることもできるし、Reducisa
jQueryで幅の大きなドロップダウンメニュー作成チュートリアル:phpspot開発日誌
jQueryで幅の大きなドロップダウンメニュー作成チュートリアル。 ドロップダウンというと、単一の列を想像しますが、実際には、横に広がったほうが見やすいかもしれませんね。 次のような幅の広いドロップダウンメニューを実装する例になってます。 同じようなドロップダウンの例も色々公開されていてリデザインの際の参考にできるかもしれませんね。 以下のエントリを参照してください。 Mega Drop Down Menu w/ CSS & jQuery | Dropdown Menu | drop down menus | CSS Menu Tutorial | Drop Down Menu Tutorial
30分でできる！Webサイトを高速化する6大原則 (1/4)
Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう
jmblog.jp - IEでa要素以外に:hover擬似クラスを適用させる
IE6以下では、:hover擬似クラスが <a> 以外では適用されません。が、この問題の解決策が紹介されているサイトを発見しました。 » WEBFACTORY ::: BLOG: IEでhoverをa以外に効かせる » Hackadelic: csshoverを使ったWeb StandardなCSSコーディング それぞれで紹介されているとおり、Whatever:hover で配布している csshover.htc というスクリプトを使えば、IEでもいろんな要素に:hoverを適用させることが出来ます。（ダウンロードの場所がちょっとわかりづらいですが、Changes のなかにあります。） 使い方は、css で以下のように書くだけ。
タブUI詳解
タブUIの構造や特長、設置の判断、ユーザビリティ、アクセシビリティ、実装のポイントや機能の拡張方法、実装例やスクリプト例をSmashing Magazineから紹介します。 Module Tabs in Web Design 以下、その意訳です。 ※原文では「タブモジュール」となっていますが、タブモジュールやタブUIと記載すると煩雑になるため、「タブ」と略します。 タブのみを指す場合は、「タブ コントロール」としています。 はじめに 1. タブの構造 2. タブはいつ使用するのか 3. タブのユーザビリティとベストプラクティス 4. タブのアクセシビリティ 5. タブの拡張 6. タブの実装集 7. タブを実装するためのチュートリアル集 8. タブを実装するスクリプト集 はじめに タブモジュールは複数のコンテンツを異なるパネルに配置したユーザインターフェースのデザインパターンです。 パネル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site Under Maintenance
Site Under Maintenance