ま・まさかまたしても一番＼(^o^)／

トドさんの講座を受けていると私に扱える品なのかしらと
おもうようになりました。でも少しずつ覚えていくので
増税はしないでください。
(2005年07月20日 02時08分19秒)

2289392

ホーム | 日記 | プロフィール

【フォローする】【ログイン】

バカネコ日記

フリーページ

保存ﾌｧｲﾙ見方

< 新しい記事

新着記事一覧(全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タグの中で指定する。
３．ひとつのマスの高さを決めると、同行のマスはすべて影響される。

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

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

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

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

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

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

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

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

最終更新日 2005年07月20日 01時05分59秒
コメント(14) | コメントを書く

[バカネコＰＣ講座] カテゴリの最新記事

マイドキュメントフォルダを、Ｄドライブ… 2008年08月12日コメント(22)
保存できないWebページを保存するには 2008年07月03日コメント(22)
Outlook Express を整備してドライブの空… 2007年11月21日コメント(28)

■コメント

海獣トド先生へ

もぐらのこさん

Re:レイアウトの方法　４(07/19)

*みあな* さん

おはようございます♪((Ｏ(〃⌒∇⌒〃)Ｏ))♪
なんか・・・トドさん進化してる♪
イキナリ・・ダイエットっていっぱい見えたからびっくりしちゃった♪((Ｏ(〃⌒∇⌒〃)Ｏ))♪

すごい(*_*)！日記をつけるしようと思ったらなんか難しくなっていました。 (2005年07月20日 05時46分29秒)

返事を書く

良い買い物しました！

あいさんの夢工房さん

トドさん、昨日買ったスキャナですが、
えへへ、超気に入ってしまいました！！
楽天ではなく私のもう一つのサイト
『あいさんの暮らしにスパイス』
http://moon.ap.teacup.com/yumekoubouai/
で、おひろめしています。
ご存じかもしれませんが、スタンドして置けるので省スペースもうれしいですね。

何かうれしくなって報告しちゃいました。

いつもＰＣ講座で楽しく学習しています。
ありがとうございます。
今でもコロンちゃんのお顔が見られるのも嬉しいです。 (2005年07月20日 08時17分02秒)

返事を書く

ふむふむ

pyichi さん

あぁ、、、早くトップページを編集しなくては！
写真の横にコメントを入れるのだ！
日曜にゆっくりやるのだ（笑）
(2005年07月20日 11時37分54秒)

返事を書く

もぐらのこさんへ

海獣トドさん

＞ま・まさかまたしても一番＼(^o^)／

一番乗りを狙ってますね！

＞トドさんの講座を受けていると私に扱える品なのかしらと
＞おもうようになりました。でも少しずつ覚えていくので
＞増税はしないでください。

村民税はネズミ、バッタの他に、トカゲも追加しましょうかね～♪

(2005年07月20日 11時39分20秒)

返事を書く

*みあな*さんへ

海獣トドさん

＞イキナリ・・ダイエットっていっぱい見えたからびっくりしちゃった♪((Ｏ(〃⌒∇⌒〃)Ｏ))♪

にゃはは！
人間用ではありません。　画像のダイエットです。

(2005年07月20日 11時40分44秒)

返事を書く

あいさんの夢工房さんへ

海獣トドさん

＞トドさん、昨日買ったスキャナですが、
＞えへへ、超気に入ってしまいました！！

いーなー。
うちのスキャナは古くて、XPには繋げないんです(泣)

＞今でもコロンちゃんのお顔が見られるのも嬉しいです。

☆になっちゃいましたが、よろしくお願いします。

(2005年07月20日 11時45分15秒)

返事を書く

pyichiさんへ

海獣トドさん

＞あぁ、、、早くトップページを編集しなくては！
＞写真の横にコメントを入れるのだ！

にゃは！
縦に、ずらずら並べるだけなら、簡単なんですが、
横にコメントを入れようとすると、急に苦労しますね。

(2005年07月20日 11時47分29秒)

返事を書く

Re:レイアウトの方法　４(07/19)

mametmk さん

ここ数日、こちらでテーブルの勉強させてもらい、
今日、楽天フリマの出品ページでテーブルデビューしました！

いろいろ試してみましたが。。
とってもシンプルになりましたー。あはは
でも、以前より見やすくなったと思います。
どうもありがとうございました！

･･･という事を、日記のネタにしたので、
トドさんのお名前をちょこっとご紹介してしました。えへへ
ご了承いただきますよう　ペコッ
(2005年07月20日 19時24分41秒)

返事を書く

mametmkさんへ

海獣トドさん

＞ここ数日、こちらでテーブルの勉強させてもらい、
＞今日、楽天フリマの出品ページでテーブルデビューしました！

おお！　ついに！

＞とってもシンプルになりましたー。あはは
＞でも、以前より見やすくなったと思います。

よかったですね。

＞･･･という事を、日記のネタにしたので、
＞トドさんのお名前をちょこっとご紹介してしました。えへへ

にゃはは。
ご紹介いただきましてありがとうございます。
光栄ですにゃん♪

(2005年07月20日 22時00分53秒)

返事を書く

Re:レイアウトの方法　４(07/19)

ねこの肉球☆ さん

一連の流れはなんとなくわかりました
時間をかけて、覚えていきたいです・・

バカネコエディタもあることだし、ちょっくら　
トドさんのページをコピーさせてもらって練習します(*^^*)ﾎﾟｯ
悪用はしませんので・・・。

(2005年07月20日 22時42分12秒)

返事を書く

Re:レイアウトの方法　４(07/19)

alice liddell さん

つめとぎ対策をテーブル化して表示したいのですが、この暑さと寝不足と怒り？で脳みそが融けてしまったようですわ・・・作業になかなか着手できませんねん・・・ (2005年07月20日 22時56分09秒)

返事を書く

ねこの肉球☆さんへ

海獣トドさん