You can now import Markdown table code directly using File/Paste table data... dialog. How to use it? Using the Table menu set the desired size of the table. Enter the table data into the table: select and copy (Ctrl+C) a table from the spreadsheet (e.g. Google Docs, LibreOffice Calc, webpage) and paste it into our editor -- click a cell and press Ctrl+V or just double click any cell to start edit
レスポンシブテーブルという言葉をご存知でしょうか。テーブル（表組み）に対してレスポンシブデザインを適用する手法のことです。既存のものとは少し違った手法を考案したので記事を書きました。 レスポンシブテーブルは一般的に難易度の高いものとされています。沢山の人がいろいろな方法を考案していますが、どんな表組みにも使える汎用的なレスポンシブテーブルの枠組みはまだ登場していません。第一、表組に入る内容はほんとうに様々なので、汎用化という考え方に限界があることは明白なのです。 いくつかの実装パターンは「レスポンシブWebデザインでテーブルを使う時の小技」という人気記事で紹介されています。この記事で紹介されているものの多くは、CSSのdisplayプロパティの値を上書きすることで表組みからリスト形式に組み替えたり、行と列を逆転してスクロールさせて見られるようにしたりといった、ある種、大道芸を見せられている
「日時」を「日 時」のように記述（表現）することがあります。 そもそも、どうして均等揃えにしたいんだっけ？を考えると、次のような理由が考えられます。 項目名の一番右の文字のツラを揃えたい 項目名と対応する情報（「日時」と「2013年9月21日」）が離れると関連性がわかりにくくなる（※左寄せの場合。右寄せにすれば解決） しかし、項目名を均等割付するのは、単純に、ワープロ時代からの悪しき慣習によるものが多いのではないでしょうか？ 私たちは、1文字ずつでなく、チャンク（複数の文字のカタマリ）で単語を認識しています。不必要に文字が離れているのは、読みにくいと思うのです。 追記（2013年7月29日）： エントリー全体を整理、リライトしました。 実装方法とそのpros/cons（よいところ/悪いところ） 均等割付する場合には、次ような実装方法があります。 全角スペース（半角スペース）を入れて調整（プ
dislay 属性についてもっと知りたいという方は、こちらのサイトを参照ください。 display - CSS | MDN 要するに何が言いたいかというと、テーブルもまたスタイルシートの display 属性によってその形状を実現しているに過ぎず、この値を色々と操作すればスマートフォンのようなスクリーンサイズの狭い環境にも最適化された表示が出来るのではないかということです。 実際に作ってみた - 下準備 今回は4パターンの表示を紹介します。まずは下準備として簡単なテーブルレイアウトと元となるスタイルを組んでいくとします。 はじめに HTML で適当なテーブルを作ります。 <table class="table table-striped table-responsive"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Ag
THIS IS A SITE about a small corner of the Weald of Kent somewhere between Biddenden, Benenden and Rolvenden. It's supposed to be about natural history, but just now it's mainly about Tawny Owls because our local owls were the main reason for starting the site in the first place узнать здесь. The area covers about six square miles, extending from a band of forest and woodland in the north to a mor
CSS3でのposition:relative 昨日「スマホサイトでtd/th要素へのposition:relativeはダメ！」と書いたところ仕様書を読め的な圧力がいろんな所からかかってきました。こわいですね。 position:relativeが仕様としてどうなっているかは@Takazudoが5年ほど前に解説しているのでそちらを参考にしてください。 table系にはposition:relativeが効かない | Takazudo Clipping* ただ、これはCSS2.1の仕様なんですね。最新のCSS3ではWD段階ではありますが、次のようになっています。 table-caption and table-cell offset relative to its normal position within the table. If a table cell spans multipl
スマホサイトでtd/th要素へのposition:relativeはダメ！ iOS4.x系やAndroid2.x系のブラウザだとtd/th要素に指定したposition:relativeが無視されます。 また、td/th要素以外にもdisplay:table-cellを指定した要素へのposition:relativeの指定は無視されます。 セルの内側の要素をabsoluteを使って自由配置したい場合は、内側にdivを一個かましてそいつにposition:relativeを指定するのがよろしいかと思います。 <table> <tr> <td> <div>cell1</div> </td> <td> <div>cell2</div> </td> </tr> <tr> <td> <div>cell3</div> </td> <td> <div>cell4</div> </td> </tr> <
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にはメディアクエリを読ませないよ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く