【HTML5・CSS3】おしゃれなテーブルデザインのサンプルソース5点 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
地味な離島ライター内藤です。普段はコーダーとして仕事をしていますが、たまにはデザイナーさんのように人の目に触れる仕事もしてみたい！ そこで本日は、日々の業務で見かけてこれは使えるぞと思ったtableを、独自に再構築してソースコードを公開しようと思います。 table作成時に参考になるサイト 本題に入る、その前に。XPの公式サポートも終了し、HTML5＋CSS3の普及が進んでいます。今更ながら、この技術でどんなtableが実現できるのか、とてもわかりやすく説明されていたサイトをまずご紹介します。 table専門参考ページ4選 table専門の参考ページを4つほど選んでみました。 CSS3を使って美しく装飾されたテーブルの作り方｜Webpark CSS3でのtableの作り方を、見た目とソースから解説してあります。 テーブル｜CSSデザイン｜スタイルシート（CSS）｜PHP & JavaScr
レスポンシブ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にはメディアクエリを読ませないよ
[CSS]たった二行で、さまざまなカラムを設定するグリッドのフレームワーク
たった二行のシンプルなスタイルシートで、さまざまなサイズのカラムを設定するグリッドのフレームワークをを紹介します。 .row { display:table; width:960px; margin:0 auto } .cell { display:table-cell; vertical-align:top; padding-left:10px } HTMLもシンプルでdiv要素を使うだけです。 HTML 3カラムの例です。カラムの数にあわせて、div要素を配置します。 <div class="row"> <div class="cell" style="background-color:#aaa;">1</div> <div class="cell" style="background-color:#bbb;">2</div> <div class="cell" style="back
ケータイサイトのtableタグの特徴と、5つのデザイン例＆ソース : LINE Corporation ディレクターブログ
※文中のケータイ livedoorのPVに誤りがあり、修正いたしました (2010/9/22) こんにちは、『プチペット』を担当している吉沢です。 Webサービスのケータイ対応がやっと当たり前になってきたかと思ったら、今度はスマートフォンの対応と、モバイル業界の時の流れはものすごく速いですね。 そんな中、ケータイは新しい端末のシェアが増えていく度に、サイトで表現できる自由度が高くなり、単に作るだけではなく、デザインで差をつける時代が来ています。 それが読み取れる世の中の動きとして、たとえばモバイルデザインアーカイブさんは、年鑑が出るくらい書籍・サイト共に人気ですよね。また、ちょっと前に発売された書籍『ケータイサイト解体新書 デザインパターンから理解する実装テクニック』は、いろいろなデザインパターンからHTMLを引けるため、デザインをする上でとても参考になります。 携帯サイト年鑑2010 著
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
