[B! レスポンシブ] gambolのブックマーク

HTML5 × CSS3 × jQueryを真面目に勉強 – #16 レスポンシブWebデザインでテーブルを最適化するベストプラクティス | DevelopersIO

dislay 属性についてもっと知りたいという方は、こちらのサイトを参照ください。 display - CSS | MDN 要するに何が言いたいかというと、テーブルもまたスタイルシートの display 属性によってその形状を実現しているに過ぎず、この値を色々と操作すればスマートフォンのようなスクリーンサイズの狭い環境にも最適化された表示が出来るのではないかということです。実際に作ってみた - 下準備今回は4パターンの表示を紹介します。まずは下準備として簡単なテーブルレイアウトと元となるスタイルを組んでいくとします。はじめに HTML で適当なテーブルを作ります。 <table class="table table-striped table-responsive"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Ag

gambol 2015/08/24

リンク

iPhone/iPad/iPad mini用メディアクエリ一覧 | ENTEREAL/エンタリアル

Blog Posts List ブログ記事一覧検索 CakePHP3を始めた方に CakePHP 3.X 2016年01月16日(土) 14時23分 2つの住所から距離を計算する API 2015年12月18日(金) 10時23分「:target」セレクタについて CSS 2015年12月12日(土) 12時23分外部サイトからの画像への直リンクを防ぐ Apache 2015年12月04日(金) 12時23分 CSS3だけで作るブラウザタブ CSS 2015年11月17日(火) 21時23分 CSS3だけで作るパンくずに関する件 CSS 2015年11月12日(木) 12時23分 Bootstrap4のブレイクポイント計算機 Bootstrap 2015年11月11日(水) 19時23分 Bootstrap4のブレイクポイントに関する件 Bootstrap 2015年11月11日(水

gambol 2014/10/20

リンク

モバイルファーストでレスポンシブなアコーディオン実装「Bellows」:phpspot開発日誌

Bellows ? Responsive, Mobile-First Accordion UI Module | Mobify モバイルファーストでレスポンシブなアコーディオン実装「Bellows」次のようなシンプルでスッキリしたデザインのアコーディオン実装が出来ます。関連エントリレスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」レスポンシブなタブを実装できるjQueryプラグイン「Responsive-Tabs」フラットでレスポンシブなギャラリー実装jQueryプラグイン「lightGallery」レスポンシブで軽量なLightBox実装「Rebox」

gambol 2014/09/30

リンク

【CSS】CSSを使ってレスポンシブなテーブルレイアウトをつくるメモ | web屋tM

前に、cssでテーブルレイアウトを作るメモを書きましたが、今回はそのメモから発展してテーブルレイアウトからのレスポンシブにするメモです。ひとまず、簡単な2カラムなテーブルレイアウトをつくるソースから。 <div class="table-row"> <div class="table-column">左のセル</div> <div class="table-column">左のセル</div> </div> .table-row { display: table; width: 100%; } .table-column { display: table-cell; vertical-align: top; /*縦位置を揃える*/ } .table-column:first-child { width: 20%; /*左カラムのサイズ*/ }

gambol 2014/09/30

リンク

【CSS】CSSでつくるレスポンシブなテーブレイアウトサンプル集 | web屋tM

以前、CSSを使ってレスポンシブなテーブルレイアウトをつくるメモを作りました。それからしばらくして、自分用にでもいろんなレイアウトのサンプルHTMLやCSSもついでにメモっておけば、後が楽！ということに気づきました。サンプルHTMLはストックはしているけれど、それぞれバラバラになってて正直使い勝手が悪いので、まとめなおして記録しておきます。左サイドバーのレイアウト一つ目は左側にサイドバーを配置した標準的によくあるレイアウトです。このレイアウトの特徴は、サイドバーからのリンク遷移がわかりやすいことが挙げられます。コンテンツ部分よりもサイドバーのほうが先に目に入ってくるので、コンテンツへの注目が少し薄まるかもしれません。 <header>ヘッダー</header> <div class="table-row"> <div class="table-column sidebar">サイド