203200 ランダム
 HOME | DIARY | PROFILE 【フォローする】 【ログイン】

しあわせみ~つけた

しあわせみ~つけた

table de 飾りつけ

■■■ ★★★ ライン・サイズ・カラー ★★★ ■■■
★★★ 整頓しましょ 遊びましょ ★★★
★単純に簡単に整理がした~い という方 おかたづけ
★ラインもサイズ・カラーは? という方 の ページ 飾りつけ
*始める前に 楽天の編集ページには
自動改行(初心者向け)と自動改行なし(<BR>タグで指定)がありますが
改行なしで作成されることを基準にして説明しますのでご了承ください


では早速はじめましょう♪
でももぅこのページ見て読むのヤダ~という人は
青枠のタグをコピーして使うのもOKです

では本題に
おかたづけ  のページでテーブルの棚に整理できましたか?
では今度は少し色気と知性を付けて上げましょう(なんのこっちゃ)

この↓↓色気より食い気表を 色っぽくしましょう

ちょっと小粋な栗のどら焼きです!京都[栗どら焼き鷲坂山8個] ちょっと小粋な栗のどら焼きです!
京都[栗どら焼き鷲坂山8個]
あなたもきっとファンになる!食べたら忘れられなくなるお芋とカスタードクリームのハーモニー... あなたもきっとファンになる!
食べたら忘れられなくなる
お芋とカスタードクリームのハーモニー...
左記のHTMLは

<table border="1"><tr><td>
画像どらやきを入れたよ
img...で始まるよ

</td><td>
ここにはどやらきの説明文
改行は<BR>ね^^

</td></tr>
<tr><td>
ここは左のスイートポテトの
場所になるよ

</td><td>
スイートポテトの宣伝だ~
</td></tr></table>

青枠の中のタグをコピーして
赤い字のところ
好きな文字や画像を入れてみてね♪


では色気の前にボディーサイズを指定しましょう
ウエストは?ではなくセルサイズ指定です^^
table要素のサイズを指定する属性 width「横幅」 height「高さ」を使います
いずれもピクセルか%で表します
例えば
<table width="500" height="300" border="3">
<tr><td> 291×192の画像いれました </td><td>
今日はブラウニーとチーズケーキを作りました。美味しいミルクティーと幸せな時間
</td></tr></table>




どうですか?
ブラウニーとチーズケーキ 今日はブラウニーとチーズケーキを作りました。美味しいミルクティーと幸せな時間

td にも指定できます
<table width="500" height="300" border="3">
<tr><td width="300" height="200" bgcolor="green"> 291×192の画像 </td><td>
今日はブラウニーとチーズケーキを作りました。美味しいミルクティーと幸せな時間
</td></tr></table>




どうですか?違いがわかりますか?
指定されているので文字を入れたほうは
狭いですね^^;
そして見やすいようにバックに
カラーをいれてみました
赤い字で書いてある所です↑↑bgcolor="green"って
ブラウニーとチーズケーキ 今日はブラウニーとチーズケーキを作りました。美味しいミルクティーと幸せな時間

では最初の色気より食い気表をアレンジ

<table width="400" height="300" border="3" bordercolor="blue"><tr><td width="150" height="150" bgcolor="green">
ドラ焼きの画像
</td><td>
ドラ焼きの説明
</td></tr><tr><td width="150" height="150" bgcolor="#ffb34a">
ポテトの画像
</td><td>
ポテトの説明
</td></tr></table>

ちょっと小粋な栗のどら焼きです!京都[栗どら焼き鷲坂山8個] ちょっと小粋な栗のどら焼きです!
京都[栗どら焼き鷲坂山8個]
あなたもきっとファンになる!食べたら忘れられなくなるお芋とカスタードクリームのハーモニー... あなたもきっとファンになる!
食べたら忘れられなくなる
お芋とカスタードクリームのハーモニー...


そしてまたまた赤い字で書いてある所 bordercolor というのは ラインのカラー指定です

bgcolor というのは 背景のカラー指定です

#ffb34a はWEBセーフカラーの数値です
でも カラーネーム red blue green black purple pink などでもOKなのです

楽天では↓見かけたことあるかしら?
色数値
では今日はここまで

ぜひお試しあれ!
お疲れ様でした~~~~~
次は何したい?


© Rakuten Group, Inc.