|
|
|
2005年07月20日
カテゴリ：バカネコＰＣ講座
 本日のバカネコ講座は、レイアウトの方法、第５回目。 今回は、軽い内容で行ってみよう。 ちょっと、見た目が良くなる、テーブルのセンタリングについて。 この世には、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> ↓ センタリング(中央寄せ)
<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>タグで、センタリングできる。 【注意】 いつものことだが、日記ページや、自動改行指定のある フリーページに使う時は、１行につなげて書くこと。 でないと、間延び地獄に堕ちる。 【参考ページ】 ・レイアウトの方法 １ 写真の右側に説明を複数行、レイアウトする方法 ・レイアウトの方法 ２ レイアウトに使う呪文・用語 ・レイアウトの方法 ３ セル内で、上または、下に揃える ・レイアウトの方法 ４ セルの横幅を変えるには ・テーブルは金魚のウンコ？ テーブル作成の基礎知識 ・テンプレートを間延びさせない方法 テーブルは、なぜ間延びするか？ 【トド短信】 そんなに暑くないと思って、冷房なしで過ごしたら、 夕方になってバテた．．． 【ダウンロードページ】 ・楽天日記専用バックアップツール、バーニャン３号のサンプル版、 「バーニャン・ミニ」のダウンロードはこちら。 ・にゃんタグのサンプル版は、このページの中段付近。 ・バカネコ・ビューアのダウンロードはここ。 １日１票！ ブログランキング→  ※バカネコ講座では、安全な方法を選んで紹介していますが、 途中でわけがわからなくなっても、責任は負えませんので、あらかじめご了承下さい。 ネコでもわかるＰＣ講座はこちら → バカネコ講座 悲惨なキャンセル事情 バカネコ講座 バカネコソフト バカネコ村 爆笑ガイド 猫砂の研究 パソコン購入費用の削り方 バカネコ・ビューア バーニャン３号 にゃんタグ・フルバージョン 【楽天トラベル】 画面右上「日記リンク追加」をクリック、「◎追加する」ボタンを押すとこの日記がリンクできます。 このサイトの新着記事の通知をご希望の方はご利用ください。 お気に入りの記事を「いいね！」で応援しよう
[バカネコＰＣ講座] カテゴリの最新記事
|
|
||||||||||||||
