Interface Builderを使ってカスタマイズしたUITableViewCellを作る方法（追記あり） - 24/7 twenty-four seven
[追記]大事な手順を書き忘れていました。セルの再利用のための手順を最後に追記しています。 間違ってるかもしれないけど、たぶんこう。 View Templateを選択して、新しいXIBファイルを作成します。 もともとのViewを削除します。 代わりにUITableViewCellを配置します。 適当にセルをデザインします。 名前を付けて保存します。ここではFeedListCell.xibとします。 Xcodeで対応するUITableViewCellを継承したクラスと、View Controller (FeedListCellController) を作ります。 View ControllerはUIViewControllerを継承します（UITableViewControllerではない）。 また、セルをインスタンス変数として保持します。ここではFeedListCellのインスタンスです。
内容：「TABLEIZER!」は、Excelの表を貼り付けるだけで、ワンクリックでHTMLのテーブルに変換してくれるツールだ。ホームページやブログに表を貼り付けたい場合、Excelでいったん表を作成し、本サービスを経由してHTMLに変換すれば、ウェブページに貼り付けるテーブルのソースコードをすばやく作成できる。 「TABLEIZER!」は、Excelの表を貼り付けるだけで、ワンクリックでHTMLのテーブルに変換してくれるツールだ。ホームページやブログに表を貼り付けたい場合、Excelでいったん表を作成し、本サービスを経由してHTMLに変換すれば、ウェブページに貼り付けるテーブルのソースコードをすばやく作成できる。 使い方は簡単で、Excelで作成した表を範囲選択してコピーし、本サービストップページにあるフォームにペースト。「Tableize It!」と書かれたボタンをクリックすれば、次のペ
普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」:phpspot開発日誌
ParamQuery jQuery Grid Plugin 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」 ありきたりなカッコいい、とはいえないような以下のテーブルがあったとします プラグインで初期化すれば、ソータブル、エディタブル、なクールなテーブルに早がわり これは5,6年前でいえば魔法だと思う方は少なくないでしょう。 関連エントリ レスポンシブなテーブルを作るjQueryプラグイン「MediaTable」 テーブルをグラフに変換してくれるjQueryプラグイン レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」 テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイン「jQuery Table So
kndb.jp
This domain may be for sale!
There are several ways to define a block of JavaScript functionality. Learn which is the most appropriate one for your particular use case.
Red Team Design
About our web design school Our Web Design School was created in 2015 to help people learn new professions and companies find competent specialists. The school program is aimed at studying modern web design technologies.
テーブルをソートできるようにするjsライブラリ-table sorting table sortingはテーブルをソートできるようにするjsライブラリです。 テーブルの内容でソートしたり、奇数行、偶数行にそれぞれ異なるclassをつけたりが可能です。 設置方法 ダウンロードしたsortable.jsをhead要素内なので読み込みます。 <script type="text/javascript" src="sortable.js"></script> ソートの対象のtable要素のclass属性をsortableに設定して、任意のID名をid属性につけます。 <table class="sortable" id="foo"> ソートの対象にしたくない列がある場合はth要素のclass属性にunsortableを設定します。 <th class="unsortable"> ソートの対象にした
いまどきの技術本執筆環境 - 「CakePHP2実践入門」
原稿執筆 原稿は Vim で書いて、Marked のプレビューを確認するという形で進めました。 Vim 原稿の形式は、Markdown＋独自マークアップのプレーンテキストだったので、執筆陣は各自好きなツールを使うことができました。 Vim は普段から使っていて慣れていますし、技術本ということでソースコードを読んだり書いたりする場面が多いので同じエディタ上でそれができるのは楽でしたね。 Markdown ということで当初は専用のエディタなども試したのですが、やはり「書く」という行為に関しては手に馴染んでいるものが一番です。 Marked Marked は Markdown 形式で書かれたファイルをプレビューするツールです。Marked でファイルを開いておくと元ファイルが変更されるとプレビュー側も連動して更新されます。 あくまでプレビューに特化したツールなので任意のエディタと組み合わせて使用
定義リスト dl 内の dt と dd を CSS を使って横並びさせる方法ってのはいくつかあるんだけど、最近どうも記憶力が低下してきた気がするんで、完全自分用メモとして記しておく。 多分オーソドックスな方法 とりあえず最もオーソドックスであろう方法。これ意外にもあるのかもしれないけど、多分今んとこ自分は知らない。（margin を使った方法は前にも記事にしたことがあるけど、一応今回も入れておく） dl_sample01.html float を使った方法 margin を使った方法 position を使った方法 <dl> <dt>foo</dt> <dd>bar</dd> <dt>foo</dt> <dd>bar</dd> </dl> ちなみに margin を使った方法での margin 値の算出方法は、dt と dd それぞれの line-height 値の半分を足し、それに dt
デザイナーならこう作るCSSスタイルテーブル『A CSS styled table version 2』 – creamu
かっこいいテーブルをデザインしたい。 そんなあなたにおすすめなのが、『A CSS styled table version 2』。デザイナーならこう作るCSSスタイルテーブルだ。 このエントリーでは、クリーンなソースでコーディングされたテーブルが2つ紹介されている。 » Example 1 背景画像は使わず、セルに背景色を使った例 » Example 2 背景画像を使った例 どちらもページのソースを見るのが早いだろう。 シンプルでとても綺麗なテーブルに仕上がっていると思う。 デザイナーならこう作るCSSスタイルテーブル、チェックして作っていきたいですね。 プランナー、アートディレクターにたくさんのことを教わりました。「とりあえず手を動かすのがレイアウトの基本」だと。あとデザインはピクセルよりも見た目。人間の目にはくるいがあるから見た目で綺麗にそろっていればいい。とにかく手を動かしていこうっ
ページにほんの一行外部ファイルを加えるだけで、iPhone, iPadなどのiOSをはじめ、Android, Blackberry, Windows Phone, Window Tabletなどスマフォやタブレット、デスクトップなどのデバイスを判定し、簡単に条件付きのCSSやJavaScriptを利用できるにするスクリプトを紹介します。 Device.js -GitHub Device.jsの使い方 Device.jsのデモ Device.jsの使い方 Device.jsの実装は、簡単です。 外部ファイルとして、当スクリプトを記述するだけです。 <script src="device.js"></script> スクリプトを設置すると、表示デバイスに基づいて<html>に適切なclassを付与します。 iPhoneでアクセスすると、こんな感じに。 <html class="ios ipho
There are, in fact, people out there raising lots of capital without employing a deck at all. I was really intrigued to speak to two of them and learn how they did it.
組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 「エクセルシートをHTMLテーブルに変換しちゃう君 」でカンタンテーブル作成 「エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)」は、エクセルの表を貼り付けるとHTMLのTableタグで表を生成、プレビューも表示してくれる便利ツール。以前紹介したサービスでは日本語を通すのにひと手間必要でしたが、今回はその部分でも問題ありません。 変換しちゃう君の特徴 「Tableizer」との比較にもなっています。 セル内での改行に対応 CSVにも対応 強固なセキュリティ性（サーバーとのやり取りなし） セルの結合が可能 正しいマークアップが可能 行ごとの色替えも設定可能 Class指定も細かく付与可能なので独自デザインも組み込みやすい サンプルテーブル T
Super Tablesは、テーブルのヘッダを固定表示にし、縦横にスクロールバーを表示させるスクリプトです。
リスト要素で配置したナビゲーションをページの中央にフィットさせ、水平方向の真ん中に配置するスタイルシートのさまざまなテクニックを紹介します。 それぞれの利点や欠点、実装のポイント、対応ブラウザなど、今すぐに役立つテクニックです！ How to shrinkwrap and center elements horizontally デモ 実装: display:inline-block 実装: position:relative 実装: display:table 実装: display:inline-flex デモ デモは上から display:inline-block, position:relative, display:table, display:inline-flexで、ナビゲーションを水平の真ん中に配置しています。 デモページ：幅780pxで表示 実装: display:inl
Extは、ウェブアプリケーションを構築するための、クライアントサイドのJavaScriptフレームワーク（公式サイトのFAQより）です。日本ではまだ実際の利用例はあまり多くないようですが、たぶんに日本語のドキュメントがまだそれほど多くはないからではないかと思われ、今後利用事例は増えていくだろうと思われます。 Extの真骨頂は高機能でデザインの洗練された、（直ちに利用可能な）レディメイドのユーザインタフェースウィジェット群です。Extは「アダプタ」として、prototype.jsやjQuery、Yahoo! UIといったJavaScript拡張ライブラリを利用する設計ですが、現在は独自のアダプタも用意され、サードパーティのライブラリに依存しない実装も可能です。 現時点での安定版はバージョン1.1ですが、既に、大幅な機能強化が図られたバージョン2.0のアルファ版が公開されており、以下のページで
CSSでクールなテーブルを作成するサンプル:phpspot開発日誌
A CSS styled table | Veerle's blog Further to my article about the creation of a CSS calendar the thought crossed my mind to show you an example on how you can style a table using CSS.CSSでクールなテーブルを作成するサンプル。 次のようなテーブルを作成するサンプルが公開されています。 サンプル１（解説記事） サンプル２（解説記事） テーブルもここまでカッコいいものが作れるんですね。 是非テーブルスタイル時の参考にしたいサンプルです。
遅刻癖のなかった人が、ある時期から遅刻や無断欠勤を繰り返すようになった場合、その人が「ウツ」状態である可能性が考えられます。決して責任感が足りないのではなく、むしろそんな自分に自己嫌悪しているのです。 (2008年11月13日)
ソートが可能なテーブル実装ライブラリ色々:phpspot開発日誌
CSS Juice 16 Sortable Table Techniques Tabular data in table form is a regular technique on web sites and web applications for represent data and information. ソートが可能なテーブル実装ライブラリ色々。 JavaScriptとCSSを活用し、データのソートが可能な便利なウィジェットを実装できるライブラリが多数紹介されています。 Nofunc Table Organize TableKit Brixontech Table Sort Sortable Selectable Zebra Table Kryogenix Sortable Sorting HTML Tables with Javascript SortedTable by M
Handsontable is a JavaScript data grid that looks and feels like a spreadsheet - Available for React, Angular, and Vue
JavaScript data grid with spreadsheet UX A front-end component that combines data grid features with spreadsheet UX/UI. Professional support included. Works with React, Angular, Vue, and plain JavaScriptGet Started What's new in v14.1.0 of January 16, 2024 → All spreadsheet featuresWhen you work with Handsontable, it's like you're working with Excel or Google Sheets. There's no steep learning curv
モダンCSSでテーブルをゼブラストライプしたり、テーブルの四隅を角丸にしたり（昔はかなり面倒でした）、列や行を分割したり、ホバーでハイライトやアウトラインを表示したりなど、表のデータを読みやすくするテーブル（<table>）のさまざまなスタイルを紹介します。 A Guide to Styling Tables by Mads Stoumann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テーブルを構成するHTMLの要素 テーブルをゼブラストライブにするCSS テーブルを角丸にするCSS テーブルの列を分割するCSS テーブルの行を分割するCSS ホバー・フォーカスでハイライトするCSS ホバーでアウトラインを表示するCSS データを左右・中央に揃えるCSS 終わりに はじめに 私は最近、小さな矛盾に気がつきました。
秀逸なテーブルデザインのパターン集:phpspot開発日誌
Ultimate guide to table UI patterns 秀逸なテーブルデザインのパターン集をまとめたエントリのご紹介です。 デザインだけでなく、見やすさや分かりやすさという点にも気を配りたいテーブルデザインは比較的難しいものになりますね。 テーブルデザインの例を知っておくことで、難しいテーブルのデザインをする際にも参考に出来そうです。 Apple のデザインっぽいテーブル 複雑なデータをわかりやすくスタイリッシュにまとめたテーブル 画像なども盛り込みつつ見やすいテーブル シンプルに見やすいテーブル JavaScript の入ったものも入ってきますが色々なテーブルを見てストックしておくと後に役立ちそうです。 関連エントリ CSSでデザインしたクールなテーブルのサンプル集 CSSでデザインされたテーブルレスでクールなフォームサンプル
↑CSSだけでこんな感じに上下中央揃えを実現させるテクニックです。下記の3つの方法を紹介します。 ・1行のみのテキストを中央揃えにする場合 ・2行以上のテキストまたは画像を中央揃えにする場合 ・高さが決まっていない要素を中央揃えにする場合 1行のみのテキストを中央揃えにする場合 <!-- HTML --> <div> <p>1行のみのテキストに有用</p> </div> /* CSS */ div{ width: 200px; height: 100px; background: #DDDDFF; text-align: center; } p{ line-height: 100px; } →1行のみのテキストを中央揃えにするサンプル line-heightは行間のスペースを制御するプロパティです。なので、2行以上の文などには利用できません。1行だけの場合には簡単に実装できる有用な方法です
2012/10/18：画像に一部誤りがありましたので、修正致しました。 こんにちは。 スマートフォンサイト制作案件が増えて楽しいKanaです。 スマートフォンサイトのコーディングは、古いブラウザ (ie6とかie6とかie6とか！)のことを考えるとできなかったCSSの指定ができるので、とても楽しいですね！ スマートフォンサイトの制作はリキッドレイアウト。 ナビゲーションの数が奇数！…均等にするにはwidth指定面倒だな〜画像とテキストを横に並べなきゃ…縦方向の揃え位置を指定できたらいいのに…。と思ったことはありませんか？ そんな時の強い味方がdisplay:tableと、display:table-cellです。 スマートフォンサイトのコーディングを頻繁にされている方は、既にご存知かもしれませんが、これからスマートフォンサイト作るよ！という方には、とても便利だと思います！ display:
table要素をレスポンシブに対応させる、というスクリプトです。他にも同じようなスクリプトは存在しますが実用的ではなかったので紹介してなかったですけどこれはアリな気がします。 table要素をレスポンシブに対応させるjQueryプラグインです。他にもMediaTableやzurbのスクリプトもあります。 ウィンドウサイズの幅が狭くなると、表示しきれないカラム部分をタップによる表示式に切り替える、というもの。 上記のようにタップすると非表示部分のカラムの内容が表示されます。ユーザーにとっても分かりやすい気がしました。 公式の動作サンプルです Sample コード<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <scrip
テーブルレイアウトとはテーブルタグを、左のようにセルを切ってレイアウトするもの。そもそもはテーブルタグは表に使われるものであって、レイアウト目的で使うべきではないという意見はごもっともなものの、きっちり幅指定や余白指定ができてブラウザ依存しにくいことから、企業サイトはもとよりいろいろなサイトに使われておりました。いや、今でも立派に使われています。 対してCSSレイアウトは、上と同じレイアウトをHTML（XHTML）＋CSSで表現するもの。こんな感じです。記述は一例として適当に書いてるんで、アテにしたり突っ込みいれたりしないでくださいね(笑)。 【HTML】 <div id="header"> <h1>毎日考ブログ（ヘッダ部分）</h1> </div> <div id="main"> <div class="menu">メニュー部分</div> <div class="contents">本
こんにちは。10月の組織編成でブログビジネス部に異動になりました飯田です。 普段はディレクターしてますが、時にモバイルサイトのマークアップをするときがあります。以前、こちらのエントリーでモバイルサイトを作るうえでのノウハウを紹介していますが、本エントリーではもう少し実践的な「モバイルサイトで○○を表現するには」をすごく簡潔に紹介してみたいと思います。 ある程度の端末で正常に表示されることを確認していますが、一部を除いて正常に表示されない場合もありますがご了承ください。なお、本エントリーで紹介している記述はわかりやすいように style 属性を全てインラインで記述しています。 見出しに背景色 div タグXHTML 対応の端末であれば下記のタグで簡単に見出しに背景色をつけることができます。 <div style="background-color="#0000ff;">ほげほげ</div>
更新履歴 2010-01-21 本エントリの内容も含めた最新の情報は下記エントリをご参照ください。 jQuery の位置・サイズ関連メソッドまとめ - Cyokodog::Diary サイズの取得 煩雑になるので height の記述しかありませんが、width に置き換えれば幅もとれます。 普通のボックス要素 height() メソッドで取得できる値には、padding や border の分の高さを含みません。 CSS の height と同じなので、css('height')メソッドで取得してもよさそうですが、こちらの場合ブラウザの種類や CSS の定義の仕方で取得される値が異なる（クロスブラウザとしての機能が完全でない）ので、純粋に px 単位の高さを取得したい場合は height() メソッドを使用した方が無難です。 スクロールバー付きボックス要素 clientHeight には
Basic support for relational databases: MySQL, SQL Server, PostgreSQL and others Data Editor SQL Editor Database schema editor DDL Basic ER Diagrams Basic charts Data export/import Task management Database maintenance tools All DBeaver Community featuresAdvanced securityAdvanced support for relational databasesConnection through ODBC driversNoSQL databases support: MongoDB, Cassandra, Redis, Couch
思いのほか前回のRailsプチ・デザインパターンの紹介に反応があったので、こういう小ネタも出していったほうがいいのかな、ということで第二弾。 ソーシャル系アプリだと、ユーザとユーザを関連付ける多対多のモデルがたくさんでてきます。たとえば、一般的なところではフォローとかブロックとか足あととか。さらにデーティングサイトになると、ウィンクだったり、Secret admirer（こっそりlikeするけど両思いだったらおめでとうって通知がくるってやつ）だったり、いろいろなモデルがこのパターンにあてはまります。 この場合、「AがBをフォローしている」「BがAをフォローしている」「AとBがお互いにフォローしている」という3つの状態があるわけですが、相互フォローの状態は「AがBをフォローし、かつBがAをフォローしている」と読み替えてSQLでも記述可能なので、以下ではシンプルに単方向のグラフで全てを扱うもの
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.
レスポンシブWebデザインのサイトでテーブル（表組み）を組み込む際に 要素量の多いテーブルの場合、CSSでレイアウトを無理やり調整したり、 スマホレイアウト時はテーブル全体を横スクロールさせるようにしたりと レイアウトに苦労することがよくあります。 そんなテーブルをレスポンシブ対応させる際に いろいろと便利に使えそうなjQueryプラグインを まとめて自分用メモとして紹介してみます。 Basic Table (jQuery Responsive Tables) Basic Table (jQuery Responsive Tables) デモページはこちら まず最初は「Basic Table」。 画面幅に応じて見出し要素を複製するかたちで テーブルを項目の並びを整えて収めてくれます。 様々なレイアウトパターンが用意されていて テーブルが長くなる場合にはスクロール制御する機能もあり、 いろい
<table border> <tr> <td>1-1</td> <td>1-2</td> <td>1-3</td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> </tr> </table> 各設定項目で表の設定を行ってください。設定内容の詳細はテーブルタグカテゴリーでご覧になれます。（このツールでは、セルを個別に指定したりセル同士を結合させることはできません） 列数は1～20、行数は1～100の範囲で指定できます。数値を大きくすると処理に時間がかかる場合があります。 背景色について 表全体の背景色 … 枠線を含めた背景色 セル全体の背景色 … 枠線を含めない背景色 見出しの背景色 … 見出しの列（行）部分のみの背景色 コピーしたものを設定項目に貼り付けた場合、そのままではサンプルの表示に反映されません。その場合は更新するボタンを押し
はじめに 概要 Apache Iceberg(アイスバーグ)とは [重要] Icebergの本質はTable Specである Table Spec バージョン Icebergハンズオン Icebergの特徴 同時書き込み時の整合性担保 読み取り一貫性、Time Travelクエリ、Rollback Schema Evolution Hidden Partitioning Hidden Partitioningの種類 時間 truncate[W] bucket[N] Partition Evolution Sort Order Evolution クエリ性能の最適化 ユースケース Icebergのアーキテクチャ Iceberg Catalog Iceberg Catalogの選択肢 metadata layer metadata files manifest lists manifest f
CSS は Cascading Style Sheets の略です。CSSは、HTMLで記述された Webページの見栄え・スタイルを効率的に定義するための技術です。HTMLで文書の意味を定義し、CSSで見栄えを定義することにより、意味と見栄えを分離することが可能となります。 最も基本的なCSSの使用例を下記に示します。この例では、<h1>～</h1> で囲まれたタイトル部が赤字で表示されます。「h1 { color: red; }」は、「h1 の部分の色(color)を赤(red)にする」という意味を持ちます。この例の「色」のような見栄えなどの情報を「スタイル」と呼びます。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSSの
CSS「display: table」と「display: table-cell」で出来ること | アイビーネットblog
2008年4月24日 14:11 (X)HTMLCSS IE8は「display: table-cell」に対応 「display: table-cell」とは、テーブルの構造を表現することができるCSSプロパティです。先日公開されたベータ版(IE8 Beta1)で確認しましたが、IE8からは「display: table-cell」に対応しているようです。 そこで、今回はこの「display: table-cell」を使うことで、どんなことが出来るのかを見ていきたいと思います。 「float」と「display: table-cell」でのカラムレイアウトを比較 左右のカラムが固定で、中央のカラムが可変というような3カラムのレイアウトを表現したい場合、CSSでは通常「float」を使います。カラムレイアウトは「display: table-cell」でも表現できますので、この2つの方法を
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
［ウェブサービスレビュー］ワンクリックでExcelをHTMLのテーブルに変換「TABLEIZER!」
13 jQuery SelectBox/Drop-down Plugins — SitePoint
Welcome to Tablecloth テーブルのマウスオーバーを色変更
テーブルをソートできるようにするjsライブラリ-table sorting
Lucky bag::blog: dt と dd を横並び
デバイスを判定し、CSS/JavaScriptで簡単に利用できるようにするスクリプト -Device.js | コリス
iPadの対抗機７種を見てみよう甘美なインタフェイスだけがすべてじゃないぞ
「エクセルシートをHTMLテーブルに変換しちゃう君 」がすごく便利
[JS]巨大なテーブルでも省スペースに表示するスクリプト -Super Tables
[CSS]レスポンシブ対応、ナビゲーションを水平の真ん中に配置するテクニックのまとめ
ウノウラボ Unoh Labs: Ext.js入門: Grid編
8人に1人が苦しんでいる！「うつ」にまつわる24の誤解｜ダイヤモンド・オンライン
本棚・壁面収納家具・座椅子販売｜激安アウトレット家具の通販店
モダンCSSで実装する、テーブル（<table>）のさまざまなスタイルのまとめ
CSSでボックスの内容物を上下中央揃えにする方法3種。｜web bibo
スマートフォンサイト制作にdisplay:tableとdisplay:table-cellが便利！
tableをレスポンシブWebデザインに対応させるスクリプト・FooTable
東京webデザイナー日記: 日経平均銘柄225社サイトの脱テーブル率調査
毎日考ブログ -Web屋のウェブログ- | Web標準に進路を取れ 第5回「テーブルレイアウトは罪なのか」
モバイルサイトマークアップ5つの小技 : LINE Corporation ディレクターブログ
http://www.res-system.com/weblog/item/550
jQuery でサイズや位置を取得する方法を図にしてみた - Cyokodog :: Diary
DBeaver Community | Free Universal Database Tool
ユーザとユーザを多対多で関連付けるモデルを共通化する - Hidden in Plain Sight
css-lecture.com - css lecture リソースおよび情報
テーブルをレスポンシブに対応させるのに便利なjQueryプラグインまとめ｜BLACKFLAG
テーブルタグ作成ツール［Web便利ツール］ - TAG index
Apache Iceberg とは何か - 流沙河鎮
CSSリファレンス(CSS入門) - とほほのWWW入門