レイアウトの方法　５

本日のバカネコ講座は、レイアウトの方法、第５回目。 今回は、軽い内容で行ってみよう。 ちょっと、見た目が良くなる、テーブルのセンタリングについて。 この世には、HTMLの書き方を決める、エラ～イ団体さんがあって、 「centerタグ、今後は、もうサポートせんぞ～」と、 のたまっておられる。 要するに、「使わんといてや～」というわけだが、 HTML文書を表示するのは、彼らではなく、ブラウザさまである。 悪名高き？インターネットエクスプローラさまが、 そのために、わざわざ性能を落とすとも思えない。 そんなことをして、他のブラウザのメーカーに、シェアを 献上するほど、ビル・ゲイツもお人好しではあるまいて。 ．．．というわけで、我々は悪の手先となって、禁断の centerタグを レイアウトに使ってしまおう。　　　　　←　暗黒面への誘い。 　 お嬢様ブラウス（イエローイチゴ）お嬢様ブラウス（リサちゃん）セーラーカラー なんといっても、センタリング(中央寄せ)には、 <center>タグが、簡単で便利だ。 <center>と　</center>で挟めば、それで良い。 挟まれたものは、即、中央へ配置される。 画面の幅も、解像度もへったくれもない。 何も指定せずとも、表示される環境に合わせて、 自動的にやってくれる。 たとえば、「バカネコ」と普通に書けば、通常なら 左揃えで表示されるはずである。 これを、<center>タグで挟んでやると、中央にレイアウトされる。 HTML例　↓ <center>バカネコ</center> 表示例 バカネコ 複数行にまたがった場合は、全行がそれぞれ独立に、 センタリングされる。 各行の文字数などは関係ない。 HTML例　↓ <center> バカネコ にゃんこの飼い主はゲボクと呼ばれる。 バカネコ村の名物は、シモネタ川柳とバカネコ講座 サンプルサンプル．．． </center> 表示例 バカネコ にゃんこの飼い主はゲボクと呼ばれる。 バカネコ村の名物は、シモネタ川柳とバカネコ講座 サンプルサンプル．．． ここまでは、普通である。 別に、面白くも何ともない。 だが、<center>タグの、うれしいところは、中身が何でも良いことだ。 つまり、中にテーブルを放り込めば、テーブルがまるごと、 中央に配置される。 テーブル全体の位置決め方法は、いくつか方法があるが、 センタリングなら、これが一番ラクであり、見た目も良い。 絶対配置のような、面倒な計算は、いらない。 スタイルシートも、クソ食らえ、である。 やり方は、テーブルを作っておいて、centerタグで前後を囲むだけだ。 超お手軽ではあるまいか？ 以下の例をセンタリングしてみよう。 ノーマル(左揃え) このネコはヒマラヤン種。 　HTMLサンプル 　　　<table> 　　　<tr> 　　　<td> src="MyURL"></td> 　　　<td >このネコはヒマラヤン種。</td> 　　　</tr> 　　　</table> 　　　　　　　　　↓ センタリング(中央寄せ) このネコはヒマラヤン種。　HTMLサンプル 　　　<center> 　　　<table> 　　　<tr> 　　　<td> src="MyURL"></td> 　　　<td >このネコはヒマラヤン種。</td> 　　　</tr> 　　　</table> 　　　</center> これを応用すると、下のように使える。 普段は、消すことの多い枠線を、あえて太く表示し、色を２色使ってみた。 　散歩なのにゃ。 　今日は、気持ちがイイ日なのにゃ♪　 　お？　この草は、おいしいのにゃ！　 ちなみに、HTMLソースは、以下のとおり。 お持ち帰りは自由である。 <center><table border="4" bordercolorlight="#CCFF99" bordercolordark="#008080"><tr><td><img src="MyURL"></td><td align="left">　散歩なのにゃ。<br>　今日は、気持ちがイイ日なのにゃ♪　<br><br>　お？　この草は、おいしいのにゃ！　</td></tr></table></center> ついでに言えば、上記から border="4" bordercolorlight="#CCFF99" bordercolordark="#008080" を、削除すれば、枠線は消える。 【本日のポイント】 １．中央寄せは<center>タグがラクである。 ２．テーブルも<center>タグで、センタリングできる。 【注意】 　いつものことだが、日記ページや、自動改行指定のある 　フリーページに使う時は、１行につなげて書くこと。 　でないと、間延び地獄に堕ちる。 【参考ページ】 　・レイアウトの方法　１　　写真の右側に説明を複数行、レイアウトする方法 　・レイアウトの方法　２　　レイアウトに使う呪文・用語 　・レイアウトの方法　３　　セル内で、上または、下に揃える 　・レイアウトの方法　４　　セルの横幅を変えるには 　・テーブルは金魚のウンコ？ 　　テーブル作成の基礎知識 　・テンプレートを間延びさせない方法 　　テーブルは、なぜ間延びするか？ 【トド短信】 　そんなに暑くないと思って、冷房なしで過ごしたら、 　夕方になってバテた．．． 【ダウンロードページ】 ・楽天日記専用バックアップツール、バーニャン３号のサンプル版、 　「バーニャン・ミニ」のダウンロードはこちら。 ・にゃんタグのサンプル版は、このページの中段付近。 ・バカネコ・ビューアのダウンロードはここ。 １日１票！　ブログランキング→ ※バカネコ講座では、安全な方法を選んで紹介していますが、 　途中でわけがわからなくなっても、責任は負えませんので、あらかじめご了承下さい。 ネコでもわかるＰＣ講座はこちら　→　バカネコ講座 悲惨なキャンセル事情　バカネコ講座　バカネコソフト　バカネコ村　爆笑ガイド　猫砂の研究　パソコン購入費用の削り方　バカネコ・ビューア　バーニャン３号　にゃんタグ・フルバージョン　【楽天トラベル】 画面右上「日記リンク追加」をクリック、「◎追加する」ボタンを押すとこの日記がリンクできます。 このサイトの新着記事の通知をご希望の方はご利用ください。