Add advanced interaction controls to your HTML tables the free & easy way
Add advanced interaction controls to your HTML tables the free & easy way
IE6 への対応が一段落した昨今、 IE7 もいよいよ事実上市場から姿を消す日が近づいてきたようです。flickr が今年以降リリースする新機能にて IE7 をサポートしないことを表明しました。私の勤務先でも、今ものすごい勢いで IE7 のシェアが低下しており、今年の夏から冬にかけて、今の IE6 と同じくらいのシェアになるかもしれない勢いです。 というわけで、 IE の最低動作保証バージョンが 7 から 8 になったら何ができるようになるのか、僕らの caniuse.com を見てざっと洗い出してみましたのでご参照ください。 CSS inline-block display:inline-block が使えます。IE 6/7 では "display:inline; zoom:1;" で代用していたと思います。 Table Display display:table 、 display:t
<table>はHTMLで最も古い要素のひとつです。tableはかつてWebレイアウトに広く使われていました。しかし、tableを基盤としたレイアウトは廃れ(HTMLメールを除いて)、現在tableを使うのは、表データを見せるために使うときくらいでしょう。 HTMLスペックの古い部分は、一般的にモバイル中心のデザインに合っておらず、そしてbox要素の外では機能的な発展はありません。とはいえ、table機能の使い勝手がもっとよくなったらいいと思いませんか? この記事では、jQueryで動く厳選したプラグインについてザっと説明し、tableの可能性が広がればいいなと思います。これからご紹介するプラグインは、簡単なデザイン修正から機能豊かな解決策にまで多岐に及びます。 jQueryで動くtableプラグイン12選 Dynatable Dynatableはフィルター、分類、ページ付けなどの機能をも
※ 画像は公式サイトデモより 業務システムのみならず、メールや一覧の機能で必要になるのがテーブルを使った一覧機能だ。このとき、比較元になるのがエクセルをはじめとした表計算ソフトウェアだろう。あのレベルのUIをWebベースで再現するのはほぼ不可能とさえ言えそうだ。 ドラッグアンドドロップによるカラムの並べ替えや表示/非表示の切り替えが可能 無理矢理カスタマイズして膨大に工数を増やすのではなく、ライブラリを使って柔軟に、素早く対応しよう。 今回紹介するオープンソース・ソフトウェアはFlexigrid、jQueryを使ったテーブル操作ライブラリだ。 Flexigridは既存のテーブルに対して利用できるライブラリで、普通のテーブルをカラムの並べ替えや表示/非表示、幅の変更など優れたUIをもったテーブルに変更してくれる。対応ブラウザはIE6/IE7、Firefox 2、Opera 9.x、Safar
Vertically Center Multi-Lined Text demo デモでは、一行、複数行ともに中央に配置されています。 仕組みは、吹き出しに「display: table;」、その中のパラグラフに「display: table-cell;」を指定し、天地左右中央に配置します。 HTML <div class="area"> <div class="bubble"> <p>To look best, text should really be centered inside this bubble both vertically and horizontally.</p> </div> </div> CSS .area { width: 300px; height: 300px; background: url(../images/abe-bg.png) no-repeat;
MySQL 5.1で追加されたメジャーな機能の影に隠れた、地味だが便利な改善がある。それがスロークエリログに関する仕様である。MySQL 5.0まではスロークエリログは1秒未満のクエリを捕捉することが出来なかった。が、MySQL 5.1では1マイクロ秒までのクエリを記録できるようになっている。従って、0.5秒かかるけど大量に実行されてパフォーマンスに大きな影響を与えている!というようなクエリの発見が出来るようになった。1秒未満のクエリを追跡したい場合、例えば以下のような設定をする。 [mysqld] slow_query_log=ON slow_query_log_file=mysql-slow.log long_query_time=0.1 MySQL 5.0まではlog_slow_queryというオプションだったのが、MySQL 5.1ではslow_query_logというオプション名
この文章は、ある程度プログラム等の知識があるが、データベースについてはあまり知らないというひとを対象に書かれています。 SQLとは、Structured Query Language の略で、構造化問い合わせ言語という意味になります。 SQLを覚えるメリットは、これさえ覚えておけば、どんなデータベースにも同様の方法でアクセスできることです。 まあ、データベースのシステムによって、多少の方言はありますが、基本は同じです。 ここでは、データベースの管理よりも、データベースの使用、あるいはデータベースを利用したアプリケーションの開発等の際に、重要になってくるであろうSQLを中心に、例を多用して解説します。 必要と思われるもの、重要と思われるものだけを抜粋して解説していますので、下記で解説されるのは、SQLの『一部』でしかないことを了承ください。 前提 データベースが存在し、そこには、ash_ta
拡張され続ける InnoDB のデータファイルのサイズを小さくする方法 2006-07-07-2: [MySQL] MySQL でトランザクションを可能にするストレージエンジンとして InnoDB があります. InnoDB のデータファイルは,MyISAM テーブルと異なって,デフォルトでは ibdata1 というファイルにデータが蓄積されていくとこになります. MySQL の datadir に自動拡張する 10 MB の ibdata1 ファイルが 1 つと、5 MB の ib_logfile ログファイルが 2 つ作成されます - 7.5.3. InnoDB 起動オプション http://dev.mysql.com/doc/refman/4.1/ja/innodb-start.html この ibdata1 は,大量のデータを追加していくと,自動的にサイズを拡張していきます. ただ
Excelっぽい機能も付いた検索&ソート&ページング機能付きテーブル実装JSライブラリ「TinyTable V3」 2009年11月18日- Excelっぽい機能も付いた検索&ソート&ページング機能付きテーブル実装JSライブラリ「TinyTable V3」。 次のような、UIも美しい高機能なテーブルの実装が出来ます。 普通のテーブルをリッチに スタイルを切ると、次のような単なる<table>タグで定義されたデータなのですが、JavaScript とCSSの力によって大きく形を変えています。 機能紹介 検索機能。大量にデータがあった場合にこの機能はかなり重宝します。 ソート機能。データが一杯でも分かりやすい。全カラムにおいてソート機能が付いてます ページング機能によって縦幅が大きく取られることを防ぎます。view all ボタンで全部を表示することも可能。 縦方向の合計をExcelのsumっ
ヘッダ固定の分かりやすいテーブルを簡単実装できるjQueryプラグイン「jQuery.FixedTable」 2011年02月16日- jQuery plugin: jQuery.FixedTable - Nova download ヘッダ固定の分かりやすいテーブルを簡単実装できるjQueryプラグイン「jQuery.FixedTable」。 テーブルは便利ですが、左から2番目のカラムは何を意味するんだっけ?という時に下の方にスクロールしていると上まで戻らないといけなかったりしますね。 そこでテーブルヘッダを固定位置にして分かりやすくできるというもの。 テーブルの最左部を固定にしてテーブルを横長にすることも出来ます。 テーブルのヘッダを固定にして通常のテーブルっぽくすることも出来ます。 デモページ 実装も基本的に $(element).fixedTable( options ) で簡単実装
書き方の簡単な説明 ◇一行目に、列の最上段に記載する項目を記入します。 ◇列を分けるときは「 | 」(縦線/バーティカルバー)を使います。 ◇二行目に、その列のテキストの寄せを決定します(後述)。 ◇三行目から、各項目を書いていきます。 右寄せ・左寄せ・中庸寄せ 対象の列のテキストを右・左・中央に寄せるためには、マークダウンで表組みを作った時の二行目で調整します。 ◇「|:-----|」 列が左寄せになります。 ◇「|-----:|」 列が右寄せになります。 ◇「|:-----:|」 列が中央寄せになります。 簡単な話、寄せたい方向に「 : 」(コロン)を入れれば、それで完了です。真ん中の「 - 」(ハイフン)の数は適当でOK。1つでも構いません。 マークダウンからHTMLへの書き出し マークダウンで書いたテキストをブログ記事に上げても、そのままではもちろん表組みにはなりません。改めてHT
ここはテーブルタグ(表)を項目を指定していくだけで簡単作成することができます。 下にあるボタンで現在の結果を新ウィンドウで確認することができます。 ボタン下にある項目を選択していき、再度ボタンを押せば変化があります。 完成したタグが欲しければ、結果ページの下にあるテキスト部分をコピーしてください。
リッチなExcel風グリッドインタフェースを提供するJavascriptライブラリ「dhtmlxGrid」 2006年10月20日- dhtmlxGrid - sortable Javascript DHTML grid with rich script API dhtmlxGrid is a cross-browser editable JavaScript grid control that provides professional solution for representing and editing tabular data on the web. リッチなExcel風グリッドインタフェースを提供するJavascriptライブラリ「dhtmlxGrid」。 見出し部分をクリックで各アイテムをソート可能。セルのフォーマットを指定でき、チェックボックスやラジオボックスを置くことも
naoya.dyndns.org is currently offline. Please try again later. Questions about our services? Learn more at Dyn.com.
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
TinyMCE for Movable Typeは、標準的CMSであるMovable Typeの更新機能を、飛躍的に高める高機能WYSIWYGエディタです。誰でも無償で利用でき、インストールも簡単。HTMLの知識のない方でも、ワープロのように簡単に更新が行えます。ホーム 投稿を、より簡単に…、より美しく、それがTinyMCE for Movable Type ようこそ、TinyMCE for Movable Typeの世界へ TinyMCE for Movable Typeは、Movable Typeの更新機能を、飛躍的に高めるAjaxな高機能WYSIWYGエディタです。誰でも無償で利用でき、インストールも簡単。HTMLの知識のない方でも、ワープロのように簡単に更新が行えます。 はじめに このサイトは「TinyMCE for Movable Type」の公式サイトです。 TinyMCE f
jQuery Wisdomというサイトで、テーブル周りの素晴らしいjQueryプラグインが紹介されています。 ざっといくつかご紹介。 graphTable: graph data from HTML table using flot HTMLのテーブルデータからグラフを作ってくれる tableRowCheckboxToggle jQuery Plugin 行をクリックすることでチェックボックスのオンオフを切り替えられるようにするプラグイン UI Table Edit jQuery Plugin セルをクリックすることで編集可能にするプラグイン Colorize – jQuery Table Plugin マウスオーバーした列の背景をカラーリングしてくれる Animated Sortable Data Table jQuery plugin – jTPS テーブルにページネーションやソート機
English 概要 TxはコンパクトなTrieを構築するためのライブラリです.従来のTrieの実装(darts等)に比べ1/4〜1/10の作業領域量で辞書を保持することができ、数億〜十億キーワードなど大規模な辞書を扱うことが可能です.Trieは文字列からなるキー集合を処理するデータ構造で、キーが辞書に含まれているかのみではなく、キーのPrefixが含まれているかを高速に求めることができます.内部データ構造にはSuccinct Data StructureであるLevel-Order Unary Degree Sequence (LOUDS)を利用しています. ダウンロード Txはフリーソフトウェアです.BSD ライセンスに従って本ソフトウェアを使用,再配布することができます. tx-0.12.tar.gz: HTTP Archives tx-0.11.tar.gz: HTTP tx
Editing General Find/Replace Tabs Split window Bookmarks Text manipulation Code folding
Web Developer 日本語版サポート移管のお知らせ これまで当サイトにて、日本語版のダウンロード配布およびサポートを行ってきた『Web Developer』ですが、2008年3月より開発担当エンジニアの個人サイトへ全てを移管させていただくことになりました。新しいサイトのURLは、以下の通りです。 ミナトラボ:Web Developer 日本語版 『Web Developer』は、開発者である米国のChris Pederick氏に協力しながら、これからも上記サイトにて日本語版へのローカライズおよびユーザーサポートを継続していきます。今後とも『Web Developer 日本語版』をよろしくお願いいたします。
Markdown形式で一番面倒だなと思うのが表の作成です。 こればっかりは、Excelでいろいろと編集したほうが楽そうです。 つまり、Excelでの編集結果をmarkdownに変換できれば良いわけです。 今回、そんなMarkdow使いにとって夢のようなツールを紹介します Tables Generator 使い方(簡略版) 使い方(詳しく:注意とtips有り) 参考:セルの結合をしたいときはHTMLで まとめ Tables Generator www.tablesgenerator.com 一瞬でMarkdownのテーブル形式に変換してくれる、ウェブサービス。もちろん無料。 使い方(簡略版) 1. Excelで作成した表をコピー 2. Tables GeneratorのFile→Paste table data...をポチ 3. 変換されたデータのCopy to Clipboardをポチ た
tableレイアウトからdivのfloatによるレイアウトに変更した際に、デザイン面で困ることがいくつかありますが、その1つが、floatしたdivの高さが揃わないこと。 floatしたそれぞれのdivに背景画像や背景色を設定していたり、borderでラインを入れている場合など、高さが揃わないため、情報量が少ないdivの下に隙間が空いてしまいます。 そういった問題を解決する方法です。 サンプル floatしたdivの高さを揃える 高さが可変(別ウィンドウで表示) floatしたdivの高さを揃える 高さ画面いっぱい(別ウィンドウで表示) ソース(高さが可変) floatされたdivの中で、もっとも高さがあるものに他のdivの高さも合わせる場合です。 float解除用のclass="cl"についてはfloat解除を参照してください。 html,body { margin: 0; paddin
GridはHTMLテーブルにソートやヘッダ固定、行選択と言った機能を追加するJavaScriptライブラリです。 業務システムを作っていると必ず発生するのがテーブルでの一覧表です。WebでExcelレベルのことは実現できませんが、リッチな表としてGridを使ってみるのは良さそうです。 デモです。 必要な場所だけチェックしてハイライトできます。 横スクロールしても左側の列はそのままです。 数値のオーダーも適切に動きます。 縦スクロールしてもヘッダー部はそのままです。 カラム幅の変更もできます。 GridはIE7以上、Google Chrome/Firefox/Safari/Operaに対応しています。jQueryやMootoolsと一緒に使うこともできます。機能はヘッダー、フッター、カラムの固定化やカラムのリサイズ、カラムのソート、行の選択などになります。データフォーマットはJSONの他、X
Chartify ? A Visualization Plugin for jQuery tableデータをグラフに置き換えてくれるjQueryプラグイン「Chartify」 <table>のデータを最小1行でGoogleのChart APIを使ってグラフ画像に変換してくれるみたいです。 マークアップ上では次のようなテーブルがあったとします。 プラグインを読み込んで .chartify します。色なんかも指定 すると次のようなグラフに変換されて表示されます。 HTML上にデータがかけてそれをグラフに変換してくれるのはなかなかいいですね。 関連エントリ 小さくで可愛いグラフが描けるjQueryプラグイン「Piety」 ドリルダウンなグラフを作成できるjQueryプラグイン「DDChart」 地下鉄の路線図を描けるjQueryプラグイン「Subway Map Visualization」
Data Grids with AJAX, DHTML and JavaScript | Smashing Magazine In order to be presented effectively, information needs structure. データグリッド実現用JavaScriptライブラリ各種。 Excel のようなデータグリッドを実現できるJavaScriptライブラリが多数紹介されています。 どれも目を見張るようなハイクオリティさ&高機能さで、どれを使うか迷ってしまうほど。 ExtJs Grid dhtmlxGrid Phatfusion Sortable Mootable Sorting Elite Zebra Tables PHP Live Datagrid Table Kit How to paginate, sort and search a table w
関連記事 「ブルアカ」「アズレン」提供元の机がすごかった 自社メディアでデスクツアー公開 スマートフォンゲーム「ブルーアーカイブ」などを手掛けるYostarが、社員のデスク環境やオフィスの画像を公開した。会社の雰囲気を伝える施策の一環という。 PFU社員はどれくらいHHKBを使ってるの? 自社アンケートの結果公開 良くも悪くもリアル【おわびと訂正】 PFUの社員はどれくらいHHKBを使っているのか──同社が社内アンケートの結果を公開。HHKBの利用率は。 サイボウズで働くみんなのデスク環境 エンジニアからマーケターまで写真でチェック IT企業で働く人のデスク環境を写真や本人のコメント付きで紹介。転職先の雰囲気を把握したい人に向け、ITエンジニアなどさまざまな社員がどんな環境で働いているかチェックする。今回はサイボウズで働く人のデスク環境を探る。 「アドビ」で働く人の机をチェック 経営層から
CSS3をたくさん使ってきれいなテーブルを作ってみましたので紹介します。特にセレクタの勉強になると思いますので、ぜひ参考にしてみてください。 まずはHTMLから。無駄に長いので3位から9位は省略しています。 <table> <tbody> <tr> <th>順位</th> <th>国</th> <th>2010年推計人口</th> </tr> <tr> <td>1</td> <td>中華人民共和国</td> <td>1,341,335,152</td> </tr> <tr> <td>2</td> <td>インド</td> <td>1,224,514,327</td> </tr> <tr> <td>10</td> <td>日本</td> <td>126,535,920</td> </tr> </tbody> </table> 続いてCSSです。とりあえず全部載せて、後で個別に説明します。 t
フォーム、テーブル、カレンダーなど、ウェブページで使用するUIエレメントに便利な機能を加えるjQueryのプラグインを紹介します。 minjs - Minimalist JavaScript [ad#ad-2] minjsは現在、3つのモジュールが公開されています。 minform longtable drcal minform HTML5のフォーム周りの便利な機能を非サポートブラウザでも利用できるようにします。 デモ ダウンロード minform -GitHub [ad#ad-2] minformの使い方 minformはスクリプトを外部ファイルとして記述するだけで、下記のフォーム関連の機能が非サポートブラウザでも利用できるようになります。 placeholders 入力欄にヒントのテキストを表示します。 autofocus 入力欄をフォーカスします。 required 必須入力の欄で、
よく、Auroraを採用しました、安定しています、移行してよかったです!とか見かけますけど、 なんで快適なのかをちゃんとわかって使ってんのかこの野郎ッp(`・ω・´メ)q 俺も全然わかってねぇッ( ・`ω・´) ということで、今回もいい感じに飽きてきたAuroraです。Aurora。少々気になっていた、ALTER TABLE周りについて興味深い数値が取れたので、その共有で御座います候。 MySQL5.6互換 AuroraはMySQL5.6互換というけれど・・・ Q:「MySQL と互換性がある」とはどういう意味ですか? これは、現在お客様が MySQL データベースで使用しているほとんどのコード、アプリケーション、ドライバー、ツールをほとんど、またはまったく変更を加えなくても Aurora で使用できることを意味します。Amazon Aurora データベースエンジンは InnoDB スト
Add advanced interaction controls to your HTML tables the free & easy way
スマホコーディングただいまガシガシ中の@cappeeです。 今回は「意外と知らない」というか、「便利だけどなかなか使えないCSS」かもしれませんね。 今回は、display:table-cell をご紹介します。 なかなか使えないと言った理由はIE8以降からの対応になるからです。 ただし、display:table-cell はスマートフォンサイトの制作にかなり便利なので覚えておくことは必須ですね。 display:table-cell で要素が簡単に横並び display:table-cell とは、要素をテーブルのように表現することができるプロパティです。 親の要素に display:table を指定することでテーブルと同じような構造で指定することができます。 display:table-cell を指定した要素はテーブルのように高さが同じになります。 また、floatを使っていな
使い方<script type="text/javascript" src="redips-drag.js"></script> <script type="text/javascript" src="script.js"></script>ライブラリと設定用のjsファイルを読み込んでマークアップするだけです。 デモのマークアップは以下のような感じ。 <div id="drag"> <table> <colgroup> <col width="30"/> <col width="100"/> <col width="100"/> <col width="100"/> <col width="100"/> <col width="100"/> </colgroup> <tbody> <tr> <th colspan="6" class="mark">テーブル</th> </tr> <tr c
TinyTable JavaScript Table Sorter - 2.5KB - Web Development Blog わずか2.5KBでテーブルにソート機能を提供する「TinyTable」。 シンプルだけど次のようなかっこいいソート可能テーブルを実現できる軽量ライブラリが公開。 デモページ 各種変数の設定でカスタマイズも可能みたい。 CSSのクラス名の指定なんかが出来るようです。 var sorter = new TINY.table.sorter("sorter"); sorter.head = "head"; //header class name sorter.asc = "asc"; //ascending header class name sorter.desc = "desc"; //descending header class name sorter.even
ナビゲーションやリストを水平に並べると、なぜか少し隙間が生まれてしまうことがあります。今回はこの現象の解決方法をいくつか紹介したいと思います。 結構簡単な方法なので、知っている人も多いと思いますが、もし知らない人がいれば、ちょっとは役に立つかと思います。基本的にはfloatで解決すれば良いと思いますが、floatを使うと都合が悪くなる場合などもあると思うので(width指定とか、センタリングとか)、そんなときのためにどうぞ。 個人的にメモしておいたものを、WEBにUPして管理しておきたいという意味もあり、今回記事にしています。 元となるソース HTML <ul> <li>バナナ</li> <li>リンゴ</li> <li>ミカン</li> </ul> CSS ul { margin:0; padding:0; list-style:none; } ul li { display: inli
2008年03月18日06:30 カテゴリLightweight LanguagesTips javascript - tableの横列・縦列をハイライト これの「横列・縦列をハイライト」をDHTMLで。 Learn Cool Microsoft Excel Conditional Formatting Tricks - Be a Rock star (Tips | How tos - Save time, impress everyone) | Pointy Haired Dilbert - Chandoo.org エクセルのデータを見やすくする5つの簡単なテクニック | コリス まずは邪、じゃなくて横縞。 現金・預金株式以外の証券株式・出資金金融派生商品保険・年金準備金預け金未収・未払金対外証券投資その他合計 1979FY1,948,234242,722452,2410432,1241
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く