バカネコ日記

フリーページ

保存ﾌｧｲﾙ見方

< 新しい記事

新着記事一覧(全963件)

過去の記事 >

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

2005年07月19日

レイアウトの方法　４

(14)

カテゴリ：バカネコＰＣ講座

アロハシャツ（オレンジ）

アロハシャツ（グリーン）

テーブルタグは、何も表を作るだけが能ではない。
枠線の太さを０にしてしまえば、表に見えないので、
写真や文章の配置決め、すなわちレイアウトにもよく利用される。

このシリーズは、その性質を利用してレイアウトする方法について
解説したものだ。
本日のバカネコ講座は、テーブルレイアウトの４回目。
テーブルの大きさを指定する方法について紹介する。

始めて来られた方は、前回までの説明を順に読んでいただくと
わかりやすいと思う。
レイアウトの方法　１
レイアウトの方法　２
レイアウトの方法　３

さて、前回の例を引っぱり出してみよう。
右側の文章は、複数の行を入れることができるが、
簡単にするため、１行だけにしてある。

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

　HTMLサンプル↓
　　　<table>
　　　<tr>
　　　<td> src="MyURL"></td>
　　　<td >このネコはヒマラヤン種。</td>
　　　</tr>
　　　</table>

このままでも、使えるのだが、ちょっと小さい。
枠の大きさを自由に指定したい時もある。

そこで、文章のマスの横幅を、300ピクセルにしてみる。
使う呪文は、 width="300" だ。
これを、文章マス用のtdタグに放り込むことにする。
　　　<table>
　　　<tr>
　　　<td> src="MyURL"></td>
　　　<td width="300" >このネコはヒマラヤン種。</td>
　　　</tr>
　　　</table>

これを、インターネットエクスプローラなどで、表示させると、以下のようになる。

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

もちろん、日記ページに書く時には、自動改行対策として、
以下のように１行につなげて書く必要がある。

<table border="1"><tr><td><img src="MyURL" ></td><td width="300" >このネコはヒマラヤン種。</td></tr></table>

高さは、height で指定でき、要領は同じである。
heightは、trタグの中に入れるのが、正解というものであろう。
しかし、以下のように、どれかひとつの、tdタグの中に入れても、
効果は、その行全体に及び、隣のマスの高さも同じになる。

　　　<table>
　　　<tr>
　　　<td> src="MyURL"></td>
　　　<td width="300" height="300" >このネコはヒマラヤン種。</td>
　　　</tr>
　　　</table>

　表示例　↓

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

枠線は省略してあるが、上記の<table>のところを、<table border="1">と書けば、
枠線が表示される。

【本日のポイント】
１．マスの横幅は、width で、高さは height で指定する。
２．マスのサイズは、tdタグの中で指定する。
３．ひとつのマスの高さを決めると、同行のマスはすべて影響される。

【トド短信】
　バカネコ・エディタの改造をやっていたら、日付が変わってしまった。
　重宝するのは、テーブルタグの改行つぶし機能だ。
　こんなもん、日本じゅう探したってあるまい。
　でも、これがないと、めんどくさくて、楽天日記など書く気がしない。
　実際に表示されるものが、いつも、意図していたものと食い違うからだ。

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

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

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

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

悲惨なキャンセル事情バカネコ講座バカネコソフトバカネコ村爆笑ガイド猫砂の研究パソコン購入費用の削り方現物の投下位置ずぼらなアクセスアップページを読みやすくする方法バーニャン・ミニ楽天日記のバックアップにゃんこのコスプレテキストリンク下線の消し方楽しめるアフィリ己を知れ自分のＰＣを知るバカネコ・ビューアバーニャン３号にゃんタグ・フルバージョン【楽天トラベル】

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

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