らいっちの購入記

[アフィリエイトHTML講座] カテゴリの記事

全10件 (10件中 1-10件目)

1

• 

  構造（HTML)と装飾（CSS)を使い分けよう！

  見出しを使おう！構造と装飾以前にHTMLは構造をスタイルシートは装飾を定義すると書きました。それにより、検索ロボットにも人にも分かりやすいページが作成できます。検索ロボットに分かりやすいことはSEO対策にもなります。ページは見出しと段落により作成されます。人が見るだけなら、行幅を空けて文字を大きくすればそれが見出しだと判断できますが、頭の固いロボットには分かりません。また、文字の色を変えて目立つようにすれば人にはそれが重要な部分だと分かりますが、ロボットには分かりません。ロボットにきちんと構造を伝えるためにはHTMLでの構成がとても重要になります。見出しには見出しのタグを使い、段落には段落のタグを使い、重要な文字列には強調タグを使います。こうすることにより、人にもロボットにもページの構成が分かるのです。見栄えをよくするために装飾を行う場合はそれぞれのタグにスタイルシートを指定します。ページの内容をロボットにきちんと拾って貰うためにはシンプルな方がよいので、スタイルシートは外部ファイルに置いた方が良いでしょう。楽天広場では外部スタイルシートは使えないために、直接タグにstyle=""の形で指定する必要があります。SEO的にはかなり不利ですが、きちんとしたページを作るなら別のホスティングサービスを利用するべきですね。構造の具体例<h1>見出し１（タイトルなど）</h1><h2>見出し２（サブタイトルなど）</h2><h3>見出し３（通常の見出し）</h3><h4>見出し４（小さな見出し）</h4><p>　段落（内容）重要な箇所は<strong（またはb）>強調</strong></P><h4>見出し４</h4><p>　段落（内容）</p>このような構成になります。（注：楽天広場の仕様により自動的に装飾されてしまう見出しがあります＞＜）見出し１と見出し２は使わないことも多いですね。見出しは１～6までありますが、５や６を使うことはほとんど無いと思います。装飾の例見出し２<h2 style="background-color: #CCFFFF">見出し２</h2>見出し２ <h2 style="text-indent: 0.5em; border-left-color: #33CC00; border-left-style: solid; border-left-width: 0.5em">見出し２ </h2>見出し２<h2 style="text-indent: 0.8em; border-left: 0.2em solid #33CCCC; border-bottom:2px dashed #33CCCC">見出し２</h2>　 HTMLとスタイルシートがよく分かる本 ホームページ辞典第３版ＨＴＭＬスタイルシートＪａｖａＳｃｒｉｐｔ タグやスタイルシートなどを調べるのに適しています。分からないときに調べると便利です。スタイルシートスタンダード・デザインガイドとても参考になってます。SEOとユーザビリティに対応したデザインに必須です。 　

  2004年08月14日

  コメント(0)

• 

  商品のアピール

  アフィリエイトの場合、必ずお店の商品販売ページがあります。つまり、アフィリエイトでの紹介＋お店での紹介があるわけです。まあ、紹介分ナシで販売だけのお店もありますが。ここで重要なのは、お店の紹介文をコピーしても意味がない！まぁ、それ以前に紹介文のコピーは著作権違反だけど・・お店と同じ紹介文にするなら、紹介文無しでお店に誘導した方が楽ですよ♪必用なのは、お店の紹介文で足りないことを補うこと。または、長くて分かりずらい紹介文を簡潔にまとめること。機能を整列して、他の商品と比較しやすくすること。なるべく、興味のある人を煩わせない疲れさせないこと。が重要ではないでしょうか。更に、自分の思いなども書ければなお良いでしょう。○○は××で便利！私も試したい逸品です！！とか、これはお勧めだよ～風に書くのも良いかも。自分で購入したことのある商品なら簡単に書けますよね。でも、全部にお勧めだよ～はやめた方が良いです。信用して貰えなくなります。それと、マイナスな事柄もあるなら紹介した方がよいでしょう。○○に関しては性能悪いけど、△△のがとっても良い！とか。売りたい一心で良いことばかりアピールするのは、信憑性が薄くなります。そこにマイナスな部分も書き添えることで、信憑性が高まり、読んだ人に安心感を与えます。買う側の立場で考えて、不足している部分を補おう♪この人の紹介なら買ってみようかなと思わせてみよう！========================================注文した本がまだ来ない～7/20発売予定の完全予約本もまだ来ない～予約本は表示がまだ予約中のままなので、発売が遅れてるようですね。８月になるとかならないとか。期待して待ってます。ちなみに『トリコロプレミアム』です。トリコロとは、現代人の心を救う、ほんわかでまったりと和める４コマまんがです！心の底から明るくなりますよ～。心の底から笑えますよ～。暖かい家庭の物語。トリコロ１巻と２巻発売中～♪ トリコロ　好評発売・予約受付中 　トリコロ１　トリコロ２　トリコロプレミアム完全予約制販売

  2004年07月21日

  コメント(0)

• クリッククリック

  どんなに訪問者が増えても、クリックして貰えなければ意味がありません。（アフィリエイトとしてはね）目立つところにリンクを置くとクリック率が高そうに思えるかもしれませんが、リンクそのものでクリックするわけではありません。目立つところにリンクがあり、それが商品リンクだと知らずにクリックしたら、リンク先で騙された！と思うことでしょう。いくらクリックが多くても買ってくれない人にとっては、クリック先の訪問は無駄な行動だったと反省することになります。宣伝により訪問数が増えても、クリックが増えない。クリックが増えても購入が増えない。それらは、やり方に問題があります。目立たせることばかりでなく、内容もしっかりとしたものにしましょう。一般のHPには情報を求めて人は検索してくるのです。商品を求めてきているのではないのです。買いたい商品が決まっているのならお店で探します。売ってるお店を知らなくて検索で探す人もいます。一番安いお店を探すために検索する人もいます。商品の情報が十分にあり、その情報が自分にとって有意義なものであり、お金があれば買ってくれます。お金がない場合は出直します。出直してくるときは、またその場所に来てくれるとは限りません。他の商品に心を奪われているかもしれません。情報が不足しているのなら、足りない情報を求めて他のサイトを探し歩きます。また来よう！と思わせるサイト作りを♪-------------この暑さは何？TTどこかで40度超えたそうだけど・・・暑すぎるときはアイスより飲み物が売れますよ～暑すぎて外に出たくない！そんなときネットが使われます＾＾

  2004年07月20日

  コメント(3)

• 

  ７．アフィリエイトHTML講座

  検索と置換　せっかくHTMLを書き終えたのに、後からアドレスを変更したり、色を変更したくなることがあります。　その時、必ず行うことが、必用な部分を探して書き換えるという作業です。　この、探すという作業は検索、書き換えるという作業は置換を使うと簡単にできます。　この検索や置換とはほとんどのエディターやワープロソフトやHP作成ソフトにあります。　ほとんどのソフトで、メニューの編集という項目の中に含まれています。　検索は主に、目的の単語、場所を探すために用います。　どこに書いたかなー？と探すときに、検索で書かれている言葉を入力すると、その言葉を探し出してくれます。　置換は、書き終えた言葉を別の言葉に変更したい時に用います。　置換には１つ１つ確認しながら置き換える方法と、ファイルの中を一括して置き換える方法があります。置換の使い方　複数のテーブルのセルに　style="border:solid #0000ff 1pt;"　とスタイルシートで指定したとします。 　線の太さが１の青い色をした枠です。　これを太さ２の赤い色に変更したくなりました。　たくさんあるセルから１つ１つ調べて書き換えるのは大変です。　書き終わった！と思って確認したら、一ヶ所だけ変更するのを忘れていたりします。　しかし、自動で一括置換をすると変更忘れはありません。入力ミスもありません。　変換元（検索文字列）に　style="border:solid #0000ff 1pt;"　を指定し、　変換後（置換文字列）に　style="border:solid #ff0000 2pt;"　と指定するだけです。　これだけで、セルが100個あっても、僅か数秒で終わってしまいます。 　ファイルの位置を変更したくなったとき、たくさんのファイルを１つ１つ調べながら修正するのは大変です。　<img src="a.jpg"><img src="b.jpg">とたくさんの画像があったとします。　これを画像用のディレクトリ（フォルダ）を作り、格納したとしましょう。ディレクトリ名をimgとします。　書き換えると <img src="img/a.jpg"><img src="img/b.jpg">となりますね。　これはつまり、変換元に　img src="　変換後に　img src="img/　と指定すればすんでしまいます。　つまり、置換では、探したい文字列と置換たい文字列が分かっているときに使えます。　同じ作業を繰り返すなら自動でやって貰いましょう♪マクロ　置換だけでなく、特定の作業をマクロで自動化させることができるソフトもあります。　例えば、これ。HP作成ソフトで書いてますが、これを直接広場日記に送るとものすごいことになります（笑）　広場日記では改行に<br>はいりませんね。<br>が入ると２重改行になってしまいます。　なので、広場日記に貼り付ける前に、エディターに貼り付けて<br>タグを削除したり、改行を整えたりしています。　日記を書く度に同じことをするのは面倒なので、最初だけエディタ上の行動をマクロに記録して、後はそのマクロを実行させてから、広場日記に貼り付けています。EmEditor Professional　ｖ４　複数のファイルを一括置き換えたり、マクロで作業を自動化させたり。　私が重宝しているソフトです。　タグの色分け表示とか、とっても使いやすいですよー。入力ミスとか事前に防げますから。　 　見やすくて目に優しい色にカスタマイズしています。　CGI作成にもとっても使いやすいです。　もちろん普段のメモ帳代わりにも♪ ★EmEditor公式サイト　Pro版：\4,000　スタンダード版：\3,000 パッケージ版標準税込価格 6,825円↓販売価格：\4,725（税込） 　 ホームページ作成に役立つ書籍 ホームページ辞典第３版ＨＴＭＬスタイルシートＪａｖａＳｃｒｉｐｔ タグなどを調べるならこの本☆これで完璧ホームページ・ビルダー８ ビルダー8を覚えるならこの本☆ 日記　今日は雷がすごかった～。　いつもはここはかすっていくだけなのに、今日は見事に雲の中心が！！　レーダーアメダス見て、真っ赤っか（水量多い）には驚きました。　これが１時間前には埼玉の方でちょっこと雲があっただけなんだから、雷雲の発達は凄まじいものです。（ここは茨城）　雲が抜けた後、ずいぶん低い雲だな～ と見ていたら、その雲がゆっくり回転しているようで、ムクムクと大きくなっていく過程が良く見えた！！　初めは、どっちに流れていくんだろう？と見てたのですが、まさか小さな雲が単体で回転していたとは（汗）　まるで、太陽の周りを回る惑星のように、本体の雲の周りについていきながら単体でも回転しておりました。 ルミンＡ体質改善に体内のゴミを排除し、身体の機能を蘇らせる医薬品。ドライアイ・目の疲れ・充血花粉症の目のかゆみまで効く生薬成分配合の目薬新黄珠（おうじゅ）目薬　15ｍｌ ADSL用雷保護送料無料！ ISDN/アナログ用送料無料！ UPS 無停電電源装置雷保護・停電対策バックアップ電源最大出力300w UPS 無停電電源装置雷保護・停電対策バックアップ電源最大出力450w

  2004年07月16日

  コメント(2)

• 

  （６？）アフィリエイトHTML講座

  タグの基本の応用　ほとんどのタグが始まりのタグと終わりのタグがあります。　改行の<br>には終わりのタグ</br>はありません。　重要なことはどのタグも互いにまたいではいけません！　<p><font size="4">文字</p><p>文字</font></p>　この書き方は間違っています。Pの中で始まったタグはPの中で終わらせなければなりません。　<p><font size="4">文字</font></p><p><font size="4">文字</font></p> 　この書き方が正解になります。 　ちなみに、<p>は段落を意味するタグです。PとPの間には自動で空白が入ります。　Pの中の文字はBRで改行を入れることができます。　テーブルは必ず何か表示させる部分はセルの中になります。　セルとは<td></td>の間のことです。　<table><tr><td></td><td></td><tr></table>　これで1行2列のテーブルが作成されます。　TRが行でTDが列を意味するというのは前回までに解説しましたね。 　この中で文字や別のタグを入れられるのは必ずセルの中だけなので、　<table><tr><td>文字</td><td>文字</td><tr></table>　となります。　テーブルの中にテーブルを入れるときも、必ずセルの中に記述します。　<table><tr><td><table><tr><td>文字</td><td>文字</td><tr></table></td><td>文字</td><tr></table> 　テーブルの中にテーブルを入れるとちょっとややこしいですね。つまりこういうことです↓ 文字文字文字 これぐらいなら、同じことを１つのテーブルだけでできます。 文字文字文字<table width="320" border="1" cellspacing="0" cellpadding="3" bordercolor="#0000FF">　<tr><td width="25%">文字</td><td width="25%">文字</td><td width="50%">文字</td></tr></table>　この方法は、すべての行が同じ幅のセルにするときに可能です。　つまり、 文字文字文字 文字文字文字　となるわけです。　これを、 文字文字文字 文字文字文字文字　とするには、セル２つ分を繋げます。<table width="320" border="1" cellspacing="0" cellpadding="3" bordercolor="#0000FF">　<tr><td width="25%">文字</td><td width="25%">文字</td><td colspan="2">文字</td></tr>　<tr><td width="25%">文字</td><td width="25%">文字</td><td width="25%">文字</td><td width="25%">文字</td></tr></table>今日の宿題！ 文字文字文字 文字文字文字１つのテーブルだけを使い↑を作ってみましょう♪ ホームページ作成に役立つ書籍 ホームページ辞典第３版ＨＴＭＬスタイルシートＪａｖａＳｃｒｉｐｔ タグなどを調べるならこの本☆これで完璧ホームページ・ビルダー８ ビルダー8を覚えるならこの本☆ 日記　今日はメインサイトのダイエットコーナーを作り替えていました。　まだ途中ですけどね。　今まで手が回らなかった、個別商品紹介ページを作りました。　昨日も、ルミンAの紹介ページを作ったので、それと同じように作っただけですけどね。　一般的な消費は見やすく並べて、イチオシ商品は個別ページを作り詳しく紹介するようにしました。 　 　今日はHTML講座、何書こうかと悩んだのですが、書いてみると意外に長くなってしまった（汗）　今日は短くても良いかなと思ってとりあえず書き始めたのに～f(^ー^; 　なんだか、今月は楽天アフィリの成果の伸びが今ひとつだなー。　このペースだと先月より低くなりそう(・・；)　代わりにトラフィックゲートが良い調子で伸びてます。　トラフィックゲートの確定っていつになるんだろう・・　最初のIDは６月分の成果が載ってるのに、２つ目のIDは５月分もまだです。　４月分は注文件数ゼロだったので、無いのでしょうが・・５月分は注文が８件あるので売上ゼロてことは無いでしょうね・・　１つ目のID見ると、６月の注文がゼロなのに売上件数が１件になってるし、見方がよく分からないなー。ルミンＡ体質改善に体内のゴミを排除し、身体の機能を蘇らせる医薬品。ドライアイ・目の疲れ・充血花粉症の目のかゆみまで効く生薬成分配合の目薬新黄珠（おうじゅ）目薬　15ｍｌ 　

  2004年07月13日

  コメント(0)

• 

  アフィリエイトHTML講座（？）

  アイフィリエイトリンクを作成しよう！　今日はアフィリエイトリンクの使い方を覚えましょう♪楽天アフィリエイト　楽天広場では基本はこれですね。　楽天に登録しているみなさんは標準で使えます♪商品リンク　ここから商品を検索し商品リンクボタンを押します。 　すると、その商品の画像リンクとテキストリンクとメールリンクができあがります。　使いたいリンクをコピーして貼り付ければOKです。簡単ですね♪ショップリンク　商品リンクと同じようにしてお店のトップページのリンクも作成できます♪ URLからリンク作成　こちらは別の画像を使いたいときに使います。　リンクしたいページのURLをコピーしてリンクを作成ボタンを押します。　すると、<a href="***" target="_blank">★★★</A><IMG src="***" width="1" height="1" border="0">　というようなテキストリンクが作成されます。　★★★には商品名やお店名などを入力します。　その中には画像などのタグを入れても大丈夫です。　画像リンクにしたいなら、★★★を<img src="画像ファイル" border="枠の太さ" width="横幅" height="縦幅">　とします。この画像タグの説明は前回書きましたね。 　これで、好きな画像を使ったアフィリエイトリンクが作成できました。　注意が必要なのは、自動で作成される縦横1の画像タグを消してはいけません。　これは、画像が読み込まれる時に、どこで読み込まれたかなど成果対象とするために必用な手続きが含まれています。　この画像が読み込まれなかったとき、成果としてカウントされないかもしれません。　縦横１なので、見た目上は見えても小さな点が一個です。透明画像なら見ることすら出来ません。　ただし、読み込まれてはいます。 トラフィックゲート　楽天広場で、楽天アフィリエイト以外で唯一利用できるアフィリエイトです。　ただし、楽天広場では楽天グループのリンクしか使えません。　楽天市場の商品は一律1%で、ポイントではなく現金報酬となります。　ただし、5000円以上になるまでは引き出せません。 簡単リンク　楽天市場のページにリンクするには簡単リンクが利用できます。　リンクに http://ad.trafficgate.net/f/n/188/137/あなたのID/http://リンク先　これをリンクに指定するだけです。とっても簡単ですね♪　私は http://ad.trafficgate.net/f/n/188/137/あなたのID/ を辞書登録して簡単に入力し、　コピーしたURLを後に貼り付けて使ってます。　固定されている記述は辞書登録しておけば手間いらず！申込　トラフィックゲートへは別途申込が必用です。　簡単な審査があるので、何もない作成中のサイトだと認可されません。　申込はこちらから可能です。 今日の宿題！　今日は宿題はおやすみです♪(?_?)エ?　まあ、宿題というより各自実用で！＾＾； ホームページ作成に役立つ書籍 ホームページ辞典第３版ＨＴＭＬスタイルシートＪａｖａＳｃｒｉｐｔ タグなどを調べるならこの本☆これで完璧ホームページ・ビルダー８ ビルダー8を覚えるならこの本☆ 日記　今日は目薬が届きました～♪　昔のネット注文と比べると配達まで格段に速いですね～。　病みつきです♪(゜゜;)＼(--;)ォィォィ 　今日はルミンＡが欲しくなりました～。　高いのでこれは今月は買えませんが、とっても良い商品のようです。　目薬買ったらチラシが同封されていたのさヽ(´▽｀)/ 　ルミンには異物排除作用があり、自然治癒力を高め、細菌が排除され損傷部位の修復が進み、アレルギーなどの過剰な免疫反応をも正常に下げる免疫力調整作用があり、自律神経系・免疫系・内分泌系が強化・調整されアレルギー疾患の体質改善に効果があるようです。　これだけ効果が書かれると嘘っぽく感じてしまいますが、医薬品なので本当なのでしょう。　傷の治りとか、冷え性とか、肩こりとか、アトピーとか、ニキビとか、むくみとか、体質改善にとても期待できるようです　 ルミンＡ体質改善に体内のゴミを排除し、身体の機能を蘇らせる医薬品。ドライアイ・目の疲れ・充血花粉症の目のかゆみまで効く生薬成分配合の目薬新黄珠（おうじゅ）目薬　15ｍｌ

  2004年07月12日

  コメント(2)

• 

  基本のタグを覚えよう！

  基本のタグを覚えよう！　昨日まではテーブルタグについて書きましたが、それ以外のよく使う基本的なタグも覚えましょう♪文字　文字は<font></font>タグで表します。　文字の大きさはsize=""。文字の色は、color=""で表します。　文字　文字　文字　文字　文字　文字　文字一番左は <font size="1" color="#FF0000">文字</font>一番右は <font size="7" color="#99CCFF">文字</font>sizeが大きくなるほど文字が大きくなります。サイズは1～7の範囲しかありません。スタイルシートでフォントサイズを指定するにはfont-size：を用います。スタイルシートでは文字の大きさがもっと柔軟に指定することが出来ます。一般的には文字のポイントサイズptを用います。fontタグの代わりにスタイルシートを使うには<span style=""></span>を使います。　文字これは　<span style="font-size:14pt; color:#0000FF">文字</span>　です。注意が必要なのは、ptでサイズ指定するとブラウザのフォントの大きさを変更しても変化がないことです。目が悪くブラウザの文字のサイズを大きく設定していても、フォントサイズを小さく指定されていたら読むことが出来なくなります。fontタグで普通にサイズ指定した場合はブラウザの状態に合わせて大きさが変化します。試しにこのページで文字サイズを変えてみてください。このスタイルをTDタグに記述すると、そのセル内の文字すべてが影響を受けます。文字の大きさの違いによりデザインが崩れるのを防ぐことが出来ます。文字の強調 文字を強調するには<b></b>を使います。もっと強調するなら<strong></strong>を使います。文字　文字 左が<b>で右が<strong>です。見た目の影響はありませんが、ロボット検索エンジンには<strong>の方が効くようです。画像画像を付けるには　<img src="" width="" height="" border="" alt="" >　を用います。srcには画像ファイルの場所を記述します。width画像の横幅をheightには縦幅を記述します。画像の幅が分からなければwidthとheightはいりません。画像が読み込まれたときに自動的に合わせてくれます。幅を指定しないと画像が読み込まれてから幅が確保されるため、読み込まれる前と後でレイアウトが変わってしまいますので注意が必要です。altには画像の名前などのコメントを入れます。 borderには画像の周りの枠線の太さを指定します。リンクタグの間に画像を入れた場合は0を指定しないと枠線がついてしまいます。 リンクリンクを張るには　<a href="" target=""></a>　を使います。hrefにはリンク先を、targetにはウインドーを指定します。リンク先にはhttp://のアドレスか、リンク先の位置とファイル名を記述します。サイト構造が　■HOME　├　IMG - AAA.jpg　├　HTML┬file2.htm　│　　　　　└file3.htm　└　index.htmなら、indexからfile2にリンクするならhref="HTML/file2.htm"となり、file2からindexにりんくするならhref="../index.htm"となります。../は１つ前のディレクトリ（フォルダ）に戻ることを意味し、HTML/は次のHTMLという名前のディレクトリであることを意味します。この辺はちょっと分かりにくいですね。文章で説明すると、HOMEという部屋から、HTMLという箱の中にあるfile2.htmをとる。file2.htmの置いてある箱から出てindex.htmをとる。ということになります。箱の名前がIMGやHTMLで、今いる箱から出ることを../で表します。画像のsrcにもhrefと同じようにして画像ファイルの場所を書きます。 targetはウインドーやフレームの位置を表します。_blank　は新しいウインドーにリンク先のページを表示する。_top　は同じウインドーのフレームを解除してリンク先のページを表示する。targetを記述しなければ、同じフレームまたはウインドーにリンク先のページを記述します。次は、アフィリエイトで作成したタグをみてみましょう♪作成されたタグには画像とリンクのタグが入ってますね。だいたいの意味がお分かりになったでしょうか？ 今日の宿題！ タイトル (画像リンク)商品名コメント(画像リンク)商品名コメント これ↑を作ってみましょう♪ ホームページ作成に役立つ書籍 ホームページ辞典第３版ＨＴＭＬスタイルシートＪａｖａＳｃｒｉｐｔ タグなどを調べるならこの本☆これで完璧ホームページ・ビルダー８ ビルダー8を覚えるならこの本☆ 日記　なんだか、目が痛いようなかゆいような・・　またドライアイでしょうか・・　悪化しないうちに目薬注文しました。7/12まで送料無料♪　もちろん全額ポイント支払いで注文さ♪ ドライアイ・目の疲れ・充血花粉症の目のかゆみまで効く生薬成分配合の目薬新黄珠（おうじゅ）目薬　15ｍｌ 　

  2004年07月10日

  コメント(0)

• スタイルシートを使おう！

  スタイルシートを使おう！　昨日はテーブルタグの要素だけを使いデザインを行いましたが、スタイルシートを使うともっと柔軟にデザインすることが出来ます。　スタイルシートの定義は外部ファイルに置くのと、ファイルの先頭付近に置くのと、それぞれのタグに要素として直接埋め込む方法があります。　この中で、楽天広場ではタグに直接埋め込んで使うしかありません。スタイルートの使い方　楽天広場でスタイルシートを使うには、タグの中でstyle=""で記述します。　１つのタグの中で複数のスタイルシートの要素を記述するには；で区切ります。　要素は プロパティ：値 値 ・・・ になります。　まとめると、style="プロパティ１：値 値； プロパティ２：値 値"という書き方です。 <table width="100" border="0" cellspacing="0" cellpadding="0" style="border:solid #0000ff 2pt;"><tr><td>1</td></tr></table>1　タグによる枠の太さを0にして、スタイルシートで枠の太さと色を定義しています。　borderは枠を意味し、その中のsolidは線のタイプ、#0000ffは16進数による色、2ptは線の太さを意味します。　tableタグに記述するとテーブル全体の枠に、tdタグに記述するとそのセルの枠に作用します。線のタイプ soliddotteddasheddouble grooveridgeinsetoutset今日の宿題！　上の線のタイプと同じものを作ってみましょう♪　昨日までの宿題をやっていれば簡単ですね♪日記　あ～眠い！！書きながら眠い！！　毎日猛暑で夜も暑くて、寝不足気味です＞＜　ε-(≧ｏ≦;A あっついよぉ 　引っ越し前の旧サイト、プロバイダのサービス終了の延期が日付未定になったのでもったいないので、グルメ館としてリニューアルしました！　サーバー状態が古いまま放置されているのでディスク容量は少ないし、CGIのPerlのバージョンも古いという問題がありますけど、別館アフィリするには別に問題ないし、アフィリエイト会社にも登録済みなので商品を載せていけば有効利用です。管理者不在のリンク修正されていないサイトからちょこっと人が来るだけですけどね＾＾；　とりあえず、暑いので冷たいアイスだけ集めました～。　■　SAKURA PC グルメ館　

  2004年07月09日

  コメント(0)

• 

  続：基本のテーブルタグを覚えよう

  続：基本はテーブルタグ　今日はテーブルのデザインを覚えましょう♪　HTMLでは構造を定義し、デザインにはスタイルシートを本来用いるべきですが、ここではまだスタイルシートはしまっておきます。セルの幅と余白<table width="200" border="1" cellspacing="0" cellpadding="0" bordercolor="#0000FF"><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>1234昨日の説明はこの形でしたね。セル内に余白が無くて線と文字がくっついてしまい少し見づらい。この余白を作るのが cellpadding になります。<table width="200" border="1" cellspacing="0" cellpadding="10" bordercolor="#0000FF"><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table> 1234これでセルの周りに10ずつの余白が追加されました。セル同士の間隔を空けるには cellspacing を増やします。<table width="200" border="1" cellspacing="10" cellpadding="0" bordercolor="#0000FF"><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>1234それぞれのセルの間に10の空白が生まれました。線が邪魔な時は線を消してしまいましょう♪border は線の太さです。この値を0に指定すると線は表示されなくなります。セルの結合　次はセルを繋げてみましょう♪ <table width="300" border="1" cellspacing="0" cellpadding="5" bordercolor="#0000FF"><tr><td colspan="2">1+2</td><td width="100">3</td></tr><tr><td width="100">4</td><td width="100">5</td><td width="100">6</td></tr></table>1+23456td colspan="2"　でセルが横２つ分であることを指定します。その行のtdの数は繋げた分だけ減ります。この場合これを３にすると、横１列に繋がりますね。<table width="200" border="1" cellspacing="0" cellpadding="5" bordercolor="#0000FF"><tr><td rowspan="2" width="100">1+3</td><td width="100">2</td></tr><tr><td width="100">4</td></tr><tr><td width="100">5</td><td width="100">6</td></tr></table>1+32456td rowspan="2" でセルが縦２つ分であることを指定します。これを３にすると、縦１列で繋がります。 色を変えてみよう！枠の色は bordercolor で指定されています。#0000ＦＦは0～9＋A～Fの16の数字を1桁として使う16進数と言われる数です。左から2桁ずつ赤・緑・青の光の３原色を表しています。つまり16の数字2桁で256の色を3原色使うことで1677万色の色を操れるのです！左の#は16進数で色を指定することを意味します。#を使わずにブラウザに定義されている色を文字で指定することも出来ます。（黒なら="black"と指定）セルの背景に色を付けるには<td bgcolor="#0000FF">とbgcolorを指定します。色サンプル #FFFF00#FF00FF#80FFFF #FF0000#00FF00#0000FF #800080#008000#800080 #500000#505000#005050 #000000#909090#FFFFFFセルの行揃え　セルの中身もalignの指定で中央揃えや右揃えにできます。　中央揃えはalign="center"で右揃えなら="right"になります。 　 今日の宿題 タイトル 説明商品商品 商品商品各セルの幅を均等にして上記のテーブルを作成してみましょう♪ ホームページ作成に役立つ書籍 ホームページ辞典第３版ＨＴＭＬスタイルシートＪａｖａＳｃｒｉｐｔ タグなどを調べるならこの本☆これで完璧ホームページ・ビルダー８ ビルダー8を覚えるならこの本☆

  2004年07月08日

  コメント(2)

• 基本のテーブルタグを覚えよう！

  基本はテーブルタグ　ページを作成する上で欠かせないのがテーブルタグです。　今日はそのテーブルタグをちょっぴり解説しましょう♪　ブラウザの横幅が短いと、頻繁に改行されて見づらくなります。　その場合は、横幅を長くしたり最大化して表示しましょう♪ テーブルの基本<table width="200" border="1" cellspacing="0" cellpadding="0" bordercolor="#0000FF"><tr><td width="100">　</td><td width="100">　</td></tr><tr><td width="100">　</td><td width="100">　</td></tr></table> 　　 　　タグは基本的に <タグ>～</タグ> が１セットです。<table></tabe>がその中がテーブルであることを意味し、<tr></tr>が行を意味します。<td></td>は列を表します。上の例では2行X2列の4つの枠ができます。何も無いセルの中身には全角のスペースを入力しています。これが空だとテーブルの縦幅が潰れてしまいます。←要注意縦幅を数値指定してしまえば潰れることはありません。 縦幅を指定するにはheight=""を使います。 これを2行X3列にするには、<td>　</td>を１つずつ追加します。<table width="300" border="1" cellspacing="0" cellpadding="0" bordercolor="#0000FF"><tr><td width="100">　</td><td width="100">　</td><td width="100">　</td></tr><tr><td width="100">　</td><td width="100">　</td><td width="100">　</td></tr></table> 　　　 　　　これで2行X3列のできあがりです。 さらに1行増やしてみましょう。<table width="300" border="1" cellspacing="0" cellpadding="0" bordercolor="#0000FF"><tr><td width="100">　</td><td width="100">　</td><td width="100">　</td></tr><tr><td width="100">　</td><td width="100">　</td><td width="100">　</td></tr><tr><td width="100">　</td><td width="100">　</td><td width="100">　</td></tr></table> 　　　 　　　　　　これで3行X3列になりました。次に幅の説明です。widthは横幅を指定します。縦幅は文字や画像などにより自然に伸びますので気にしないでください。tableの横幅はテーブル全体の横幅をしていします。tdの横幅はセル（一枠）の横幅を指定します。上の例では横幅100のセルが3つで全体では300となっています。最後のセルは横幅を指定しなくても、余った分が割り当てられます。幅は%で指定することも出来ます。<tr><td width="33%">　</td><td width="33%">　</td><td>　</td></tr>これでもほぼ同じ幅になります。1%分最後のセルが長くなりますけどね。 table自体を%指定すると、親テーブルの幅に合わせて調整されます。親テーブルがなければブラウザの幅に合わせて伸縮します。長くなったので、その他の部分の説明は次回に続く！f(^ー^; 今日の宿題！　練習用の新規ページを作り、１つのセル幅が100で4行X4列のテーブルを作ってみましょう♪　それが出来たら一番左の列だけ幅150で残りは幅50で作ってみましょう♪　更に、 cellspacingとcellpaddingの数値を変えて遊んでみましょう♪

  2004年07月07日

  コメント(4)

全10件 (10件中 1-10件目)

1