Promote Your Social Media and Websites for FREE with YouLikeHits! Looking to grow your online presence without breaking the bank? YouLikeHits offers a simple and free solution to promote your social media profiles and websites. Whether you’re an aspiring influencer, content creator, or business owner, YouLikeHits provides powerful marketing tools that can help you succeed across platforms like Twi
2月10 レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 カテゴリ:javascriptiphone/ipadサイト Tweet レスポンシブデザインのサイトを作っていて、 ブレイクポイントの設定はcssのmedia-queryでやることが多いと思う。 でも動的な処理がからむ部分で変更があるときはjsでも切り替えを行う。 window.resize() とかで。 んで、今回、cssとjsで両方で同時に切り替わるようにしていたのだけれど、 どうやらwin端末だと切り替えのタイミングがズレることがわかった。 css → 768pxで切り替えたい → @media screen and (max-width: 768px) → ちゃんと768pxで切りかわる js → 768pxで切り替えたい → if($(window).innerWidth() < 768){ → 78
Legal Insights on the Vegas Strip: Navigating the Complexities of Law Las Vegas is renowned worldwide as a city of entertainment, excitement, and high stakes. With its dazzling lights, world-class casinos, and endless entertainment options, the Vegas Strip attracts millions of visitors annually. However, behind the allure of this vibrant city lies a unique set of legal challenges. From personal in
スマホなどの小さいスクリーンでは昔からあるLightbox風の体験を与え、より大きいスクリーンではページ上にインタラクションのスペースを残すよう設計された、画像や動画をアニメーションで拡大表示させるjQueryのプラグインを紹介します。 フラットなデザインにも相性が非常によく、操作も快適でエレガントです！ しかも、IE7+にも対応。 Strip Strip -GitHub Stripのデモ Stripの使い方 Stripのデモ デモはChrome, Safari, Firefox, Opera, IEは7+、iOS5+, Android3+でご覧ください。 各画像をクリック・タップすると、拡大画像がスライドして表示されます。 拡大時はそのまま他の画像も表示できるギャラリー機能にも対応しています。 デモ：幅780pxで表示 スライド表示させるのは画像だけでなく、YouTubeやVimeoなど
![[JS]Lightboxの進化形！操作性が快適でフラットなデザインにもぴったりなレスポンシブ対応のスクリプト -Strip](https://cdn-ak-scissors.b.st-hatena.com/image/square/b4b391a890221ac5696699ef145a5921c27e5824/height=288;version=1;width=512/https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014100601-01.png)
画像やコンテンツを配置したパネルを次々に水平・垂直にスライドして表示するカルーセルのスクリプトを紹介します。 自由度の高いカルーセルってなかなか無いのですが、「ラスト カルーセル」とサブタイトルがついてるくらい探し回って最後にたどり着くのはこれという出来です。 slick slick -GitHub slickの特徴 slickのデモ slickの使い方 slickの特徴 「the last carousel」とあるだけあって、カルーセルとしての機能は全て備えています。 レスポンシブ対応 CSS3はサポートブラウザ時に動作 オートプレイ対応 ナビゲーションはドット・アローの選択が可能 矢印キーでのキーボード操作に対応 ドラッグ・スワイプ操作に対応 無限ループ対応 slickのデモ デモでは、さまざまなカルーセルの動きを試せます。
レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 【追記 2014.03.19】 元々のタイトルは「レスポンシブWebデザインに対応した横メニューの作り方」でしたが、よく考えるとスマホ対応になったら縦メニューになりますのでタイトルを変更しました。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 12.5%; margin: 0; paddi
「FlexNav」は、クロスブラウザー（IEは7以降）対応のドロップダウンメニューを簡単に実装できるjQueryプラグインです。レスポンシブに対応しているほか、ネスト（入れ子構造）のメニューも作れるので、非常に使い勝手のいいプラグインですね。 Android 2.2以降に対応しているので、古いスマートフォンへの対応を求められる案件で特に重宝します。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、FlexNav を配布ページからダウンロードしましょう。FlexNav は github で公開されており、ページ右下の「Download ZIP」ボタンからダウンロードします。 jQuery本体と「jquery.flexnav.min.js」を、利用するWebページの body の閉じタグ直前に読み込みます。 //(中略) <script src="
実装も簡単で超軽量、Responsiveデザインで画像のサイズが変わってもクリッカブルマップの座標を計算しなおすjQueryのプラグインを紹介します。 デモページ：幅480pxで表示 [ad#ad-2] RWD Image Mapsの使い方 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="jquery.rwdImageMaps.min.js"></script> HTML HTMLはクリッカブルマップを通常通り記述するだけです。 <img src="powerpuff-girls.fw.jpg" width="1024" height="768" usem
HTML5のマークアップだけでモバイル対応のWebアプリが構築できるJavaScriptフレームワークのjQuery Mobile。レスポンシブWebデザインにフォーカスし大幅に強化された新バージョンjQuery Mobile 1.3βが公開されました。 jQuery Mobile 1.3では、表示幅に対応して自動的にフォーマットが変化する「Responsive tables」や「Responsive grids」、1つのスライダーで値を2つ設定できる「Range Slider」、新しいウィジェットの「Panel」をはじめ、多くの機能追加が行われています。 ブログでは、今回のバージョンでレスポンシブWebデザインにフォーカスする経緯について、以下のように説明しています。 We’ve seen the question “What should I use: RWD or jQuery Mo
デスクトップ用にtableで実装された表組みをスマフォでも最適に見えるよう変更するjQueryのプラグインを紹介します。 既存のテーブルにも簡単に対応でき、しかも1KBと超軽量です。 デモページ：幅480pxで表示 左：ヘッダ有り、右：ヘッダ無し 一つのアイテムに対して、それぞれ対応する項目が配置されるようになっています。 ReStableの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="jquery.restable.min.js"></script> <link rel="
Demo 2: Page 右上の「Change width」ボタンをクリックすると、表示サイズが変更されます。 ReSRC.itの使い方 ReSRC.itを利用するには、アカウントを作成します（無料）。 HTML 画像を配置するベーシックなHTMLは下記のようになります。 <!doctype html> <html> <head> <title>Hello Responsive Web</title> </head> <body> <img src="http://app.resrc.it/http://www.resrc.it/img/demo/demo-image-1.jpg" width="100%" class="resrc"/> <script src="http://www.resrc.it/responsive.js"></script> </body> </html> スタ
Masonryはかっこいいけどパネル移動のアニメーションがちょっとな、という人にぴったりな、レスポンシブ対応でレイアウト変更時のアニメーションもスムーズでかっこいいグリッドを生成するjQueryのプラグインを紹介します。 Grid—A—Licious Grid—A—Licious -GitHub Grid—A—Liciousのデモ Grid—A—Liciousの使い方 Grid—A—Liciousの実装例 Grid—A—Liciousのデモ まずは、Grid—A—Liciousのベーシックな動作が確認できるデモからご紹介。 アレンジは、下記のGrid—A—Liciousの実装例で。 ページいっぱいに高さの異なるパネルが同じ間隔で配置されています。 デモページ：スマフォサイズ Grid—A—Liciousの使い方 Grid—A—Liciousは2008年にリリースされた当時は単にグリッド状に
単にウインドウのサイズに依存して縮小するのではなく、コンテナのサイズに応じてグリッドを最適化し、そのサイズに最適な画像を表示する画像ギャラリーを実装するスクリプトを紹介します。 Gamma Gallery: A Responsive Image Gallery Experiment デモページ Gamma Galleryのデモ Gamma Galleryの使い方 Gamma Galleryのデモ まずは、デスクトップで表示したデモからご紹介。 画像の配置にはMasonryを使用しており、高さが異なる画像を一定の隙間で配置します。また、無限スクロールにも対応しており、下部にスクロールするとローディングバーが表示されます。 デモページ：スマフォで表示 Gamma Galleryの使い方 Step 1: 外部ファイル Gamma Galleryのスクリプト自体はjQueryのプラグインではありま
サイズを変更するとアニメーションでパネルが移動するなどの派手な演出は一切無しで、レスポンシブ対応のレイアウトを素早く提供するjQueryのプラグインを紹介します。 jquery.columns -GitHub jquery.columnsのデモ jquery.columnsの使い方 jquery.columnsのデモ 対応ブラウザは、IE9/10, Firefox, Chrome, Safari, Operaです。 まずは、デスクトップサイズとして幅1,200pxでの表示から。 デモページ：幅480pxで表示 jquery.columnsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.
jQueryとCSS3アニメーションを使ってシンプルに実装する、レスポンシブ対応のタブコンテンツを紹介します。 BasicTabs - The Simple jQuery/CSS3 Solution Basic Tabsのデモ Basic Tabsの実装 Basic Tabsのデモ タブはレスポンシブ対応で、表示サイズに合わせて最適化されます。 タブの切替はCSS3アニメーションで、左からフェードインで表示されます。このエフェクトの変更は簡単です。 デモページ：幅480pxで表示 Basic Tabsの実装 実装は非常にシンプルなので、カスタマイズも簡単だと思います。 Step 1: HTML HTMLは非常にシンプルで、タブはリスト要素、コンテンツはdiv要素で配置します。 <div id="tabwrap"> <!-- TABS --> <ul id="tabs"> <li class
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
