divなどで配置したパネル内の要素の量が異なっていても、全てのパネルの高さを揃えるjQueryのプラグインを紹介します。 高さを揃える系としては後発のスクリプトですが、レスポンシブにしっかり対応しているのがポイントです。 一列のパネルはもちろん、段組でもOK、省スペースのスマフォ用に成り行きもコントロールできます。
[JS]レスポンシブにしっかり対応！高さの異なるパネルを揃えたり、成り行きにするスクリプト -EqualHeight.js
divなどで配置したパネル内の要素の量が異なっていても、全てのパネルの高さを揃えるjQueryのプラグインを紹介します。 高さを揃える系としては後発のスクリプトですが、レスポンシブにしっかり対応しているのがポイントです。 一列のパネルはもちろん、段組でもOK、省スペースのスマフォ用に成り行きもコントロールできます。
Quick Start
Getting StartedQuick StartAjaxAPIClassContextDomEventsModuleOptionsServiceThemingModulesAlertBreadcrumbBreakpointButtonColorDropdownFormGridHelpersLabelLayoutMixinsModifiersNavbarOffcanvasPagerSpaceStickyTableTabsToggleTypographyServicesAppAnimateLangMessageModalModalFormModalElementProgressResponseUtilsAddonsAutocompleteCheckComboboxDatepickerEditableMagicQueryNumberSelectorSliderUploadValidateVi
コンテンツ毎にサイドバーを固定配置できるjQueryプラグイン「Stick ’em」:phpspot開発日誌
jQuery Stick ’em: Make Content Sticky on Scroll, to a Point | Viget コンテンツ毎にサイドバーを固定配置できるjQueryプラグイン「Stick ’em」。 最近よくある、ページをスクロールしてもついてくるサイドバー。position:fixedなどを応用して綺麗についてくるようにできますが、コンテンツが大きく３つに分かれている場合はちょっと実装が難しいかも。 そんな時に使えるのがこのプラグイン。デモページを見て頂ければ分かりますが、コンテンツごとに固定されるサイドバーをわけられるようです。 スクロールしても、サイドバー「Heading」と書かれた部分は右側に固定されて表示されます。 更にスクロールするとコンテンツが別れるので、それ以上は下に来ません。 １から実装するとなるとpositionの切り替えが結構大変で挫折しがちな
tableをレスポンシブWebデザインに対応させるスクリプト・FooTable - かちびと.net
table要素をレスポンシブに対応させる、というスクリプトです。他にも同じようなスクリプトは存在しますが実用的ではなかったので紹介してなかったですけどこれはアリな気がします。 table要素をレスポンシブに対応させるjQueryプラグインです。他にもMediaTableやzurbのスクリプトもあります。 ウィンドウサイズの幅が狭くなると、表示しきれないカラム部分をタップによる表示式に切り替える、というもの。 上記のようにタップすると非表示部分のカラムの内容が表示されます。ユーザーにとっても分かりやすい気がしました。 公式の動作サンプルです Sample コード <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <scri
美しいバランスの黄金比をウェブページのレイアウトに実用的に取り入れる -Golden Bootstrap
黄金比を使ったグリッドを組み立てたり、エレメントに使ったりなど、美しいレイアウトを生み出すGolden Bootstrapを紹介します。 Golden Bootstrap Golden Bootstrap -GitHub Golden BootstrapはBootstrapのプラグインで、「bootstrap.less」にファイルをインクルードして利用します。 // Grid system and page structure ... @import "golden-bootstrap/golden-bootstrap.less"; // Add support for Golden Bootstrap ファイルをインクルードすると、黄金比用の3つの変数を利用できます。 @goldenRatio: 1.6180339887498948482; @goldenLarge: 1/@golden
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
