[JS]Responsiveデザイン用のスタイルシートファイルのロードを最適化するスクリプト -eCSSential
Responsiveデザイン用に用意した複数のスタイルシートファイルのロードを最適化する超軽量（2KB）のスクリプトを紹介します。 eCSSential -GitHub [ad#ad-2] スタイルシートファイルのロードの注意点 eCSSentialとは eCSSentialの使い方 スタイルシートファイルのロードの注意点 スタイルシートファイルのローディングの最適化、あるいは優先順位をつける方法は非常に難しいです。ウェブサイトがクリーンなロードをするためには、ページレイアウトのレンダリングに必要なスタイルシートがドキュメントのhead内に配置されなくてはいけません。 もし、スタイルシートがドキュメントより後ろに配置、あるいはJavaScriptで動的に配置される場合は、ページのレンダリングと共ににスタイルシートのロードが始まってしまうので、ページの表示が遅くなります。 Responsiv
Home - VEGAS STRIP LEGAL REVIEW
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
[JS]一味違ったアイデアでレスポンシブ対応のテーブルを実装するスクリプト -Responsive tables
サイズが変更されても、ハイライト表示はできます。 Responsive tablesの使い方 Step 1: スタイルシート スタイルシートをhead内に外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/rwd-table.min.css"> </head> Step 2: スクリプト スクリプトを</body>の上あたりに記述します。 <body> ... <script type="text/javascript" src="js/rwd-table.js"></script> <script> $(function() { $('.table-complex').responsiveTable({ adddisplayallbtn: true, addfocusbtn: true, fixednavbar: '#n
[JS]Responsiveデザインでサイズ可変の画像でもクリッカブルマップ対応にするスクリプト -RWD Image Maps
実装も簡単で超軽量、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
jQuery Mobile 1.3β公開。レスポンシブなテーブル、グリッド、追加コンポーネントなど大幅強化
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をスマホ用に変形
デスクトップ用に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="
シンプルで汎用性に優れたレスポンシブ対応のタブコンテンツ -Basic Tabs
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
[JS]コンテンツをデスクトップ時はタブに、タブレット・スマフォ時はアコーディオンにするスクリプト
シンプルなHTMLで、デスクトップ時は水平・垂直のタブに、タブレット・スマフォ時はアコーディオンに自動変更（指定も可）するレスポンシブ対応のjQueryのプラグインを紹介します。 Easy Responsive Tabs to Accordion Easy Responsive Tabs to Accordion -GitHub 特徴 デモ 使い方 特徴 レスポンシブ対応のタブをシンプルなHTMLで簡単に実装可能。 デスクトップ時はタブ、スマフォ時はアコーディオン。 同じページに複数のタブをセット可能。 IE7+を含むクロスブラウザ対応。 デスクトップ、タブレット、スマフォのクロスデバイス対応。 デモ デモはIE7+を含むデスクトップ、タブレット、スマフォでご覧ください。 まずは、デスクトップサイズで表示してみます。 デモページ：幅1200pxで表示 デスクトップ時はタブで、上：水平型、下
tableをレスポンシブWebデザインに対応させるスクリプト・FooTable - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 table要素をレスポンシブに対応させる、というスクリプトです。他にも同じようなスクリプトは存在しますが実用的ではなかったので紹介してなかったですけどこれはアリな気がします。 table要素をレスポンシブに対応させるjQueryプラグインです。他にもMediaTableやzurbのスクリプトもあります。 ウィンドウサイズの幅が狭くなると、表示しきれないカラム部分をタップによる表示式に切り替える、というもの。 上記のようにタップすると非表示部分のカラムの内容が表示されます。ユーザーにとっても分かりやすい気がしました。 公式の動作サンプルです Sample コード <script src="http://ajax.googleapis.com/ajax/libs/jqu
ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」:phpspot開発日誌
ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 2012年11月22日- Responsive Img - a jQuery Plugin for Responsive Images ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 単に画像をリサイズするだけではなくsrcも置き換えてくれるそう。 PC版を単に縮小するのではなくて、スマホでは別の画像を使う、といった場合にも使えそうですね ブラウザサイズに応じて別の画像に切り替えて最適化したいという場合はそれなりにあると思うので、覚えておいてもよさそうですね 関連エントリ WEBデザインする人なら入れておきたいレスポンシブWEBサイト作成に役立つブックマークレット「Viewport Resizer」 レスポンシブ
[JS]単に縮小して表示するだけではない、レスポンシブ対応の画像ギャラリーのスクリプト -Gamma Gallery
単にウインドウのサイズに依存して縮小するのではなく、コンテナのサイズに応じてグリッドを最適化し、そのサイズに最適な画像を表示する画像ギャラリーを実装するスクリプトを紹介します。 Gamma Gallery: A Responsive Image Gallery Experiment デモページ Gamma Galleryのデモ Gamma Galleryの使い方 Gamma Galleryのデモ まずは、デスクトップで表示したデモからご紹介。 画像の配置にはMasonryを使用しており、高さが異なる画像を一定の隙間で配置します。また、無限スクロールにも対応しており、下部にスクロールするとローディングバーが表示されます。 デモページ：スマフォで表示 Gamma Galleryの使い方 Step 1: 外部ファイル Gamma Galleryのスクリプト自体はjQueryのプラグインではありま
Animating with CSS Transitions · jQuery Masonry
Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]表示サイズに合わせて、さまざまな要素のサイズやレイアウトをアニメーションで変更するスクリプト -JResponsive
[JS]面倒なスマフォ・タブレットでの異なるビューポートサイズの確認が簡単にできるスクリプト -rFrame
Responsive Cat