全24件 (24件中 1-24件目)
1
・ホームページHTMLソースの基本構造1.HTMLの基本構成<HEAD>~</HEAD>にはタイトル、ページの情報、スタイルシート、スクリプトなどを必要に応じて書きます。下の例ではタイトルだけが入っています。<TITLE>~</TITLE>には、ページのタイトルでブラウザのタイトルバーに表示されます。検索エンジンがもっとも重要視するのがタイトルです。タイトルには検索されたいキーワードを入れておきましょう。<Html>HTMLの始まり意<Head>ページ情報の始まり意<Title>~</Title>ページタイトル</Head>ページ情報の終わりの意<Body>内容(本文)の始まりの意~内容(本文)</Body>内容(本文)の終わりの意</Html>HTMLの終わりページの本文を書くのが上の例の<BODY>~</BODY>の間です。下の例では、「楽天広場HTML講座」というテキストが書かれています。この編集枠内は自由に書き換える事が出来ますので、テキストを自由に書き直してみてください。 <Html><Head><Title>ページタイトル</Title></Head><Body>楽天広場HTML講座</Body></Html> 2.文字化け対策下の例のHTMLの記述を、<Head>~</Head>の間に指定して置けば文字化けを事前に阻止できます。<Meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">3.ロボット検索対策 検索エンジンが重要視するのがメタタグです。ページごとに、<Head>から</Head>の間に下のようなタグを挿入します。青文字の部分がサイトの紹介文になり、赤文字の部分がサイトのキーワードになります。<meta name="description" content="アフィリエイトで大きく稼ぐためのアクセスアップ対策を解説しています"><meta name="keywords" content="アクセスアップ,ネット収入,アフィリエイト">キーワードは半角コンマで区切っていくつか並べることができます。デスクリプションにはそのページの概要(紹介文)を書いておきましょう。おすすめHTML書籍★アフィリエイト関連書籍★HTML関連書籍★主婦もかせげるアフィリエイトで月収50万主婦もかせげるパソコンで月収30万できる100ワザアフィリエイトTOPページへ戻ります
2008.04.04
・カーソルの形状を変更する方法今回はカーソルの形状を変更する方法について学んでいきます。リンク部分にstyle=" "を追加し、defaultの部分を変更します。<a href="リンク先URL.html" style="cursor:default">~</A>↓標準カーソル。矢印の場合が多い。「~」には、リンクであることがわかる言葉や画像をいれます。キーワード使用例説明autocrosshairdefaulthandmovetextwaithelpn-resizes-resizew-resizee-resizene-resizenw-resizese-resizesw-resizeprogressnot-allowedall-scroll楽天市場TOPページへ楽天市場TOPページへ楽天市場TOPページへ楽天市場TOPページへ楽天市場TOPページへ楽天市場TOPページへ楽天市場TOPページへ楽天市場TOPページへ楽天市場TOPページへ楽天市場TOPページへ楽天市場TOPページへ楽天市場TOPページへ楽天市場TOPページへ楽天市場TOPページへ楽天市場TOPページへ楽天市場TOPページへ楽天市場TOPページへ楽天市場TOPページへ楽天市場TOPページへブラウザが自動で指定。十字カーソル。標準カーソル。矢印の場合が多い。指型カーソル。move指定物移動可能時のカーソル。矢印の十字。テキスト範囲選択時のカーソル。読み込み時、処理時のカーソル。ヘルプ利用可時のカーソル。ウインドウ上のサイズ変更時のカーソル。ウインドウ下のサイズ変更時のカーソル。ウインドウ左のサイズ変更時のカーソル。ウインドウ右のサイズ変更時のカーソル。ウインドウ右上のサイズ変更時のカーソル。ウインドウ左上のサイズ変更時のカーソル。ウインドウ右下のサイズ変更時のカーソル。ウインドウ左下のサイズ変更時のカーソル。進行中カーソル。※IE6.0以上のみ対応禁止カーソル。※IE6.0以上のみ対応全スクロール時のカーソル。※IE6.0以上のみ対応リンク部分にカーソルを当てると形状が変わります。[トップページへ戻る]
2008.03.22
・応用編■ スクロールバーのテンプレート前回は、テーブルの作り方応用編でした。今回は、スクロールするテンプレートです。細かい部分の色変更<div style="overflow:auto;width:300px;height:150px;padding:5px;scrollbar-base-color:#ffffff;scrollbar-3dlight-color:3D部分の色;scrollbar-arrow-color:▲の色;scrollbar-darkshadow-color:深い影の色;scrollbar-face-color:表面の色;scrollbar-highlight-color:明るい部分の色;scrollbar-shadow-color:影の色;scrollbar-track-color:トラックの色;></div>designlemon*更新履歴や、サイトの紹介いろいろ書いてね。*・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・*入力ソース<center><table style="border:#ff9900 dotted 3px;" width="330" cellspacing="1"><caption align="bottom"><font size="1">design<a href="http://plaza.rakuten.co.jp/ludovicgilly/">lemon*</a></font></caption><tr><td><div style="overflow:auto;width:300px;height:150px;padding:5px;scrollbar-base-color:#ffffff;scrollbar-arrow-color:#cc6633;scrollbar-3dlight-color:#ffb366;scrollbar-shadow-color:#ffffff;scrollbar-darkshadow-color:#ffb366;line-height:150%;">更新履歴や、サイトの紹介いろいろ書いてね。*・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・*</div></td></tr></table></center>designlemon*更新履歴や、サイトの紹介いろいろ書いてね。*・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・*入力ソース<center><table style="border:#ccff99 dotted 3px;" width="330" cellspacing="1"><caption align="bottom"><font size="1">design<a href="http://plaza.rakuten.co.jp/ludovicgilly/">lemon*</a></font></caption><tr><td><div style="overflow:auto;width:300px;height:150px;padding:5px;scrollbar-base-color:#ffffff;scrollbar-arrow-color:#669933;scrollbar-3dlight-color:#80cc4d;scrollbar-shadow-color:#ffffff;scrollbar-darkshadow-color:#80cc4d;line-height:150%;">更新履歴や、サイトの紹介いろいろ書いてね。*・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・*</div></td></tr></table></center>designlemon*更新履歴や、サイトの紹介いろいろ書いてね。*・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・*入力ソース<center><table style="border:#ffccff dotted 3px;" width="330" cellspacing="1"><caption align="bottom"><font size="1">design<a href="http://plaza.rakuten.co.jp/ludovicgilly/">lemon*</a></font></caption><tr><td><div style="overflow:auto;width:300px;height:150px;padding:5px;scrollbar-base-color:#ffffff;scrollbar-arrow-color:#c87886;scrollbar-3dlight-color:#ffb3b3;scrollbar-shadow-color:#ffffff;scrollbar-darkshadow-color:#ffb3b3;line-height:150%;">更新履歴や、サイトの紹介いろいろ書いてね。*・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・*</div></td></tr></table></center>designlemon*更新履歴や、サイトの紹介いろいろ書いてね。*・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・*入力ソース<center><table style="border:#cccccc dotted 3px;" width="330" cellspacing="1"><caption align="bottom"><font size="1">design<a href="http://plaza.rakuten.co.jp/ludovicgilly/">lemon*</a></font></caption><tr><td><div style="overflow:auto;width:300px;height:150px;padding:5px;scrollbar-base-color:#ffffff;scrollbar-arrow-color:#339999;scrollbar-3dlight-color:#66ccb3;scrollbar-shadow-color:#ffffff;scrollbar-darkshadow-color:#66ccb3;line-height:150%;">更新履歴や、サイトの紹介いろいろ書いてね。*・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・*</div></td></tr></table></center>飾り枠TOPページいつも応援していただいてありがとうございます。アフィリエイト入門編被リンク数を調べる検索エンジン一括登録【HERMES】エルメス バーキンブログ系アフィリエイトアンケートリサーチ(1)FXcafe無料参加者受付中 株初心者 株式投資で増やす運気アップ講座TOP脳トレーニング講座TOP資生堂コレクション【NIKE】ナイキ オンラインアンケートリサーチ(2)☆昨日のアフィリエイト収入☆商品が売れる法則楽天広場アフィリエイト講座福袋 2007(最新福袋情報)介護支援福祉情報アレカオ(arekao)ブログ★もれなく全員にプレゼント★楽天広場HTML講座TOP
2007.06.30
・応用編■ 色々なテーブル枠4前回は、複雑なリストのつくり方を学びました。今回は、テーブルの作り方応用編です。今までのテーブルはここに画像や文章をいれるここに画像や文章をいれるここに画像や文章をいれるここに画像や文章をいれる↓入力ソース<table border="1"><tr><td>ここに画像や文章をいれる</td><td>ここに画像や文章をいれる</td></tr><tr><td>ここに画像や文章をいれる</td><td>ここに画像や文章をいれる</td></tr></table>ここに画像や文章をいれるここに画像や文章をいれるここに画像や文章をいれるここに画像や文章をいれる↓入力ソース<table border="1" bordercolor="#ff9900"><tr><td>ここに画像や文章をいれる</td><td>ここに画像や文章をいれる</td></tr><tr><td>ここに画像や文章をいれる</td><td>ここに画像や文章をいれる</td></tr></table>ここに画像や文章をいれるここに画像や文章をいれるここに画像や文章をいれるここに画像や文章をいれる↓入力ソース<table border="1" bordercolor="#ff9900" cellspacing="0"><tr><td>ここに画像や文章をいれる</td><td>ここに画像や文章をいれる</td></tr><tr><td>ここに画像や文章をいれる</td><td>ここに画像や文章をいれる</td></tr></table>でした。今回のテーブルは、今までのテーブルと比べて、枠の線をより細くキレイに見せることができます。例えば次の例を見てくださいここに文章や画像を入れるここに文章や画像を入れるここに文章や画像を入れるここに文章や画像を入れる↓入力ソース<table cellspacing="1" bgcolor="ff9900" cellpadding="5" width="100%"><tr><td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td><td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td></tr><tr><td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td><td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td></tr></table>今までは「table」の中に、外枠を表示する属性「border=""」を入れていたと思いますが今回は入れないでテーブルをタテ・ヨコに並べていく方法です。<table>の中に入れる属性「cellspacing=""」は、外枠の太さを表します。<table> 内の「 bgcolor=""」は、今回の場合は、外枠の色を表します。<td> 内の「bgcolor=""」は、テーブル内の背景色を表します。「cellpadding=""」は、外枠と、枠の中の(画像・文字)の間隔を調節します。「width」は、テーブルのヨコ幅を指定。<td>の中に入れる属性「width」は、テーブルのヨコ幅「bgcolor」は、テーブルの背景色今回のポイントは【1】「table」の中に「border」属性を入れないテーブルの中に、「cellspacing」「bgcolor」「cellpadding」の属性を入力する。【2】<td> の中に、「width」「bgcolor」属性を入力する。これらを入力し忘れると、テーブルが崩れます!width="数値" に入れる数値は「%」でも「数字」でもOK です。ちなみに「100%」にした場合、横幅いっぱいにどこかにぶつかるまで伸びていきます。「50%」は、その半分になります。「width="50%"」にした場合ここに文章や画像を入れるここに文章や画像を入れるここに文章や画像を入れるここに文章や画像を入れる↓入力ソース<table cellspacing="1" bgcolor="ff9900" cellpadding="5" width="50%"><tr><td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td><td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td></tr><tr><td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td><td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td></tr></table>慣れるまで大変かも知れませんがこのテーブルの作り方を覚えておくととても便利ですよ![トップページへ戻る][次のページ⇒]
2007.05.18
・応用編■ 行間を調節する前回は、スタイルシートを使って文字の大きさを変えてみました。今回は、スタイルシートを使って行間を調節する方法です。【A】の場合:説明の必要はないでしょう。世に出回っている印刷物の類でAのようなものを目にすることは難しいはずです。ウェブ上に公開するわけですから、最低限これぐらいの配慮は必要になります。文章の行間を調節する。長い文章が多い場合、行間が詰まっていると読みにくくなる。そんな場合は、このプロパティで行間の調節をする。【B】の場合:説明の必要はないでしょう。世に出回っている印刷物の類でAのようなものを目にすることは難しいはずです。ウェブ上に公開するわけですから、最低限これぐらいの配慮は必要になります。文章の行間を調節する。長い文章が多い場合、行間が詰まっていると読みにくくなる。そんな場合は、このプロパティで行間の調節をする。行間の指定 ⇒ style="line-height:数値を入力%;"<span style="line-height:数値%;">テキスト</font>これは、<td>にも指定できます。【A】の場合、<td style="line-height:100%;">【B】の場合、<td style="line-height:150%;">になっています。※ <p>タグを使って一行あけにするなら、line-height : 200%;にするべきなのです。pタグで段落(文章中の意味のまとまり)を指定することができます。一般的なブラウザでは、段落と段落の間に1行分の間隔が空いて表示されます。[トップページへ戻る][]いつも応援していただいてありがとうございます。アフィリエイト入門編被リンク数を調べる検索エンジン一括登録【HERMES】エルメス バーキンブログ系アフィリエイトアンケートリサーチ(1)株初心者 株式投資で増やす運気アップ講座TOP脳トレーニング講座TOP資生堂コレクション【NIKE】ナイキ オンラインアンケートリサーチ(2)商品が売れる法則楽天広場アフィリエイト講座福袋 2007(最新福袋情報)介護支援福祉情報アレカオ(arekao)ブログ楽天広場HTML講座TOP
2007.04.02
・番外編■タグや入力ソースを表示させる方法は?【特殊文字】今回は、ご質問の多かった特殊文字の出し方をみてみましょう!たとえば、「<table>」と書きたいとします。これをこのまま打ち込んでも、ブラウザ画面には表示されないですよね。では、どうやってこのように表示しているのでしょう。じつはこれ、「&lt;table&gt;」と入力しているのです。(実際の入力は、全て半角英数字で「;」をつけるのがポイント!)「&lt;」は「」を表示するときに使います。この入力方法をつかうと、たとえばテンプレートなどの入力ソースを公開したいときなどにとっても便利です。この講座で公開している入力ソースもすべてこの特殊文字をつかうことで、表示しています。テンプレートのソースを公開したいときは、ぜひ利用してみてね。[トップページへ戻る]
2007.02.20
・応用編■ 色々なテーブル枠5今回は、テーブルの枠自体を変えて遊んでみます。前回も書きましたが、「習うより慣れよう!」です。ということで、じゃんじゃん例題を載せていきますので、実際に遊んで覚えてみましょう!まずは、この表を基本形とします。文字1文字2文字3文字4文字5文字6入力ソースはこちら。<table border="1" width="200" height="200" bordercolor="#0080ff" cellspacing="0"><tr><td>文字1</td><td>文字2</td></tr><tr><td>文字3</td><td>文字4</td></tr><tr><td>文字5</td><td>文字6</td></tr></table>外枠無しtableに「frame="void"」を入力文字1文字2文字3文字4文字5文字6入力ソースはこちら。<table border="1" width="200" height="200" bordercolor="#0080ff" cellspacing="0" frame="void"><tr><td>文字1</td><td>文字2</td></tr><tr><td>文字3</td><td>文字4</td></tr><tr><td>文字5</td><td>文字6</td></tr></table>左右の枠を非表示tableに「frame="hsides"」を入力文字1文字2文字3文字4文字5文字6入力ソースはこちら。<table border="1" width="200" height="200" bordercolor="#0080ff" cellspacing="0" frame="hsides"><tr><td>文字1</td><td>文字2</td></tr><tr><td>文字3</td><td>文字4</td></tr><tr><td>文字5</td><td>文字6</td></tr></table>上下の枠を非表示tableに「frame="vsides"」を入力文字1文字2文字3文字4文字5文字6入力ソースはこちら。<table border="1" width="200" height="200" bordercolor="#0080ff" cellspacing="0" frame="vsides"><tr><td>文字1</td><td>文字2</td></tr><tr><td>文字3</td><td>文字4</td></tr><tr><td>文字5</td><td>文字6</td></tr></table>左の枠のみ表示tableに「frame="lhs"」を入力文字1文字2文字3文字4文字5文字6入力ソースはこちら。<table border="1" width="200" height="200" bordercolor="#0080ff" cellspacing="0" frame="lhs"><tr><td>文字1</td><td>文字2</td></tr><tr><td>文字3</td><td>文字4</td></tr><tr><td>文字5</td><td>文字6</td></tr></table>右の枠のみ表示tableに「frame="rhs"」を入力文字1文字2文字3文字4文字5文字6入力ソースはこちら。<table border="1" width="200" height="200" bordercolor="#0080ff" cellspacing="0" frame="rhs"><tr><td>文字1</td><td>文字2</td></tr><tr><td>文字3</td><td>文字4</td></tr><tr><td>文字5</td><td>文字6</td></tr></table>上の枠のみ表示tableに「frame="above"」を入力文字1文字2文字3文字4文字5文字6入力ソースはこちら。<table border="1" width="200" height="200" bordercolor="#0080ff" cellspacing="0" frame="above"><tr><td>文字1</td><td>文字2</td></tr><tr><td>文字3</td><td>文字4</td></tr><tr><td>文字5</td><td>文字6</td></tr></table>下の枠のみ表示tableに「frame="below"」を入力文字1文字2文字3文字4文字5文字6入力ソースはこちら。<table border="1" width="200" height="200" bordercolor="#0080ff" cellspacing="0" frame="below"><tr><td>文字1</td><td>文字2</td></tr><tr><td>文字3</td><td>文字4</td></tr><tr><td>文字5</td><td>文字6</td></tr></table>このように色々な枠を表示させることができました。次回は、この枠をつかって、さらに遊んでみます![トップページへ戻る][次のページ⇒]
2007.02.19
・応用編■ スクロールバーのテンプレート前回は、テーブルの作り方応用編でした。今回は、スクロールするテンプレートです。細かい部分の色変更<div style="overflow:auto;width:300px;height:150px;padding:5px;scrollbar-base-color:#ffffff;scrollbar-3dlight-color:3D部分の色;scrollbar-arrow-color:▲の色;scrollbar-darkshadow-color:深い影の色;scrollbar-face-color:表面の色;scrollbar-highlight-color:明るい部分の色;scrollbar-shadow-color:影の色;scrollbar-track-color:トラックの色;></div>designlemon*更新履歴や、サイトの紹介いろいろ書いてね。*・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・*入力ソース<center><table style="border:#ff9900 dotted 3px;" width="330" cellspacing="1"><caption align="bottom"><font size="1">design<a href="http://plaza.rakuten.co.jp/ludovicgilly/">lemon*</a></font></caption><tr><td><div style="overflow:auto;width:300px;height:150px;padding:5px;scrollbar-base-color:#ffffff;scrollbar-arrow-color:#cc6633;scrollbar-3dlight-color:#ffb366;scrollbar-shadow-color:#ffffff;scrollbar-darkshadow-color:#ffb366;line-height:150%;">更新履歴や、サイトの紹介いろいろ書いてね。*・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・*</div></td></tr></table></center>designlemon*更新履歴や、サイトの紹介いろいろ書いてね。*・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・*入力ソース<center><table style="border:#ccff99 dotted 3px;" width="330" cellspacing="1"><caption align="bottom"><font size="1">design<a href="http://plaza.rakuten.co.jp/ludovicgilly/">lemon*</a></font></caption><tr><td><div style="overflow:auto;width:300px;height:150px;padding:5px;scrollbar-base-color:#ffffff;scrollbar-arrow-color:#669933;scrollbar-3dlight-color:#80cc4d;scrollbar-shadow-color:#ffffff;scrollbar-darkshadow-color:#80cc4d;line-height:150%;">更新履歴や、サイトの紹介いろいろ書いてね。*・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・*</div></td></tr></table></center>designlemon*更新履歴や、サイトの紹介いろいろ書いてね。*・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・*入力ソース<center><table style="border:#ffccff dotted 3px;" width="330" cellspacing="1"><caption align="bottom"><font size="1">design<a href="http://plaza.rakuten.co.jp/ludovicgilly/">lemon*</a></font></caption><tr><td><div style="overflow:auto;width:300px;height:150px;padding:5px;scrollbar-base-color:#ffffff;scrollbar-arrow-color:#c87886;scrollbar-3dlight-color:#ffb3b3;scrollbar-shadow-color:#ffffff;scrollbar-darkshadow-color:#ffb3b3;line-height:150%;">更新履歴や、サイトの紹介いろいろ書いてね。*・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・*</div></td></tr></table></center>designlemon*更新履歴や、サイトの紹介いろいろ書いてね。*・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・*入力ソース<center><table style="border:#cccccc dotted 3px;" width="330" cellspacing="1"><caption align="bottom"><font size="1">design<a href="http://plaza.rakuten.co.jp/ludovicgilly/">lemon*</a></font></caption><tr><td><div style="overflow:auto;width:300px;height:150px;padding:5px;scrollbar-base-color:#ffffff;scrollbar-arrow-color:#339999;scrollbar-3dlight-color:#66ccb3;scrollbar-shadow-color:#ffffff;scrollbar-darkshadow-color:#66ccb3;line-height:150%;">更新履歴や、サイトの紹介いろいろ書いてね。*・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・**・*・*・*・*・*・*・*</div></td></tr></table></center>[トップページへ戻る]
2007.02.13
・応用編■ スクロールバーのテンプレート前回は、飾り枠をつくりました。今回は、スクロールするテンプレートです。ここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してください↓入力ソース<table width="300px" height="300px" background="http://image.space.rakuten.co.jp/lg01/33/0000122333/95/imgec58b186zikazj.gif"><tr><td><table width="260px" height="260px" bgcolor="#ffffff" align="center"><tr><td><p style="border-style:double;border-color:#ffffff;width:260px;height:260px;scrollbar-base-color:white;scrollbar-highlight-color:#0000ff;scrollbar-arrow-color:white;overflow:auto;">ここに文字や画像を入力してください<br>ここに文字や画像を入力してください<br>ここに文字や画像を入力してください<br>ここに文字や画像を入力してください<br>ここに文字や画像を入力してください<br>ここに文字や画像を入力してください<br>ここに文字や画像を入力してください<br>ここに文字や画像を入力してください<br>ここに文字や画像を入力してください<br>ここに文字や画像を入力してください<br>ここに文字や画像を入力してください<br>ここに文字や画像を入力してください<br>ここに文字や画像を入力してください<br>ここに文字や画像を入力してください<br>ここに文字や画像を入力してください<br>ここに文字や画像を入力してください<br>ここに文字や画像を入力してください<br>ここに文字や画像を入力してください<br>ここに文字や画像を入力してください<br>ここに文字や画像を入力してください<br>ここに文字や画像を入力してください<br>ここに文字や画像を入力してください</p></td></tr></table></td></tr></table>赤い部分がテーブルの背景画像のURLになります。オレンジの部分のRGB値カラーコードを変更する事でスクロールバーの枠に色がつきます。緑色の部分と青色の部分のRGB値カラーコード="#~"を、変える事でスクロールバーの色も変えることができます。[トップページへ戻る]
2007.01.20
ここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してください↓入力ソース<p style="border-style:double;border-color:#ff00ff;width:300px;height:200px;scrollbar-base-color:silver;scrollbar-arrow-color:white;overflow:auto;">ここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してくださいここに文字や画像を入力してください</p>文章をタテ方向に伸ばすと、上下のスクロールバーが表示されます。スクロールバーの使い方についても、追々日記でアップしたいと思っています!
2007.01.18
・応用編■ 色々なテーブル枠4今回は、テーブルの作り方応用編です。今までのテーブルはここに画像や文章をいれるここに画像や文章をいれるここに画像や文章をいれるここに画像や文章をいれる↓入力ソース<table border="1"><tr><td>ここに画像や文章をいれる</td><td>ここに画像や文章をいれる</td></tr><tr><td>ここに画像や文章をいれる</td><td>ここに画像や文章をいれる</td></tr></table>ここに画像や文章をいれるここに画像や文章をいれるここに画像や文章をいれるここに画像や文章をいれる↓入力ソース<table border="1" bordercolor="#ff9900"><tr><td>ここに画像や文章をいれる</td><td>ここに画像や文章をいれる</td></tr><tr><td>ここに画像や文章をいれる</td><td>ここに画像や文章をいれる</td></tr></table>ここに画像や文章をいれるここに画像や文章をいれるここに画像や文章をいれるここに画像や文章をいれる↓入力ソース<table border="1" bordercolor="#ff9900" cellspacing="0"><tr><td>ここに画像や文章をいれる</td><td>ここに画像や文章をいれる</td></tr><tr><td>ここに画像や文章をいれる</td><td>ここに画像や文章をいれる</td></tr></table>でした。今回のテーブルは、今までのテーブルと比べて、枠の線をより細くキレイに見せることができます。例えば次の例を見てくださいここに文章や画像を入れるここに文章や画像を入れるここに文章や画像を入れるここに文章や画像を入れる↓入力ソース<table cellspacing="1" bgcolor="ff9900" cellpadding="5" width="100%"><tr><td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td><td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td></tr><tr><td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td><td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td></tr></table>今までは「table」の中に、外枠を表示する属性「border=""」を入れていたと思いますが今回は入れないでテーブルをタテ・ヨコに並べていく方法です。<table>の中に入れる属性「cellspacing=""」は、外枠の太さを表します。<table> 内の「 bgcolor=""」は、今回の場合は、外枠の色を表します。<td> 内の「bgcolor=""」は、テーブル内の背景色を表します。「cellpadding=""」は、外枠と、枠の中の(画像・文字)の間隔を調節します。「width」は、テーブルのヨコ幅を指定。<td>の中に入れる属性「width」は、テーブルのヨコ幅「bgcolor」は、テーブルの背景色今回のポイントは【1】「table」の中に「border」属性を入れないテーブルの中に、「cellspacing」「bgcolor」「cellpadding」の属性を入力する。【2】<td> の中に、「width」「bgcolor」属性を入力する。これらを入力し忘れると、テーブルが崩れます!width="数値" に入れる数値は「%」でも「数字」でもOK です。ちなみに「100%」にした場合、横幅いっぱいにどこかにぶつかるまで伸びていきます。「50%」は、その半分になります。「width="50%"」にした場合ここに文章や画像を入れるここに文章や画像を入れるここに文章や画像を入れるここに文章や画像を入れる↓入力ソース<table cellspacing="1" bgcolor="ff9900" cellpadding="5" width="50%"><tr><td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td><td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td></tr><tr><td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td><td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td></tr></table>慣れるまで大変かも知れませんがこのテーブルの作り方を覚えておくとめちゃめちゃ便利です![トップページへ戻る][次のページ⇒]
2007.01.11
・番外編日記やフリーページにテーブルタグを載せると、テーブルの上に空白が空いてしまうのはなぜ?今回は、いつもとちょっとちがってご質問の多かったこれをやりたいとおもいます。たとえば、テーブルタグなどを次のように入力したとき。<table><tr><td>ここに文章</td></tr></table>日記欄のうえに空白があいてしまったことありませんか。これは日記欄が「自動改行状態」になっていることが原因です。どういうことかといいますと。上の例のように入力すると、たとえタグであっても、普通の文章と同じく改行されていると認識されてしまいます。つまり、タグを改行した分だけ、空白が空いてしまうのです。■対処法は?ズバリ、タグの改行を全部なくしてあげます。こういう感じですね。<table><tr><td>ここに文章</td</tr></table>これで空白を無くすことができます。これは、日記欄以外にもトップページ自由欄やフリーページで、「自動改行」ありに設定しているときも同様です。(タグを改行した分だけ、空白があきます)できれば、トップページ自由欄やフリーページは「自動改行なし」をオススメします。なぜなら、タグの量が膨大ですから。トップページ自由欄やフリーページで全部の改行をなくしてしまうと、区切れがなくてわけがわからなくなります。(あとで、修正しようとしたときに、場所が見つけにくくなります)そうなると、ご自身でタグを修正するときやチェックするとき、かなり大変になって困っちゃいます(笑)テーブルタグまで覚えた方は、「自動改行なし」をぜひつかってみてね。[トップページへ戻る]
2006.11.29
・応用編■ 行間を調節する前回は、スタイルシートを使って文字の大きさを変えてみました。今回は、スタイルシートを使って行間を調節する方法です。【A】の場合:説明の必要はないでしょう。世に出回っている印刷物の類でAのようなものを目にすることは難しいはずです。ウェブ上に公開するわけですから、最低限これぐらいの配慮は必要になります。文章の行間を調節する。長い文章が多い場合、行間が詰まっていると読みにくくなる。そんな場合は、このプロパティで行間の調節をする。【B】の場合:説明の必要はないでしょう。世に出回っている印刷物の類でAのようなものを目にすることは難しいはずです。ウェブ上に公開するわけですから、最低限これぐらいの配慮は必要になります。文章の行間を調節する。長い文章が多い場合、行間が詰まっていると読みにくくなる。そんな場合は、このプロパティで行間の調節をする。行間の指定 ⇒ style="line-height:数値を入力%;"<span style="line-height:数値%;">テキスト</span>タグに囲まれていない特定の場所にスタイルシート(CSS)による書式を設定するには、spanタグが使われます。これは、<td>にも指定できます。【A】の場合、<td style="line-height:100%;">【B】の場合、<td style="line-height:150%;">になっています。※ <p>タグを使って一行あけにするなら、line-height : 200%;にするべきなのです。pタグで段落(文章中の意味のまとまり)を指定することができます。一般的なブラウザでは、段落と段落の間に1行分の間隔が空いて表示されます。[トップページへ戻る]
2006.07.21
・応用編■ 超大きい文字前回までは、テーブルをスタイルシートでデザインする方法を学びました。今回は、文字をスタイルシートでカスタマイズしていきます。今回は「style="font-size:~pt;"」をつかいます。今までは、「font」タグをつかって文字の大きさを指定していましたが、大きさを1~7段階しか設定することができませんでした。今回の「style="font-size:~pt;"」をつかうと、1pt単位で自由に文字の大きさを設定することができます。(必ず単位に「pt」をつけます)「<font style="font-size:40pt;">のとき」入力ソース<font style="font-size:40pt;">40</font>↓40「<font style="font-size:250pt;">のとき」入力ソース<font style="font-size:250pt;">250</font>↓250この「style="font-size:~pt;"」が使えるタグは、じつはいっぱいあります。楽天広場で使えるものには以下のようなものがあるんです。入力ソース「<p style="font-size:~pt;">~</p>」↓pです入力ソース「<i style="font-size:~pt;">~</i>」↓iです入力ソース「<b style="font-size:~pt;">~</b>」↓bです入力ソース「<u style="font-size:~pt;">~</u>」↓uです入力ソース「<a href="~" style="font-size:~pt;">~</a>」↓Aです(試しにクリックしてみて、前回の講座に移動します)入力ソース「<center style="font-size:~pt;">~</center>」↓真ん中そのほか、「table」と「td」にも使えます。「<table style="font-size:~pt;">」「<td style="font-size:~pt;">」「table」につかえば、テーブルの中の文字全部の大きさを変えられます。「td」につかえば、その「td」の中だけ文字の大きさを変えられます。[トップページへ戻る][次のページ⇒]
2006.07.21
・背景をグラデーションにする2■ グラデーションをタテにする前回は、背景をヨコにグラデーションしました。今回は、背景をタテにグラデーションして遊んでみます。今回は「filter:alpha(opacity=100,finishopacity=30,style=1,startx=100,finishy=10);」をつかいます。入力ソースはこちら。<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #339933;background-color:#ccffcc;filter:alpha(opacity=100,finishopacity=30,style=1,startx=100,finishy=10);"><tr><td></td></tr></table>前回のパターンに、「startx=100」「finishy=10」が追加されました。まず、「startx=100」ですが、タテのグラデーションのときは、この数字は「100」のままにしておきます。つぎに「finishy=10」ですが、これはタテのグラデーションの度合いを設定します。(数字は49まで設定できます)「finishy=49」のとき。(こんなにはっきりしちゃいます)入力ソース。<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #339933;background-color:#ccffcc;filter:alpha(opacity=100,finishopacity=30,style=1,startx=100,finishy=49);"><tr><td></td></tr></table>ちなみに「opacity=50」にすると・・・こんな感じに全体が薄くなりました。入力ソース。<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #339933;background-color:#ccffcc;filter:alpha(opacity=50,finishopacity=30,style=1,startx=100,finishy=10);"><tr><td></td></tr></table>「td」にも設定できます。入力ソース。<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #0066ff;"><tr><td width="100%" height="30%" style="background-color:#ccffff;filter:alpha(opacity=100,finishopacity=30,style=1,startx=100,finishy=10);"></td></tr><tr><td width="100%" height="70%"></td></tr></table>次回は、スタイルシートをつかって文字をカスタマイズします。[トップページへ戻る][次のページ⇒]
2006.07.21
・応用編■ 背景をグラデーションにする前回は、カラフルなテーブル枠3を学びました。今回は、背景をヨコにグラデーションして遊んでみます。今回は「filter: alpha(opacity=100,finishopacity=30,style=1);」をつかいます。入力ソースはこちら。<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #ff6666;background-color:#ffcccc;filter:alpha(opacity=100,finishopacity=30,style=1);"><tr><td></td></tr></table>まずは、「opacity=100」の部分。これは前回もでてきましたが、背景自体の透明度を設定します。(数字が小さいほど、背景が透明になります)入力ソース。「opacity=50」のとき。<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #ff6666;background-color:#ffcccc;filter:alpha(opacity=50,finishopacity=30,style=1);"><tr><td></td></tr></table>つぎに「finishopacity=30」の部分。グラデーションの度合いを設定します。(数字が小さいほど、グラデーションの割合が大きくなります)「finishopacity=70」のとき。入力ソース。<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #ff6666;background-color:#ffcccc;filter:alpha(opacity=100,finishopacity=70,style=1);"><tr><td></td></tr></table>「finishopacity=10」のとき。入力ソース。<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #ff6666;background-color:#ffcccc;filter:alpha(opacity=100,finishopacity=10,style=1);"><tr><td></td></tr></table>つぎに「style=1」の部分。グラデーションのパターンを設定します。(style=1かstyle=2)「style=1」のとき。入力ソース。<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #ff6666;background-color:#ffcccc;filter:alpha(opacity=100,finishopacity=30,style=1);"><tr><td></td></tr></table>「style=2」のとき。入力ソース。<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #ff6666;background-color:#ffcccc;filter:alpha(opacity=100,finishopacity=30,style=2);"><tr><td></td></tr></table>「td」にも設定できます。入力ソース。<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #0066ff;"><tr><td width="100%" height="30%" style="background-color:#ccffff;filter:alpha(opacity=100,finishopacity=30,style=1);"></td></tr><tr><td width="100%" height="70%"></td></tr></table>次回は、このグラデーションをタテにしてみます。[トップページへ戻る][次のページ⇒]
2006.07.21
・応用編■ 色々なテーブル枠3前回は、テーブルの枠の色を徐々に変えてみました。今回は、もっと特殊な枠たちです。「groove」をつかって枠に濃い影を。ここに文章や画像をいれます 入力ソースはこちら。<table width="300" height="50" style="border:10px groove #c0c0c0;"><tr><td>ここに文章や画像をいれます</td></tr></table>「ridge」をつかって枠にうすい影を。ここに文章や画像をいれます 入力ソースはこちら。<table width="300" height="50" style="border:10px ridge #c0c0c0;"><tr><td>ここに文章や画像をいれます</td></tr></table>「inset」をつかって枠を立体的に。ここに文章や画像をいれます 入力ソースはこちら。<table width="300" height="50" style="border:6px inset #c0c0c0;"><tr><td>ここに文章や画像をいれます</td></tr></table>「outset」をつかって枠を立体的に。(「inset」の逆バージョン)ここに文章や画像をいれます 入力ソースはこちら。<table width="300" height="50" style="border:6px outset #c0c0c0;background-color:#ffccff;"><tr><td>ここに文章や画像をいれます</td></tr></table>このように、スタイルシートをテーブルに組み合わせることによって、枠のバリエーションを一気に増やすことができました。次回は、テーブルの背景をグラデーションにする方法です。[トップページへ戻る][次のページ⇒]
2006.07.21
・応用編■ 色々なテーブル枠2前回は、テーブルの枠自体をスタイルシートで変えて遊んでみました。今回は、さらにテーブルの枠で遊んでみます。枠の色を徐々に変える。ここに文章や画像をいれま入力ソースはこちら。<table width="300" height="50" cellspacing="0" cellpadding="0" style="border:2px solid #ffff00;"><tr><td><table width="300" height="50" cellspacing="0" cellpadding="0" style="border:1px solid #ff9900;"><tr><td><table width="300" height="50" cellspacing="0" cellpadding="0" style="border:1px solid #ff0000;"><tr><td>ここに文章や画像をいれます</td></tr></table></td></tr></table></td></tr></table>ここに文章や画像をいれま↑上のソースの「solid」を「dashed」に。「border:1px」を「border:2px」に。(「#ccffcc」→「#66cc66」→「#009900」と色も変えています)ここに文章や画像をいれま↑上のソースの「solid」を「double」に。「border:1px」を「border:3px」に。(「#ccffff」→「#6699ff」→「#0033ff」と色も変えています)次回は、色々なテーブル枠、第3段です![トップページへ戻る][次のページ⇒]
2006.07.20
・応用編■ 色々なテーブル枠前回は、スタイルシートについて学びました。今回は、テーブルの枠自体をスタイルシートで変えて遊んでみます。前回も書きましたが、スタイルシートは「習うより慣れよう!」です。ということで、じゃんじゃん例題を載せていきますので、実際に遊んで覚えてみましょう!まずは、最もシンプルな形から。ここに文章や画像をいれます入力ソースはこちら。<table width="300" height="50" style="border:1px solid #ff6600;"><tr><td>ここに文章や画像をいれます</td></tr></table>「border:1px」は、枠の太さを表し、数字を大きくすると枠が太くなります。いままでと違い、数字に単位(px)がついている点に注目ですね。「#ff6600」は枠自体の色。おなじみのRGBカラーや色名で好きな色にできます。「solid」は、線状の枠を指定する値です。ちなみに「background-color:#ffcc99;」をプラスすると・・・このように背景をつけることができました。ここに文章や画像をいれます入力ソースはこちら。<table width="300" height="50" style="border:1px solid #ff6600;background-color:#ffcc99;"><tr><td>ここに文章や画像をいれます</td></tr></table>「dashed」をつかって枠を点線に。「border:1px」のときここに文章や画像をいれます入力ソースはこちら。<table width="300" height="50" style="border:1px dashed #339933;"><tr><td>ここに文章や画像をいれます</td></tr></table>「border:3px」「background-color:#ccffcc;」のときここに文章や画像をいれます入力ソースはこちら。<table width="300" height="50" style="border:3px dashed #339933;background-color:#ccffcc;"><tr><td>ここに文章や画像をいれます</td></tr></table>「double」をつかって枠を2重に。(「border:2px」以下だと2重になりません)「border:3px」のときここに文章や画像をいれます入力ソースはこちら。<table width="300" height="50" style="border:3px double #3300ff;"><tr><td>ここに文章や画像をいれます</td></tr></table>「border:4px」「background-color:#ccccff;」のとき(外側の枠が太くなりました)ここに文章や画像をいれます入力ソースはこちら。<table width="300" height="50" style="border:4px double #3300ff;background-color:#ccccff;"><tr><td>ここに文章や画像をいれます</td></tr></table>「dotted」をつかって枠をかわいく。「border:3px」のときここに文章や画像をいれます入力ソースはこちら。<table width="300" height="50" style="border:3px dotted #6600ff;"><tr><td>ここに文章や画像をいれます</td></tr></table>「border:4px」「background-color:#ccccff;」のときここに文章や画像をいれます入力ソースはこちら。<table width="300" height="50" style="border:4px dotted #6600ff;background-color:#ffccff;"><tr><td>ここに文章や画像をいれます</td></tr></table>このように色々な枠をつくることができました。次回は、この枠をつかって、さらに遊んでみます![トップページへ戻る][次のページ⇒]
2006.07.20
・応用編■ スタイルシートってなに?前回は、カラフルなデザインをつくってみました。今回からは、スタイルシートというものをやっていきます。スタイルシートとは、ホームページのデザインをするための言語。もちろん、今までやってきたHTMLでもデザインはできますが、スタイルシートをつかうと、さらにデザイン性を高めることができるのです。つまりこのスタイルシートを覚えることで、デザインの幅がもっともっと広がることになるのです。では、具体的にスタイルシートとは、どんなものなのでしょう。次の例をみてください。じつはこれ、テーブルなんですが、枠線が点線になっています。どうやっているのか。さっそく入力ソースをみてみましょう。<table width="300" height="100" style="border:1px dashed #ff6600;"><tr><td></td></tr></table>なんか見慣れないものがありますよね。そう!赤色の部分!これがスタイルシートです!!つかい方は意外と簡単。いままでやってきた属性と同じように、タグに入れてしまえばいいのです。基本的な形は<タグ半角スペースstyle="プロパティ:値;">ですから、今回の場合は<table半角スペースstyle="border(プロパティ):1px(値)半角スペースdashed(値)半角スペース#ff6600(値);">となっています。値が今回のように3つ(「1px」と「dashed」と「#ff6600」)など複数あるときは、値と値の間に「半角スペース」をいれます。プロパティと値の間には「:」を、値の最後に「;」を忘れずにいれます。ちなみに今回の例をみると<table style="~:~;">(テーブルにスタイルシートをつかいたい)border(テーブルの枠を設定したい)1px dashed #ff6600(枠の幅を1px・点線・枠の色を#ff6600にしたい)という構成になっています。どうですか?このスタイルシートについて言えることはひとつ!!習うより慣れよう!です(笑)私の経験上、それが1番早いですし、確実です。[トップページへ戻る][次のページ⇒]
2006.07.20
・応用編■ カラフルなデザインをつくる4前回は、レーシングフラッグのような模様をつくってみました。今回は、前々回の「テーブル1」と前回の「テーブル2」を合体させてみます。それぞれのパーツは、こんな感じです。テーブル1文字が入りました。おお、本当だ!!キレイでしょ。うんうん、こりゃいいね。入力ソース<table width="300" border="1" cellspacing="0" cellpadding="6" bordercolor="#009900"><tr height="20" bgcolor="#ccffcc"><td align="center"><font size="-1" color="#993300">~</font></td></tr><tr height="20" bgcolor="#ffffcc"><td align="center"><font size="-1" color="#993300">~</font></td></tr><tr height="20" bgcolor="#ccffcc"><td align="center"><font size="-1" color="#993300">~</font></td></tr><tr height="20" bgcolor="#ffffcc"><td align="center"><font size="-1" color="#993300">~</font></td></tr></table>テーブル2 入力ソース<table width="300" bgcolor="009900" border="1" bordercolor="#009900" cellspacing="0" cellpadding="0"><tr height="20"><td bgcolor="#ccffcc" width="25%"></td><td bgcolor="#ffffcc" width="25%"></td><td bgcolor="#ccffcc" width="25%"></td><td bgcolor="#ffffcc" width="25%"></td></tr><tr height="20"><td bgcolor="#ffffcc" width="25%"></td><td bgcolor="#ccffcc" width="25%"></td><td bgcolor="#ffffcc" width="25%"></td&t;<td bgcolor="#ccffcc" width="25%"></td></tr></table>では、いよいよ合体です。「テーブル2」「テーブル1」「テーブル2」の順番で合体させてみましょう!!やり方は、これらのテーブルをもっと大きなテーブルで囲んでしまいます。つまり・・・<table border="0" cellspacing="0" cellpadding="0"><tr><td>テーブル2</td></tr><tr><td>テーブル1>/td></tr><tr><td>テーブル2</td></tr></table>となります。注:「border="0" cellspacing="0" cellpadding="0"」を1番外側のテーブルに設定するのがポイント!!実際にやってみると・・・文字が入りました。おお、本当だ!!キレイでしょ。うんうん、こりゃいいね。このように合体しました!!ちなみにテーブル1・テーブル2それぞれの「table」の「bordercolor="~"」と「bgcolor="~"」に「#ffffff」をいれると・・・文字が入りました。おお、本当だ!!キレイでしょ。うんうん、こりゃいいね。次回は、話題を変えて、スタイルシートの入門編をやります。[トップページへ戻る][次のページ⇒]
2006.07.20
・応用編■ カラフルなデザインをつくる3前々回からはじまった応用編。今回は、レーシングフラッグのような模様をつくってみます。まずは、こんな感じです。 入力ソースはこのようになっています。<table width="300" border="0" cellspacing="0" cellpadding="0"><tr height="20">「A」「B」「A」「B」</tr><tr height="20">「B」「A」「B」「A」</tr></table>(「A」部分には、「<td bgcolor="#ccffcc" width="25%"></td>」が入ります)(「B」部分には、「<td bgcolor="#ffffcc" width="25%"></td>」が入ります)ここでのポイントは、「td」に「bgcolor=""」をもってきたことです。これで交互に色を変えることができます。さらに「td」に「width="~%"」を設定します。「~%」に入れる数字は、100%をヨコのマス目数で割った数です。(今回は、100/4で、25%)これで、自動的に均等にマス目が分割されるようになります。ではここで、前回と同じように外枠で遊んでみましょう。「table」の属性「border="~"」で外枠を表示させ、「bordercolor="~"」で色をつけます。(今回は「border="1"」「bordercolor="#009900"」にしています) ここでさらに、「table」に「bgcolor=""」属性をプラスしてみましょう。(今回は「bordercolor="#009900"」と同じ色にしてみます)↑これを「テーブル2」と名づけます。ちなみにここで、「cellspacing="~"」の数字を大きくすると・・・ こんな感じにもなります。次回は前回の「テーブル1」と今回の「テーブル2」を合体させてみます。[トップページへ戻る][次のページ⇒]
2006.07.20
・応用編■ カラフルなデザインをつくる2前回からはじまった応用編。今回は、前回のつづきで外枠で遊んでみます。ということで、前回の状態から。文字が入りました。おお、本当だ!!キレイでしょ。うんうん、こりゃいいね。入力ソースはこのようになっています。<table width="300" border="1" cellspacing="0" cellpadding="6"><tr height="20" bgcolor="#ccffcc"><td align="center"><font size="-1" color="#993300">~</font></td></tr><tr height="20" bgcolor="#ffffcc"><td align="center"><font size="-1" color="#993300">~</font></td></tr><tr height="20" bgcolor="#ccffcc"><td align="center"><font size="-1" color="#993300">~</font></td></tr><tr height="20" bgcolor="#ffffcc"><td align="center"><font size="-1" color="#993300">~</font></td></tr></table>ではさっそく、外枠で遊んでみます。まずは、外枠に色をつけてみましょう。(「table」に「bordercolor=""」属性を追加)文字が入りました。おお、本当だ!!キレイでしょ。うんうん、こりゃいいね。ちょっとここで、このデザインを「テーブル1」と名づけます。(「テーブル1」はこの後の講座でつかいます)さらに外枠<table>と内枠<tr>や<td>の間隔を調節してみましょう。(「table」の属性「cellspacing="~"」に好きな数字をいれます)文字が入りました。おお、本当だ!!キレイでしょ。うんうん、こりゃいいね。すると、このように枠に間隔があきました!!次回はレーシングフラッグのような模様をつくってみましょう。[トップページへ戻る][次のページ⇒]
2006.07.19
・応用編■ カラフルなデザインをつくる前回までで、HTMLの基本はおわりです。今回からは、実際の応用を学んでいきます。ということで、まずはいままでの復習もかねて、テーブルの応用です。たとえば、次のようなカラフルなデザインをつくりたいとき。入力ソースはこのようになっています。<table width="300" border="0" cellspacing="0" cellpadding="0"><tr height="20" bgcolor="#ccffcc"><td></td></tr><tr height="20" bgcolor="#ffffcc"><td></td></tr><tr height="20" bgcolor="#ccffcc"><td></td></tr><tr height="20" bgcolor="#ffffcc"><td></td></tr></table>「table width="300"」の数字はデザイン全体の長さを表し、数字を変えるとデザイン全体の大きさも変わります。ではさっそく今回の一番のポイントです!!それは・・・・・「height="~"」!!!これを「tr」に設定することで、テーブルのなかに何も文字が入ってなくても、デザインを表示することができます。仮にこの「height="~"」を設定しないとデザイン自体が表示されなくなるのです。今回は「20」で設定していますが、好きな数字で設定オッケーです!!実際に文字をいれるとこんな感じです。文字が入りました。おお、本当だ!!キレイでしょ。うんうんこりゃいいね。文字をちょっとカスタマイズするとこんな感じです。(「<font size="" color="">~</font>」を「<td>~</td>」に入れてカスタマイズ)文字が入りました。おお、本当だ!!キレイでしょ。うんうんこりゃいいね。文字を真ん中にもってきます。(「<td align="center">~</td>」としてみましょう)文字が入りました。おお、本当だ!!キレイでしょ。うんうんこりゃいいね。文字と枠(今は見えていませんが)の間隔を調節してみましょう。(「table」の「cellpadding="~"」に好きな数字をいれます)文字が入りました。おお、本当だ!!キレイでしょ。うんうんこりゃいいね。さらに外枠を表示してみましょう。「table」の「border=""」に好きな数字をいれます。(今回は1を入れました)文字が入りました。おお、本当だ!!キレイでしょ。うんうんこりゃいいね。次回はこのつづき。外枠でいろいろ遊んでみましょう。[トップページへ戻る][次のページ⇒]
2006.07.19
全24件 (24件中 1-24件目)
1