地味な離島ライター内藤です。普段はコーダーとして仕事をしていますが、たまにはデザイナーさんのように人の目に触れる仕事もしてみたい！ そこで本日は、日々の業務で見かけてこれは使えるぞと思ったtableを、独自に再構築してソースコードを公開しようと思います。 table作成時に参考になるサイト 本題に入る、その前に。XPの公式サポートも終了し、HTML5＋CSS3の普及が進んでいます。今更ながら、この技術でどんなtableが実現できるのか、とてもわかりやすく説明されていたサイトをまずご紹介します。 table専門参考ページ4選 table専門の参考ページを4つほど選んでみました。 CSS3を使って美しく装飾されたテーブルの作り方｜Webpark CSS3でのtableの作り方を、見た目とソースから解説してあります。 テーブル｜CSSデザイン｜スタイルシート（CSS）｜PHP & JavaScr
この記事ではサイトに商品スペック比較や料金表などのテーブルをつくる際、スマホでも崩れず見やすく表示する方法を様々なサイトの実例から学んでみたいと思います。 具体的なコードではなく、PC／スマホで表（テーブル）をどのようにデザインすべきか、という設計段階のヒントを探ります。 テーブルをスクロール 西瀬戸自動車道 CSS側で一括で対応できて、実装の工数が少ないのが良い点です。表が沢山ある既存サイトをスマホ対応する時などは便利。 横にスクロールできることをユーザーに気付かせる必要がある（スクロールバーを目立たせるなど）。 「横にスクロールできます」等の注意書きあるサイトもよく見ますが、書かないと分からないUIというのはあまり良いとは言えないのではという気はします。気付かれないよりマシですが。 テーブルの先頭を固定してスクロール トヨタ Amazon 上記例のスクロールをさらに工夫したパターンで、
棒グラフや折れ線グラフ、どうやって実装していますか？ 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だけで実装 セマ
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. バック
#完成品 vue.jsで動的にテーブルの行追加#protoout#vuejs pic.twitter.com/TD95uWoVqn — sawa (@sawakoshi_yy) October 23, 2020 #完成品のWebアプリ https://naughty-franklin-898e0a.netlify.app/ 郵便番号7桁入力したら住所検索します。 検索ボタンクリックするたびに行追加して検索します。 #参考にしたもの [【Vue.js】データ配列を使ってテーブルを動的に生成してみる。] (https://www.doraxdora.com/blog/2020/02/15/post-11138/) [Vue.jsを100時間勉強して分かったこと] (https://qiita.com/kskinaba/items/3e8887d45b11f9132012) [HeartRail
何に関する記事か？ vxe-table というVue.js向けのテーブルUIコンポーネントを紹介する記事です。 かなり高機能・高性能なライブラリなのですが、中国発ということもあり日本語の情報が見当たらなかったので記事にしてみました。 この記事ではコンポーネントの提供する機能のほんの一部しか紹介していません。より詳細な情報は以下のリンクから参照してください。 Link GitHub - vxe-table コンポーネントの概要やインストール手順、サンプルコードなど vxe-table 公式ガイド(英語・中国語) コンポーネントの提供する機能・サンプルコードやAPIリファレンスなど かなりたくさんの機能が提供されているので、是非一度チェックしてみてください！ 誰にとってオススメか？ Element, Vuetify などのコンポーネントライブラリを使っていて、テーブル(グリッド)コンポーネント
2012/10/18：画像に一部誤りがありましたので、修正致しました。 こんにちは。 スマートフォンサイト制作案件が増えて楽しいKanaです。 スマートフォンサイトのコーディングは、古いブラウザ (ie6とかie6とかie6とか！)のことを考えるとできなかったCSSの指定ができるので、とても楽しいですね！ スマートフォンサイトの制作はリキッドレイアウト。 ナビゲーションの数が奇数！…均等にするにはwidth指定面倒だな〜画像とテキストを横に並べなきゃ…縦方向の揃え位置を指定できたらいいのに…。と思ったことはありませんか？ そんな時の強い味方がdisplay:tableと、display:table-cellです。 スマートフォンサイトのコーディングを頻繁にされている方は、既にご存知かもしれませんが、これからスマートフォンサイト作るよ！という方には、とても便利だと思います！ display:
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」
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で、大きい順や小さい順に並び替えたいとき（ソート）には 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で実装された表組みをスマフォでも最適に見えるよう変更する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 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の使えるア
Result テーブル上のマウスの位置を表示する jQuery $("table tr td").mouseenter(function () { //ポインタ追加 $(this).css("cursor", "pointer"); //ユーザーへの表記は+1する var col = $(this).closest("tr td").prevAll("tr td").length += 1; var row = $(this).closest("tr").prevAll("tr").length; //テーブル上のマウスの位置を取得して現在地を表示する $('#result').html("上から<b>" + row + "</b>番目、左から<b>" + col + "</b>番目にいます"); }); css table { border: 1px solid #DFDFDF; bac
jQuery.FilterTable Sample テーブル内容を入力値でフィルタリングできるjQueryプラグイン「FilterTable」 シンプルにテーブルを出力してJSで絞り込めるというUIは実装も使うのも楽、ということでこういうUIにしたい場合は選択肢の１つとして。 複数列に対応しており、例えば、列1にマッチすれば列1がハイライトされるし、列２にマッチならば列２がハイライトされます 関連エントリ テーブル行をインクリメンタル検索できるようにするjQueryプラグイン「Sieve」 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」 レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」 レスポンシブなテーブルを作るjQueryプラグイン「MediaTable」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
