Advanced JavaScript Debugging with console.table()
November 13, 2013Yesterday, I learned about a nifty little JavaScript debugging feature which is part of Chrome's developer tools. During Web Developer Conference Compact, Marcus Ross (@zahlenhelfer) gave a talk about the various JavaScript debugging tools implemented in Chrome, one of which is the console.table() function I want to show here. #Logging Array Data with console.log() Imagine you hav
第25回 tableをもっと見やすくデザインする
今回のポイント 「col」で縦列をまとめて装飾する方法 colに対して有効なCSS指定と無効なCSS指定 colの親に当たるcolgroupの考え方 縦のCSS指定と横のCSS指定はどちらが優先されるのか 縦にも横にも適切な色分けがされた表を作る方法 塗り分ける色味のうまい決め方 table系のタグには縦列をまとめるタグも存在します。colとcolgroupです。“まとめる”という言い方がなんとも微妙なんですが，うまく使うと，とても見やすい表を作ることができます。実例を見ながら解説していくことにします。 「col」で縦列をまとめて装飾する まずはcolから見てみます（リスト1）。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml
col／colgroup 要素で有効なスタイルと無効なスタイル。
Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。 btmup Blog 「ある列だけを改行なしにしたい」というときが結構あります。 確実なのは「その列のすべての td タグに class を付けていく」という方法ですが、あまりスマートとは言えません。 ソースの見栄え的にもいただけない感じ。 そこで、col や colgroup が使えるんじゃないかと思い、事あるごとに試していました。 が、どうしてもうまくいきません。 col と colgroup の組み合わせ方を変えてみたり、CSS の設定を工夫してみたり、いろいろ試しましたが結果は同じ。 ただ、設定したスタイルの中でも適用されるものと適用されないものがあり、その違いがよく分からないままだったので、どうもしっくりこない状態なのでした。 んで今回も似たような場面に遭遇したので改めて調べ
HTMLタグ/テーブルタグ/見出しの対象範囲を指定する - TAG index
この属性を指定することで、それがどのデータに対する見出しなのかを明確に示すことができます。 row … そのセルが、横列に対する見出しであることを示します。 col … そのセルが、縦列に対する見出しであることを示します。 rowgroup … そのセルが、行グループ（thead、tfoot、tbody）に対する見出しであることを示します。 colgroup … そのセルが、列グループ（colgroup）に対する見出しであることを示します。
colgroup / col 要素を活用してみる | WWW WATCH
table 関連の要素とか属性っていろいろあるにもかかわらず、結構使われていないなと思ったり。 上手にマークアップしておけば、アクセシビリティ的にも優れた表組み... table 関連の要素とか属性っていろいろあるにもかかわらず、結構使われていないなと思ったり。 上手にマークアップしておけば、アクセシビリティ的にも優れた表組みが再現できるだけでなく、CSS で見た目をいじるときにも、無駄に class 属性なんかをつける必要もなかったりと、いろいろ良い事あるのになということで、今回はその中から colgroup 要素と col 要素について書いてみることにします。 例えば上記サンプルのような表を作りたいと思ったとき、列方向 （縦方向） のセルに背景色を指定するためだけに class 属性を付けていったりするのは面倒だしスマートじゃない。サンプルのように列方向の各データが構造的にグループ化で
<col>－HTML5タグリファレンス
<col>タグは、表の縦列に属性やスタイルを指定する際に使用します。 <col>は表の縦列をグループ化しませんが、複数の縦列に対して同じ属性やスタイルをまとめて指定することができます。 span属性には、属性やスタイルを適用する縦列の数を指定します。 span属性の値に指定できるのは0より大きい正の整数で、負の数値を指定することはできません。 <col>は、必ず<colgroup>～</colgroup>の中に配置します。 ただし、<colgroup>がspan属性を持っている場合には<col>を配置することはできません。 ■<colgroup>と<col>の違い <colgroup>と<col>は混同しがちですが、以下の点を意識すると理解しやすいでしょう。 <colgroup>は、表の縦列グループを表す要素です。 <col>は、<colgroup>によってグループ化された縦列グループ内の
テーブル -- ごく簡単なHTMLの説明
いくつかの属性とそのサンプルのような、2次元で表現できる情報は「表」の形にまとめると理解しやすくなります。表計算やデータベースでは、横軸に属性（氏名、住所、電話など）をとり、縦軸にサンプル（それぞれの属性を持つメンバー）をとって表現します。リストが「列挙」という形で1次元の情報を表現していたのと対比すると、「表」がふさわしい情報のタイプがよく分かります。 目次： テーブルの基本構成要素 簡単なテーブル 罫線とセルの境界 テーブルの説明 項目名 セルの伸張 セルの背景色 行と列のグループ化 取り上げる要素： table caption tr td th col colgroup thead tbody tfoot HTMLのテーブルはたくさんの要素や属性があって複雑ですが、XHTMLのモジュール化においてBasic Tableと分類されている範囲として、まず項目名あたりまで目を通しておくだけ
スマホサイトでtd/th要素へのposition:relativeはダメ！
スマホサイトで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> <
キャプションの幅を画像の幅に合わせる
Fig 1: Wikipedia のキャプションつき画像の例 ちょっとわかりにくいタイトルになってしまいましたが、つまり Wikipedia のやつ (Fig 1) みたいに、「画像 (またはビデオなどの埋め込みコンテンツ) の下にキャプションをレイアウトするとき、キャプションが複数行にわたる場合は画像の幅に合わせて折り返したい (ただし画像の幅はバラバラ)」というのをシンプルかつ汎用的なかたちで実現する CSS を考えてみました。というか、このブログのレイアウト用にけっこう長いことあれこれ考えてたもののこれといった手が思いつかなくて放置していたんですが、上手い解決を Stack Overflow でみつけた のでパクった、という話です。 <figure> <img src="/img/photo.jpg"> <figcaption>Lorem ipsum dolor sit amet</
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
【CSS】画像を上下中央に表示する（IE7以下にも対応させる） | バシャログ。
娘が小学二年生になり、みまもりケータイ2を買い与えました ishida です。 娘がケータイのボタンを押すたびに、位置情報が送られてきて便利なのですが、 電話をかけたときにも、位置情報がメールで送られてきてちょっと通知頻度高すぎなんじゃね？ さてさて、今回はとある案件で画像を上下中央に表示する機会がありまして、 忘れないように自分的メモです。 CSS3が使えるようになってからは、display: table-cell; で簡単に対応できるようになりましたよね。 例としては、こんな感じ。 HTML/CSSコードサンプル <div class="box"> <p class="image"><img src="image.png" alt="" width="200" heigh="200"><p> </div> .box { display: table; } .box .image { d
HTML5 × CSS3 × jQueryを真面目に勉強 – #16 レスポンシブWebデザインでテーブルを最適化するベストプラクティス | DevelopersIO
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
Fuel UX
Fuel UX extends Bootstrap with additional lightweight JavaScript controls for your web applications. Get Fuel UX View examples Ignite your Bootstrap project today. Include Fuel UX controls in your next web project knowing it's solidly optimized and easy to upgrade. Use a little or use a lot. Deploy only the controls you want with minimal, name-spaced, responsive styling designed to easily fit into
レスポンシブWebデザインでテーブルを使う時の小技
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にはメディアクエリを読ませないよ
Table Tag Generator
To increase or decrease the value, you can either enter on the keyboard, click on the spinner, or turn the mouse wheel. You can select the cells by dragging. Please enter the characters. Please enter the name of the class. × It is not possible to merge <td> and <th>. × It is not possible to re-merge the merged cells. Please split them. × Please enter a number. × Please enter a natural number (1,2,
Portfolio > JavaScript :: Kyosuke.jp
設置方法 まず、ファイル一式をダウンロードします。 通常版 | prototype.js利用版 stripedtableを使いたいHTMLファイルにjavascriptを読み込みます。 <script src="js/stripedtable.js" type="text/javascript"></script> prototype.js版を使う場合は先にprototype.jsを読み込みます。 <script src="js/prototype.js" type="text/javascript"></script> <script src="js/stripedtable_proto.js" type="text/javascript"></script> テーブルに設定するクラス名や、trに対して自動的に付加されるクラス名を変える場合はstripedtable.jsの設定部分をテ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/01/table.html