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

楽天広場HTML講座

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

1 2 3 >

全て | カテゴリ未分類 | HTML文字画像リンク | HTMLタグ(テーブル) | HTML(応用編) | アフィリエイト入門編 | ユーザービリティとSEO | 楽天で購入した商品 | 生活,美容,健康,家電 | スポーツ,アウトドア,車,バイク | 金運アップ,風水,自己トレ | 楽天市場のPR | 食品,グルメ,飲料 | ダイエット,健康,食品 | 園芸,DIY,ペット,おもちゃゲーム | 日用品雑貨,キッチン用品,寝具 | ファッション,ジュエリー,アクセサリー,靴 | パソコン・周辺機器 | アフィリエイト | 防災,介護,医療 | TV・オーディオ・カメラ | 自己管理,美容,インナー | DVD,CD,本,旅,楽器 | インテリア,ライト,収納,ベビー,キッズ | 心緒 | 音楽 | ブランド雑貨,時計 | 酒場放浪記 | 天気気象予報 | 気になる動画 | 最近チェックした商品 | 血圧測定 | 気になるニュース | 人生の名言集

HTML(応用編)

2008.04.04
XML
カテゴリ:HTML(応用編)
・ホームページ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ページへ戻ります







Last updated  2008.12.21 23:09:01
2008.03.22
カテゴリ:HTML(応用編)
・カーソルの形状を変更する方法


今回はカーソルの形状を変更する方法について学んでいきます。




リンク部分にstyle=" "を追加し、defaultの部分を変更します。


<a href="リンク先URL.html" style="cursor:default">~</A>

標準カーソル。矢印の場合が多い。



「~」には、リンクであることがわかる言葉や画像をいれます。




キーワード
使用例
説明

auto

crosshair

default

hand

move

text

wait

help

n-resize

s-resize

w-resize

e-resize

ne-resize

nw-resize

se-resize

sw-resize

progress

not-allowed

all-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以上のみ対応


リンク部分にカーソルを当てると形状が変わります。






[トップページへ戻る]






Last updated  2008.12.21 10:42:52
2007.06.30
カテゴリ:HTML(応用編)
・応用編


■ スクロールバーのテンプレート



前回は、テーブルの作り方応用編でした。
今回は、スクロールするテンプレートです。



細かい部分の色変更

<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






Last updated  2007.06.30 14:54:08
2007.05.18
カテゴリ:HTML(応用編)
・応用編


■ 色々なテーブル枠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>



慣れるまで大変かも知れませんが
このテーブルの作り方を覚えておくと

とても便利ですよ!






[トップページへ戻る][次のページ⇒]







Last updated  2008.12.21 10:17:45
2007.04.02
カテゴリ:HTML(応用編)
・応用編


■ 行間を調節する



前回は、スタイルシートを使って文字の大きさを変えてみました。
今回は、スタイルシートを使って行間を調節する方法です。


【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







Last updated  2008.02.24 12:50:17
2007.02.20
カテゴリ:HTML(応用編)
・番外編


■タグや入力ソースを表示させる方法は?【特殊文字】


今回は、ご質問の多かった特殊文字の出し方をみてみましょう!



たとえば、「<table>」と書きたいとします。
これをこのまま打ち込んでも、ブラウザ画面には表示されないですよね。


では、どうやってこのように表示しているのでしょう。


じつはこれ、「&lt;table&gt;」と入力しているのです。
(実際の入力は、全て半角英数字で「;」をつけるのがポイント!)


&lt;」は「<」を表示するときに。

&gt;」は「>」を表示するときに使います。


この入力方法をつかうと、たとえばテンプレートなどの入力ソースを
公開したいときなどにとっても便利です。


この講座で公開している入力ソースもすべてこの特殊文字をつかうことで、表示しています。


テンプレートのソースを公開したいときは、ぜひ利用してみてね。





[トップページへ戻る]






Last updated  2008.12.21 10:41:37
2007.02.19
カテゴリ:HTML(応用編)
・応用編


■ 色々なテーブル枠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>






このように色々な枠を表示させることができました。

次回は、この枠をつかって、さらに遊んでみます!






[トップページへ戻る][次のページ⇒]







Last updated  2008.12.21 10:27:11
2007.02.13
カテゴリ:HTML(応用編)
・応用編


■ スクロールバーのテンプレート



前回は、テーブルの作り方応用編でした。
今回は、スクロールするテンプレートです。



細かい部分の色変更

<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>






[トップページへ戻る]









Last updated  2008.11.03 20:49:43
2007.01.20
カテゴリ:HTML(応用編)
・応用編


■ スクロールバーのテンプレート



前回は、飾り枠をつくりました。
今回は、スクロールするテンプレートです。




ここに文字や画像を入力してください

ここに文字や画像を入力してください

ここに文字や画像を入力してください

ここに文字や画像を入力してください

ここに文字や画像を入力してください

ここに文字や画像を入力してください

ここに文字や画像を入力してください

ここに文字や画像を入力してください

ここに文字や画像を入力してください

ここに文字や画像を入力してください

ここに文字や画像を入力してください

ここに文字や画像を入力してください

ここに文字や画像を入力してください

ここに文字や画像を入力してください

ここに文字や画像を入力してください

ここに文字や画像を入力してください

ここに文字や画像を入力してください

ここに文字や画像を入力してください

ここに文字や画像を入力してください

ここに文字や画像を入力してください

ここに文字や画像を入力してください

ここに文字や画像を入力してください





入力ソース

<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値カラーコード="#~"を、変える事で

スクロールバーの色も変えることができます。





[トップページへ戻る]









Last updated  2008.11.03 20:46:57
2007.01.18
カテゴリ:HTML(応用編)

ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください






入力ソース


<p style="border-style:double;border-color:#ff00ff;width:300px;height:200px;scrollbar-base-color:silver;scrollbar-arrow-color:white;overflow:auto;">ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
ここに文字や画像を入力してください
</p>




文章をタテ方向に伸ばすと、上下のスクロールバーが表示されます。

スクロールバーの使い方についても、追々日記でアップしたいと思っています!







Last updated  2007.01.18 16:46:06

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

1 2 3 >


Copyright (c) 1997-2019 Rakuten, Inc. All Rights Reserved.