レスポンシブWebデザインで使えそうな2つのテーブル実装例
以前の投稿で書きましたが、レスポンシブWebデザインでサイトを制作する際の課題の一つは、データの多いテーブルの見せ方です。その課題をクリアする「この方法なら行けるかも！」と思えるものが2つほどあったのでご紹介します。 どちらも甲乙つけがたい良い実装例で、技術的な問題がなければレスポンシブなテーブルの代表的な実装手法になっていくのでは？と思っています。 ドロップダウンでカラムの表示・非表示を選択 まずは、レスポンシブWebデザインの情報を探していると良く出てくるボストンの制作会社、Filament GroupのMaggie Costello Wachsさんが考案したものをご紹介します。オープンソース（GPL License）で、コードは自由に使って良いようです。 以下の画像のように、ドロップダウンメニューを実装して、カラムの表示・非表示をチェックボックスでコントロールできるようになっています
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
FICC | デジタルエージェンシー
LEADING BRANDS TO DIGITAL WE ARE A DATA-DRIVEN MARKETING AGENCY FICCはデータに基づく論理的なマーケティングを提供するデジタルエージェンシーです。 消費者に価値あるコンテンツと体験を届けるため、戦略立案から施策実行まで一貫して提供しています。
FICC ナレッジブログ | FICC | ブランドマーケティング
ビジョンラダー：ブランドパーパスとプロフィットを両立し、理想を現実に変えるためのフレームワークブランドパーパスブランディングビジョンラダー ビジョンは組織の共有する目標であり、人々を束ね、活気づけるものです。ビジネスの理想の形の定義であると同時に、持続的な成長の原動力にもなり得ます。この貴重な資源を最大限に... 続きを読む 逆境のいまこそ見直したい、ブランドの「設計図」とは？：ブランドホロタイプ・モデルの基本ブランドホロタイプ・モデルブランディング この異常な状況の下で、多くの人が通常どおりの広告に多少ながらの違和感を感じていると思う。パンデミックによって私たちの環境は劇的に変化し、広告の大半がその文脈から外れてし... 続きを読む パーセプションフロー・モデルとは？10年以上の経験に基づくナレッジパーセプションフロー・モデル マーケティングは複雑なチームプレーを要する企業活動であり、個
Web design North Wales - Creative design for digital products and websites
Creative design for digital products and websites Our designs tell stories and captivate customers I’m Andy Clarke, and for over 25 years, my studio and I have helped product and website owners captivate customers by delivering distinctive digital designs. Storytelling is crucial to successful designs as it drives engagement and encourages loyalty, even love. My passion for storytelling shows in e
NHKスタジオパーク
NHKスタジオパーク その２ NHKスタジオパークをVRで！大人気だったアニメのアフレコやキャスター体験をどうぞ！ NHKスタジオパーク 閉館について ２０２０年５月１１日 平素よりＮＨＫスタジオパークをご利用いただき誠にありがとうございます。 新型コロナウイルス感染拡大防止のため臨時休館中のＮＨＫスタジオパークは、６月の再開をめざしてきましたが、このたび閉館させていただくことといたしました。 緊急事態宣言が延長されるなど新型コロナウイルスをめぐる状況の先行きが見通せないことと、東京オリンピック・パラリンピックの延期に伴い、放送センターの建て替え工事の準備作業にスケジュールの変更が生じたためです。 当初はことし９月いっぱいでの閉館を発表していましたが、諸般の状況の変化に伴い、閉館時期を早める判断に至りました。 長年、多くの方々にご利用いただき、心より御礼を申し上げます。 既に団体予約をされ
★はじめに | Search | Google Developers
フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 モバイルサイトとモバイルファースト インデックスに関するおすすめの方法 Google のインデックス登録とランキングでは、スマートフォン エージェントでクロールしたモバイル版のサイト コンテンツを優先的に使用します。これをモバイルファースト インデックスと呼びます。 モバイル版のページを用意することは、コンテンツを Google の検索結果に表示させるための要件ではありませんが、非常に強く推奨されています。このページで説明するおすすめの方法は、モバイルサイト全般にあてはまり、当然のことながら、モバイルファースト インデックスにもあてはまります。 ユーザーに最適なエクスペリエンスを提供できるよう、このガイドで紹介されているおすすめの方法を実践してください。 モバイル フレンドリーなサイトを
wivern.com | 埋め込み動画のサイズをレスポンシブにする方法
サイバーセキュリティ＆人工知能研究所 サイバーセキュリティや人工知能(機械学習等)を中心に、最新技術を研究しています。 埋め込み動画のサイズをレスポンシブにする方法 YouTube の埋め込み動画のサイズをレスポンシブにする方法 2013/08/02 : TechReports はじめに サイトで Youtube の動画を紹介する場合に、iframe タグで囲まれた「埋め込みコード」を貼りつけますが、固定サイズのため、画面サイズがレスポンシブに変わってくれません。 せっかく、Twitter Bootstrap 等でレスポンシブに対応しても、動画のサイズが固定なままでは、はみ出したりして見た目が台無しです。 そこでいろいろと調べたり試行錯誤した結果、比較的簡単に実装できる方法を見つけたので公開します。 方法は下記のように、CSS で定義した YoutubeWrapper クラスを指定した d
Responsive web design tool, CMS, and hosting platform | Webflow
Explore how freelancers do more, faster with Webflow
香(KOU)
先輩から受け継いだ、【時間がたってもぶれる事のないベーシックな技術】【時代と共に進化し続ける新しいスタイルを形にするためのプロセス】 その二つの要素がミックスされた結果、 "伝統の中にある新しいスタイル" それが香(KOU)の表現するヘアーサロンです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
NTTデータグループウェブサイトのマルチデバイス対応
キヤノン：キヤノンホームページ
Antwort - Responsive Layouts for Email
ok电竞app|ok电竞竞猜app|ok平台官方app
Responsive Web Design JP（日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト）
Media Queries