枠組み(ちょっと大変かもよ)(その1)

今回は、枠組みについて。

いわゆる、表になります。
で、一個の記事にするととんでもなく長くなったので、こまごま、3回に分けてお届けします。

※尚、「記事の編集」は簡易な方「URL自動リンクと改行だけのシンプルな入力」を基準に
※進めています。

で、表は、一般的に、横を「行」、縦を「列」と表現します。
まずは、複数行で、一列というものを。

そして、またまたイキナリ♪

一行目

ニ行目

三行目

四行目

五行目

↑って感じ

これだと、フツーに改行して文章書いた方がよいかも(笑)

で、こんな風(↓)に書いてます。

<table><tbody>
    <tr><td>一行目</td></tr>
    <tr><td>ニ行目</td></tr>
    <tr><td>三行目</td></tr>
    <tr><td>四行目</td></tr>
    <tr><td>五行目</td></tr>
</tbody></table>

で、分けわからんので、枠線をつけると、↓な感じ。

一行目

ニ行目

三行目

四行目

五行目

書き方は↓な感じ

<table style="border:2px outset #aaaaaa">
<tbody>
    <tr><td style="border:2px outset #aaaaaa">一行目</td></tr>
    <tr><td style="border:2px outset #aaaaaa">ニ行目</td></tr>
    <tr><td style="border:2px outset #aaaaaa">三行目</td></tr>
    <tr><td style="border:2px outset #aaaaaa">四行目</td></tr>
    <tr><td style="border:2px outset #aaaaaa">五行目</td></tr>
</tbody>
</table>

ね、ビミョーでしょ(笑)
じゃぁ↓な感じだとどうですか？

おい、ルパン！あとで拾いにきてやるぜ！

結構、見栄えがよくなりましたよね♪

で、この次元大介をもとに説明です。
上の表示は↓な感じで書いています。
※pekepeke.jpgはご自分の入れたい画像へのリンクになります。

<center>
<table style="border:2px outset #aaaaaa; background-color:#dddddd">
<tbody>
    <tr>
      <td><img src="pekepeke.jpg" style="border: 5px outset #aaaaaa;"/>
      </td>
    </tr>
    <tr>
      <td>おい、ルパン！あとで拾いにきてやるぜ！</td>
    </tr>
</tbody>
</table>
</center>

<table>---表全体のコトを指し示します。
<tbody>---表をつくる際のおまじない、と考えてください(笑)
<tr>---行をつくる
<td>---列(マス目)をつくる

で、あとは、いままでここで書いてきた内容を元にしています。
用は、

表の周りに枠線をつけて、(<table>内のborder箇所)
表の中の色(背景色)を薄めにして、(<table>内のbackground-color箇所)
画像の周りに枠線をつけた(<img>内のborder箇所)
で、記事内で真ん中表示(一番外側の<center>タグ)

って感じです。
で、イキナリかよ！？と思う人がいるかもしれませんので、

一行目に画像

ニ行目に文字

の配置になります。

いかがでしょう？
イロイロ一度にたくさん使用したので、パニックになっているかもしれませんが、
まずは、上の書き方をコピーして、ご自分でアレンジしてみてください。

尚、最後の赤やら、青やらの色づけも、今までの説明で設定できますので(笑)
※↑あえて、詳細を載せず(笑)

---

今回のオマケ：

ルパン！

←だと、なんか、「ルパン！」の文字が結構お間抜け(笑)

なので、

ルパン！

←真ん中に文字を持ってくるとよいかも♪
で、これは、真ん中に持って行きたい文字を書いている<td>タグに
<td align="center">
以前、説明しましたalignを書いてみましょう♪

だからこんな感じ↓にもできる♪

photo by Neco

この時は、align="right"と書いています♪

※皆さん、よい感じに頭の中がスパゲティになってるかな(笑)
※次回も同じ感じですよー(笑)

コメント 10

写真に縁をつけるのやってみたいです。特に背景の薄い写真はもともとのフレームとの境がわからなくなるし。また解らないところがあったら質問しますね(^_-)-☆
by barbie (2005-11-14 10:24) 

呪文　たまに、ミススペルをすることがあります(^^;;;
by あやこ (2005-11-14 12:45) 

＞barbieさん、あやこさん
コメント及び「nice!」判定ありがとですm(_ _)m

＞barbieさん
縁は前々回かな。今回は、プラス枠組みなので。
たしかに、スキンの背景に溶け込んじゃうとびみょーですよね。
お気軽にいつも通りでどうぞー♪

＞あやこさん
（＊＾０＾＊）／~~~"".:*:・☆.:*:・'゜'・
って感じで、できればよいんですけどねー、
このTR,TDは書いていると、混乱してしまいますよね。
スペルミスなんかすると、どこが間違っているかを探すのに手間取ったり(笑)
by NecoYanagi (2005-11-14 13:15) 

枠をつけるとおしゃれな感じになりますね～♪

クリスマスシーズンの記事に赤と緑の枠使ったら
すごくカワイイ感じになるかな？(´ー`)
(とかちょっと柄にもないこと言ってみたり。笑)
by ヤク (2005-11-14 15:26) 

うぉぉ。これは、私が知りたかった技です。
参考にします。
by sweet-cool (2005-11-14 19:17) 

な～るほど！
勉強になります。
by happy (2005-11-14 19:26) 

おおテーブルタグ！
昨夜ちょうど格闘してたんですよ～(ノ∀`)
website、ちょっと付け足そうと思いまして。
難しいんですよね～。文字列で図形を表現するのって感覚が掴めないです。。
by ナシウタ (2005-11-14 20:23) 

すげぇぇぇぇ～勉強しなきゃｗｗｗ
がんばろぉ～♪
by jasper (2005-11-14 20:55) 

先生！わかりやすい説明ありがとうございます。
今度、実践してみます。
by (2005-11-14 23:10) 

＞to All
コメント及び「nice!」判定ありがとですm(_ _)m

＞ヤクさん
あーできますよ♪
ちょいと番外編的にやってみますねー♪

＞Ranranさん
どれだろう？(笑)
いろいろ、ばらばらに書いてますがいままでの知識だけでも
かなり、イロイロ書けますので試してくださいねー♪

＞happyさん
ぜひぜひ、試してください！

＞ナシウタさん
おー！
サイトは自力生成ですからねぇ、頑張ってください！
敵ではなく、お手伝いしてくれる仲間と思えば
気楽にできますよー(笑)

＞jasperさん
頑張れp(＾＾)q

＞ohさん
試してみてください♪
一度覚えれば、案外、楽なことに気づきますよ♪
by NecoYanagi (2005-11-15 00:21)