マークアップfacebooktwitterこんにちは、工藤です。今回はテーブルデザインについて参考にしたいものを集めました。簡単なようで結構悩んでしまうんですよね・・。Skyhttp://icant.co.uk/csstablegallery/tables/39.php名前の通りグレーを基調にリンクにオレンジと青を使ったテーブルです。こちらのサイトでは右上にあるデザイン名からCSSを参照することができます。Nimbupanihttp://icant.co.uk/csstablegallery/tables/42.php黒を基調に、リンクに青色を使っているテーブルです。英語だからいいのかもしれないのですがスタイリッシュなテーブルです。Casablancahttp://icant.co.uk/csstablegallery/tables/71.phpグレーと赤を使ったテーブル。色のバランスのよさで赤があまりきつい印象を受けず見やすいテーブルだなと思います。CSSを参照するリンクが切れているのでソースから直接見るかこちらのGitHubからも見る事ができます。2http://veerle-v2.duoh.com/blog/comments/a_css_styled_table_version_2/よくプランの比較などで見かけるテーブルですね。見やすく、コードも複雑ではなそうなので使い勝手がよさそうです。tablehttp://veerle-v2.duoh.com/blog/comments/a_css_styled_table/目立たせたい項目の左上に三角のアイコンを入れる事で目がいくようになっています。シンプルできれいですね。Ver.02(おまけ付き)http://creators-manual.com/tablecss/http://creators-manual.com/tablecss02/企業サイトなどに使えそうなシンプルでかっこいいデザインのテーブルです。項目にも目がいきやすいです。CSSでTableをデザインするサンプル集http://www.css-lecture.com/log/css/035.htmlシンプルなテーブルのサンプルが10個用意されています。Designshttp://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/こちらもテーブルのサンプルが10個用意されています。シンプルではあるのですがこういう表現方法があったのかーと感心してしまいました・・。CSS3http://tympanus.net/codrops/2010/05/03/pimp-your-tables-with-css3/css3でつくられている比較用のテーブルです。使用している画像はチェックのアイコンのみなのでソースが綺麗なのが良いです。STYLEhttp://www.freshdesignweb.com/free-beautiful-css3-table-style.htmlこちらもCSS3でデザインされているテーブルです。上記のものに比べてコードはちょっと複雑そうなのですが項目の内容が分かりやすく表現できるのがよいですね。ちなみにCSS3では組めないけれどテーブルはゼブラ柄にしたい!という場合はこちらの記事でご紹介した『yuga.js』の『奇数、偶数を自動追加』の機能がおすすめです。それではこのあたりで。最近はWordPressを触るのが好きです。※この記事は2024年10月現在の情報です。※この記事は2024年10月現在の情報です。※この記事は2024年10月現在の情報です。(エイトビット)東京都目黒区でWebサイト制作、Webシステム開発などを行っております。コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。見積りシミュレーションをご用意いたしました。※この記事は2024年10月現在の情報です。※この記事は2024年10月現在の情報です。※この記事は2024年10月現在の情報です。※この記事は2024年10月現在の情報です。WordPressでも利用することは可能ですが、WordPressはセッション関数を推奨していません。