【毎日開催】

15記事にいいね！で1ポイント

10秒滞在

いいね! --/--

次の日記を探す

おめでとうございます！
ミッションを達成しました。

※「ポイントを獲得する」ボタンを押すと広告が表示されます。

965176
HOME \| DIARY \| PROFILE	【フォローする】【ログイン】

ＧＴ－ＯＮＥ　楽天タグ講座　パイプ奮闘記

Freepage List

レストアの仕方

< 新しい記事

新着記事一覧(全446件)

過去の記事 >

2004/10/24

【ＨＴＭＬエディターでＴＡＢＬＥを作ってみよう】

(5)

カテゴリ：【プチ講座】

■　Super Tag 32 Pro　■　を使ってＴＡＢＬＥを作ってみましょう

はじめに：新潟中越地震被災者の方々、心からお見舞い申し上げます。

2004/10/17

こちら

　
では、この上↑のＴＡＢＬＥを「Super Tag 32 Pro」で作ってみましょう。
　

「メニューアイコン」の３行目の真中あたりに「ＴＡＢＬＥ」のアイコンがあると思います。
それをクリックしてみましょう。その時カーソルは、<BODY>　と　</BODY>の間ですよ！
属性を決めるパネルが出て来ましたね。属性が上から並んでいると思います。
詳しい属性の説明は、省かせていただきます。詳しく知りたい方は【プチ講座】[ＴＡＢＬＥの基本的な属性]に行って見て下さい。
　
■　ＴＡＢＬＥの属性の書き込み　■

一番上が　マージン間の位置指定【ALIGN】となっていますね。これは、ＴＡＢＬＥの左右の位置です。
プルダウンメニューから「センター揃え(center)」を選択します。

次は、枠の太さ【BORDER】は　１にします。

【CELLSPACING】は　１　

【CELLPADDING】は　５にしてみましょう。

【WIDTH】は　８０で　％にチェックを入れます。

【HEIGHT】は書き込みません。

セルの行数は　２　セルの列数は　１　となります。

【BGCOLOR】【BACKGROUND】背景色と背景画像は指定しません。

【BORDERCOLOR】は「参照」からグレー(#COCOCO)を選択します。

【BORDERCOLORLIGHT】【BORDERCOLORDARK】は枠の明暗を指定しますが、ここでは指定しません。
以上のことを書きこみますと↓このようになりましたか！
　

最後にＯＫをクリックしますと、ＴＡＢＬＥが出来上がります。↓このようになりましたでしょうか？

では、これを保存しまして、ブラウザ画面で見てみましょう。保存の仕方は、前回の【プチ講座】を参考にして下さい。
保存できましたら、メニューアイコンの一行目、右から２番目のブラウザのアイコンをクリックしてみましょう。
多分グレーの枠しか出てきていないと思います。
セルの中にテキストを書いてみて下さいませ。
<TD>　から　</TD>　の間にテキストを書きこみます。
そして、各セルに背景色を指定してあげましょう。
一行目のセルには　bgcolor="#COCOCO"（グレー）　二行目のセルには　bgcolor="#ffFFFF"（ホワイト）を指定してみます。
と↓こうなりますね！

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE ALIGN="center" BORDER="1" CELLSPACING="1" CELLPADDING="5" WIDTH="80%" BORDERCOLOR="#C0C0C0"><TR>
<TD bgcolor="#cococo">
テキストを書いてみましょう。ここは一行目のセルです。見出しになります。
</TD>
</TR>
<TR>
<TD bgcolor="#ffFFFF">
テキストを書いてみましょう。ここは二行目のセルです。<BR>
テキストを書いてみましょう。ここは二行目のセルです。<BR>
テキストを書いてみましょう。ここは二行目のセルです。<BR>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
　

メニューアイコンの一行目の左から３番目のフロッピーディスクのアイコンをクリックしますと、「上書き保存」されます。
そしてまた、ブラウザのアイコンをクリックしてみて下さい。
出ましたでしょうか！　まだフォントを指定していませんでしたね。
フォントを指定してみましょう。前回も紹介したように、フォントを指定したいテキストをなぞるか、
出したいところにカーソルを持って行き「ＦＯＮＴ」のアイコンをクリックします。
サイズ、色、字体を決めまして、ＯＫを押します。また、センターリングしたいときは、
センターリングするテキストや画像を左クリックでなぞりまして、「CENTER」のアイコンをクリックしますと一発でタグが出ます。
テキストの改行は、<BR>　で行いますが、これも「ＢＲ」のアイコンをクリックするだけで出来ます。
　
■　日記にタグを持って行くときの注意点　■
楽天の日記は、すべて自動改行になっています。
出来たＴＡＢＬＥのタグをコピペして、日記の編集ページに貼り付けましてもうまく表示できません。
しかし、フリーページでは、設定を「自動改行なし」にして貼り付けますと、このままの状態で同じように表示されます。
　
日記では、すべてのタグを繋げてあげれば、ＯＫです。
先ほど製作した、ＴＡＢＬＥにフォントなどを指定しまして、タグを繋ぎ合わせた物を載せてみましょう。

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>

<TABLE ALIGN="center" BORDER="1" CELLSPACING="1" CELLPADDING="5" WIDTH="80%" BORDERCOLOR="#C0C0C0"><TR><TD bgcolor="#cococo"><FONT SIZE="2" COLOR="#FFFFFF" FACE="MS Sans Serif"><CENTER>テキストを書いてみましょう。ここは一行目のセルです。</CENTER></FONT></TD></TR><TR><TD bgcolor="#ffFFFF">
<FONT SIZE="2" COLOR="#400000" FACE="MS Sans Serif">テキストを書いてみましょう。ここは二行目のセルです。<BR>テキストを書いてみましょう。ここは二行目のセルです。<BR>テキストを書いてみましょう。ここは二行目のセルです。<BR>
</FONT></TD></TR></TABLE>

</BODY>
</HTML>

このようになります。
今回は、ＴＡＢＬＥを作って見ました。
　
皆さんも、日記で使っていますタグの雛形をコピペでここに持って来まして、
色々編集してみて下さい。
メニューアイコンで色々なタグが一発挿入できますから、とても便利です。
楽天では使えませんが、フレームやテキストエリアのタグも一発挿入できます。
　
では！がんばって下さいませ！

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

Last updated 2004/10/24　04:55:49 PM
コメント(5) | コメントを書く

[【プチ講座】] カテゴリの最新記事

【皆さんも確認してみましょう！】(￣^￣)b 2005/03/13 コメント(7)
【フリーＨＴＭＬエディタソフトを使って… 2004/10/17 コメント(5)
【罫線背景画像関係のバックナンバー！】(… 2004/10/13 コメント(8)

Profile

gtone

フォローする

Calendar

ＧＴ－ＯＮＥ 楽天タグ講座 パイプ奮闘記

ＧＴ－ＯＮＥ　楽天タグ講座　パイプ奮闘記