バカネコ日記

フリーページ

保存ﾌｧｲﾙ見方

< 新しい記事

新着記事一覧(全963件)

過去の記事 >

全て | カテゴリ未分類 | バカネコＰＣ講座 | バカネコのお話

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>
　　　　　↓

センタリング(中央寄せ)

このネコはヒマラヤン種。

　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>タグで、センタリングできる。

【注意】
　いつものことだが、日記ページや、自動改行指定のある
　フリーページに使う時は、１行につなげて書くこと。
　でないと、間延び地獄に堕ちる。

【参考ページ】
　・レイアウトの方法　１　　写真の右側に説明を複数行、レイアウトする方法
　・レイアウトの方法　２　　レイアウトに使う呪文・用語
　・レイアウトの方法　３　　セル内で、上または、下に揃える
　・レイアウトの方法　４　　セルの横幅を変えるには
　・テーブルは金魚のウンコ？　　テーブル作成の基礎知識
　・テンプレートを間延びさせない方法　　テーブルは、なぜ間延びするか？

【トド短信】
　そんなに暑くないと思って、冷房なしで過ごしたら、
　夕方になってバテた．．．

【ダウンロードページ】
・楽天日記専用バックアップツール、バーニャン３号のサンプル版、
　「バーニャン・ミニ」のダウンロードはこちら。
・にゃんタグのサンプル版は、このページの中段付近。
・バカネコ・ビューアのダウンロードはここ。

１日１票！　ブログランキング→

※バカネコ講座では、安全な方法を選んで紹介していますが、
　途中でわけがわからなくなっても、責任は負えませんので、あらかじめご了承下さい。

ネコでもわかるＰＣ講座はこちら　→　バカネコ講座

悲惨なキャンセル事情バカネコ講座バカネコソフトバカネコ村爆笑ガイド猫砂の研究パソコン購入費用の削り方バカネコ・ビューアバーニャン３号にゃんタグ・フルバージョン【楽天トラベル】

画面右上「日記リンク追加」をクリック、「◎追加する」ボタンを押すとこの日記がリンクできます。
このサイトの新着記事の通知をご希望の方はご利用ください。

お気に入りの記事を「いいね！」で応援しよう