【HTML5・CSS3】おしゃれなテーブルデザインのサンプルソース5点 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
地味な離島ライター内藤です。普段はコーダーとして仕事をしていますが、たまにはデザイナーさんのように人の目に触れる仕事もしてみたい！ そこで本日は、日々の業務で見かけてこれは使えるぞと思ったtableを、独自に再構築してソースコードを公開しようと思います。 table作成時に参考になるサイト 本題に入る、その前に。XPの公式サポートも終了し、HTML5＋CSS3の普及が進んでいます。今更ながら、この技術でどんなtableが実現できるのか、とてもわかりやすく説明されていたサイトをまずご紹介します。 table専門参考ページ4選 table専門の参考ページを4つほど選んでみました。 CSS3を使って美しく装飾されたテーブルの作り方｜Webpark CSS3でのtableの作り方を、見た目とソースから解説してあります。 テーブル｜CSSデザイン｜スタイルシート（CSS）｜PHP & JavaScr
料金表・比較表などのテーブルをスマホ対応するデザイン事例 | 野良人（のらんど）
この記事ではサイトに商品スペック比較や料金表などのテーブルをつくる際、スマホでも崩れず見やすく表示する方法を様々なサイトの実例から学んでみたいと思います。 具体的なコードではなく、PC／スマホで表（テーブル）をどのようにデザインすべきか、という設計段階のヒントを探ります。 テーブルをスクロール 西瀬戸自動車道 CSS側で一括で対応できて、実装の工数が少ないのが良い点です。表が沢山ある既存サイトをスマホ対応する時などは便利。 横にスクロールできることをユーザーに気付かせる必要がある（スクロールバーを目立たせるなど）。 「横にスクロールできます」等の注意書きあるサイトもよく見ますが、書かないと分からないUIというのはあまり良いとは言えないのではという気はします。気付かれないよりマシですが。 テーブルの先頭を固定してスクロール トヨタ Amazon 上記例のスクロールをさらに工夫したパターンで、
【レスポンシブ】CSSで作るtableデザイン＆コーディング【コードあり】 – 東京のホームページ制作 / WEB制作会社 BRISK
もはやスマホ表示を考えないwebサイトは新規制作やリニューアルではほぼない今日、どんなに横に長いテーブルでもレスポンシブでどうするか考える必要があります。 PCで組むだけなら何も考えずに済むのですが、スマホの縦長の画面で如何にユーザビリティを落とさず横長になりがちなテーブルを表示させることができるか、いくつかtableコーディングのパターンを用意してみました。 demo Contents 縦に積むテーブルレスポンシブ 横並びを縦並びにするテーブルレスポンシブ 疑似要素で見出しを用意するテーブルレスポンシブ content:attr() で見出しを表現するテーブルレスポンシブ spanで見出しを表現するテーブルレスポンシブ スクロールで表示させるテーブルレスポンシブ 縦に積むテーブルレスポンシブ PC SP ごくごく一般的なテーブルパターンですね。 ソース上は上から順番に要素が並んでいるので
HTMLのtableにクラスを加えるだけで、グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css
棒グラフや折れ線グラフ、どうやって実装していますか？ Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。 HTMLは普通の表組みなのでアクセシブル、グラフやチャートはレスポンシブにも完全対応した優れものです。 Charts.css Charts.css -GitHub Charts.cssの特徴 Charts.cssのデモ Charts.cssの使い方 Charts.cssの特徴 Charts.cssはtableで実装した表組みにシンプルなCSSのクラスを加えるだけで、さまざまなグラフやチャートを実装できるフレームワークです。カスタマイズも簡単で、ユーティリティのクラスも豊富に用意されています。 HTMLとCSSだけで実装 セマ
HTML tableの実装がこれまでと変わる！Googleデベロッパーによる変更点の解説 -TablesNG
GoogleではCSSの新機能を導入するだけでなく、既存の機能を向上することにも取り組んでいます。その中の一つ「TablesNG」で、HTMLのtableの実装がこれまでと変わるのでその変更点を紹介します。 tableは古くからあり、その後さまざまなCSSの機能がブラウザに実装されました。当然、それらの新しい機能にtableは対応していません。それらに対応し、不整合を修正するのが今回の取り組みです。 TablesNG Resolves 72 Chromium Bugs for Better Interoperability by Una Kravets, Aleks Totic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに TablesNGの取り組み 1. テーブルの行にposition: sticky 2. バック
CSSだけで実装できるとは！テーブルのヘッダと左端のセルの両方を固定させるCSSの極上テクニック
テーブルのヘッダを上部に固定するのは、position: sticky;で簡単に実装できます。ヘッダだけでなく、テーブルの左端のセルも固定させたい場合は、どう実装すればよいでしょうか？ JavaScriptがないと実装できないように思うかもしれませんが、position: sticky;を効果的に使用することで実装できます。テーブルのヘッダと左端のセルの両方を固定させるCSSのテクニックを紹介します。 A table with both a sticky header and a sticky first column 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 tableのセル、thやtdをposition: sticky;させることはこの記事で解説しました。テーブルのヘッダを上部にくっつけて固定させるのは簡単です（デモペ
【Vue】テーブル操作エキスパートへの道。ボタンクリックで列を追加する方法 - Qiita
ボタンクリックで表に列を追加する方法について。 これまで、 ・v-forを使ったテーブルの作成 ・表で複数選択を可能にする方法 ・ボタンクリックで行を追加する方法 について確認したので、次のステップとして列を追加する方法を確認する。 まずは前への列追加から。 やりたいこと ・ボタンをクリックすると前に列を追加する。 ・選択している場合は、列追加後に選択中のセルが後ろにズレる ↓ 前に２列追加 考え方 ボタンクリックで列を追加するイベントが発生 セルが選択されていない場合は先頭に列を追加 セルが選択されている場合はその前に列を追加（複数選択の場合は一番最初に選択したセル） 行をループ処理で抜き出し指定した位置にセル要素を追加 選択中のセルをズラす 1. ボタンクリックで列を追加するイベントが発生 イベントを設定する
【Vue】テーブル操作エキスパートへの道。ボタンクリックで行を追加する方法 - Qiita
作成した表をユーザー操作できるようにする。まずは手始めに「下に行を追加」ボタンをクリックすると行が追加されるようにする。 ▼完成形のイメージ ①要素が選択されていない場合は下に追加 ↓ 1行追加 ②要素が選択されている場合はその行の下に追加 ※複数選択の場合は最初に選択した要素を対象とする。 ↓ 一番上の要素を軸に下に2行追加。 選択中のセルがシフトするようにする。 考え方 クリックイベントを検知 選択中の要素がある場合はその行番号を取得（ない場合は一番下に追加） 選択した行とそれ以降で分割し、間に新しい行を追加してマージ 選択中の要素の行番号を必要に応じて一つ下にずらす。 作成方法 テーブルの作成方法についてはこちら 以下では追加処理についてのみ記述。 ボタンの作成 以下のようなボタンを作成。クリックイベントを設定する。
Vue.jsでテーブルを動的に行追加する - Qiita
完成品 vue.jsで動的にテーブルの行追加#protoout#vuejs pic.twitter.com/TD95uWoVqn — sawa (@sawakoshi_yy) October 23, 2020 完成品のWebアプリ https://naughty-franklin-898e0a.netlify.app/ 郵便番号7桁入力したら住所検索します。 検索ボタンクリックするたびに行追加して検索します。 参考にしたもの 【Vue.js】データ配列を使ってテーブルを動的に生成してみる。 Vue.jsを100時間勉強して分かったこと HeartRails Geo API コード（記事の下の方に完成品のCodePen置いてます） ・HTML <div class="row my-3"> <div class="col-sm-6 mx-auto"> <input class="form-co
Vue.js向けの高機能・高性能なテーブルコンポーネントvxe-tableを紹介したい - Qiita
何に関する記事か？ vxe-table というVue.js向けのテーブルUIコンポーネントを紹介する記事です。 かなり高機能・高性能なライブラリなのですが、中国発ということもあり日本語の情報が見当たらなかったので記事にしてみました。 この記事ではコンポーネントの提供する機能のほんの一部しか紹介していません。より詳細な情報は以下のリンクから参照してください。 Link GitHub - vxe-table コンポーネントの概要やインストール手順、サンプルコードなど vxe-table 公式ガイド(英語・中国語) コンポーネントの提供する機能・サンプルコードやAPIリファレンスなど かなりたくさんの機能が提供されているので、是非一度チェックしてみてください！ 誰にとってオススメか？ Element, Vuetify などのコンポーネントライブラリを使っていて、テーブル(グリッド)コンポーネント
スマートフォンサイト制作にdisplay:tableとdisplay:table-cellが便利！
2012/10/18：画像に一部誤りがありましたので、修正致しました。 こんにちは。 スマートフォンサイト制作案件が増えて楽しいKanaです。 スマートフォンサイトのコーディングは、古いブラウザ (ie6とかie6とかie6とか！)のことを考えるとできなかったCSSの指定ができるので、とても楽しいですね！ スマートフォンサイトの制作はリキッドレイアウト。 ナビゲーションの数が奇数！…均等にするにはwidth指定面倒だな〜画像とテキストを横に並べなきゃ…縦方向の揃え位置を指定できたらいいのに…。と思ったことはありませんか？ そんな時の強い味方がdisplay:tableと、display:table-cellです。 スマートフォンサイトのコーディングを頻繁にされている方は、既にご存知かもしれませんが、これからスマートフォンサイト作るよ！という方には、とても便利だと思います！ display:
ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」:phpspot開発日誌
Clusterize.js ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」 ブラウザ内のDOMに５０万件を読むといくら高速なブラウザでもハングしたりしそうですが、こちらを使えば問題なく50万件のデータも読み込んで表示が出来ます DOM構造を50万件作るのではなく、スクロールに応じてDOM内を書き換えているのがその仕組のようです。 大量のデータをブラウザ上で一気に表示したい場合に便利そうです 関連エントリ 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 テーブルをGoogle Chartsを使って多様なグラフに変換することが出来る「Chartinator」 HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆる形式に変換できる「HTML table Export」 レスポンシブに要素を消さずに変形するテーブル
スクロールしてもテーブルヘッダを固定表示できる「fixed-table-header」:phpspot開発日誌
hungnq1989/fixed-table-header GitHub スクロールしてもテーブルヘッダを固定表示できる「fixed-table-header」 通常はスクロールすると消えてしまって、何のカラムだっけ？と上にスクロールするという無駄な動きを生んでしまいますが、こちらのプラグインを使ってテーブルヘッダを初期化することでテーブルを使いやすくできます 関連エントリ インライン編集できるテーブル実装用jQueryプラグイン「editable-table」 ナイスなレスポンシブなテーブル実装jQueryプラグイン「Responsive tables」 HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆる形式に変換できる「HTML table Export」 HTML5＋JSONでインタラクティブなテーブルを作れる「Dynatable.js」
たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity | コリス
iframeを使った地図 Fluidityの使い方 使い方は簡単です。 Step 1: 外部ファイル head内に当スタイルシートを追加するだけで完了です。 <link rel="stylesheet" href="css/fluidity.min.css"> Step 2: HTML あとは、通常通りにHTMLを記述するだけです。 画像の場合 <img src="image.png"> テーブルの場合 テーブルの時はclassを加えます。 <div class="overflow-container"> <table> <!-- table contents --> </table> </div> 地図の場合 <iframe src="https://www.google.com/maps/embed?マップのコード" width="100%" height="450" framebor
JavaScriptで表の並び替え
これは大きい順や小さい順に並び替えるのではなく単純に順番を逆にする方法です。 JavaScriptで、大きい順や小さい順に並び替えたいとき（ソート）には sort関数を使いますが、今回は触れません。 テーブル（表）の順序を逆にする関数 var swap=function(id){ var elem=document.getElementById(id); if(!elem){return;} var tr_elems=elem.getElementsByTagName('tr'); var min=0,max=tr_elems.length-1; while(min<max){ var td_min=tr_elems[min].getElementsByTagName('td'); var td_max=tr_elems[max].getElementsByTagName('td'); v
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="
テーブルを折りたたみ可能なツリー型グリッドに変換できる「TreeGrid」:phpspot開発日誌
Treegrid jquery plugin デモ：TreeGrid for Bootstrap 3.0.x テーブルを折りたたみ可能なツリー型グリッドに変換できる「TreeGrid」。 Bootstrap3なサイトでも使うことができるようです。マークアップ上はただのテーブルですが、これを階層化して開閉できるUIは便利そうです。 こうしてますますBootstrapが強化されていって作り手としては嬉しい限りですね 関連エントリ Bootstrap3のテーマをWYSIWYGでカスタマイズ可能な「Bootstrap Magic」 BootstrapベースのフラットUI実装フレームワーク「Furatto」 Bootstrapのselectをカッコよくできる「Bootstrap-select」 BootstrapをベースとしたフリーのUIKit「Flat UI」 Bootstrapに270の使えるア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Vue】tableの要素を選択可能にする方法。クリックに合わせclass属性を付与する - Qiita
Responsive Tables: CSS Only, No JavaScript | NOUPE
Stay ahead of the curve with Feedly AI