今回はテーブルレイアウト篇です。
恐らく送出されているHTMLソースを見れば、即気づいたはず。やっぱりソースは確認しないといけません。
このテーブル(表)のカスタマイズが今回のお題ですが、
実はもうすでにそのやり方は、今までの記事に書いてあるんです。
ってなんか俺、カッチョええ！「ベスト・キッド」のパット森田みたい！
最近ジャッキー・チェンでリメイクされましたね。「ベスト・キッド」
新しいのは、見てないんですが、古い方のラストは感激でした！
では具体的にいきましょう。
枠の色を変える。
これは、まんま「色つきの枠で文章を囲みたい」でやったことと同じです。
まずは、テーブルの外枠の色をピンクに変えます。
ここで、色の指定方法だけ今までと変えています。今までは#のあとは６文字でした。
もちろん今までどおり６文字でも構いません。ただ、今回私は記述が面倒なので#のあとを３文字にしています。
ではこの結果を表示します。外枠だけがピンクになりました。
できれば、全部の枠をピンクで縁取りたい。そこで、すべてのマスのタグにスタイルシートを適用してみます。
ファンブログには１記事１００００文字数制限というのがあって、入りきらないので
ブログの表の見栄えを良くしたい！の巻 その２につづきます。
その前に。実はテーブルの位置がずっと下に行ってしまって直らずに困っていました。よそのサイトに答えが書いてありました。
ブログにテーブル（表）を入れると上に余白が出来てしまう現象の解決方法 | 初心者歓迎！もしもドロップシッピング 初売上達成ガイド
ブログにテーブル（表）を入れると上に余白が出来てしまう現象の解決方法 | 初心者歓迎！もしもドロップシッピング 初売上達成ガイド
恐らく送出されているHTMLソースを見れば、即気づいたはず。やっぱりソースは確認しないといけません。
しかし、preタグの時はどうするんだ？前回 preタグ使ってインデントを表現したんですが、しっかりとbrが入れられている。JavaScriptで消すしかないんかね？誰かご存知でしたらコメント欄に書いていただけませんか。
自己レスです。
ヘッダに以下のように書くことで(preタグの中の) br タグを無効に出来ました。
<style type="text/css">
pre br{display:none;}
</style>
pre 内限定にしないと、ブログ中の全ての br が無効になりレイアウトが変わってしまうので注意。
ようやく本題です。まず、前回のテーブルがこれ。ヘッダに以下のように書くことで(preタグの中の) br タグを無効に出来ました。
<style type="text/css">
pre br{display:none;}
</style>
pre 内限定にしないと、ブログ中の全ての br が無効になりレイアウトが変わってしまうので注意。
| サイズアップ・ペニス増大商品 | 商品購入金額の１０％ |
| 発毛・育毛無料体験 | 予約１件につき３１９３円 入会１件につき１９１６３円 |
| 高収入在宅チャットレディ | 登録・稼動確認後に３５００円 |
| ペット保険 | 申込み１件につき１９００円 |
| 亀頭増大,早漏,包茎の手術や治療 | 初回来店で３００００円 |
このテーブル(表)のカスタマイズが今回のお題ですが、
実はもうすでにそのやり方は、今までの記事に書いてあるんです。
ってなんか俺、カッチョええ！「ベスト・キッド」のパット森田みたい！
パット森田「ダニエルさん、床掃除１０００回。」
ダニエルさん「ふざけるな。このジジイ！毎日、掃除ばかり！いつになったらカラテを教えてくれんだ！」
パット森田「ダニエルさん、床掃除はどうやる？そのとおりに手を動かせ！」
ダニエルさん、しぶしぶ手を動かす。
パット森田「ハァー！」突然ダニエルさんへ蹴りを繰り出すパット森田！
ダニエルさん「ウッ！」しかしダニエルさんの手が自然とその蹴りをはじく！
ダニエルさん「！」
パット森田「ダニエルさん、窓掃除の動きは？」
窓掃除のしぐさをするダニエルさん。
そこへ、パット森田の突きが！しかし、窓掃除のしぐさがその突きを払う！
そう、ダニエルさんが今までやってきた掃除の動きはカラテの型そのものだったのだ！
ダニエルさん「ふざけるな。このジジイ！毎日、掃除ばかり！いつになったらカラテを教えてくれんだ！」
パット森田「ダニエルさん、床掃除はどうやる？そのとおりに手を動かせ！」
ダニエルさん、しぶしぶ手を動かす。
パット森田「ハァー！」突然ダニエルさんへ蹴りを繰り出すパット森田！
ダニエルさん「ウッ！」しかしダニエルさんの手が自然とその蹴りをはじく！
ダニエルさん「！」
パット森田「ダニエルさん、窓掃除の動きは？」
窓掃除のしぐさをするダニエルさん。
そこへ、パット森田の突きが！しかし、窓掃除のしぐさがその突きを払う！
そう、ダニエルさんが今までやってきた掃除の動きはカラテの型そのものだったのだ！
最近ジャッキー・チェンでリメイクされましたね。「ベスト・キッド」
新しいのは、見てないんですが、古い方のラストは感激でした！
では具体的にいきましょう。
枠の色を変える。
これは、まんま「色つきの枠で文章を囲みたい」でやったことと同じです。
まずは、テーブルの外枠の色をピンクに変えます。
<table style="border:2px solid #fcc;">
ここで、色の指定方法だけ今までと変えています。今までは#のあとは６文字でした。
もちろん今までどおり６文字でも構いません。ただ、今回私は記述が面倒なので#のあとを３文字にしています。
なぜ６文字と３文字どちらでもよいのか？また、どう違うのか？
結論を言うと指定できる細かさが違うということです。
色の指定は１６進数ということは以前書きました。
その数字が00〜ff までだと２５６種類になります。
これが、0〜f までだと１６種類です。
６文字の色指定の場合、赤の数値に２５６種類、緑の数値に２５６種類、青の数値に２５６種類を割り当てています。つまり２５６ ｘ ２５６ ｘ ２５６=１６７７７２１６通りの色味が指定できる。
これに対して３文字だと１６ ｘ １６ ｘ １６=４０９６通りになります。
４０９６色では物足りないと言うのなら#の後を６文字にすればＯＫです。
結論を言うと指定できる細かさが違うということです。
色の指定は１６進数ということは以前書きました。
その数字が00〜ff までだと２５６種類になります。
これが、0〜f までだと１６種類です。
６文字の色指定の場合、赤の数値に２５６種類、緑の数値に２５６種類、青の数値に２５６種類を割り当てています。つまり２５６ ｘ ２５６ ｘ ２５６=１６７７７２１６通りの色味が指定できる。
これに対して３文字だと１６ ｘ １６ ｘ １６=４０９６通りになります。
４０９６色では物足りないと言うのなら#の後を６文字にすればＯＫです。
ではこの結果を表示します。外枠だけがピンクになりました。
| サイズアップ・ペニス増大商品 | 商品購入金額の１０％ |
| 発毛・育毛無料体験 | 予約１件につき３１９３円 入会１件につき１９１６３円 |
| 高収入在宅チャットレディ | 登録・稼動確認後に３５００円 |
| ペット保険 | 申込み１件につき１９００円 |
| 亀頭増大,早漏,包茎の手術や治療 | 初回来店で３００００円 |
できれば、全部の枠をピンクで縁取りたい。そこで、すべてのマスのタグにスタイルシートを適用してみます。
ファンブログには１記事１００００文字数制限というのがあって、入りきらないので
ブログの表の見栄えを良くしたい！の巻 その２につづきます。