[【プチ講座】] カテゴリの記事
全29件 (29件中 1-29件目)
1
-
【皆さんも確認してみましょう！】(￣^￣)b
日記 GT-ONE WEBSITE 【プチ講座】 【プチ講座】 ＊【日記の雛形】【・・いつ変わったのだろう・・・楽天さん？】 今朝起きまして、・・・と言っても１０時過ぎですが・・・！掲示板を見ると こんばんは ♪あきとしさん スクロールバーの扱いでてこずっています。勉強させていただきたいので、リンクいただいて行っていいですか？不都合などおありでしたらお申し出下さい。 (2005/03/13 02:59:51 AM) という書き込みがありまして、「スクロールバーに付いて、プチ講座で書いていたよな！」と思い、プチ講座を覗きに行ったのですが・・・・・・・・な・・・な・・・なんと・・・何処をクリックしても自分のトップページに飛ぶのです。ちょっと前までは、ちゃんとみな表示していたのに・・・・？「あれ・・・！誰かに悪さされたかな！」と思い、タグを見てみたのですが・・・これといっておかしなところはない？よくよく調べてみますと、昔は表示していたアドレスが表示出来なくなっていました。 例えば■楽天で知って得するタグ■ の一番上の 【・メモ帖でＨＴＭＬの編集】これは、２００３年４月１３日に書いたものです。そして、以前のアドレスはhttp://plaza.rakuten.co.jp/gtone/diaryold/20030413/ というものでした。↑クリックしてみて下さい。20030413 が 日にちです。これをアドレスに書き込んでクリックしても、４月１３日の日記に飛ばずトップページに飛びます。ところが、「diaryold」 を ただの 「diary」 に変えますとちゃんと表示しました。現在は、すべてこれになっていたのですね！http://plaza.rakuten.co.jp/gtone/diary/20030413/←クリックしてみて下さい。 楽天さん言ってくださらないと・・・・・！・・・・それとも知らなかったのは・・・σ(o^_^o)だけかな・・？ 昔から、楽天広場を使っていて、昔の日記のページを 「diaryold」でリンクしている方は、調べてみるといいと思います。 私も最近、楽天広場を更新していませんでしたから、気がつきませんでしたが・・・・・・いつ変わってしまったんでしょうか・・・？私のように古い日記をリンクしている方は、お確かめ下さい！ では！日記モドキでした。 ＰＳ：【日記の雛形】は日記のページに載せておりましたが 項目が増えたことなんかもありまして、フリーページに移動させました。 ＊【日記の雛形】 ←こちらからどうぞ！< Copyright (C) GT-ONE WEBSITE 2002-2004 All Rights Reserved
2005/03/13
コメント(7)
-
【ＨＴＭＬエディターでＴＡＢＬＥを作ってみよう】
■ Super Tag 32 Pro ■ を使ってＴＡＢＬＥを作ってみましょうはじめに：新潟中越地震被災者の方々、心からお見舞い申し上げます。みなさん、３０万ＨＩＴありがとうございました。２年で３０万ＨＩＴ早いのか遅いのか判りませんが・・・・これからもよろしくお願いします。この【ぷち講座】や、「初心者のためのＨＰの飾付教室」もみなさんのご質問やご希望で成り立っています。どんどん投稿をお願いいたしますね！さて、前回フリーソフトＨＴＭＬエディター「Super Tag 32 Pro」の簡単な「メニューアイコン」の使い方と「テキストの属性の指定」それを「保存する」方法をご紹介しました。2004/10/17今回は、この「Super Tag 32 Pro」を使って、ＴＡＢＬＥを作ってみましょう。まだ、ダウンロードされていない方は、こちらからＤＬして下さい。 では、この上↑のＴＡＢＬＥを「Super Tag 32 Pro」で作ってみましょう。 「メニューアイコン」の３行目の真中あたりに「ＴＡＢＬＥ」のアイコンがあると思います。それをクリックしてみましょう。その時カーソルは、<BODY> と </BODY>の間ですよ！属性を決めるパネルが出て来ましたね。属性が上から並んでいると思います。詳しい属性の説明は、省かせていただきます。詳しく知りたい方は【プチ講座】[ＴＡＢＬＥの基本的な属性]に行って見て下さい。 ■ ＴＡＢＬＥの属性の書き込み ■一番上が マージン間の位置指定【ALIGN】となっていますね。これは、ＴＡＢＬＥの左右の位置です。プルダウンメニューから「センター揃え(center)」を選択します。次は、枠の太さ【BORDER】は １にします。【CELLSPACING】は １ 【CELLPADDING】は ５にしてみましょう。【WIDTH】は ８０で ％にチェックを入れます。【HEIGHT】は書き込みません。セルの行数は ２ セルの列数は １ となります。【BGCOLOR】【BACKGROUND】背景色と背景画像は指定しません。【BORDERCOLOR】は「参照」からグレー(#COCOCO)を選択します。【BORDERCOLORLIGHT】【BORDERCOLORDARK】は枠の明暗を指定しますが、ここでは指定しません。以上のことを書きこみますと↓このようになりましたか！ 最後にＯＫをクリックしますと、ＴＡＢＬＥが出来上がります。↓このようになりましたでしょうか？<HTML><HEAD><TITLE></TITLE></HEAD><BODY><TABLE ALIGN="center" BORDER="1" CELLSPACING="1" CELLPADDING="5" WIDTH="80%" BORDERCOLOR="#C0C0C0"><TR><TD></TD></TR><TR><TD></TD></TR></TABLE></BODY></HTML>では、これを保存しまして、ブラウザ画面で見てみましょう。保存の仕方は、前回の【プチ講座】を参考にして下さい。保存できましたら、メニューアイコンの一行目、右から２番目のブラウザのアイコンをクリックしてみましょう。多分グレーの枠しか出てきていないと思います。セルの中にテキストを書いてみて下さいませ。<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>このようになります。今回は、ＴＡＢＬＥを作って見ました。 皆さんも、日記で使っていますタグの雛形をコピペでここに持って来まして、色々編集してみて下さい。メニューアイコンで色々なタグが一発挿入できますから、とても便利です。楽天では使えませんが、フレームやテキストエリアのタグも一発挿入できます。 では！がんばって下さいませ！Copyright (C) GT-ONE WEBSITE 2002-2004 All Rights Reserved
2004/10/24
コメント(5)
-
【フリーＨＴＭＬエディタソフトを使って日記を編集してみよう】
フリーソフト「Super Tag 32 Pro」の紹介！みなさんは、日記のページの編集はどのようにやっていますでしょうか！メモ帖を使ったり、フリーページにテストのページを作ってやっているのでしょうか？または、ホームページ製作ソフトを使っているのでしょうか？ホームページ製作ソフトに関しましては、仰々しくて起動が重い・・・そこに来て、「自動改行」には、ほとんど対応しておりません。そして、操作も複雑ですね！ 楽天広場は、日記が主体です。それも自動改行になっております。ところが、以前使えなかったＴＡＢＬＥのタグが日記で使えるようになりました。で！今日は簡単にＴＡＢＬＥなどのタグを編集できる「ＨＴＭＬエディター」を紹介しましょう。 それが、「Super Tag 32 Pro」です。もちろんフリーソフトです。私は、日記の編集では、大概このエディターを使っております。以前の日記でも、何度かこのソフトを紹介しましたが、今日は簡単に使い方を紹介します。 まずは、こちらから 「Super Tag 32 Pro」 をＤＬして下さい。ファイルは自動解凍の exe ファイルになっています。レンジのアイコンをダブルクリックで解凍します。「Super Tag 32 Pro」を使ってみよう！ ＤＬは出来ましたでしょうか？ このアイコンをクリックしますと「Super Tag 32 Pro」が起動します。 起動しましたか？まずは簡単な操作方法からお話しましょう。テキスト、タグなどページの編集は、<BODY>から </BODY>の間に書きこみます。 では 実際にテキストを書きこんでみましょう。テキストポインター「｜」は<BODY>から </BODY>の間に入れておきます。 一番上にメニューバーがありますね！２列目からは「メニューアイコン」が並んでいます。アイコンの２列目「ＨＲ」があると思います。これは、罫線のタグです。罫線のタグを入れてみましょう。クリックしてみます。 フロートパネルが出て来ます。【SIZE】【WIDTH】【ALIGN】【COLOR】と縦に並んでいますね。これに半角英数字で属性を指定します。【SIZE】を５ 【WIDTH】５００ 【ALIGN】はプルダウンで「センター揃え」 【COLOR】カラーは「参照」からお好きな色を指定して「ＯＫ」を押してみて下さい。 <HR SIZE="5" WIDTH="500" ALIGN="center" COLOR="#FF0000"> このように出て来ましたか？その罫線タグのすぐ後ろに、ポインターを持って来まして、「メニューアイコン」の２列目右から４番目に改行のタグ「ＢＲ」があると思います。それをクリックして下さい。<BR> がでて来ましたか！その後につづけて何かテキストを書いてみて下さい。「ここに何か書きます。」と入れてみましょう。このテキストに、フォントの属性である「大きさ」「色」「字体」を指定してみましょう。 「ここに何か書きます。」を左クリックしたままなぞります。「メニューアイコン」の２列目 左から６番目に「ＦＯＮＴ」があります。クリックして下さい。またフロートパネルが出て来ましたね！【SIZE】【COLOR】【FACE】とあると思います。【SIZE】をラジオボタンで指定し、【COLOR】を「参照」から選びます、【FACE】も「参照」から選びます。「ＯＫ」ボタンをオしますと、先ほどのテキストがフォントのタグで囲われたと思います。 この用になりましたか？<FONT SIZE="3" COLOR="#0000FF" FACE="ＭＳ Ｐゴシック">ここに何か書きます。</FONT>これをセンターリングします。<FONT SIZE="3" COLOR="#0000FF" FACE="ＭＳ Ｐゴシック">ここに何か書きます。</FONT>を先ほどテキストでやったように、左クリックのままなぞります。また、「メニューアイコン」の２列目の「ＣＥＮＴＥＲ」をクリックしますと<CENTER><FONT SIZE="3" COLOR="#0000FF" FACE="ＭＳ Ｐゴシック">ここに何か書きます。</FONT></CENTER>となりましたでしょうか？ では！これをＷＥＢ画面で見てみましょう！ＷＥＢ画面で見るためには、まずは保存しなければなりません。一番上のメニューバーの「ファイル(F)」をクリックします。上から５番目「名前をつけて保存」で保存用のパネルが出てきます。ご自分が分かりやすいフォルダを指定します。私の場合は、マイドキュメントの中に「楽天用」というフォルダを作ってあります。ファイル名(N)に名前をつけますが、ここは半角英数字です。そして、ＨＴＭＬファイルの拡張子「.html」を半角英数字の後ろにつけることを忘れないで下さい。例えば、この用になります。[diary-10-17.html]このように名前をつけまして保存をクリックします。 編集パネルに戻りまして、「メニューアイコン」の１列目の右から２番目のＷＥＢ画像のアイコンをクリックしてみて下さい。ＷＥＢ画面が立ち上がると思います。それが先ほど書きこんだテキストと罫線です。 お判りですか・・・・(〃_ _)・・・・おねがい！・・・判ってね！また、テキストなどを編集し直しまして、上書き保存をします。「メニューアイコン」の１列目の左から、３番目に「ＦＤの画像の形」をしたアイコンがありますね。それをクリックで上書き保存されます。確認するには先ほど出しました、ＷＥＢ画面を更新してみて下さい。編集が反映されていると思います。 長々と話しましたが、初心者の方には一度では、理解できないと思います。何度も読んで、いじくりひん回して下さい。「メニューアイコン」を色々クリックして、試しにタグを書き込んで見るのが得策です。 あなたが楽天の日記などで作ったタグを編集したい場合は、コピー＆ペイストして、先ほど述べましたように保存します。そして、ブラウザで見て下さい。その時は、そのタグが自動改行用で製作していましたら、「自動改行」にするためにテキストの頭に <PRE>をつけます。テキストの最後には、くくるタグ </PRE> をつけて下さい。 次回は、ＴＡＢＬＥを簡単に作ることをこのソフトでやってみましょう。みなさん予習しておいて下さいませ・・・・(￣m￣*)Vでは！ε＝ε＝ε＝（┌￣）┘ダッシュ！ Copyright (C) GT-ONE WEBSITE 2002-2004 All Rights Reserved
2004/10/17
コメント(5)
-
【罫線背景画像関係のバックナンバー！】(￣^￣)b
【罫線背景に関するバックナンバー】８月の終わりに罫線画像を紹介しました。いまだに反響がありまして、ご質問が絶えません！罫線背景画像に関するバックナンバーをまとめて見ました。興味のある方は、行って見て下さい。・・・・よく読んでね・・・そしてそれでも判らなかったら・・・ご質問下さい。こうしたいんだが・・・と言うタグ製作の要求には・・・気分次第で乗ります(￣m￣*)V 基本説明(１)と大学ノート風シンプルな背景罫線はこちら 8/29基本説明(２)とワンポイントの背景を入れた背景罫線はこちら 8/30スクロールボックスに背景罫線はこちら 8/31画像を載せる際の注意点（１）はこちら 9/1画像を載せる際の注意点（２）はこちら 9/9スクロールボックスにフィルタ（透過）をかけた背景罫線はこちら 9/6罫線画像の素材追加はこちら 9/12罫線を使った雛形（みかんママさん）はこちら 9/13アルバム風罫線のＴＡＢＬＥはこちら 9/22日記の雛形！枠のＴＡＢＬＥの中に罫線画像はこちら 9/24ＴＡＢＬＥの中にＴＡＢＬＥ講座はこちら 9/25Copyright (C) GT-ONE WEBSITE 2002-2004 All Rights Reserved
2004/10/13
コメント(8)
-
【続！アニメＧＩＦをアニメポインターに変換してみよう】
【アニメションポインターを作ってみよう！】前回、前々回とやって来ましたが今回が最終回！ お気に入りのアニメＧＩＦアイコンをアニメポインターに変換してみましょう。「IrfanView32 日本語版 Ver.3.92」はＤＬ出来ましたでしょうか？「ＡＮＩめーかー」にアニメＧＩＦなどを取り込むには、それをＢＭＰ画像かＰＮＧ画像に変換しないといけません。それを簡単にします、フリーソフトが「IrfanView32」です。 これが「IrfanView32」です。 この黒いスクリーンの上に、アニメＧＩＦをドラック＆ドロップ するだけで画像を取り込む事が出来ます。 または、メニューバーのフォルダーアイコンの「開く」からでも 取りこむ事が出来ます。 では具体的にやってみましょう。 ご注意：アニメＧＩＦはご自分で作ったものを加工するのは 問題ないと思います。 しかし、素材屋さんで頂いてきたものは、加工ＯＫの物でなければなりません。ご承知おき下さい。 これは、ＭＵＯＮさんが作ったアニメＧＩＦです。 ２枚のＧＩＦ画像から出来ています。大きさは１１４×１３６です。 これを使って、アニメーションポインターを作ってみましょう。 私は、マイピクチャーにこの画像をしまっています。 画像の入っている、フォルダをあけまして、「IrfanView32」にドロップして下さい。 このようになります。 「IrfanView32」の中でアニメＧＩＦが動いていますか？ このアニメＧＩＦを分解して、２枚の静止画像の ＢＭＰ（ビットマップ）画像に変換します。 上のメニューバーに「オプション(O)」というのがありますね。 それをクリックします。 上から６行目に「静止画に分割して保存(E)」があります。「フォルダの参照」というフロートパネルが出て来ましたか？そこで保存したいホルダーを指定しまして、「ＯＫ」を押せば、ＢＭＰに変換され静止画がフォルダーに入ります。 私の場合は、この２個のＢＭＰ画像がフォルダーの中に入りました。 これで「ＡＮＩめーかー」に画像を取り込む事が出来ます。 ちなみにこの画像の上で右クリックでプロパティを見て下さい・ アドレスＵＲＬの最後の拡張子が bmp になっていると思います。 あとは「ＡＮＩめーかー」を開きまして、この画像を 「イメージの編集」のパネルにドロップするだけです。 ドロップしますと「すまーとリサイズ」しますか と聞いてきますから「はい」を押します。 ３２×３２にリサイズされました。 もう一枚も同じくドロップします。 後は、上の「フレームの編集」タブをクリックしまして、 インターバルを決め、下の「すべて保存」で フォルダを指定して保存します。 後は出来た、アニメーションポインターをアップするだけです。 アップしないとＷＥＢ上では表示できません。 アップの仕方は、こちらから！ 素材屋さんから、頂いてきたアニメＧＩＦも同じ行程で、アニメーションポインターに変換できます。しかし先にも述べましたが、加工ＯＫの物をお使い下さい。 ３回に分けてお話して来ましたが、ポインター（カーソル）をアップできるサーバーをお持ちの人しか無縁のものです。また、オリジナルなアニメＧＩＦを変換するには、アニメＧＩＦを作る事が出来ないといけませんね。・・・・当たり前か・・・・！(￣‥￣)=3 ﾌﾝ皆さんも、素材屋さんに置いてありますアニメポインターとは別に、お気に入りのアニメＧＩＦなどがあると思います。それを、この「ＡＮＩめーかー」でアニメポインターに変換してみて下さいませ。 では！がんばって・・・！バックナンバーはこちら⇒>>【オリジナルのアニメーションポインターを作ってみよう】>>【アニメ画像をアニメーションポインターに変換してみよう】Copyright (C) GT-ONE WEBSITE 2002-2004 All Rights Reserved
2004/10/11
コメント(10)
-
【アニメ画像をアニメーションポインターに変換してみよう】
前回は「ＡＮＩめーかー」というフリーソフトを紹介しました。いきなり、アニメポインターが作れます。が・・！作ったアニメポインターをＷＥＢ上に載せるのは、こちらにいってください。これが理解できませんと、自分のＨＰにアニメポインターを乗せられません。 さて、新規製作からこの「イメージの編集」で ３２×３２のカーソルが出来ます。 立て横の枡を数えてみて下さい。 ３２枡になっていると思います。お判りですか！ 一枡が１ｐｘです。 これですと細かな細工が出来ませんね！ そういうときは、ペイントとかのお絵かきソフトで 画像を書きまして、編集すればＯＫです！ その時の画像のサイズは１００×１００以下ぐらいで作ります。 今回は、ご自分で作ったＧＩＦ画像やアニメＧＩＦのアイコン、または素材屋さんから頂いてきたアイコンをアニメーションポインターにこのソフトを使って変換、編集してみましょう！ 【お気に入りのアニメＧＩＦアイコンをアニメポインターに変換してみましょう】 まずはお絵かきソフトなどで一から画像を作っている方 画像の大きさは、１００×１００ぐらいがいいと思います。出来ました画像は、保存する際、ＢＭＰ ＰＮＧ形式で保存します。「ＡＮＩめーかー」は画像としては ＢＭＰ ＰＮＧでしか取り込めないからです。 もうすでに出来上がった、アニメＧＩＦなどを変換したい場合 あまり大きな画像は避けた方がいいですね！といいますのは、３２ｐｘまで縮小しますから、細部まで画像が出ません。画像の大きさ１００ｐｘが目安だと思います。先にもいいましたが、「ＡＮＩめーかー」は画像としては、ＢＭＰかＰＮＧしか取り込めません。ＧＩＦ、ＪＰＧなどは、ＢＭＰ，ＰＮＧに変換しないといけません。お絵かきソフトなどで、ＢＭＰ、ＰＮＧに保存し直して下さい。 楽天広場上で動いている画像は、ほとんどがアニメＧＩＦです。このアニメＧＩＦをカーソルに取り込むのも、すべて画像を分解してＢＭＰ、もしくはＰＮＧに変換しないといけません。では、それを簡単に変換してくれます、フリーソフトを紹介しましょう。 それが「IrfanView32 日本語版 Ver.3.92」です。これは、有名なソフトです。アニメＧＩＦをドロップするだけで、ＢＭＰの分解した、画像に変換してくれます。ダウンロードは「俺のページ」こちらから！自己解凍方式でレンジのアイコンが出てきますから、ダブルクリックで解凍します。まずはこれをＤＬしてみましょう。 今日は・・・ここまで・・・！これから、Ｆ－１を見たいものですから・・・・！続きは・・・・多分明日！すいません！ではε＝ε＝ε＝（┌￣）┘ダッシュ！ Copyright (C) GT-ONE WEBSITE 2002-2004 All Rights Reserved
2004/10/10
コメント(4)
-
【オリジナルのアニメーションポインターを作ってみよう】フリーソフトの紹介！
さあ今回は、お約束どうりアニメーションポインターを作ってみましょう。３～４回に分けて書いてみようと思います。 紹介するフリーソフトでオリジナルなアニメポインターを作ってみます。お気に入りのアニメＧＩＦアイコンをアニメポインターに変換してみましょう。 今日は、ソフトの紹介と、そのフリーソフトでオリジナルなポインターの作り方を紹介します。その前に、カーソルにＵＲＬを指定する事は Netscape(Mac)では対応しておりません。これは、Expolorer(WINDOWS)のみです。また、cur,ani,ico,などの拡張子をアップできるサーバーを契約している人しか出来ません。楽天の画像の倉庫ではアップできません！ご承知おき下さい。(￣^￣)b楽天でアニメーションポインターを使いたい人は、まずは↓ここにいってみて下さい。この間紹介しました【カーソルアイコンのダウンロード＆アップロード】はこちら！ では！アニメポインターを編集、製作するフリーソフトを紹介します。 「ＡＮＩめーかー」です。 ←こちらをクリックしてＤＬして下さい！圧縮ファイル lzh になっています。LHASA などの解凍ソフトで解凍して下さいね！・・・・解凍の仕方は・・・分かっていますよね・・そこまで説明させないでね(〃_ _) 【紹介するフリーソフトでオリジナルなアニメポインターを作ってみよう】ＤＬ出来ましたでしょうか？ このアイコンをクリックしますと、下のようなアクティブウインドウが出てきますね。 出て来ましたでしょうか！ まずは、右下の「ヘルプ」をクリックして、 適当に読んで見て下さいませ。 とりあえず「こんなもんかな」程度に読みましょう。 お絵かきをして見ます(￣m￣*)V 左下の「新規」をクリックしてみましょう！ またまた、ウインドウが立ち上がって来ましたね。 それで、ポインターをお絵かきします。 これでお絵かきして行きます。 WINDOWSに入っています、 ペイントみたいなものです。 ここに書いた画像は32px×32px に自動でなります。 アイコンは３２Ｐｘが基本なのです。 細かい説明は・・・勘弁・・・・！ 何せ、いじくりひん回して下さい。 そうすれば活路は開けます(￣m￣*)V これが、私が書いたものです。 仕事場で10分で書きました。(￣‥￣)=3 ﾌﾝ 書き終えましたら、「ＯＫ」をクリックします。 親パネルにイメージが出てきていると思います。 右側には、書きました画像が出ていますね。 気に入らなかったら、下の「編集」で何度でも 書きなおす事が出来ます。 最初につくった、イメージの複製を作ります。 下の「複製」をクリックしますと、 同じ画像が出来ます。 それをポイントして、「編集」を押します。 また、ウインドウが立ち上がりますから 目を変えたり・・口を変えたりします。 そして、「ＯＫ」で親パネルに戻ります。 また気に入らなかったら・・・ 「編集」で気に入るまでお絵かきして下さい。 上の「イメージの編集」タブの右に 「フレームの編集」があると思います。 クリックしますとアニメーションになっています。 右の「プレビュー」が動いていますか？ 多分最初はせわしないと思います。 インターバルの数を大きくしますと遅くなります。 「ＡＮＩテスト」で 自分の作ったポインターが見られます。 気に入らなかったら、また「イメージの編集」に戻り 気の済むまで、いじくりひん回して下さい・・・ 気が済んだら・・・「すべて保存」で保存します。 初期設定保存先は、｛コンピューターＣ｝のWINDOWSの 「cursors」に指定されています。 私は、マイピクチャーに「cursors」というフォルダを作りまして、そこに保存しております。後は、アップロードするだけです。 ざっと話しましたが・・・最初は判らないと思います。お願いですから・・・いじくりひん回してね・・！「理解」は・・いじくりひん回すことです・・・！(￣^￣)b ちなみに私は、このソフトの作者と何の関係もございません。(￣‥￣)=3 ﾌﾝでは！次回も・・・・お願いだから・・・理解してね！(〃_ _)続きは↓こちら！ 【オリジナルのアニメーションポインターを作ってみよう（２）】はこちらから【アニメ画像をアニメーションポインターに変換してみよう】はこちらからCopyright (C) GT-ONE WEBSITE 2002-2004 All Rights Reserved
2004/10/09
コメント(14)
-
【日記のページ全体にカーソルを表示】
◆ 日記について ◆私は日記を書かない人です。この日記のページで、私の楽天でやっていることをＨＴＭＬ【プチ講座】として載せております。興味のある人は行ってみて下さいませ！(￣‥￣)=3 ﾌﾝ 【罫線背景バックナンバー】 【プチ講座】MENU 【正面玄関】にもどる 【質問掲示板】はこちらご質問、ご意見は「掲示板」「私書箱」「ご質問掲示板」にどうぞ！今日のアニメーションポインターはぶたさんです。日記の中にアニメーションカーソルなどを入れるには、ＴＡＢＬＥなどを使ってＳＴＹＬＥで指定します。↓このように書いています。 ------------------------------------------------<TABLE ALIGN="CENTER" BORDER="0" WIDTH="100%" HEIGHT="300" BGCOLOR="#E4FCFB" style="cursor:url(http://gtone3142.at.infoseek.co.jp/ani/butasan.ani);"><TR><TD ALIGN="left" valign=top><UL>ここに本文を書きます。ＴＡＢＬＥが判るようにＢＧＣＯＬＯＲ（背景色）を入れてあります。高さ（ＨＥＧＨＴ）は３００ＰＸにしています。</UL></TD></TR></TABLE>------------------------------------------------ アニメーションカーソル、アニメーションポインター 色々言い方がありますが、次回は、アニメポインターを作るフリーソフトの紹介と・・・簡単な作り方をやってみましょうか(￣^￣)b 今日は・・・これで寝させて・・・！σ(o^_^o)・・・・ｱ!(*￣○￣)(￣о￣*)ﾎ!!・・・！ ・・・・このぶたさんのカーソルでコピペできるかな・・・(￣m￣*)V Copyright (C) GT-ONE WEBSITE 2002-2004 All Rights Reserved
2004/10/07
コメント(7)
-
【カーソルアイコンを使ってみよう！】2周年イベント・・ふるってどうぞ(￣‥￣)=3 ﾌﾝ
【カーソルアイコンのDL＆UL】 最近また、カーソルアイコン（またはアニメカーソル）についてのご質問が増えました。楽天のどこかで、見たのでしょうね！楽天ではアニメカーソルは使えないと思っていた人もいたと思います。 このタグを紹介したのは、ずいぶん以前になりますから、まとまりのない【プチ講座】になっておりました。まずは、初心者さんの行き当たる壁・・・・！DLとアップロード・・・！いつも聞かれますので、フリーページにまとめて見ました。完全には書き上げていませんが、アップして見ました。これから、アニメカーソルを使ってみようという人は、ここに行って見て下さいませ！ タイトルは↓これです！(￣‥￣)=3 ﾌﾝ初心者のためのＨＰの飾りつけ教室VOL.10【ホームページ上のカーソルを変えてみよう】カーソルアイコンのダウンロード＆アップロード2周年記念のイベントも9月26日に告知いたしました。みなさん振るってご参加下さい。 追伸：昨日の日記でアニメーションカーソルでていますよね！アヒルちゃんが踊ってるやつ・・・！これね！元はアニメGIFなのです。アニメギフをＢＭＰ画像に変換して、それをまた、アニメーションカーソルに変換しました。無料の変換ソフト知りたい方は、いってくださいね！(￣^￣)bまた作ってみました！今度は踊るＭＵＯＮさん！(￣m￣*)V Copyright (C) GT-ONE WEBSITE 2002-2004 All Rights Reserved
2004/09/28
コメント(14)
-
【TABLEの中にTABLE講座】
昨日紹介しました雛形では、５つのTABLEを使っています。どのようにTABLEを重ね合わせているか、簡単に紹介してみましょう！あの雛形は外から、中へTABLEを <TD> セルの中に入れ込んで行きます。まずは、これが一番外のTABLEです。３列３行のセルで出来ています。お判りですよね(〃_ _)！このTABLEの二行目二列目の <TD> セルの中にTABLEを入れます。この説明を書いているセル この中にワンポイントの背景画像や罫線用のTABLEを入れるのですがその、TABLEの基本になるTABLEを先に入れます。 ＊判りやすいようにセルに背景色をつけています。 上のTABLEのセルの中に色々指定するTABLEの基本になるTABLEを入れます。REDの枠で示しています。セル内に、赤の枠のTABLEを入れました。幅は、９５％としています。ですからセルの背景色が少し見えていると思います。背景色はWHITE（白）で指定しています。セル内の基本になるTABLEが出来ました。(￣m￣*)V 上の基本のTABLEにワンポイントの背景画像のTABLEを入れます。 BLUE（青）の枠が左上の背景画像を指定しているTABLEです。GREEN（緑）の枠が右下の背景画像を指定しているTABLEです。 両方ともTABLEのWIDTH（幅）は１００％ですが、基本のTABLEで cellpadding="20" （セルの中の要素の間隔）を指定していますから、基本のTABLEより小さくなります。 最後に罫線の背景画像のTABLEを入れます。オレンジの枠です。セル間を cellSpacing=20 として２０ｐｘの余白を持たせています。中のオレンジの枠が本文を書きます <TD> のセルです。 どうでしょうか！５つのTABLEの配置は判りましたでしょうか！・・・・・お願い判って・・・(-_-;) このように、TABLEを使いまして、色々な事が出来ます。超初心者の方には・・・すぐには理解できないと思いますが！おぼろげに・・・「ふう～～ん！こうなってるのか！」と判ってくだされば幸いです。(￣‥￣)=3 ﾌﾝ では！ε＝ε＝ε＝（┌￣）┘ダッシュ！ PS：ちなみに昨日のタグをTABLEごとに色分けしておきました。
2004/09/25
コメント(4)
-
【ご質問？】
此処に文字此処に文字 これはこのように書いています。---------------------------------------------<CENTER style="border-style:solid;border-width:1px;width:500px;height:400px;background-color:#ffffff;TEXT-ALIGN:left;"></UL>此処に文字此処に文字</UL></center>-------------------------------------------- plam伽羅さん からのご質問ですが・・・！これじゃあ駄目なのかな？全体をセンターリングして、テキストだけは左寄せする！やり方は、いっぱいありますが・・CENTERを使うのでしたらこのやり方です。 CENTER を使った中で、またセンターリングする事も出来ます。テキストを<CENTER>でくくってあげればいいのです。
2004/09/19
コメント(3)
-
【罫線画像の追加！】
今日は素材屋さん風に【プチ講座】を書いてみましょう！(￣m￣*)V 今朝目が覚めまして、布団の中でぼ～～～っとしておりました。罫線画像で何かおもしろい物はないかな・・と・・・！ふと思いついたのが・・・アニメGIFです。(￣^￣)b 早速作って見ました。それがこれです。(￣‥￣)=3 ﾌﾝ 落ち着きのあるページには不向きですね！(〃_ _) あと、罫線画像の高さを２２ｐｘから２６ｐｘにしたものも作って見ました。テキストの高さを、もっと大きくする事が出来ます。 アニメGIFの罫線画像はこちら→ 罫線画像の背景を使った、大学ノート風の基本的なタグを書いてみましょう。↓タグはこちら <table bgcolor="blue" cellspacing="1" cellpadding="15" width="90%" height="" align="center"><tr><td bgcolor="#F4FBFB" vAlign="top"><!-- ここから罫線用のTABLE --><TABLE cellSpacing=5 cellPadding=0 width="100%" align=center border=0><TBODY><TR><TD background=ここに罫線の画像のURL><FONT style="FONT-SIZE: 15px; LINE-HEIGHT: 22px;color:black;font-family: Comic Sans MS;">ここに本文を書きます。</FONT></TD></TR></TBODY></TABLE><!-- ここまで --></td></tr></table>ご注意このまま、楽天のフリーページや日記の編集ページに貼り付けますと、エラーがでます。必ず、一度メモ帖や、エディターソフトに貼り付けて画像のURLなどを編集の上、アップしましょう！以前のタグ規制やバージョンアップに伴い、楽天では少しのタグミスでエラーがでます。ですから、画像のURLがちゃんと載っていませんと、「えっ～～らっ～～～！」となります。(￣‥￣)=3 ﾌﾝ 罫線の【プチ講座】バックナンバーはこちら↓ 基本説明(１)と大学ノート風シンプルな背景罫線はこちら 8/29基本説明(２)とワンポイントの背景を入れた背景罫線はこちら 8/30スクロールボックスに背景罫線はこちら 8/31画像を載せる際の注意点（１）はこちら 9/1画像を載せる際の注意点（２）はこちら 9/9スクロールボックスにフィルタ（透過）をかけた背景罫線はこちら 9/6 罫線画像素材１ [破線 高さ22px 幅20px]hasen1.gifhasen2.gifhasen3.gifhasen4.gif 罫線画像素材２ [実線 高さ22px 幅20px]solid1.gifsolid2.gifsolid3.gifsolid4.gif 罫線画像素材３ [破線 高さ26px 幅23px]hasen5.gifhasen6.gifhasen7.gifhasen8.gif高さ２６ｐｘの罫線を使う場合は LINE-HEIGHT: 22px; の数値２２ｐｘを２６ｐｘにしてください。罫線画像素材４ [実線 高さ26px 幅23px]solid5.gifsolid6.gifsolid7.gifsolid8.gif高さ２６ｐｘの罫線を使う場合は LINE-HEIGHT: 22px; の数値２２ｐｘを２６ｐｘにしてください。お願い！素材画像はDLしてアップし直してお使い下さい。直リンクしますと、アクセス集中時にすべて、表示されない事があります。Copyright (C) GT-ONE WEBSITE 2002-2004 All Rights Reserved
2004/09/12
コメント(6)
-
【罫線の背景画像に画像を載せる！】
罫線の背景画像の中に、画像を入れる時の注意点を９月１日の日記に書きましたが、画像にテキストが廻り込むようにすれば、画像の高さを気にしないで画像を載せられます。 <IMG SRC="画像のURL" ALIGN="left"> このようにALIGN="left" ALIGN="right" のタグを入れますと、テキストが画像の左、もしくは右に廻りこみます。やってみましょうか！(￣m￣*)Vまずは、画像を左に配置しまして、右側にテキストを廻りこませます。 画像に続いて、テキストを書いて行きますと、 画像の右側にテキストは廻りこみます。 このようになります。 このままテキストを書いて行きます。 次は画像を右に配置しまして、テキストを左に廻りこませます。 また続けて、テキストを書きますと、 テキストは左に廻りこみます。 どうですか・・・！ 罫線とずれていないでしょ！(￣m￣*)V <IMG SRC="">画像タグの中に ALIGN="left" ALIGN="right" を入れます。このようにすれば、画像の高さを気にしないで、テキストが書けるのです。・・・・判りますよね！お願い判って・・・・！(￣_￣ i)ﾀﾗｰ
2004/09/09
コメント(14)
-
【背景画像で大学ノート風罫線！】(￣^￣)b
最近この様な、便箋風や大学ノート風の日記を見かけますね。ほとんどは[TABLE]で表示されています。そしてその中に入れる罫線なのですが、<HR> に「STYLEシート」で形状や色を指定して表示しています。または、TABLEの<TD> セルを使いまして、表示しているものもあります。しかし、この罫線は、両者ともその都度書きこまないといけません。あれはわずらわしいものがあります。そこで、この罫線を背景画像としてリピートさせてみたらどうでしょう！罫線をタグでいちいち書く手間が省けます。このテーブルの罫線は背景画像です。(￣m￣*)Vタグを書いてみましょうか！<table bgcolor="black" cellspacing="1" cellpadding="15" width="90%" height="220" align="center"><tr><td bgcolor="#E9FDFE" vAlign="top"><!-- ここから罫線用のTABLE --><TABLE cellSpacing=5 cellPadding=0 width="100%" align=center border=0><TBODY><TR><TD background=http://gtone.k-server.org/img2/hasen2.gif><FONT style="FONT-SIZE: 15px; LINE-HEIGHT: 22px;color:black;font-family: Comic Sans MS;">ここに文字を書きます。テキストを書きませんと、罫線は出ません。お判りですか？</FONT></TD></TR></TBODY></TABLE><!-- ここまで --></td></tr></table><DIV align=right><font size=1>By <A href="http://plaza.rakuten.co.jp/gtone/diary/" target="_blank" style="text-decoration: none;">GT-ONE</A></font></DIV>どのような画像なのか拡大表示してみましょうか。 ←５倍に拡大して枠を付けております。 元画像の大きさは、２０ｐｘ×２２ｐｘ というGIF画像です。 LINE-HEIGHT: 22px;←このタグが味噌なのです。 これはテキストの行の高さを指定しています。 賢明なるみなさんはもうお分かりになりましたね。(￣m￣*)V 背景画像の高さと同じですね。ですから、背景画像とテキストがずれないのです。・・・・お判りですか・・・(￣_￣ i)ﾀﾗｰ お願い判って！ この画像は、ペイントなどで簡単に作れますから、皆さんも製作してみて下さい。また、背景色を透過することを忘れないようにね！ 画像が作れない方のために、雛形を載せておきますが、直リンクはご勘弁下さい。(￣^￣)b時期が来ますと、URLを削除します。(￣‥￣)=3 ﾌﾝDLしてお使い下さい。カーソルを当てると形状のテキストが出ます。http://gtone.k-server.org/img2/hasen2.gifが罫線の画像のURLです。上の罫線の画像の雛形のURLを入れます。 では！ε＝ε＝ε＝（┌￣）┘ダッシュ！ Copyright (C) GT-ONE WEBSITE 2002-2004 All Rights Reserved
2004/08/29
コメント(11)
-
【実験中！】バージョンアップに伴い判った事(￣‥￣)=3 ﾌﾝ
◆ 日記について ◆私は日記を書かない人です。この日記のページで、私の楽天でやっていることをＨＴＭＬ【プチ講座】として載せております。興味のある人は行ってみて下さいませ！(￣‥￣)=3 ﾌﾝ 【プチ講座】MENU 【正面玄関】にもどるご質問、ご意見は「掲示板」「私書箱」「ご質問掲示板」にどうぞ！◆バージョンアップに伴い判った事！◆└(￣▽￣*)こんちわ♪今日は、少し真剣に(￣^￣)bあっちこっち日記やらページをいじって見ました。そこでσ(o^_^o)なりに判った事を載せてみますね！STYLEシートで色々な命令を出す時は、各属性の単位を指定してあげないといけません。例えば、フォントを指定する時 font-size:px; font-size:pt; font-size:pc; のようにサイズに単位をきっちり入れてあげないといけなくなりました。もちろん幅や高さの指定も同じです。 width:px; height:px; このように！また、位置指定のスタイルシートの属性も同じです。position:absolute;top:60px;left:100px; このように位置の単位をしっかり入れてあげないと表示しません。 スタイルシート <B STYLE=""> でテキストボックスを造っている人は Bタグではテキストボックスが崩れてしまいます。<FONT STYLE=""> <CENTER STYLE=""> <P STYLE=""> などでしたら、表示できます。σ(o^_^o)も以前はよくこの Bタグを使っていましたから、ほとんど崩れてしまいました。(￣‥￣)=3 ﾌﾝというのは、P と CENTER のタグは互換性が悪いのです。一緒のボックスでは使えません。そのため、CENTER を使う時は Bタグを使っておりました。 スタイルシートで色を指定するときは、カラーコードの前に必ず # を入れないといけません。例えば、ブラックは ００００００ ですね！以前はこれでもOKでした。しかし、#００００００ と書かないと、コードを読み込んでくれません。カラーネーム BLACK はそのまま使えます。 テキストのワンポイントでよく使っていました影文字、これも <FONT>タグの中に入れますと、表示しません。更新ページでは <FONT> でスタイルを指定しても表示されるのですが、いざページにいって見ますと、表示されていません。<CENTER> <P> にスタイルシートを入れますと表示できます。 背景画像やターゲットの位置を指定する position: のタグは使えますね。position:absolute; は使えないと思っておりましたが、この上でやっているように・・・つ！か！え！・・・ます。ちなみにディスプレーを消す <font style="display:none;">のタグも使えました。 何か情報などありましたら、教えて下さいませ。(￣‥￣)=3 ﾌﾝ実験してほしい物があればお教え下さいませ！では！この変で・・・！Copyright (C) GT-ONE WEBSITE 2002-2004 All Rights Reserved
2004/08/07
コメント(6)
-
【初心者のための日記でＴＡＢＬＥ講座！５】属性の説明！
</TR>が抜けていました。修正しました。 日記 GT-ONE WEBSITE 【プチ講座】 ファイル 編集 表示 お気に入り ヘルプ（ご質問掲示板） プチ講座 チャット ＢＢＳ はじめにお礼！連休中に色々やりたかったことはあったのですが・・・！腰痛のため、なに一つ、出来ませんでした！どうにかほぼ完治いたしました。みなさま方には暖かいお見舞いのお言葉を頂きまして、この場をかれましてお礼申し上げます！ありがとうございました！o(*^▽^*)oあはっ♪ということで、前回 【初心者のための日記でＴＡＢＬＥ講座！４】 でお話しました、属性を具体的に解説したいと思います。 widthとheightについて！この上の「はじめにお礼！」のテーブルを書いてみましょう！ 此処に文字！<TABLE border="1" align="center" bgcolor="" bordercolor="black" width="80%" height="" cellspacing="0" cellpadding="5"><TR><TD align="center" bgcolor="deeppink"> <FONT SIZE="+1" color="white">はじめにお礼！</font></TD></TR><TR><TD bgcolor="#CEFFCE">此処が二列目のセル内です！</TD></TR></TABLE>このように書いております。width="80%" はＴＡＢＬＥが存在する、絶対領域での幅のパーセンテージを指定しています。ここでは、外にＷＥＢ調のＴＡＢＬＥがあります。そのＴＡＢＬＥの８０％の大きさを常に維持します。 では、 width="50%" height="250" という風に数値をいじってみましょう。 此処に文字！<TABLE border="1" align="center" bgcolor="" bordercolor="black" width="50%" height="250" cellspacing="0" cellpadding="5"><TR><TD align="center" bgcolor="deeppink"> <FONT SIZE="+1" color="white">此処に文字！</font></TD></TR><TR><TD bgcolor="#CEFFCE">此処が二列目のセル内です！</TD></TR></TABLE> このようになります。ＴＡＢＬＥの幅が５０％になりました。height="250"は高さですが、数値はピクセルです！高さについては、ほとんど指定しなくともいいと思います。ただ、セルの上下に空白を付けたいときに指定してあげるといいですね。 borderとbordercolorについて！ 同じように border="1"とbordercolor="black" を変えてみましょう。borderは枠の幅を指定します。数値を１０にしてみます。bordercolorは枠の色でしたね。これもPINKにして見ますね。 此処に文字！<TABLE border="10" bordercolor="pink" align="center" bgcolor="" width="80%" height="" cellspacing="0" cellpadding="5"><TR><TD align="center" bgcolor="deeppink"> <FONT SIZE="+1" color="white">此処に文字！</font></TD></TR><TR><TD bgcolor="#CEFFCE">此処が二列目のセル内です！</TD></TR></TABLE> 枠の幅を１０ピクセルにしまして、枠の色をＰＩＮＫにして見ました。ここで、枠の色に濃淡を付ける事が出来ます。曰いる、立体的に見せる事が出来ます。bordercolor=""を二色にします。bordercolorlight=""（明るい所の枠）、bordercolordark=""(影になる枠）では、 bordercolor="pink" を削除しまして、 bordercolorlight="pink" bordercolordark="deeppink" にしてみましょう！ 此処に文字！<TABLE border="10" bordercolorlight="pink" bordercolordark="deeppink" align="center" bgcolor="" width="80%" height="" cellspacing="0" cellpadding="5"><TR><TD align="center" bgcolor="deeppink"> <FONT SIZE="+1" color="white">此処に文字！</font></TD></TR><TR><TD bgcolor="#CEFFCE">此処が二列目のセル内です！</TD></TR></TABLE> お判りでしょうか？今回は、字数制限になる前に・・・ここまでにしましょう！次回も属性の説明をやって行きます。(￣‥￣)=3 ﾌﾝ おまけの雛形！(￣m￣*)V おまけです！テーブルのセルの中にスクロールボックスを入れてみましょう！ 此処に文字！<TABLE border="10" bordercolorlight="pink" bordercolordark="deeppink" align="center" bgcolor="" width="100%" height="" cellspacing="0" cellpadding="0"><TR><TD align="center" bgcolor="deeppink"><FONT SIZE="+1" color="white">此処に文字！</font></TD></TR><TR><TD bgcolor="#CEFFCE"><CENTER style="overflow-y: scroll;font-size: 11pt;line-height: 1.2;font-family: Comic Sans MS;height: 400px;text-align:left;color:black;"><UL>ここがセルの中です。本文はここに書きます。高さは４００ＰＸになっています。お好きに変えて下さい。</UL></CENTER></TD></TR></TABLE> ではみなさん、がんばって下さいませ！(￣‥￣)=3 ﾌﾝε＝ε＝ε＝（┌￣）┘ダッシュ！ Copyright (C) GT-ONE WEBSITE 2002-2004 All Rights Reserved
2004/05/09
コメント(20)
-
【よぉ★0605さん の日記のテーブル！】
日記 GT-ONE WEBSITE 【プチ講座】 ファイル 編集 表示 お気に入り ヘルプ（ご質問掲示板） プチ講座 チャット ＢＢＳ よぉ★0605さんが掲示板に書き込みされていまして、テーブルの枠がうまくできないということでしたので、悪いとは思ったのですが、お持ち帰りいたしまして作ってみました。今回の枠は３列３行のセルからなっています。よぉ★0605さん・・まずかったらいってくださいませ。 <TABLE ALIGN="center" BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="480" HEIGHT="380"><TR><TD><img src=http://******/247.gif></TD><TD><img src=http://******/249.gif width=400 height=40></TD><TD><img src=http://******/248.gif></TD></TR><TR><TD><img src=http://******/250.gif width=40 height=300></TD><TD><FONT SIZE="2" COLOR="#000000" FACE="Comic Sans Ms"><center style="border-style: none;overflow-y:scroll;overflow-x:auto;scrollbar-base-color:white;scrollbar-arrow-color:black;scrollbar-face-color:white; scrollbar-track-color:pink; width: 350px; height:250px;text-align:left;"> <HR style="border-style: dashed; height:1px;border-color:blue; width: 100%;">此処に文字<HR style="border-style: dashed; height:1px;border-color:blue; width: 100%;">此処に文字<HR style="border-style: dashed; height:1px;border-color:blue; width: 100%;">此処に文字<HR style="border-style: dashed; height:1px;border-color:blue; width: 100%;">此処に文字<HR style="border-style: dashed; height:1px;border-color:blue; width: 100%;">此処に文字<HR style="border-style: dashed; height:1px;border-color:blue; width: 100%;"> </center></FONT></TD><TD><img src=http://******/251.gif width=40 height=300></TD></TR><TR><TD><img src=http://******/252.gif></TD><TD><img src=http://******/253.gif width=400 height=40></TD><TD><img src=http://******/254.gif></TD></TR></TABLE>
2004/03/16
コメント(14)
-
【ＴＡＢＬＥでページのタブ隠し！】
トップ 新着一覧 パソコン・家電 ランダム 買物日記 ログイン 【新規登録！】 日記 GT-ONE WEBSITE 【プチ講座】 ファイル 編集 表示 お気に入り ヘルプ（ご質問掲示板） プチ講座 チャット ＢＢＳ トップ 新着一覧 パソコン・家電 ランダム 買物日記 ログイン 【新規登録！】今日も「テーブルの雛形」を紹介しましょう！「テーブル」でページの上にある、タブを飾って見ました。どのように出るか、ココ、日記のページで表示しています。(￣m￣*)Vタグを書いてみましょう。 <table border="2" bordercolorlight="deepskyblue" bordercolordark="navy" cellspacing="0" width="550" style="position:absolute;top:15px;left:400px;font-size:11px;color:blue;font-family:Comic Sans MS;" align="center"> <tbody bgcolor="#fffae6" align="middle"><tr><td><a href="http://plaza.rakuten.co.jp/"><img src="http://my.plaza.rakuten.co.jp/img/admin/menu_arrow_off.gif" border="0"></a> トップ</td><td bgcolor=powderblue><a href="http://plaza.rakuten.co.jp/gnr/"><img src="http://my.plaza.rakuten.co.jp/img/admin/menu_arrow_off.gif" border="0"></a> 新着一覧</td><td><a href="http://plaza.rakuten.co.jp/gnr/?gid=200"><img src="http://plaza.rakuten.co.jp/img/admin/menu_arrow_off.gif" border="0"></a> パソコン・家電</td><td bgcolor=powderblue><a href="http://plaza.rakuten.co.jp/?func=random&act=gtone"><img src="http://my.plaza.rakuten.co.jp/img/admin/menu_arrow_off.gif" border="0"></a> ランダム</td><td><a href="http://plaza.rakuten.co.jp/rcm/"><img src="http://my.plaza.rakuten.co.jp/img/admin/menu_arrow_off.gif" border="0"></a> 買物日記</td><td bgcolor=powderblue><a href="http://my.plaza.rakuten.co.jp/"><img src="http://my.plaza.rakuten.co.jp/img/admin/menu_arrow_off.gif" border="0"></a> ログイン</td><td><a href="http://plaza.rakuten.co.jp/hlp/?doc=setsumei"><img src="http://my.plaza.rakuten.co.jp/img/admin/menu_arrow_off.gif" border="0"></a> 【新規登録！】</td></tr></tbody> </table> 矢印の画像 にリンクを貼っています。 青 のタグがテーブルの本体です。リンクの部分は 赤 で表示してあります。みなさんの個々のリンクを貼りなおして下さい。
2004/03/14
コメント(15)
-
【日記でTABLE！またまた実験中・・・！】
日記 GT-ONE WEBSITE 【プチ講座】 2003/2/29【プチ講座】日記でテーブルが使えるとこんな事も出来るようになります。 日記でテーブルを使うに当たって、今日一つ判った事があります。日記ではテキストが自動改行になります。ですから下手に全角のスペースや改行をしますと、タグでいう<BR>になってしまいます。ですから、「テーブル」のタグを書く場合には、すべて繋げて書きこまないといけませんね。セル内のテキストは、今までどうり全角のスペースや改行で書きこみます。 あと、<UL> </UL> のリストタグが使えるようになったんですね。(￣m￣*)V をクリックで【プチ講座】のMENUに飛びます。をクリックで、私にメールが送れます。(￣m￣*)V 日記 GT-ONE WEBSITE 【プチ講座】ファイル 編集 表示 お気に入り ツール ヘルプ ここにテキストや画像を入れます。table内の width="" と height="" でテーブル全体の大きさを変えて下さい。 チャットルーム作って見ました。 ↑この簡単なＷＥＢスクリーンのタグを書いてみましょうか？<table border width="300" height="250" bgcolor="#cccccc"><tr><td bgcolor="#000099" height="8"><font size="2" color="ffffff"> 日記 GT-ONE WEBSITE 【プチ講座】</font></td></tr><tr><td height="8" bordercolorlight="#777777" bordercolordark="#eeeeee"><font size="2" color="black">ファイル 編集 表示 お気に入り ツール ヘルプ </font></td></tr><tr><td bgcolor="ffffff" valign="top"><font size="2" color="black">ここにテキストや画像を入れます。</font></td></tr></table> ではみなさんがんばって下さいませ。(￣m￣*)Vε＝ε＝ε＝（┌￣）┘ダッシュ！追伸：２８日土曜日のページでページの一覧隠しをやったところ・・・メインのHOMEやDIARYのバナーリンクが作動しなくなりました！今原因を・・・・何故だろう・・・？(￣_￣ i)ﾀﾗｰ
2004/02/29
コメント(22)
-
【・・え！日記で・・・ＴＡＢＬＥが・・！】
日記でＴＡＢＬＥが使える・・・・？ かずさかさんから・・・掲示板に連絡がありました。 これは、日記のページを書くに当たって、大発展です。 ＴＡＢＬＥはスタイルシートのボックスより、もっと細かな事が出来るからです。 どの程度まで、属性が使えるか問題ですが・・・ 昨今の楽天に取っては朗報ですね。(￣m￣*)V 明日は仕事なので・・・日曜日にでも、いじってみます。 これで、テーブルのタグを色々日記で紹介できますね。 やれやれ！・・・(￣‥￣)=3 ﾌﾝ 日記の飾り付け【プチ講座メニュー】はこちらから！ ご注意：プチ講座は2003/11/28のタグ規制で使えないものがあります。 ご承知おきください。 此処に文字！個々に画像！あれま・・・！てーぶるかい！テーブルの基本タグはこれです。↓ <center><table style="font-family:Comic Sans Ms;font-size:9px;color:black;" border="1"><tr><td>此処に文字！</td><td>個々に画像！</td></tr><tr><td>あれま・・・！</td><td>てーぶるかい！</td></tr></table></center>
2004/02/27
コメント(8)
-
【ボックスの小技！2】ボックスにぼかしを入れる！
今日は、ボックスの中にフィルタ(filter)のタグを入れて、全体の感じを柔らかくしてみます。 このフィルタのタグは、 Internet Explorer 独自のタグです。 Netscape には対応しておりません。 以前、この filter のタグを使いまして、 文字(テキスト） と 画像 に特殊効果を設定することを紹介しました。 日記の【プチ講座】 【飾り文字を書く】 と 【画像に特殊効果を設定する】 です。 今日は、ボックスの中に入れてみましょう。 まずは、フィルタ効果を入れないで背景画像をボックスの中に入れてみます。 みなさんに分かりやすいように、背景画像に 似つかわしくないものを使っております。 文字の色はレッドにしてあります。 <B> </B> タグを入れまして、文字を強調しています。↑このボックスに、フィルタ効果をかけますと↓このようになります。 背景も透過しますが、 文字も透過します。 背景に合った、フォントカラーを選択しましょう。 <B> </B> タグを入れてフォントを強調した方がいいですね。 いつものボックスのタグの中に filter: alpha(opacity=50); のタグを入れます。 これを入れたタグを書いて見ます。<center><P style="border-style:double;color:black;border-width:;width: 60%;height:150px;background-color:;background-image:url(背景画像のＵＲＬ); filter: alpha(opacity=50);" align="left"><FONT color="red"><B>此処に文字を書きます。</B></FONT></P></center> filter: alpha(opacity=50); の ５０ の数値を変える事で、ぼかしの度合いが変わってきます。 数値が小さくなるほどぼかしが強くなります。お判りでしょうか！数値は ０～１００ までです。 ではみなさんがんばって下さいませ。ε＝ε＝ε＝（┌￣）┘ダッシュ！ 日記の飾り付け【プチ講座メニュー】はこちらから！ ご注意：プチ講座は2003/11/28のタグ規制で使えないものがあります。 ご承知おきください。
2004/02/15
コメント(8)
-
【ボックスの小技！１】テキストを左寄せ！
今日は【ボックスの小技】をやってみましょう。 ボックスをセンターリングした時に中のテキストもセンターリングしてしまいます。 テキストのみ左寄せで普通どおり書く方法をやってみましょう。 下↓のボックスのように、センターリングをしますと、テキストもセンターリングしまして、 テキストのバランスが悪くなる事がありますね。 このボックスは <center> </center> を使いましてセンターリングさせています。そうしますと、ボックスの中に書き込んだ、テキストもセンターリングしてしまいます。このボックスは <P style=""></P> でスタイルを指定しています。「Ｐ」 でスタイルを指定している時、テキストを左寄せにするには！ ボックスのみセンターリングしまして、中のテキストは左寄せで書きこむには、 align="left" を挿入すれば、ＯＫです。↓このように書きます。<center> <P style="border-style:double;color:black;border-width:;width: 50%;height:100;background-color:beige;background-image:url(http://);" align="left">此処に文字などを書きます。</P></center>また、ボックスのスタイルを <div style=""></div> で指定することも出来ます。このときは align="left" は使えません。「div」 の時は、スタイルシートの中に、 text-align:left; を挿入します。 【ご注意】 「Ｐ」でボックスのスタイルを指定しているとき、「Ｐ」のボックスの中に同じ「Ｐ」のボックスは入れられません。 また、並べる事も出来ません。 なぜか？といいますと、「Ｐ」 タグの持っている属性がもともと「改行のタグ」だからです。 ボックスにまたボックスを入れる時は、「div」でボックスを指定します。 ご承知下さい。(￣‥￣)=3 ﾌﾝ (￣m￣*)V 日記の飾り付け【プチ講座メニュー】はこちらから！ ご注意：プチ講座は2003/11/28のタグ規制で使えないものがあります。 ご承知おきください。
2004/02/10
コメント(5)
-
【日記で使う！ボックスのお勉強 2(幅と高さの特性)】
前回は、ボックスの幅と高さについてやって見ました。 今回は前回の補足で、幅と高さの特性をやってみましょう。 ボックスの幅を数値で指定しまして、テキストをその中に書きますと、 テキストは、ボックスのその幅以内で改行して表示されます。 此処に文字や画像のＵＲＬ、ボックスのタグを入れます。 このボックスは width: 80%;height:100px;と指定しています。 ↑このボックスの幅のみ４０％にして見ます。 此処に文字や画像のＵＲＬ、ボックスのタグを入れます。 このボックスは width: 40%;height:100px;と指定しています。 お判りですか！テキストは改行しましたね！別に[Enter]で改行した訳ではありません。 自動で改行します。 しかし、高さにつきましては、行を増やせば増やすほど、たとえ height:100px; と指定したとしましても、 テキストを書いた分だけ、どんどん間延びして行きます。↓下のボックスは上のボックスと同じ「幅と高さ」ですが テキストだけ増やして見ました。もちろん改行も入れてあります。 此処に文字や画像のＵＲＬ、ボックスのタグを入れます。 このボックスは width: 40%;height:100px;と指定しています。-------------------------------文字を書きますと、いくら高さを指定しましてもどんどんボックスの高さがテキストに押し広げられ高くなっていきます。 -------------------------------- 高さは、このようにテキストを書いた分だけ、どんどん広がって行きます。 このあたりの、「ボックスの特性」をしっかり理解した上で使いますと、 戸惑わなくて済みますね！(￣m￣*)V 次回はボックスの中に画像を入れたときの注意点をやって行きましょう。 では！(￣‥￣)=3 ﾌﾝ ε＝ε＝ε＝（┌￣）┘ダッシュ！ 日記の飾り付け【プチ講座メニュー】はこちらから！ ご注意：プチ講座は2003/11/28のタグ規制で使えないものがあります。 ご承知おきください。
2004/01/17
コメント(4)
-
【縦のスクロール！予告】
昨日のＳＭＡＰのエンディングテーマに縦のスクロールが使われていました。ちょっとそれを真似して見ました。(￣m￣*)V たてにスクロールさせてみました。 次回は、これ使って、日記の雛形作りますね。 タグはこれです。↓・・詳しくは後日・・(〃_ _)σ∥ｲﾁﾞｲﾁﾞ･･･ <MARQUEE direction="up" WIDTH=50 HEIGHT=200 bgcolor=pink><P style="writing-mode:tb-rl; white-space:nowrap;">たてにスクロールさせてみました。 次回は、これ使って、日記の雛形作りますね。</P></MARQUEE> 日記の飾り付け【プチ講座メニュー】はこちらから！
2003/11/18
コメント(11)
-
【スクロールバーの色を変える】
またまた今回も「質問掲示板」に書き込みがありました ご質問について書いてみますね。 みなさん、スクロールバー付の「ボックス」とか、「テーブル」を見かけると思います。 中にはスクロールバーに色を付けているのを見かけますね。 今日はあれをやってみましょう。 まずは、ごく一般的なスクロールボックスのタグを書いてみます。 <div style="cursor:help;width:70%;height:100px;overflow-y:scroll;overflow-x:auto;border-style:inset;background-color:tan;">ここに文字を書きます。テキストだけの時、最後をくくるタグはとしてください。このタグがこのボックスを表示しているタグです。</div> ボックスの幅、高さ、を指定したりする属性のタグの説明は 省かさせていただきます。 詳しくは【プチ講座】の「ボックスの属性と雛形」にいってみてください。 overflow-y:scroll;overflow-x:auto; ↑この部分がスクロールバーを表示するためのタグです。 overflow-y:scroll; が縦方向にスクロールしなさいと命令しております。 overflow-x:auto; が横方向に必要があればスクロールしなさいと命令します。 では、スクロールバーに色をつけてみましょう。 <div style="cursor:help;border-style:inset;border-width:;border-color:;background-color:khaki;width:70%;height:100px;overflow-y:scroll;overflow-x:auto;scrollbar-base-color:khaki;scrollbar-arrow-color:khaki;scrollbar-face-color:khaki;scrollbar-track-color:khaki;scrollbar-highlight-color:khaki;scrollbar-3dlight-color:khaki;scrollbar-shadow-color:khaki;scrollbar-darkshadow-color:khaki;"> ここに文字を書きます。</div> 赤色のタグの部分が、スクロールバーの色を指定しています。 え？スクロールバーがないって・・・？(￣m￣*)V ごめんごめん！―(￣∇￣;)→グサ!!! 背景色とすべて同じにしてみました。 background-color:khaki; のところが背景色です。 スクロールバーの色を指定するところをすべて背景色と同じ khaki にしますとこうなります。 では！判りやすいようにもう一色入れて見ましょう。white(白)を入れてみます。 <div style="cursor:help;border-style:inset;border-width:;border-color:;background-color:khaki;width:70%;height:100px;overflow-y:scroll;overflow-x:auto;scrollbar-base-color:khaki;scrollbar-arrow-color:white;scrollbar-face-color:khaki;scrollbar-track-color:white;scrollbar-highlight-color:white;scrollbar-3dlight-color:white;scrollbar-shadow-color:white;scrollbar-darkshadow-color:white;"> ここに文字を書きます。スクロールバーの色は背景色と同じkhaki と white の二色を使っています。 </div> お分かりでしょうか？スクロールバーは全部で８箇所色を指定することが出来ます。 scrollbar-base-color:khaki; 全体の色 scrollbar-arrow-color:white; 矢印の色 scrollbar-face-color:khaki; バーの表面の色 scrollbar-track-color:white; バーの動く部分の色 scrollbar-highlight-color:white; バーの明るくなる部分の色 scrollbar-3dlight-color:white; 三次元的になる部分の色 scrollbar-shadow-color:white; 明るい影の色 scrollbar-darkshadow-color:white; 暗い影の色 khaki と white のところをお好きに変えてください。 いろいろな、スクロールバーが出来ると思います。 簡単にココに入れてある、属性のタグの説明をしておきます。 cursor:help; カーソルを変えます。カーソルの形状を変えてみるに説明があります。 border-style:inset; 枠の種類です。 border-width:; 枠の幅を指定します。 border-color:; 枠の色を指定します。 background-color:khaki; ボックスの背景色を指定します。 では！みなさん頑張ってくださいませ。:*.；".*・；・^；・:＼(￣(エ)￣)/:・；^・；・* 【プチ講座メニュー】はこちらから！
2003/11/01
コメント(9)
-
【ボックスの枠を変える！(2)】
■【初心者のためのプチ講座VOL.19】■■■■■■■■■■■■■■■■■ 【ボックスの中にボックス！ボックスの枠を変える！】 で枠の形状の種類を表示させて見ましたが ボックスの枠は、「右」「左」「上」｢下」と個々に指定できます。 border-style:(枠の形状) だけではなく、 border-width:(枠の幅) border-color:(枠の色) も左右上下 個々に指定できます。 例えば、border-style:(枠の形状)で（枠の形状）のところに solid と一つだけ形状を指定しますと border-style:solid このように！ 左右上下 同じ形状のsolid になります。 左右上下の形状を一括して、指定するには↓のように形状を書きますとＯＫです。 ★＝(枠の形状) border-style:★ {上下左右｝同じ形状になります。 border-style:★ ★ ｛上下}{左右｝と指定できます。 border-style:★ ★ ★ ｛上}{左右}{下｝と指定できます。 border-style:★ ★ ★ ★ ｛上}{右}{下}{左｝とすべて指定できます。 形状は半角のスペースで区切って下さい。 では、どのようになるか雛形を表示して見ましょう。 <div style="border-style:dotted;border-width:10px;background:white; color:deeppink; width:100%; height:100px;">ここに本文！</div> <div style="border-style:dotted dashed;border-width:10px;background:white; color:deeppink; width:100%; height:100px;">ここに本文！</div> <div style="border-style:dotted dashed solid;border-width:10px;background:white; color:deeppink; width:100%; height:100px;">ここに本文！</div> <div style="border-style:dotted dashed solid double;border-width:10px;background:white; color:deeppink; width:100%; height:100px;">ここに本文！</div> お判りでしょうか！ 「枠の幅」も「枠の色」も同様に個々に指定できます。 では、「枠の幅」と「枠の色」を同時に指定してみます。 <div style="border-style:solid;border-width:10px; border-color:red;background:white; width:100%; height:100px;">ここに本文！</div> <div style="border-style:solid;border-width:10px 20px; border-color:red pink;background:white; width:100%; height:100px;">ここに本文！</div> <div style="border-style:solid;border-width:10px 20px 30px; border-color:red pink blue;background:white; width:100%; height:100px;">ここに本文！</B> <div style="border-style:solid;border-width:10px 20px 30px 40px; border-color:red pink blue green;background:white; width:100%; height:100px;">ここに本文！</div> どうでしょう！判りますでしょうか？(^_-)-☆
2003/06/15
コメント(6)
-
【カーソルアイコンのダウンロード＆アップロード】
■【カーソルのダウンロードとアップロード】■■■■■■■■■■■■ 楽天で↑上記のように「カーソル」を指定するには、 「カーソルアイコン」をダウンロード（ＤＬ）しないといけません。 ＤＬは「カーソルアイコン」を置いている、素材屋さんに行きます。 「検索」から【素材 カーソルアイコン】で検索できると思います。 一つ紹介しておきましょう。 http://hp.vector.co.jp/authors/VA010095/aniroom.htm ＤＬした「カーソルアイコン」をアップロードしないと、ＷＥＢ上では表示されません。 しかし、楽天では、「カーソルアイコン」の拡張子である 「cur」「Ani」「ico」をアップロードする事はできません。 「アップロード」とアップローダーを持った、無料のＨＰサイトについては、 私が紹介しています、↓こちらに行ってみて下さい。(*^^)v 【初心者のためのＨＰの飾り付け教室】の「アップロードとは!」それか、 「ホームページ上で音を鳴らすには！」の「ＭＩＤＩをアップロードしてみよう」に行ってみて下さい。 なんとなくアップロードという事が分かると思います。 また、無料でアップローダーを備えたサイトに登録して 画像、ＭＩＤＩなどアップロードする事が出来ます。 そこに、「カーソルアイコン」をアップしまして、「アイコンのＵＲＬ」を 紹介しました、タグの中に入れれば「カーソルアイコン」が表示されます。(*^^)v ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ご質問ご意見は、掲示板でも私書箱でもいいのですが 【ご質問専用の掲示板】もあります。（ＨＴＭＬ対応） そちらもご利用ください。(*^^)v ではでは！みなさんがんばってください。 【プチ講座メニュー】は←こちらから！ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
2003/06/07
コメント(13)
-
【カーソルの形状を変えて見る！】
■【プチ講座VOL.15】 カーソルの形状を変える事が出来ます。 今日の日記は、カーソルを「elogo」→にしています。 ↓この下の【キリ番履歴】のページも、カーソルを砂時計にしております。 テキストボックスの中は、？なマーク付き⇒にして見ました。 これは、このタグをページの頭、もしくはボックスの中の一番上に貼り付ければ その部分のカーソル形状が変更されて表示されます。 <font style="cursor:wait;"> これが砂時計です。</font> <font style="cursor:help;"> これは？マーク入り⇒です。</font> お判りでしょうか？(*^^)v ではいくつか属性のタグを乗せてみましょう。 各属性にカーソルを当てて見て下さい。カーソルの形状が出ます。 crosshair 十字型形状 pointer アンカー上にある事を示します形状 move 対象が移動可能の形状 e-resize 右方向にリサイズ可能を示す形状 ne-resize 右上方向にリサイズ可能を示す形状 nw-resize 左上方向にリサイズ可能を示す形状 n-resize 上方向にリサイズ可能を示す形状 se-resize 右下方向にリサイズ可能を示す形状 sw-resize 左下方向にリサイズ可能を示す形状 s-resize 下方向にリサイズ可能を示す形状 w-resize 左方向にリサイズ可能を示す形状 text 文字を範囲指定できることを示す形状 ここから下は、Internet Explorer ６ しか表示できません。 all-scroll ページが上下左右スクロール可能を示す形状 col-resize 左右にリサイズ可能を示す形状 no-drop ドラッグした対象がドロップできない領域を示す形状 not-allowed 要求されたアクションが動作しない事を示す形状 progress バックグラウンドで処理が行われている事を示す形状 row-resize 上下にリサイズ可能を示す形状 vertical-text 縦書きテキストを範囲指定できることを示す形状 url(～URL～/elogo.cur) 拡張子が「cur」のみで表示します。 この「elogo」は一度アップロードしないと表示しません。 ここに「elogo」を載せて置きます。 http://gtone.hp.infoseek.co.jp/elogo.cur ＵＲＬをクリックしますと、 フロートパネルが出てきます。 「保存」でフォルダにダウンロードして下さい。 アップロードするときに、「elogo.cur」と確認してください。 どうしても使いたい方は、直リンクでもかまいませんが 掲示板に一言お願いしますね。 「elogo」は↑のＵＲＬを載せれば表示します。 url(http://gtone.hp.infoseek.co.jp/elogo.cur) で表示されます。 テキストの部分だけ表示させる事も出来ます。 <font style="cursor:ここに属性;">表示したいテキストの文</font> ページ全部、またはボックスの中全部の時は、 編集ページの一番上に貼り付けます。 一番下に</font>を忘れないように！ ではでは・・・(＊^^＊)！まだ歯がしみます。(-_-;) 【プチ講座メニュー】は←こちらから！
2003/05/30
コメント(11)
-
【What’s News VOL.12】
■【初心者のためのプチ講座 VOL.4】 【初心者のためのプチ講座 VOL.3】（３月２３日）の日記で テーブルタグのように使える、ボックスを紹介しました。 取り急ぎ、ボックスタグの雛形しか載せませんでしたので、 今日は属性のタグの説明をしてみましょう。 ここに、このように本文を入れましたり、 画像を表示するタグを貼りつける事が出来ます。 この雛形を下に書いて見ます。 <div style="border-style: double; background:#FFFF80; color:red; width: 70%; height: 100px;"> ここに、このように本文を入れましたり、 画像を表示するタグを貼りつける事が出来ます。</div> では、属性に付いて紹介します。 ●border-style: 枠の属性; 枠のスタイルを指定します。 border-style: double; 属性の指定のところに doubleと入れますと 一番最初のような枠になります。 border-style: none; 枠が表示されません。 border-style: solid; 枠が実線で表示されます。 border-style: dotted; 枠が点線で表示されます。 border-style: groove; 枠の部分がへこんだように表示されます。 border-style: ridge; 枠の部分が浮き上がったように表示されます。 ●background: 背景の属性; 背景色を指定します。属性の所に、 カラーコードで「C0C0C0」「FFFF80」と 書いてもいいですし、「red」とか「blue」とか カラーネームを書き込んでもＯＫです。 【カラーサンプル】はこちらから！ ●color: 枠の色; 枠の色を指定します。背景と同じように カラーコードやカラーネームを書き込みます。 ●width: 幅; height: 高さ ボックスの幅と高さを指定します。 PX（ピクルス）と％（パーセント）で指定します。 幅も高さも100%にしますと、日記のテーブル枠 いっぱいに表示します。 おまけ！（*^_^*） ↑これもボックスなんですが、このように ライン的な使い方も出来ます。 楽天の編集ページで見出しなどをくくっているのは テーブルで作ったラインです。 ボックスでも↑上のようにラインが出来ます。 このラインにするタグを書いてみましょう。 <font style="border-style: none; background:red; width: 50px; height:20px;"> </font> おまけ！（*^_^*）<font style="border-style: none; background:red; width: 400px; height:20px;"> </font> このようになります。 私のトップページに↓この様な文字の入った ラインがありますが、あれもテーブルです。 ■【ＢＧＭを止めるのは、ブラウザの中止ボタン×を押してください！】 テーブルでやる場合の雛形を書きますと。 ↓このようになります。 <TABLE WIDTH="100%" BORDER="0" CELLPADDING="3"> <TR> <TD WIDTH="80%" BGCOLOR="yellow"><B><FONT COLOR="#ff0000">■</FONT>【ＢＧＭを止めるのは、ブラウザの中止ボタン×を押してください！】</B></TD> </TR></TABLE> 日記でやる場合は、↓このようになります。 <div style="border-style: none; background:yellow; width: 90%; height:25px;"> <FONT COLOR="#ff0000">■</FONT>【ＢＧＭを止めるのは、ブラウザの中止ボタン×を押してください！】</div> では！みなさん色々試して見てください。 今週はどうにかして、【おもしろタグ教室】の 「テーブルで整理整頓VOL.2」を更新したいものです。(-_-;)
2003/03/28
コメント(8)
全29件 (29件中 1-29件目)
1
-
-
- 美術館・展覧会・ギャラリー
- 市川悦也さんの個展へ
- (2024-11-15 06:48:18)
-
-
-
- どんな写真を撮ってるの??（*^-^*）
- 四国2023景勝地探して（24）徳島の芝…
- (2024-11-15 17:50:25)
-
-
-
- REDSTONE
- (確定情報) 武道のアルカナ、パッシ…
- (2024-08-08 08:43:40)
-
