Captcha security check hisasann.com is for sale Please prove you're not a robot View Price Processing
HugeDomains.com
Captcha security check hisasann.com is for sale Please prove you're not a robot View Price Processing
要素の表示/非表示をトグルするベストプラクティス - hogehoge @teramako
[JavaScript] tr要素 の display プロパティを用いた表示切替えについて | Blog | Development Reference を読んで、display = "block" はアカンやろ、と思ったので書いておく。 <div id="foo"> <p>FOO</p> </div> div#foo を JavaScript から表示/非表示をするには。 ダメパターン function show (elm) { elm.style.display = "block"; } function hide (elm) { elm.style.display = "none"; } これはダメなパターン。何故なら、show 関数が対象とする要素が、display: block で合っているか保証がないから。 場合によっては、inline,inline-block,table,
スクロールするとサイドバーの広告が追いかけてくる風の作り方 : IT速報
こんにちは！このブログを作って2ヶ月が経ちました(^^) 少し間が空きましたが、サイト制作日記を書いてみます！ 今回は２ｃｈまとめサイトにありがちなスクロールするとサイドバーの広告が追いかけてくるようなものを作ってみました。 まとめ記事じゃなくて申し訳ありません(>_<)たまーーーに。ほんとたまーーーーーに、こんなサイト制作日記たるものを書いちゃいます。ご容赦くださいm(__)m 何のことだ？って人は当ブログの右サイドバーを見てください。Amazonの広告が追いかけてくるはずです。 これ難しそうに見えて、めちゃくちゃ簡単に実装できるので是非ここでコードを盗っていってください(^^) jqueryを使う 簡単に実装するためにjqueryを使います！jqueryとはjavascriptライブラリです(^^) このjqueryを使うためには下準備が必要になります。 本家のhttp://jquer
CSS3のふわりとしたアニメーションが気持ちいい画像ギャラリーを実装するチュートリアル
CSS3アニメーションとjQueryを使って、アニメーションの動きが気持ちいい水平型のギャラリー・ポートフォリオを実装するチュートリアルを紹介します。 デモページ：サムネイルのホバー時 サムネイルのホバー時だけでもキャプションの表示だけでなく、画像などのサイズ変更、テキストの表示、各アイテムの可視化、配置変更などもアニメーションで行われています。 実装 実装はポイントをまとめて紹介します、Stepは3つです。 元記事では詳細に書かれているので、参考にしてください。 Step 1: HTML 画像、2つのパラグラフ、タグが一つのセットになっており、それぞれをリスト要素で実装します。 <ul class="portfolio-items"> <li class="item"> <figure> <div class="view"> <img src="images/1.jpg"> </div>
『PhantomJSを使ったスマホサイトテストの自動化(前編)』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさんこんにちは！ スマホ版Ameba担当の川口です。 ちょうど一年前、同じようにJavaScriptを使ったテスト手法について記事を書かせていただいたのですが、今回も懲りずにまた同じようなテーマで再登場いたしました。 JavaScriptのテスト手法 さて、スマホ版Amebaの全面リニューアルから早くも１年経ったのですが、今回はそんなスマホ版Amebaで日々自動テストツールとして活躍してもらっているPhantomJSを紹介させていただきます。 長い記事になるため、今回は前編・後編に分けて以下のような構成でお送りいたします。 ●前編 ・Phanto
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由を調べてみました。 １．はじめに TwitterやPocketなどのソーシャルボタンのコードをみると、共通してscript要素の中にあるfunctionの前に「!（エクスクラメーション）」がついています。 Twitterの場合 <a href="https://twitter.com/share" class="twitter-share-button" data-via="yujiro" data-lang="ja" data-size="large">ツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getE
jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
何でも埋め込めてカッコいいモーダルダイアログ実装用jQueryプラグイン「Pop Easy」:phpspot開発日誌
Pop Easy | by Thomas Grauer 何でも埋め込めてカッコいいモーダルダイアログ実装用jQueryプラグイン「Pop Easy」 モーダルダイアログ実装用のプラグインは色々ありますが、次のようなカッコよくスタイリングされたダイアログが実装できます ダイアログの他、動画、IFRAMEの埋め込みが可能っぽいです CSSなので当然リデザインは可能ですが、初期デザインをちょっとカスタマイズして自サイト用にするだけで完成度の高いものが実装できそうですね 関連エントリ jQueryでモーダルダイアログを実現するプラグイン２０ クールなモーダルダイアログ実装ライブラリ「SimpleModal」
商用利用可のフリーjQuery Lightboxプラグインまとめ
写真の拡大やギャラリーページなどに良く利用される... / レスポンシブデザイン対応Lightboxプラグイ... / Swipebox | A touchable j...他...全12件 写真の拡大やギャラリーページなどに良く利用されるプラグイン。近年のサイト制作で使わないことがない最もポピュラーなプラグインです。 最近ではスマートフォン対応の有料プラグインも続々登場。さらに便利に使いやすく進化してはいますが、商用だと有料化が進んで、以前に比べると無料のプラグインを見つけ辛くなりました。 そこで、ここでは最近のフリーで使えて商用利用可能なLightboxプラグインをご紹介いたします。
[JS]納品前の確認に最適、使用されていないCSSのセレクタを見つけ出すスクリプト -Helium
ウェブサイトの多数のページ全体に渡り、スタイルシートで定義されたセレクタが使用されているかどうかチェックし、使われていないセレクタのレポートを生成するスクリプトを紹介します。 納品する際に、不要なセレクタを除去するのに役立ちますよ。 Helium -GitHub Heliumの準備 Heliumの使用方法 Heliumの準備 HeliumはjQueryなど他のスクリプトを必要せず動作し、URLのリストから全てのページをロードし、解析して、スタイルシートで見つけたセレクタが全ページで使用されているかどうかチェックし、レポートを作成します。 スクリプトは、開発環境で実行してください。 公開中のサイトで実行すると、ユーザーにもHeliumの動作が見えてしまいます。 Step 1: 外部ファイル テストするページの全てに、当スクリプトを外部ファイルとして記述します。 場所は、head内でも</bo
データバインディングによるインタラクティブなUIの効率的な表現
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生！ 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 スライドのアニメーションがとても滑らか・ちらつかない ボタンの反応にストレスを感じない メイ
要素を天地左右中央に配置できる簡単超軽量スクリプト -Midway.js | コリス
デスクトップやスマフォ・タブレットのレスポンシブ対応で、画像やテキストなどを天地左右の中央に簡単に配置できる超軽量（1KB）のスクリプトを紹介します。 作業は、HTMLに2つ追加するだけです。 Midway.js Midway.jsのデモ Midway.jsの使い方 Midway.jsのデモ 天地左右中央配置は表示サイズを変更しても、変わらずに天地左右中央配置になります。 デモは、ブルーの矩形の中に、ホワイトの要素を天地左右中央配置にしています。 まずは、デスクトップサイズから。 デモページ：IE7モードで表示 Midway.jsの使い方 使い方は簡単で、ステップは2つです。 Step 1: 外部ファイル head内に、スクリプトを外部ファイルとして記述します。 <head> <script src="http://code.jquery.com/jquery-latest.js"></s
[JS]コンテンツをデスクトップ時はタブに、タブレット・スマフォ時はアコーディオンにするスクリプト
シンプルなHTMLで、デスクトップ時は水平・垂直のタブに、タブレット・スマフォ時はアコーディオンに自動変更（指定も可）するレスポンシブ対応のjQueryのプラグインを紹介します。 Easy Responsive Tabs to Accordion Easy Responsive Tabs to Accordion -GitHub 特徴 デモ 使い方 特徴 レスポンシブ対応のタブをシンプルなHTMLで簡単に実装可能。 デスクトップ時はタブ、スマフォ時はアコーディオン。 同じページに複数のタブをセット可能。 IE7+を含むクロスブラウザ対応。 デスクトップ、タブレット、スマフォのクロスデバイス対応。 デモ デモはIE7+を含むデスクトップ、タブレット、スマフォでご覧ください。 まずは、デスクトップサイズで表示してみます。 デモページ：幅1200pxで表示 デスクトップ時はタブで、上：水平型、下
HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA
スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか？ 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA（シングルページアプリケーション）など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。
Writing Testable JavaScript
We’ve all been there: that bit of JavaScript functionality that started out as just a handful of lines grows to a dozen, then two dozen, then more. Along the way, a function picks up a few more arguments; a conditional picks up a few more conditions. And then one day, the bug report comes in: something’s broken, and it’s up to us to untangle the mess. As we ask our client-side code to take on more
レスポンシブ対応サイトを作成する超軽量のスクリプト -skel.js | コリス
スタンドアローンで動作する19KBの超軽量スクリプト。 さまざまなレイアウトに対応できるグリッド。 表示サイズごとのブレイクポイントの設定も簡単。 resetやbox-modelなどの有用なCSSのショートカットを用意。 プラグイン機能も備えているので、拡張にも対応。 skel.jsのデモ デモはシンプルな構成のページが表示が用意されています。 まずはデスクトップサイズとして、幅1200pxで表示してみます。 デモページ：幅480pxで表示 skel.jsの使い方 jQueryや他のスタイルシートなどを用意せずに、すぐに利用できます。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="skel.js"></script> jQueryもスタイルシートも他のファイルは必要ありません。 Step 2: スクリプトのセットアップ スクリプトのセ
HTML/JavaScriptを使ってAndroidモックアップアプリをさくさく作ろう！·Fries MOONGIFT
FriesはHTML/JavaScriptを使ってAndroidモックアップアプリを開発できるソフトウェアです。 Androidの普及はiOSを抜き去り、アプリもどんどん増えています。そんな中にあって必要になるのが素早くAndroidアプリを作る技術です。今回はWebブラウザを使ってモックアプリを作っていけるFriesを紹介します。 デモです。左側にAndroid端末のモックが出ています。 シンプルなタイトルを表示した例。 メニューを追加した例。 メニューアイコンをタップするとメニューが表示されます。 タブ。 ボタン。 リスト。 複数行のリスト。 iScrollにも対応しています。 Friesを使って作法に則って進めるとAndroid 4.0系のUI風モックアップアプリが簡単に作成できます。簡易的に作成できるなら、どんどん試して色々な機能を試すことができます。さらにPhoneGapなどでラ
HTML/CSS/JavaScriptを編集してその場で結果確認·Editr MOONGIFT
EditrはWeb上でHTML/CSS/JavaScriptを編集して結果を確認できるサービスです。 最近、Jsdo.itのようにWeb上でコードを書いてその結果を確認できるサービスの人気があります。そのオープンソース版とでも言うべきなのがEditrです。 結果ページ。 JavaScriptの編集を行えます。 こちらはスタイルシート。 HTML。この3つを組み合わせて結果ページになります。 複数のHTMLを切り替えられます。 EditrはHTML/CSS/JavaScriptをWeb上で記述して、その結果もオンラインで確認ができます。ちょっとしたコードを試したり、一部の機能だけを取り出して遊んでみると言った時に使えそうです。 EditrはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 MOONGIFTはこう見る プレイグラウンド的なサービスは特にWeb
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Home
