スポンサーサイト

 

--.--.--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!
-------- | スポンサー広告 | | | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/54-e3807888

「スポンサーサイト」へのトラックバック

- TrackBack -


「スポンサーサイト」へのコメント

- Comment -

あると♪さんのブログかっこ良いので、私も是非見習いたいと・・・
ブログのカスタマイズ私も挑戦してみます。(きっと笑)
又、色々教えて下さいね。
  • 2014-11-18 14:03
  • girigiri26さん@管理人
  • 編集

Re: 表

> girigiri26さん

ありがとうございます♪(≧∇≦)b
自分で好きなように表示出来ると面白いですよ^^
是非、挑戦してみて下さい♪

また何かあればいつでも気軽にご連絡下さいませ♪d(≧∀≦)b
  • 2014-11-18 14:19
  • あると♪さん@管理人
  • 編集

No title

角を丸くしたシンプルなテーブルが一番好きだなあ(*´▽`*)
背景をグラデーションにしてるのがまたいいですね(^^♪
グラデーションはどうやって表現してるんですか??CSSですか??
ちょっとしたひと手間で印象ってずいぶんかわりますよね(^^)
  • 2014-11-18 14:57
  • ひーさんさん@管理人
  • 編集

Re: No title

> ひーさんさん

確かにちょっとした手間で印象って変わりますよね♪(≧∇≦)b
また、ヘッダーセル(表の項目名の部分)は最後のテーブル以外はCSSでグラデーションにしてます♪

「角を丸くしたシンプルなテーブル」の場合だとCSSのソースで16行目と17行目の部分です♪

background-image: -webkit-linear-gradient(#dff, #9cf);
background-image: linear-gradient(#dff, #9cf);

▲この部分の(#dff, #9cf)が色を指定している箇所で
 明るい色の部分が「#dff」で、暗い色の部分が「#9cf」です♪(≧∇≦)ノ
  • 2014-11-18 15:18
  • あると♪さん@管理人
  • 編集

No title

あると♪さん 相変わらず頑張っているようで何よりです。

テンプレートなど私には難しくてチンプンカンプンなのですが、完全にあると♪さんの方が先輩です。

今後のご活躍にも期待して応援ポチ!して失礼いたします。
  • 2014-11-18 22:51
  • T.Oさん@管理人
  • 編集

Re: No title

> T.Oさん

いつもありがとうございます♪d(≧∀≦)b

記事数ではT.Oさんの方が圧倒的で...ww
私も頑張りますっ!!(≧∇≦)ノ
  • 2014-11-19 00:25
  • あると♪さん@管理人
  • 編集

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
  • 2014-11-28 17:27
  • -さん@管理人
  • 編集

すみません

何度もすみません。
記事の下のトラックバックの所にこの記事のトラックバックを入れてみたのですが・・
何処が変わるのでしょうか?
本当に何度もすみません。
送信済みにはこの記事のトラックバックのアドレスが入ってます。
  • 2014-11-28 23:15
  • girigiri26さん@管理人
  • 編集

Re: すみません

> girigiri26さん

全然OKですよ~♪(≧∇≦)b

私の方でもテストしてみたのですが問題なくトラックバック出来ました♪
ただ、そのトラックバックを削除してから再度トラックバックを飛ばして見たら
今度は表示されませんでした...( ̄▽ ̄;)

前に同一記事から2回トラックバックするテストもしてみた事があるので、
もしかしたら削除した事が関係してトラックバック出来なくなってるのかも?...

別記事からトラックバックするか、
もしくは別ページの記事へトラックバックすれば問題なく表示されると思います...

でも、それじゃあ解決になって無いですね...w
  • 2014-11-29 16:03
  • あると♪さん@管理人
  • 編集

なるほど

あると♪さん

色々ありがとうございます。
トラックバック色々奥が深そうですね。
失敗しちゃダメなんですね。
今度、あると♪さんの記事に関連する記事にトラックバック付けてみますね。
って、すぐに書く予定です・・・
(コバンザメの様じゃ・・・)
すみません、何時もお騒がせで・・・
  • 2014-11-30 17:25
  • girigiri26さん@管理人
  • 編集

Re: なるほど

> girigiri26さん

また何か気付いた事があれば気軽にご相談下さいね♪

それと私のブログに対してのトラックバックなどは失敗しても全然OKなので
ドンドン気兼ねなく練習しちゃって下さい♪( ̄ε ̄〃)b
  • 2014-11-30 22:37
  • あると♪さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

電卓風のtableデザイン テーブルデザインって結構奥が深いと思うのは私だけ?

HTMLを勉強し始めた頃、このテーブル(表)に線を付ける方法も分からず何かと悩みまくりました... (TヘT)
そのせいか未だにちょっと苦手意識があるので、今回は「<table>」タグを使った表をスタイルシート(CSS)で色々装飾する練習&今後自分がテーブルを作る際にコピペ出来るようメモ代わりに記事にしました♪
ちなみにこの記事のトップ画像も、スタイルシートで装飾したテーブルをキャプチャーした物です♪(手元にあった電卓風にしてみたw)







1.電卓風に凹凸を表現したテーブル


▼電卓風のテーブルデザイン
ON  OFF 税込 税抜
÷
×
まずは、トップ画像にある電卓風のテーブルデザインです♪

ぶっちゃけトップ画像にする為に作ったテーブルなので...
その他に使うとこは特に考えてません... (まぁ練習なんでっ!!w)

でも、使うとすればブログのサイドメニュー等にあるカレンダーをこんな感じで表示するのも良いかも♪(このブログはカレンダーないけど...)

...って事は最初からカレンダーのテーブルにすれば良かったんじゃ?ww
▼ このテーブルのHTML&CSS ▼
 ← クリックするとソースが表示されます。

<table class="sample1">
<caption>▼電卓風のテーブルデザイン</caption>
<tr>
<th>ON&nbsp;</th>
<th>OFF</th>
<th>税込</th>
<th>税抜</th>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>÷</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>×</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>-</td>
</tr>
<tr>
<td>0</td>
<td>.</td>
<td>=</td>
<td>+</td>
</tr>
</table>


.sample1 {
border:1px #ccc solid;
border-collapse: separate;
border-spacing: 5px;
border-radius: 5px;
box-shadow:2px 2px 2px #000 inset;
}
.sample1 caption { text-align: left;}
.sample1 th:first-child { border-radius: 5px 0 0 0; }
.sample1 th:last-child { border-radius:0 5px 0 0; }
.sample1 tr:last-child td:first-child { border-radius: 0 0 0 5px; }
.sample1 tr:last-child td:last-child { border-radius:0 0 5px 0; }
.sample1 th,
.sample1 td {
padding: 2px 6px;
text-align: center;
border-top: 1px #ccc solid;
border-left: 1px #ccc solid;
border-bottom: 1px #000 solid;
border-right: 1px #000 solid;
}
.sample1 th {
color: #222;
font-weight:normal;
background: #ccc;
background-image: -webkit-linear-gradient(#ddd, #999);
background-image: linear-gradient(#ddd, #999);
text-shadow:0px 1px 2px #FFF;
}





2.少し浮き出た感じのテーブル


上記のテーブルデザインをちょこっとだけ変更して、今度は少し浮き出た感じにしたパターンです。
また、各セルにマウスを乗せると横一列の背景色が変わるようにしてます♪

【黒い背景での表示を確認する為のエリアです♪】
▼ このテーブルのCSS ▼
 ← クリックするとソースが表示されます。

HTML部分に関しては、最初のテーブルのセルの内容を書き換えただけでなのでソース表示は省略します。
ただ適用させるCSSを変更する為に、1行目のクラス名を「<table class="sample2">」としてます。

.sample2 { border-collapse: separate; border-spacing: 1px; }
.sample2 caption { text-align: left; }
.sample2 th:first-child { border-radius: 5px 0 0 0; }
.sample2 th:last-child { border-radius:0 5px 0 0; }
.sample2 tr:last-child td:first-child { border-radius: 0 0 0 5px; }
.sample2 tr:last-child td:last-child { border-radius:0 0 5px 0; }
.sample2 th,
.sample2 td {
padding: 2px 8px;
border-top: 1px #ccc solid;
border-left: 1px #ccc solid;
border-bottom: 1px #000 solid;
border-right: 1px #000 solid;
}
.sample2 th {
color: #222;
text-align: center;
font-weight:normal;
background: #ccc;
background-image: -webkit-linear-gradient(#ddd, #999);
background-image: linear-gradient(#ddd, #999);
text-shadow:0px 1px 2px #FFF;
}
.sample2 td { text-shadow:1px 1px 1px #000; }
.sample2 tr:hover { background: #222; }





3.角を丸くしたシンプルなテーブル


上の2つも角を丸くしてるんですけどね...w 今度は白い背景で表示した角丸のシンプルなテーブル♪
また、このテーブルも各セルにマウスを乗せると横一列の背景色が変わるようにしてます。

【白い背景での表示を確認する為のエリアです♪】
▼ このテーブルのCSS ▼
 ← クリックするとソースが表示されます。

これもHTML部分に関しては、最初のテーブルのセルの内容を書き換えただけでなのでソース表示は省略。
適用させるCSSを変更する為に、1行目のクラス名を「<table class="sample3">」としてます。

.sample3 { border-spacing: 0px; }
.sample3 caption { text-align: left; }
.sample3 tr { background: #fff; }
.sample3 th:first-child{border-radius:5px 0 0 0;}
.sample3 th:last-child{border-radius:0 5px 0 0; border-right: 1px #777 solid;}
.sample3 tr:last-child td:first-child{border-radius:0 0 0 5px;}
.sample3 tr:last-child td:last-child{border-radius:0 0 5px 0;}
.sample3 th {
padding: 2px 8px;
text-align: center;
font-weight:normal;
border-top: 1px #777 solid;
border-left: 1px #777 solid;
border-bottom: 1px #777 solid;
background: #9cf;
background-image: -webkit-linear-gradient(#dff, #9cf);
background-image: linear-gradient(#dff, #9cf);
}
.sample3 td {
padding: 2px 8px;
border-left: 1px #777 solid;
border-bottom: 1px #777 solid;
}
.sample3 td:last-child{ border-right: 1px #777 solid; }
.sample3 tr:hover { background: #eef; }





4.奇数行にだけ色を付けたテーブル


上のテーブルに少しだけCSSの記述を追加して奇数行に色を付けて、さらに表全体に影を付けました。
また、このテーブルは各セルにマウスを乗せると横一列の背景色が変わり文字が微妙に浮き出ますw

【白い背景での表示を確認する為のエリアです♪】 ※ヘッダーセル(表の項目名が入ってる部分)も含めて奇数行に少しだけ色を付けてます。

▼ このテーブルのCSS ▼
 ← クリックするとソースが表示されます。

これもHTML部分に関しては、最初のテーブルのセルの内容を書き換えただけでなのでソース表示は省略。
適用させるCSSを変更する為に、1行目のクラス名を「<table class="sample4">」としてます。


.sample4 {
border-spacing: 0;
border-radius: 5px;
box-shadow:2px 2px 2px #777;
}
.sample4 caption { text-align: left; }
.sample4 tr { background: #fff; }
.sample4 tr:nth-child(2n+1) { background: #daffda; }
.sample4 th:first-child{border-radius: 5px 0 0 0;}
.sample4 th:last-child{border-radius:0 5px 0 0; border-right: 1px #777 solid;}
.sample4 tr:last-child td:first-child{border-radius: 0 0 0 5px;}
.sample4 tr:last-child td:last-child{border-radius:0 0 5px 0;}
.sample4 th {
padding: 2px 8px;
text-align: center;
font-weight:normal;
border-top: 1px #777 solid;
border-left: 1px #777 solid;
border-bottom: 1px #777 solid;
background: #9fc;
background-image: -webkit-linear-gradient(#dff, #9fc);
background-image: linear-gradient(#dff, #9fc);
text-shadow:1px 1px 1px #999;
}
.sample4 td {
padding: 2px 8px;
border-left: 1px #777 solid;
border-bottom: 1px #777 solid;
}
.sample4 td:last-child{ border-right: 1px #777 solid; }
.sample4 tr:hover { background: #afa; text-shadow:1px 1px 1px #999; }

※偶数行に色を付ける場合は、8行目の「.sample4 tr:nth-child(2n+1) { background: #daffda; }」の部分を「.sample4 tr:nth-child(2n) { background: #daffda; }」にすればOK♪






5.とにかくシンプルなテーブル


角を丸くしたり影を付けたりしないでシンプルにするとこんな感じ♪(奇数行だけ薄く色を付けてます)

【白い背景での表示を確認する為のエリアです♪】 ※ヘッダーセル(表の項目名が入ってる部分)も含めて奇数行に少しだけ色を付けてます。

▼ このテーブルのCSS ▼
 ← クリックするとソースが表示されます。

これもHTML部分に関しては、最初のテーブルのセルの内容を書き換えただけでなのでソース表示は省略。
適用させるCSSを変更する為に、1行目のクラス名を「<table class="sample5">」としてます。

.sample5 { border: 1px #777 solid; border-collapse: collapse; }
.sample5 caption { text-align: left; }
.sample5 tr { background: #fff; }
.sample5 tr:nth-child(2n+1) { background: #E3FAFF; }
.sample5 th,.sample5 td { padding: 2px 8px; border: 1px #777 solid; }
.sample5 th {
text-align: center;
font-weight:normal;
background: #66B6FC;
background-image: -webkit-linear-gradient(#b2e1ff, #66B6FC);
background-image: linear-gradient(#b2e1ff, #66B6FC);
}

※偶数行に色を付ける場合は、4行目の「.sample5 tr:nth-child(2n+1) { background: #E3FAFF; }」の部分を「.sample5 tr:nth-child(2n) { background: #E3FAFF; }」にすればOK♪






6.さらに超シンプルなテーブル


ここまでシンプルな作りなら「テーブル作成ツール 」でサクっと作れちゃいますけどね...w まぁ一応♪

【白い背景での表示を確認する為のエリアです♪】
▼ このテーブルのCSS ▼
 ← クリックするとソースが表示されます。

これもHTML部分に関しては、最初のテーブルのセルの内容を書き換えただけでなのでソース表示は省略。
適用させるCSSを変更する為に、1行目のクラス名を「<table class="sample6">」としてます。

.sample6 { border: 1px #999 solid; border-collapse: collapse; }
.sample6 caption { text-align: left; }
.sample6 th,.sample6 td { padding: 2px 8px; border: 1px #999 solid; }
.sample6 th { font-weight:normal; background: #ddd;}





って事で今回はCSSでのテーブルデザインでした♪( ̄ε ̄〃)b
(キレイで見やすいテーブルを作るのって結構難しい...w)

▼また、セル同士をくっ付けたり(結合)など複雑なテーブルを作る際は以下のサイトが便利です♪
Table Tag Generator(テーブルタグジェネレーター) 」 - HTMLの表を簡単に作成・結合ツール
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!


関連記事
2014-11-18 | HTML・CSS | コメント(11) | トラックバック(0) | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/54-e3807888

「CSSを使って綺麗でかっこいいテーブルを作る」へのトラックバック

- TrackBack -


「CSSを使って綺麗でかっこいいテーブルを作る」へのコメント

- Comment -

あると♪さんのブログかっこ良いので、私も是非見習いたいと・・・
ブログのカスタマイズ私も挑戦してみます。(きっと笑)
又、色々教えて下さいね。
  • 2014-11-18 14:03
  • girigiri26さん@管理人
  • 編集

Re: 表

> girigiri26さん

ありがとうございます♪(≧∇≦)b
自分で好きなように表示出来ると面白いですよ^^
是非、挑戦してみて下さい♪

また何かあればいつでも気軽にご連絡下さいませ♪d(≧∀≦)b
  • 2014-11-18 14:19
  • あると♪さん@管理人
  • 編集

No title

角を丸くしたシンプルなテーブルが一番好きだなあ(*´▽`*)
背景をグラデーションにしてるのがまたいいですね(^^♪
グラデーションはどうやって表現してるんですか??CSSですか??
ちょっとしたひと手間で印象ってずいぶんかわりますよね(^^)
  • 2014-11-18 14:57
  • ひーさんさん@管理人
  • 編集

Re: No title

> ひーさんさん

確かにちょっとした手間で印象って変わりますよね♪(≧∇≦)b
また、ヘッダーセル(表の項目名の部分)は最後のテーブル以外はCSSでグラデーションにしてます♪

「角を丸くしたシンプルなテーブル」の場合だとCSSのソースで16行目と17行目の部分です♪

background-image: -webkit-linear-gradient(#dff, #9cf);
background-image: linear-gradient(#dff, #9cf);

▲この部分の(#dff, #9cf)が色を指定している箇所で
 明るい色の部分が「#dff」で、暗い色の部分が「#9cf」です♪(≧∇≦)ノ
  • 2014-11-18 15:18
  • あると♪さん@管理人
  • 編集

No title

あると♪さん 相変わらず頑張っているようで何よりです。

テンプレートなど私には難しくてチンプンカンプンなのですが、完全にあると♪さんの方が先輩です。

今後のご活躍にも期待して応援ポチ!して失礼いたします。
  • 2014-11-18 22:51
  • T.Oさん@管理人
  • 編集

Re: No title

> T.Oさん

いつもありがとうございます♪d(≧∀≦)b

記事数ではT.Oさんの方が圧倒的で...ww
私も頑張りますっ!!(≧∇≦)ノ
  • 2014-11-19 00:25
  • あると♪さん@管理人
  • 編集

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
  • 2014-11-28 17:27
  • -さん@管理人
  • 編集

すみません

何度もすみません。
記事の下のトラックバックの所にこの記事のトラックバックを入れてみたのですが・・
何処が変わるのでしょうか?
本当に何度もすみません。
送信済みにはこの記事のトラックバックのアドレスが入ってます。
  • 2014-11-28 23:15
  • girigiri26さん@管理人
  • 編集

Re: すみません

> girigiri26さん

全然OKですよ~♪(≧∇≦)b

私の方でもテストしてみたのですが問題なくトラックバック出来ました♪
ただ、そのトラックバックを削除してから再度トラックバックを飛ばして見たら
今度は表示されませんでした...( ̄▽ ̄;)

前に同一記事から2回トラックバックするテストもしてみた事があるので、
もしかしたら削除した事が関係してトラックバック出来なくなってるのかも?...

別記事からトラックバックするか、
もしくは別ページの記事へトラックバックすれば問題なく表示されると思います...

でも、それじゃあ解決になって無いですね...w
  • 2014-11-29 16:03
  • あると♪さん@管理人
  • 編集

なるほど

あると♪さん

色々ありがとうございます。
トラックバック色々奥が深そうですね。
失敗しちゃダメなんですね。
今度、あると♪さんの記事に関連する記事にトラックバック付けてみますね。
って、すぐに書く予定です・・・
(コバンザメの様じゃ・・・)
すみません、何時もお騒がせで・・・
  • 2014-11-30 17:25
  • girigiri26さん@管理人
  • 編集

Re: なるほど

> girigiri26さん

また何か気付いた事があれば気軽にご相談下さいね♪

それと私のブログに対してのトラックバックなどは失敗しても全然OKなので
ドンドン気兼ねなく練習しちゃって下さい♪( ̄ε ̄〃)b
  • 2014-11-30 22:37
  • あると♪さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

▼クリックすると配色が変更されます  
このボタンの設置方法は こちら♪

White
Black

プロフィールClick

プロフィール画像

Author:あると♪
ブログ開始: 日目
公開記事数:

Webサイト製作の勉強にと思ってブログのカスタマイズに挑戦してる初心者です♪その他にも気になった事、興味がある事などを気ままに書いてますっ!!

当ブログのご案内は こちら♪

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。