2026
2025
2024
2023
2022
2021
2020
2019
2018
2017
2016
2015
2014
2013
2005年06月の記事
全23件 (23件中 1-23件目)
1
-
実践テンプレート!? （6）
テーブル周りの枠線を変えてみるとテーブルクロスやクロスのようなステッチ調のイメージを作ることができます（には見えないかな;汗）/////////////////////////////////////////////////////////////※普通にテーブルを組みましょう（＾＾）<table><tr><td>【写真や画像、商品】</td></tr></table>※そこへ装飾をほどこします。■テーブル本体の設定style="border:1px dashed #8FBC8F;" （テーブルの周りを点線で囲みます）bgcolor="#8FBC8F" （背景色に点線と同じ色を指定します）cellspacing="5" cellpadding="5" （すき間と詰め物を設定します）width="100" height="100"（幅と高さを設定します）■tdの設定style="border:1px dashed white;" （白の点線でステッチ調にします）align="center" valign="middle"（上下左右ともに真ん中に設定します）↓こんな感じのソースになります。<table style="border:1px dashed #8FBC8F;" bgcolor="#8FBC8F" cellspacing="5" cellpadding="5" width="100" height="100"><tr><td style="border:1px dashed white;" align="center" valign="middle">【写真や画像、商品】</td></tr></table>↓こんな感じですね（＾＾）-----------------------------------------------------------------スモールチェスト3段♪ ダークカラーブリのチェスト 3NEW ARRIVAL！チェスト14♪サイドチェスト03♪*****************************************************【庶事所感】冷たいお茶が飲みたくていろいろ試し始めました。緑茶や烏龍茶の冷たいのだけでなく、いろいろやってます（＾＾）*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.06.30
コメント(8)
-
実践テンプレート!? （5）
上付き文字、下付き文字の指定を組み合わせると面白い模様ができます。上下にぶら下がるとフォントサイズが小さくなりますので、マークアップしない文字はフォントを下げてあげます。/////////////////////////////////////////////////////////////<sup>★</sup><font size="-1">★</font><sub>★</sub><sub>★</sub><font size="-1">★</font><sup>★</sup><sup>★</sup><font size="-1">★</font><sub>★</sub><sub>★</sub><font size="-1">★</font><sup>★</sup>間に挟むものは記号でも文字でもできますのでいろいろと工夫してみるといいと思います。※タダの四角形や丸もこんな感じに（＾＾）■■■■■■■■■■■■□□□□□□□□□□□□●●●●●●●●●●●●○○○○○○○○○○○○☆☆☆☆☆☆☆☆☆☆☆☆※一昨日前の記号でも（＾＾）♠♠♠♠♠♠♠♠♠♠♠♠♣♣♣♣♣♣♣♣♣♣♣♣♥♥♥♥♥♥♥♥♥♥♥♥♦♦♦♦♦♦♦♦♦♦♦♦※先日のフィルターのテンプレートに組み合わせると・・・★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★CASIO EX-Z50(EXZ50)スタイリッシュな生活防水付デジタルカメラ”μ30DIGITALパナソニック デジタルカメラ LUMIXDMC-FX8-A(コンフォートブルー)536万画素CCD 2.5型液晶搭載...キャノン IXY DIGITAL 55 [限定10台送料無料]★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*****************************************************【庶事所感】何だか集中豪雨の地域あり、日照りの地域あり･･･いったい日本はどうなっているのでしょう（＞＜）もっと公平にいけばいいのに*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.06.29
コメント(11)
-
実践テンプレート!? （4）
スタイルでテーブルの境界線の色と形式を変えると「切手」のような効果が出ます（＾＾）単純なソースの割には目立たせることができると思うのでやってみました。/////////////////////////////////////////////////////////////<table bgcolor="red" cellpadding="5" cellspacing="10" style="border:red dashed 5px;"><tr><td>ここに写真や商品画像など</td></tr></table>↓こんな感じですね（＾＾）カラーバリエーションだと↓こんな感じですね（＾＾）ミニチュアダックス（オス）チョコレートタンロング k2527ミニチュアシュナウザー オス 2005年4月27日産まれカニンヘンダックス(オス）ブラックタンロング k2521キャバリア5月12日生まれの男の子フレンチブルドッグ4月29日生まれ女の子*****************************************************【庶事所感】わたくしはどうも時間の使い方が下手なのだと思います（＞＜）またもやこんな時間！時間の使い方を考えよう！*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.06.28
コメント(6)
-
実践テンプレート!? （3）
文字実体参照を使って装飾すると、ブラウザの属性に左右されずに記号などをデザインに使うことができます。画像などではないのでページの重さを重くしないのも利点かもしれませんね。/////////////////////////////////////////////////////////////♠ ♠ ♠♣ ♣ ♣♥ ♥ ♥♦ ♦ ♦などを使ってみましょう。「色の指定」「大きさの指定」をしてテーブルに組み込みますと･･･<table border="1" bordercolor="blue"><tr><td bordercolor="white"><font color="black" size="5">♠</font></td><td></td><td></td></tr><tr><td></td><td width="150" height="150" align="center" valign="middle">【画像や商品】</td></a><td></td></tr><tr><td></td><td></td><td bordercolor="white"><font color="black" size="5">♠</font></td></tr></table>-------------------------------------------------------------♠ナイキ：【レディース】メトロプラス/151【NIKE セール】♠♣プーマ：【レディース】チョップスティックス ウィメンズ/01【PUMA サンダル】♣♥コンバース：オールスターL-CF HI/32061421【CONVERSE ALLSTAR 限定】♥♦コールマン：レディース CL20162/X201201625【Coleman トレッキングシューズ】♦*****************************************************【庶事所感】ずるして日付変更線をちょっと戻らせていただきました。ごめんなさぁい（＞＜）*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.06.27
コメント(4)
-
実践テンプレート!? （2）
テーブルを使わずにテンプレートを作ってみます。/////////////////////////////////////////////////////////////まずはスタイルシート（25）を参考に＜p＞タグや＜div＞でひとかたまりの枠(ボックス)をつくりましょう<p style="margin: 25px; padding: 30px; background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/39.gif); border: thin dotted blue;">ここに内容</p>分解してみますとmargin: 25px; （周りの要素との間の間隔です）padding: 30px; （内容と周りの囲みまでの距離、つまり詰め物ですね）background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/39.gif); （背景画像を使用しました）border: thin dotted blue;（全体のpタグを囲うように青の点線を入れました）後は内容に記載する写真は文字が回りこみをするようにさせたいのでimgタグのなかに align="left"を追加してあります。文章を書く要領と同じですから間をあけるのは br タグでかまいません。いくらでも行を増やすことが可能ですね◆ソース◆<p style="margin: 10px; padding: 15px; background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/39.gif); border: thin dotted blue;"><a href="http://pt.afl.rakuten.co.jp/c/012b5be5.9d60b4ed/?url=http%3a%2f%2fwww.rakuten.co.jp%2fkkenzai%2f478043%2f616190%2f%23635550" target="_blank"><img src="http://image.rakuten.co.jp/wshop/data/ws-mall-img/kkenzai/img64/img10191471449.jpeg" border=0 alt="DOPPEL GANGER RB-3ロードバイク ラグナオレンジ【送料無料】" align="left"></a><a href="http://pt.afl.rakuten.co.jp/c/012b5be5.9d60b4ed/?url=http%3a%2f%2fwww.rakuten.co.jp%2fkkenzai%2f478043%2f616190%2f%23635550" target="_blank">DOPPEL GANGER RB-3ロードバイク ラグナオレンジ【送料無料】</a><br>＊本製品は95％完成済みです。また、折り畳みに際して工具は必要ございません。 タイヤサイズ 20インチ 全長 （約）1510mm 折りたたみサイズ （約）800X670X350mm サドル高 （約）680～1030mm ハンドル...<br><br><br><a href="http://pt.afl.rakuten.co.jp/c/012b5c02.6bf118ad/?url=http%3a%2f%2fwww.rakuten.co.jp%2fpalette5%2f702479%2f594581%2f595574%2f%23628692" target="_blank"><img src="http://image.rakuten.co.jp/wshop/data/ws-mall-img/palette5/img64/img10341330596.jpeg" border=0 alt="シボレーアルミFサス FD-MTB26" align="left"></a><a href="http://pt.afl.rakuten.co.jp/c/012b5c02.6bf118ad/?url=http%3a%2f%2fwww.rakuten.co.jp%2fpalette5%2f702479%2f594581%2f595574%2f%23628692" target="_blank">シボレーアルミFサス FD-MTB26</a><br>●当商品「代金引換」はご利用できません。 宜しくお願い致します。●送料に関して 北海道、沖縄、離島は別途送料をご請求させて頂きます。●当商品、ただ今皆様からご好評頂いているため、 ご注文から2週間程...<br><br><br><a href="http://pt.afl.rakuten.co.jp/c/012b5c2e.f81d174e/?url=http%3a%2f%2fwww.rakuten.co.jp%2fjitensyaichibankan%2f594297%2f667400%2f%23624333" target="_blank"><img src="http://image.rakuten.co.jp/wshop/data/ws-mall-img/jitensyaichibankan/img64/img10391527020.jpeg" border=0 alt="【送料無料】DUNLOPCDPMT-264AL マウンテンバイク" align="left"></a><a href="http://pt.afl.rakuten.co.jp/c/012b5c2e.f81d174e/?url=http%3a%2f%2fwww.rakuten.co.jp%2fjitensyaichibankan%2f594297%2f667400%2f%23624333" target="_blank">【送料無料】DUNLOPCDPMT-264AL マウンテンバイク</a><br>・タイヤサイズ 26インチ・フロントアルミフレーム・Wサスペンションモデル・21段変速 グリップシフト・アルミリム【マウンテンバイク】【スポーティ】【ネット特価】<br><br><br><a href="http://pt.afl.rakuten.co.jp/c/012b5c42.7c73e9bf/?url=http%3a%2f%2fwww.rakuten.co.jp%2fincom%2f580344%2f617168%2f583470%2f%23576100" target="_blank"><img src="http://image.rakuten.co.jp/wshop/data/ws-mall-img/incom/img64/img10101377709.jpeg" border=0 alt="！送料無料・消費税込！さらに特別価格土日だけ！☆片山右京/UGO☆アルミWサス/折りたたみ/18sp..." align="left"></a><a href="http://pt.afl.rakuten.co.jp/c/012b5c42.7c73e9bf/?url=http%3a%2f%2fwww.rakuten.co.jp%2fincom%2f580344%2f617168%2f583470%2f%23576100" target="_blank">！送料無料・消費税込！さらに特別価格土日だけ！☆片山右京/UGO☆アルミWサス/折りたたみ/18sp...</a><br>軽量アルミフレームで新登場♪愛車のトランクにも納まります！タイヤサイズ：26インチ適応身長（目安）：157cm以上折畳サイズ：約96×36×77cm重量：約16.5kg材質：フレーム＆リム／アルミアロイギア：シマノ製18...</p>↓こんな感じですね（＾＾）DOPPEL GANGER RB-3ロードバイク ラグナオレンジ【送料無料】＊本製品は95％完成済みです。また、折り畳みに際して工具は必要ございません。 タイヤサイズ 20インチ 全長 （約）1510mm 折りたたみサイズ （約）800X670X350mm サドル高 （約）680～1030mm ハンドル...シボレーアルミFサス FD-MTB26●当商品「代金引換」はご利用できません。 宜しくお願い致します。●送料に関して 北海道、沖縄、離島は別途送料をご請求させて頂きます。●当商品、ただ今皆様からご好評頂いているため、 ご注文から2週間程...【送料無料】DUNLOPCDPMT-264AL マウンテンバイク・タイヤサイズ 26インチ・フロントアルミフレーム・Wサスペンションモデル・21段変速 グリップシフト・アルミリム【マウンテンバイク】【スポーティ】【ネット特価】！送料無料・消費税込！さらに特別価格土日だけ！☆片山右京/UGO☆アルミWサス/折りたたみ/18sp...軽量アルミフレームで新登場♪愛車のトランクにも納まります！タイヤサイズ：26インチ適応身長（目安）：157cm以上折畳サイズ：約96×36×77cm重量：約16.5kg材質：フレーム＆リム／アルミアロイギア：シマノ製18...*****************************************************【庶事所感】空梅雨です（＞＜）今年の夏はちょっと心配ですね。既に取水制限をはじめた県もでているようですね。雨は好きではないのですけれど、適宜降ってもらわないと困ります･･･*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.06.26
コメント(8)
-
すこし落ち着きました（＾＾）
実は、母が入院しておりこれでもう三年目なのですが、その間に父の体力が衰え一昨日特別養護老人ホームに入所させていただきました。随分前からお願いしたいと思っていたのですが、順番待ちの状況でしたし、自分も忙しかったりでここにきてやっとです（＞＜）できれば母も父と同じ施設にと考えていますので現在はそちらもことで動いております（＾＾）わたくしには兄弟がいませんのでわたくしが二人のことを見てやらなければならないのですが、どうも状況悪く二人ともが歩くことさえもままならない状況になり、かなり焦ったのですが、介護関係のかたに本当にお世話になりました。看護士のみなさま、ケアマネージャーのかた、ヘルパーのかた、また施設の相談員のかた、本当にありがたく思っております。いろんなかたの助けでやっとですが、父の明るい笑顔を見せていただきました。母もと思っておりますので、まだまだお世話になります。よろしくお願い申し上げます。しかし・・・いまの老人ホームって・・・高級ホテル並みのつくりにはビックリしました代わりにわたくしが住みたいくらいでした。しばしありましたが、またテンプレート、アクセスアップの日記を書かせていただきますのでよろしくお願い申しあげます。
2005.06.25
コメント(38)
-
実践テンプレート!?
フレームやフォームなども楽天広場では使えませんので、少しずつ実践のテーブルのテンプレートの作り方を書いてみたいと思います。手始めに最近の日記からフィルターを使ったものをひとつ作ってみたいと思います。/////////////////////////////////////////////////////////////まずはテンプレート基礎(1) の1-1テーブルを作ろう！を参考にテーブルをつくりましょう。<table border><tr><td>【本文内容】</td></tr></table>↓こんな感じですね（＾＾）【本文内容】これを横列４列、タテ行２行にしてみましょう<table border><tr><td>【画像1】</td><td>【画像2】</td><td>【画像3】</td><td>【画像4】</td></tr><tr><td>【コメント1】</td><td>【コメント2】</td><td>【コメント3】</td><td>【コメント4】</td></tr></table>↓こんな感じですね（＾＾）【画像1】【画像2】【画像3】【画像4】【コメント1】【コメント2】【コメント3】【コメント4】ここで、この枠（border）やそれぞれのセル（td）に色を付けたり、線の色、形を変えてテンプレートはできますが、せっかくですのでフィルターをつかってみましょう。ボーダーには色を付けたくないので"0"を指定して、テーブルの幅を決め、文字の表示位置を決めます。影の部分の詰め物の幅を指定して、影の色と角度を指定しますと･･･◆ソース◆<table border="0"><tr><td style="width: 100px; padding: 10px; filter: shadow(color=#393939, direction=135);" width="100">【画像1】</td><td style="width: 100px; padding: 10px; filter: shadow(color=#393939, direction=135);" width="100">【画像2】</td><td style="width: 100px; padding: 10px; filter: shadow(color=#393939, direction=135);" width="100">【画像3】</td><td style="width: 100px; padding: 10px; filter: shadow(color=#393939, direction=135);" width="100">【画像4】</td></tr><tr><td width="100" valign="top">【コメント1】</td><td width="100" valign="top">【コメント2】</td><td width="100" valign="top">【コメント3】</td><td width="100" valign="top">【コメント4】</td></tr></table>↓こんな感じですね（＾＾）CASIO EX-Z50(EXZ50)スタイリッシュな生活防水付デジタルカメラ”μ30DIGITALパナソニック デジタルカメラ LUMIXDMC-FX8-A(コンフォートブルー)536万画素CCD 2.5型液晶搭載...キャノン IXY DIGITAL 55 [限定10台送料無料]*****************************************************【庶事所感】時間がなかなか取れなくなると、まとまりの無い内容の日記になってしまって（；大汗）ダメですねぇ（＞＜）時間のあるときには、こんな風に今まで日記に書いたタグやスタイルを使ってテンプレートを実際作ってみたいと思います。*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.06.21
コメント(12)
-
HTMLについて
本来、HTMLの解説ではあまり書かれていないことかもしれませんが、そんなことをいくつか書きます。HyperText Markup Languageは当然日本語ではありません。Languageですから「言語」なわけですが、いちばん大きな特徴は囲うというか、挟み込むことで修飾・装飾を文章中に書き込むことだと思います。<HTML><HEAD>ページの情報</HEAD>、<BODY>内容（コンテンツ）</BODY></HTML>という形の中にさまざまな小さい挟みこまれた（タグ）情報が入り込んでできています。この基本的な部分もHTML 4.01バージョンを前提に考えていますので、それに忠実に記述するのがベストなのかも知れませんね。たいていのタグの講座や説明書では<HTML>の記述から始めますが、記述方法はこれがベストなのかというと疑問です。--------------------------------------------------------------------------------【言語の指定】ホームページのいちばん重要な部分は内容（コンテンツ）なので、この内容（コンテンツ）は何語のページですという表記で言語を指定することができます。<HTML LANG="***">"***"にはja（日本語）、en（英語）、fr（フランス語）、de（ドイツ語）、zh（中国語） 他～ を指定します。もちろん書かなくてもかまわないのですが・・・（わたくしは書いたほうが良いと思っています）--------------------------------------------------------------------------------【HTMLのバージョンを宣言】そのホームページがどのバージョンのHTMLで、どの仕様に従って作られているかのを、ブラウザに伝えます。HTMLよりも上に記述するものです。（大前提のHTMLがいちばん上っていうのは違うんですね！）もちろん書かなくてもかまわないのですが・・・（わたくしは書いたほうが良いと思っています）指定方法には次のような種類があります。 【HTML 4.01の場合】Strict … HTML 4.01に対して厳密かつ正確に従う指定URLを含めた指定 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">URLを省いた指定 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">Transitional … Strictより緩やかな指定（フレームは不可） URLを含めた指定 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">URLを省いた指定 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">Frameset … Transitionalにフレームを加えた指定URLを含めた指定 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">URLを省いた指定 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">--------------------------------------------------------------------------------【ページのタイトル】<TITLE> 部分です。これを書かなくてもブラウザにはホームページは表示されますが、これがないのは絶対にこまると思いますしかなり重要だと思っています。TITLEタグで指定したタイトル名は、ブラウザの上部の青いバー部分に表示されます。これはブックマーク時のタイトルにもなります。--------------------------------------------------------------------------------【ボディーの基本タグ】<BODY>タグにいろいろと情報指定することができるようになっています。（わたくしはこれをしないようにしています）<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080" ALINK="#FF0000">■BGCOLOR="" 背景の色 ■TEXT="" 文字の基本色 ■LINK="" リンク文字の色 ■VLINK="" リンク文字の色（アクセス済みのリンク） ■ALINK="" リンク文字の色（クリックした瞬間の色）--------------------------------------------------------------------------------（）内でわたくしはこう思うと書きましたのは、飽くまでも検索エンジン対策を意識するからですので、今日の日記は、ただホームページ作成と言った場合には必要のないものといえるかもしれません。*****************************************************【庶事所感】楽天広場・・・メンテナンスが多いです（＞＜）なんだかなぁ*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.06.20
コメント(2)
-
スタイル一覧（後編）
スタイル一覧の続きです。今考えているのが、目的別・使用方法別に整理するのがよいのか、こんなアルファベット順がいいのか･･･難しいですね（＞＜）内容については今まで書いてきたことの整理なのでそう苦労は無いとは思うのですが。orphans[IEもNNも不可]･･････････････改ページ制御outline････････････････････････････アウトライン指定outline-color･･････････････････････アウトライン色指定outline-style･･････････････････････アウトラインスタイル指定outline-width･･････････････････････アウトライン太さ指定overflow･･･････････････････････････オーバーフローの表示方法指定overflow-x[IEのみ]･････････････････オーバーフローの表示方法指定overflow-y[IEのみ]･････････････････オーバーフローの表示方法指定padding････････････････････････････パディングに関する指定padding-bottom･････････････････････下パディング指定padding-left･･･････････････････････左パディング指定padding-right･･････････････････････右パディング指定padding-top････････････････････････上パディング指定page[IEもNNも不可]･････････････････用紙設定指定page-break-before･･････････････････印刷の改ページ箇所指定page-break-after･･･････････････････印刷の改ページ箇所指定page-break-inside[IEもNNも不可]････改ページ制御pause[IEもNNも不可]････････････････読み上げ休止pause-after[IEもNNも不可]･･････････読み上げ休止pause-before[IEもNNも不可]･････････読み上げ休止pitch[IEもNNも不可]････････････････音声の高さを指定pitch-range[IEもNNも不可]･･････････音声の高さの変化する幅を指定play-during[IEもNNも不可]･･････････BG(バックグラウンド)・サウンドを指定position･･･････････････････････････ボックスの位置指定quotes･････････････････････････････引用符設定richness[IEもNNも不可]･････････････音声の豊かさ・明瞭さ指定right･･････････････････････････････右からの位置指定ruby-align[IEのみ]･････････････････ルビの行揃え位置指定ruby-overhang[IEのみ]･･････････････ルビの表示領域指定ruby-position[IEのみ]･･････････････ルビの表示位置指定scrollbar-3dlight-color[IEのみ]････スクロールバーの左端と上端の色指定scrollbar-arrow-color[IEのみ]･･････スクロールバーの矢印の色指定scrollbar-base-color[IEのみ]･･･････スクロールバーのベース色指定scrollbar-darkshadow-color[IEのみ]･スクロールバーの右端と下端の色指定scrollbar-face-color[IEのみ]･･･････スクロールバーの表面の色指定scrollbar-highlight-color[IEのみ]･･スクロールバーのハイライトの色指定scrollbar-shadow-color[IEのみ]･････スクロールバーの影の色指定size[IEもNNも不可]･････････････････用紙サイズと方向を指定speak[IEもNNも不可]････････････････読み方を指定speak-header[IEもNNも不可]･････････表の見出しを読みあげタイミングを指定speak-numeral[IEもNNも不可]････････数字の読み方を指定speak-punctuation[IEもNNも不可]････句読点や記号を読みあげ指定speech-rate[IEもNNも不可]･･････････読む速度指定stress[IEもNNも不可]･･･････････････アクセントの強さ指定table-layout･･･････････････････････テーブルの表示方法を指定text-align･････････････････････････行揃えの位置・均等割付を指定text-autospace[IEのみ]･････････････アルファベット等との間隔指定text-decoration････････････････････テキストの下線・上線・打ち消し線・点滅を指定text-indent････････････････････････インデント幅を指定text-justify[IEのみ]･･･････････････均等割付の形式を指定text-shadow[IEもNNも不可]･･････････文字に影をつけるtext-transform･････････････････････テキストの大文字表示・小文字表示指定text-underline-position[IEのみ]････下線の表示位置指定top････････････････････････････････上からの配置位置指定unicode-bidi･･･････････････････････Unicodeの文字表記の方向を上書きvertical-align･････････････････････縦方向の揃え位置指定visibility･････････････････････････ボックスの表示・非表示を指定voice-family[IEもNNも不可]･････････音声の種類指定volume[IEもNNも不可]･･･････････････音量指定white-space････････････････････････ソース中のスペース・タブ・改行の表示指定widows[IEもNNも不可]･･･････････････改ページ制御width･･････････････････････････････幅指定word-break[IEのみ]･････････････････文の改行方法指定word-spacing･･･････････････････････単語の間隔指定word-wrap[IEのみ]･･････････････････単語の途中改行指定writing-mode[IEのみ]･･･････････････文字表記の方向（縦横）を指定z-index････････････････････････････重なりの順序指定zoom[IEのみ]･･･････････････････････画像などの拡大・縮小表示*****************************************************【庶事所感】「みんなやってるもん！」という子供のことばって本当に不思議です。本人はウソはついていないのだと思うのですが、「みんなって誰と誰？」と聞くと大抵はニ三人だったりします。「それじゃ、全然みんなじゃないじゃんか!?」、でも子供は「みんな」なんですよね（＞＜）自分にも思い当たる節があるので大人はカンタンにそれを見破ります（＾＾）「だって、みんな持ってるんだよ！！」*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.06.19
コメント(165)
-
スタイル一覧（前編）
スタイルについては現在のIEやNNよりも先までを考慮したものがあったりするので一見すると数は多いのですが、実質に使うのは意外と少ないのではないかと思います。これも同じように整理をしたいリストですね（＞＜）azimuth[IEもNNも不可]･･････････････音声の聞こえる位置指定background･････････････････････････背景に関指定background-attachment･･････････････背景画像の固定・移動を指定background-color･･･････････････････背景色指定background-image･･･････････････････背景画像指定background-position････････････････背景画像の表示開始位置指定background-position-x[IEのみ]･･････背景画像の横位置指定background-position-y[IEのみ]･･････背景画像の縦位置指定background-repeat･･････････････････背景画像のリピート指定behavior[IEのみ]･･･････････････････外部スクリプト適用border･････････････････････････････ボーダーの指定border-bottom･･････････････････････下ボーダーの指定border-bottom-color････････････････下ボーダーの色指定border-bottom-style････････････････下ボーダーのスタイル指定border-bottom-width････････････････下ボーダーの太さ指定border-collapse････････････････････セルのボーダーの表示指定border-color･･･････････････････････ボーダーの色指定border-left････････････････････････左ボーダーの指定border-left-color･･････････････････左ボーダーの色指定border-left-style･･････････････････左ボーダーのスタイル指定border-left-width･･････････････････左ボーダーの太さ指定border-right･･･････････････････････右ボーダーの指定border-right-color･････････････････右ボーダーの色指定border-right-style･････････････････右ボーダーのスタイル指定border-right-width･････････････････右ボーダーの太さ指定border-spacing･････････････････････セルのボーダーの間隔指定border-style･･･････････････････････ボーダーのスタイル指定border-top･････････････････････････上ボーダーの指定border-top-color･･･････････････････上ボーダーの色指定border-top-style･･･････････････････上ボーダーのスタイル指定border-top-width･･･････････････････上ボーダーの太さ指定border-width･･･････････････････････ボーダーの太さ指定bottom･････････････････････････････下からの配置位置（距離）を指定caption-side･･･････････････････････テーブルキャプションの位置指定clear･･････････････････････････････回り込み解除clip･･･････････････････････････････ボックスを切り抜き表示color･･････････････････････････････文字色指定content････････････････････････････コンテンツ挿入counter-increment[IEもNNも不可]････カウンタの値を進めるcounter-reset[IEもNNも不可]････････カウンタの値をリセットcue[IEもNNも不可]･･････････････････サウンドアイコンに関する指定cue-after[IEもNNも不可]････････････サウンドアイコン箇所指定cue-before[IEもNNも不可]･･･････････サウンドアイコン箇所指定cursor･････････････････････････････カーソルの形状指定direction･･････････････････････････文章表記の方向指定display････････････････････････････要素の表示形式指定elevation[IEもNNも不可]････････････音声の聞こえる高さ指定empty-cells････････････････････････空白セルのボーダーの表示・非表示指定filter･････････････････････････････画像・テキストにフィルタ効果float･･････････････････････････････左または右に寄せて配置font･･･････････････････････････････フォントに関する指定font-family････････････････････････フォントの種類指定font-size･･････････････････････････フォントのサイズ指定font-size-adjust[IEもNNも不可]･････フォントのサイズ調整font-stretch[IEもNNも不可]･････････フォントを縦長・横長にするfont-style･････････････････････････フォントをイタリック体・斜体にfont-variant･･･････････････････････フォントをスモールキャップにfont-weight････････････････････････フォントの太さ指定height･････････････････････････････高さ指定ime-mode[IEのみ]･･･････････････････テキストのIMEの状態を指定include-source･････････････････････他のHTML文書をレイヤー表示layer-background-color･････････････レイヤーの背景色指定layer-background-image･････････････レイヤーの背景画像指定layout-grid[IEのみ]････････････････グリッドに関する指定layout-grid-char[IEのみ]･･･････････文字グリッドの幅指定layout-grid-line[IEのみ]･･･････････行グリッドの高さ指定layout-grid-mode[IEのみ]･･･････････行・文字グリッドの有効・無効指定layout-grid-type[IEのみ]･･･････････グリッドのタイプ指定left･･･････････････････････････････左からの位置指定letter-spacing･････････････････････文字の間隔指定line-break[IEのみ]･････････････････禁則処理指定line-height････････････････････････行の高さ指定list-style･････････････････････････マーカーに関する指定list-style-image･･･････････････････マーカー画像指定list-style-position････････････････マーカーの表示位置指定list-style-type････････････････････マーカー文字の種類指定margin･････････････････････････････マージンに関する指定margin-bottom･･････････････････････下マージン指定margin-left････････････････････････左マージン指定margin-right･･･････････････････････右マージン指定margin-top･････････････････････････上マージン指定marker-offset[IEもNNも不可]････････マーカーとの間隔指定marks[IEもNNも不可]････････････････マークスを出力指定max-height･････････････････････････高さの最大値指定max-width･･････････････････････････幅の最大値指定min-height･････････････････････････高さの最小値指定min-width･･････････････････････････幅の最小値指定*****************************************************【庶事所感】連日、親御さんを亡くされたご兄弟の弟さんがテレビに出ている。身内の恥ずかしい内容を一所懸命話している・・・「社会人として･･･」恥ずかしいとは考えていないようだそれを一所懸命追っているマスコミはもっと恥ずかしいとは考えていないようだほかに報道すべきことがたくさんあるだろうに・・・*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.06.18
コメント(12)
-
タグ一覧
HTMLタグをひとわたり整理したいと思いました。できるならば、これらには最小のプロパティで記述をしたいものだと思います。豊かな表現力の基本はこれらの把握からだといえると思います。<A>･･････････････････････アンカー、リンクの基本タグ<ABBR>･･･････････････････略語（頭字語以外）であることを表す<ACRONYM>････････････････略語（頭字語）であることを表す<ADDRESS>････････････････連絡先を表す<APPLET>･････････････････JAVAアプレットを挿入<AREA>･･･････････････････イメージマップの領域を設定 <B>･･････････････････････テキストを太字に<BASE>･･･････････････････相対パスの基準を指定<BASEFONT>･･･････････････テキストの基準サイズ・基準色・基準フォントを指定<BDO>････････････････････文字表記の方向指定<BGSOUND>[IEのみ]････････効果音・BGM<BIG>････････････････････テキストのサイズをひとまわり大きくする<BLINK>[NNのみ]･･････････文字点滅<BLOCKQUOTE>･････････････引用文<BODY>･･･････････････････コンテンツの本体<BR>･････････････････････改行<BUTTON>･････････････････ボタン作成<CAPTION>････････････････テーブルタイトル<CENTER>･････････････････中央寄せ<CITE>･･･････････････････出典・参照先<CODE>･･･････････････････プログラムのソースコード<COL>････････････････････表の縦列の属性をまとめて指定<COLGROUP>･･･････････････表の縦列をグループ化<COMMENT>[IEのみ]････････HTMLソースをコメントにする<DD>･････････････････････定義した用語の説明<DEL>････････････････････削除<DFN>････････････････････定義する用語を明示<DIR>････････････････････リストを表示する<DIV>････････････････････ひとかたまり(ブロック)として定義<DL>･････････････････････定義リスト<DT>･････････････････････定義する用語<EM>･････････････････････強調<EMBED>[NNのみ]･･････････プラグインデータ埋込<FIELDSET>･･･････････････フォームの入力項目をグループ化する<FONT>･･･････････････････フォントの種類・大きさ・色を指定<FORM>･･･････････････････入力フォーム<FRAME>･･････････････････フレームに表示するファイルを指定する<FRAMESET>･･･････････････ウィンドウをフレームに分割する <H1>～<H6>･･･････････････見出しを付ける<HEAD>･･･････････････････文書のヘッダ情報<HR>･････････････････････水平線<HTML>･･･････････････････HTML文書宣言<I>･･････････････････････テキストを斜体（イタリック）に<IFRAME>･････････････････インラインフレームを作る<ILAYER>[NNのみ]･････････相対位置にレイヤー表示する<IMG>････････････････････画像を表示<INPUT>･･････････････････フォームの構成部品（入力欄・ボタン等）を作成<INS>････････････････････追加部分<ISINDEX>････････････････検索キーワードの入力欄<KBD>････････････････････キーボード入力される文字であることを示す <LABEL>･･････････････････フォームの部品と項目名（ラベル）を関連付<LAYER>[NNのみ]･･････････絶対位置にレイヤー表示<LEGEND>･････････････････フォームの入力項目グループタイトル<LI>･････････････････････リストの項目<LINK>･･･････････････････関連する文書ファイルを指定<LISTING>････････････････ソースをそのまま表示<MAP>････････････････････一画像に複数のリンクを設定<MARQUEE>[IEのみ]････････文字をスクロール<MENU>･･･････････････････メニューリスト表示<META>･･･････････････････その文書に関する情報（メタ情報）を指定<MULTICOL>[NNのみ]･･･････段組<NOBR>[NNのみ]･･･････････改行なしで表示<NOEMBED>[NNのみ]････････プラグインが利用できない環境用の表示内容を指定<NOFRAMES>･･･････････････フレームが表示できない環境用の表示内容を指定<NOLAYER>[NNのみ]････････レイヤーが利用できない環境用の表示内容を指定<NOSCRIPT>[NNのみ]･･･････スクリプトが動作しない環境用の表示内容を指定<OBJECT>･････････････････文書にデータを埋込<OL>･････････････････････順序のあるリストを表示<OPTGROUP>･･･････････････セレクトボックスの選択肢をグループ化<OPTION>･････････････････セレクトボックスの選択肢を指定<P>･･････････････････････ひとつの段落（パラグラフ）であることを表す<PARAM>･･････････････････パラメータを指定する<PLAINTEXT>･･････････････ソースをそのまま表示<PRE>････････････････････ソースを整形済みテキストとして表示<Q>･･････････････････････引用文<RB>[IEのみ]･････････････ルビをふる文字を指定する<RP>[IEのみ]･････････････ルビを囲む記号を指定する<RT>[IEのみ]･････････････ルビの内容を指定する<RUBY>[IEのみ]･･･････････ルビの範囲を指定する<S>･･････････････････････打ち消し線を引く<SAMP>･･･････････････････プログラムによる出力結果のサンプル<SCRIPT>･････････････････文書にスクリプトを埋込<SELECT>･････････････････セレクトボックスを作成<SMALL>･･････････････････テキストのサイズをひとまわり小さくする<SPACER>[NNのみ]･････････スペースを挿入する<SPAN>･･･････････････････ひとかたまりの範囲定義<STRIKE>･････････････････打ち消し線<STRONG>･････････････････強調する<STYLE>･･････････････････スタイルシートを記述<SUB>････････････････････下付き文字<SUP>････････････････････上付き文字<TABLE>･･････････････････テーブル（表）を作成<TBODY>･･････････････････テーブル（表）の「ボディ部分」定義<TD>･････････････････････テーブル（表）のデータセルを作成する<TEXTAREA>･･･････････････複数行の入力フィールドを作成<TFOOT>･･････････････････テーブル（表）の「フッタ行」を定義<TH>･････････････････････テーブル（表）の見出しセルを作成する<THEAD>･･････････････････テーブル（表）の「ヘッダ行」を定義<TITLE>･･････････････････文書にタイトルをつける<TR>･････････････････････テーブル（表）の横方向の一行を定義<TT>･････････････････････等幅フォントで表示する <U>･･････････････････････下線（アンダーライン）<UL>･････････････････････順序のないリスト<VAR>････････････････････変数や引数であることを示す <WBR>[NNのみ]････････････<NOBR>内で改行しても良い位置を指定<XMP>････････････････････ソースをそのまま表示する <!DOCTYPE>･･･････････････ドキュメントタイプ宣言<!-- -->･･････････････････ソース中にコメント*****************************************************【庶事所感】時間がかかるかも知れないのですが、それぞれのタグやスタイルから参照でき、目的からタグやスタイルを参照できるようなページを作りたいと考えています。いつになることやら（＞＜）*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.06.17
コメント(6)
-
多忙のため･･･
日記をいささかサボってしまいました（＞＜）・・・ひと段落したので、また書かなければ（;大汗）HTMLタグ、スタイルとも「楽天広場」で使えるものはほとんど記述したので、リファレンス用の下書きとその他の日記をまた書き始めたいと思います。管理人不在時にもかかわらず多数の方にご訪問いただきましてまことにありがとうございましたｍ（＿＿）ｍ
2005.06.16
コメント(10)
-
スタイルシート（39）
スタイルシート>>margin: ***;////////////////////////////////////////////////////////////////////margin は、マージン（外側の余白）を指定するプロパティです。HTMLタグのテーブルやスタイルシートのボックス等でも使いますが、指定した要素の周りとの余白を設けてその表示幅を指定してあげます。ですのでこれを、img（イメージタグ）にスタイル指定をすると、画像の周囲にマージンを入れることができます。--------------------------------------------------------------------■margin: ***;したがってborderの指定はボックスの指定と同じ要領ですので、スタイルシート（22）スタイルシート>>基本>>ボックス>>マージンもあわせて参照していただけるとわかりやすいと思います。【margin: ***;で指定できる単位】□length（単位で指定する場合） 相対値指定の単位[em:フォントの大きさ] [ex:小文字の高さ] [px:ピクセル] 絶対値指定の単位[in:インチ=2.54cm] [cm:センチメートル] [mm:ミリメートル] [pt:ポイント=1/72in] [pc:ピカ=12pt]□percentage（パーセンテージで指定する場合）□auto（自動）--------------------------------------------------------------------▲直接指定の記述方法<img src="画像ファイル.gifや.jpgなど" ALT="○" width="○" height="○" style="float: left; margin: ○px ○px;">【marginなし】浜田省吾4年ぶりの待望のオリジナル・ニュー・アルバム！会心のロック・アルバムです！！AIDOから30年を迎え、来年にはソロ・デビュー30周年を迎える浜田省吾。絶賛発売中のシングル『光と影の季節』、そして2005/6/8発売のシングル『I am a father』に続いて、『SAVE OUR SHIP』から約4年ぶりの待望のオリジナル・ニュー・アルバムの登場です。少年の頃に恋したロックへの思いを込めて、“ひと言で言うと「初心に帰る」”それでいて“またひとつ新しいドアを開けた感じ”と本人が語る今作、主人公の男達の日々の中にある“光と陰”、その一瞬一瞬を切り取った、情景豊かな浜田省吾ならではのロックアルバム。2005年秋からは、これも約4年振りとなる、全国アリーナ・ツアー（全10箇所26公演、年内）もスタート。今年から30周年を迎える来年にかけて、浜田省吾から目が離せない！！【W購入施策】2005/8/31発売DVD『SHOGO HAMADA Visual Collection "Flash and Shadow"』（SEBL38～39）との応募抽選特典あり【margin: 10px 10px;】浜田省吾4年ぶりの待望のオリジナル・ニュー・アルバム！会心のロック・アルバムです！！AIDOから30年を迎え、来年にはソロ・デビュー30周年を迎える浜田省吾。絶賛発売中のシングル『光と影の季節』、そして2005/6/8発売のシングル『I am a father』に続いて、『SAVE OUR SHIP』から約4年ぶりの待望のオリジナル・ニュー・アルバムの登場です。少年の頃に恋したロックへの思いを込めて、“ひと言で言うと「初心に帰る」”それでいて“またひとつ新しいドアを開けた感じ”と本人が語る今作、主人公の男達の日々の中にある“光と陰”、その一瞬一瞬を切り取った、情景豊かな浜田省吾ならではのロックアルバム。2005年秋からは、これも約4年振りとなる、全国アリーナ・ツアー（全10箇所26公演、年内）もスタート。今年から30周年を迎える来年にかけて、浜田省吾から目が離せない！！【W購入施策】2005/8/31発売DVD『SHOGO HAMADA Visual Collection "Flash and Shadow"』（SEBL38～39）との応募抽選特典あり【margin: 2em 3em;】浜田省吾4年ぶりの待望のオリジナル・ニュー・アルバム！会心のロック・アルバムです！！AIDOから30年を迎え、来年にはソロ・デビュー30周年を迎える浜田省吾。絶賛発売中のシングル『光と影の季節』、そして2005/6/8発売のシングル『I am a father』に続いて、『SAVE OUR SHIP』から約4年ぶりの待望のオリジナル・ニュー・アルバムの登場です。少年の頃に恋したロックへの思いを込めて、“ひと言で言うと「初心に帰る」”それでいて“またひとつ新しいドアを開けた感じ”と本人が語る今作、主人公の男達の日々の中にある“光と陰”、その一瞬一瞬を切り取った、情景豊かな浜田省吾ならではのロックアルバム。2005年秋からは、これも約4年振りとなる、全国アリーナ・ツアー（全10箇所26公演、年内）もスタート。今年から30周年を迎える来年にかけて、浜田省吾から目が離せない！！【W購入施策】2005/8/31発売DVD『SHOGO HAMADA Visual Collection "Flash and Shadow"』（SEBL38～39）との応募抽選特典あり【margin: 3% 4%;】浜田省吾4年ぶりの待望のオリジナル・ニュー・アルバム！会心のロック・アルバムです！！AIDOから30年を迎え、来年にはソロ・デビュー30周年を迎える浜田省吾。絶賛発売中のシングル『光と影の季節』、そして2005/6/8発売のシングル『I am a father』に続いて、『SAVE OUR SHIP』から約4年ぶりの待望のオリジナル・ニュー・アルバムの登場です。少年の頃に恋したロックへの思いを込めて、“ひと言で言うと「初心に帰る」”それでいて“またひとつ新しいドアを開けた感じ”と本人が語る今作、主人公の男達の日々の中にある“光と陰”、その一瞬一瞬を切り取った、情景豊かな浜田省吾ならではのロックアルバム。2005年秋からは、これも約4年振りとなる、全国アリーナ・ツアー（全10箇所26公演、年内）もスタート。今年から30周年を迎える来年にかけて、浜田省吾から目が離せない！！【W購入施策】2005/8/31発売DVD『SHOGO HAMADA Visual Collection "Flash and Shadow"』（SEBL38～39）との応募抽選特典あり*****************************************************【庶事所感】ちょっとここのところ物入りになりそうです（＞＜）それは・・・浜田省吾さん関係なんですが、「光と影の季節」（single） 2005.04.13 「I am a father」（single） 2005.06.08 「My First Love」（album） 2005.07.06 「WE ARE STILL ON THE ROAD.」（DVD） 2005.08.31 「ROAD OUT "MOVIE"」（DVD） 2005.08.31 「ON THE ROAD"Films"」（DVD） 2005.08.31 「My First Love」（album） 2005.08.31 「SHOGO HAMADA Visual Collection "Flash ＆ Shadow"」（DVD） 2005.08.31 と立て続けに発売･･･「WE ARE STILL ON THE ROAD.」「ROAD OUT "MOVIE"」「ON THE ROAD"Films"」は昔発売したもののリプライスDVDなのです（;･･･）中身は同じだけど、ジャケットが違うみたい、どうしよう買おうか買うまいか･･･そして「My First Love」の八月発売のものはアナログレコードなんです･･･うちにはプレーヤーなんてとっくのとうに無くなってありませんが･･･どうしよう買おうか買うまいか･･･シングル発売されたものがアルバムに収録されていて、シングルは買わない、なんていうのはよくあるのかも知れませんが、たいていはカップリングの曲はシングルCDにしかなかったりして、やっぱり買うのですが、まったく同じものとは･･･そういえば･･･サザンなんて同一音源の収録も多いものなぁ･･･*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.06.11
コメント(8)
-
スタイルシート（38）
スタイルシート>>border: ***;////////////////////////////////////////////////////////////////////border は、境界線を指定するプロパティです。HTMLタグのテーブルやスタイルシートのボックス等でも使いますが、指定した要素の周りとの境目を設けてその表示方法を指定してあげます。ですのでこれを、img（イメージタグ）にスタイル指定をすると、画像の枠に線をつけることができます。--------------------------------------------------------------------■border: ***;したがってborderの指定はボックスの指定と同じ要領ですので、スタイルシート（24）スタイルシート>>基本>>ボックス>>ボーダーもあわせて参照していただけるとわかりやすいと思います。【ボーダー(境界線)borderで指定できること「ボーダーの三指定」】■border-width: ***; border-***-width: ***; 枠線の太さを指定する■border-style: ***; border-***-style: ***; 枠線の種類を指定する■border-color: ***; border-***-color: ***; 枠線の色を指定する■border: ***; border-***: ***; 枠線の設定をひとまとめに行う--------------------------------------------------------------------□指定なし<p><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100">指定なしです</p>表示例↓こんな感じですね（＾＾）指定なしです□thin細（style="border: thin dotted blue;"）<p><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="border: thin dotted blue;>□thin細</p>表示例↓こんな感じですね（＾＾）□thin細□medium中（style="border: medium dashed blue;"）<p><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="border: medium dashed blue;">□medium中</p>表示例↓こんな感じですね（＾＾）□medium中□thick太（style="border: thick solid blue;"）<p><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="border: thick solid blue;">□thick太</p>表示例↓こんな感じですね（＾＾）□thick太--------------------------------------------------------------------□none（style="border: 5px none LimeGreen;"）<p><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="border: 5px none LimeGreen;">□none</p>表示例↓こんな感じですね（＾＾）□none□hidden（style="border: 5px hidden LimeGreen;"）<p><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="border: 5px hidden LimeGreen;">□hidden</p>表示例↓こんな感じですね（＾＾）□hidden□solid 実線（style="border: 5px solid LimeGreen;"）<p><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="border: 5px solid LimeGreen;">□solid 実線</p>表示例↓こんな感じですね（＾＾）□solid 実線□dotted 点線（style="border: 5px dotted LimeGreen;"）<p><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="border: 5px dotted LimeGreen;">□dotted 点線</p>表示例↓こんな感じですね（＾＾）□dotted 点線□dashed 破線（style="border: 5px dashed LimeGreen;"）<p><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="border: 5px dashed LimeGreen;">□dashed 破線</p>表示例↓こんな感じですね（＾＾）□dashed 破線□double 2重線（style="border: 5px double LimeGreen;"）<p><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="border: 5px double LimeGreen;">□double</p>表示例↓こんな感じですね（＾＾）□double□outset 凸（style="border: 5px outset LimeGreen;"）<p><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="border: 5px outset LimeGreen;">□outset 凸</p>表示例↓こんな感じですね（＾＾）□outset 凸□inset 凹（style="border: 5px inset LimeGreen;"）<p><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="border: 5px inset LimeGreen;">□inset 凹</p>表示例↓こんな感じですね（＾＾）□inset 凹□ridge 山（style="border: 5px ridge LimeGreen;"）<p><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="border: 5px ridge LimeGreen;">□ridge 山</p>表示例↓こんな感じですね（＾＾）□ridge 山□groove 谷（style="border: 5px groove LimeGreen;"）<p><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="border: 5px groove LimeGreen;">□groove 谷</p>表示例↓こんな感じですね（＾＾）□groove 谷*****************************************************【庶事所感】浜田省吾のオフィシャルブログがジオシティズで公開されているのですが、昨日はけっこう一所懸命関連のブログを探してみて廻りました（＾＾）やっぱりブログ（日記）の面白さは、リアルタイムにニアリーイコールだからということがありそうに思いました。「今だから」、とか「ここだけの」とかいった意味で、ブログの特徴を生かしたホームページができるのであって、普遍的な内容の記事ならブログでなくともいいのだと思います。という意味で、このブログはブログ失格なんだなぁ（＞＜）と解っていながら再認識してしまいました。*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.06.10
コメント(10)
-
スタイルシート（37）
スタイルシート>>zoom: ***;////////////////////////////////////////////////////////////////////zoomプロパティは、Internet Explorerが独自に追加したプロパティで、指定要素(画像)を拡大表示する際に使用します。 --------------------------------------------------------------------■zoom: ***;□number･･･拡大率を数値で指定します。1.0が標準サイズです。 □percentage･･･拡大率を％値で指定します。100％が標準サイズです。 □normal･･･標準サイズで表示します。 ----------------------------------------------------【標準】<p><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100">指定なしです表示例↓こんな感じですね（＾＾）指定なしです ----------------------------------------------------【数値で指定】<p><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="zoom: 0.5;">zoom: 0.5;の指定です</p>表示例↓こんな感じですね（＾＾）zoom: 0.5;の指定です<p><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="zoom: 1;">zoom: 1;の指定です</p>表示例↓こんな感じですね（＾＾）zoom: 1;の指定です<p><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="zoom: 1.5;">zoom: 1.5;の指定です</p>表示例↓こんな感じですね（＾＾）zoom: 1.5;の指定です ----------------------------------------------------【％値で指定】<p><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="zoom: 70%;">zoom: 70%;の指定です</p>表示例↓こんな感じですね（＾＾）zoom: 70%;の指定です<p><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="zoom: 90%;">zoom: 90%;の指定です</p>表示例↓こんな感じですね（＾＾）zoom: 90%;の指定です<p><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="zoom: 170%;">zoom: 170%;の指定です</p>表示例↓こんな感じですね（＾＾）zoom: 170%;の指定です ----------------------------------------------------【normal】<p><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="zoom: normal;">zoom: normal;の指定です</p>表示例↓こんな感じですね（＾＾）zoom: normal;の指定です*****************************************************【庶事所感】やっぱり昨夜は、サッカーを見ました。自分がやっているわけではないのだけれど、不思議なもので嬉しいと思うものです。あくまでも代表選手たちが頑張ったのだし、凄いのだけれど（＾＾）ま、よしとしておきましょうしかし･･･予選通過も決まっていないときから、ドイツでのチケットは売り切れ！どうなってるの？？？*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.06.09
コメント(6)
-
スタイルシート（36）
スタイルシート>>フィルタ ■shadow() ■dropshadow() ■blur() ■glow() ■wave()////////////////////////////////////////////////////////////////////今回の日記でフィルタは終わりです。自分のパソコンで見て、楽天広場では効果が確認できなかった残りのフィルタたちです（＞＜）今回のサンプルフィルターサンプル--------------------------------------------------------------------【フィルタなしの状態】<img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100">表示例↓こんな感じですね（＾＾）<div style="font: bold 20pt sans-serif; width: 100%;">アクセスアップのでめらら</div>表示例↓こんな感じですね（＾＾）アクセスアップのでめらら ----------------------------------------------------■shadow() ･･･やわらかい影をつけてくれますfilter: shadow(color=影色, direction=角度); } □color 影の色□direction 影の方向（45度単位：0=上、45=右上、90=右、135=右下、180=下、225=左下、270=左、315=左上）<div style="width: 100%; padding-bottom: 10px; filter: shadow(color=blue, direction=135);"><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100"></div>表示例↓こんな感じですね（＾＾）<div style="font: bold 20pt sans-serif; width: 100%; padding-bottom: 10px; filter: shadow(color=blue, direction=135);">アクセスアップのでめらら</div>表示例↓こんな感じですね（＾＾）アクセスアップのでめらら ----------------------------------------------------■dropshadow() ･･･シャープな影をつけてくれますfilter: dropshadow(color=影色, offx=左右, offy=上下, positive=反転);□color 影の色□offx（影の左右の位置（ピクセル：整数）□offy（影の上下の位置□positive 影の反転（0（false） = 反転、1（true） = 通常）<div style="width: 100%; padding-bottom: 30px; filter: dropshadow(color=#C0C0C0, offx=20, offy=30);"><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100"></div>表示例↓こんな感じですね（＾＾）<div style="font: bold 20pt sans-serif; width: 100%; padding: 5px 10px; filter: dropshadow(color=#C0C0C0, positive=false);">アクセスアップのでめらら</div>表示例↓こんな感じですね（＾＾） アクセスアップのでめらら ----------------------------------------------------■blur() ･･･「ブレ」の効果を表示しますfilter: blur(add=true, direction=90, strength=10);□add 元画像をブレに重ねるかどうか（0（false） = 重ねない、1（true） = 重ねる）□direction ブレの方向（45度単位：0=上、45=右上、90=右、135=右下、180=下、225=左下、270=左、315=左上）□strength ブレの距離（ピクセル） <img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="filter: blur(direction=0, strength=30);">表示例↓こんな感じですね（＾＾）<div style="font: bold 20pt sans-serif; width: 100%; filter: blur(add=false, direction=90, strength=15);">アクセスアップのでめらら</div>表示例↓こんな感じですね（＾＾）アクセスアップのでめらら ----------------------------------------------------■glow() ･･･発光しているような効果を表示しますfilter: glow(color=光の色, strength=100); □color 光の色□strength 光の強さ（0（弱） ～ 254（強））<div style="width: 100%; padding: 20px; filter: glow(color=#FFFF00, strength=30);"><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100"></div>表示例↓こんな感じですね（＾＾）<div style="font: bold 20pt sans-serif; width: 100%; padding: 20px; filter: glow(color=red, strength=20);">アクセスアップのでめらら</div>表示例↓こんな感じですね（＾＾）アクセスアップのでめらら ----------------------------------------------------■wave() ･･･波状に表示しますfilter: wave(add=false, freq=3, strength=5, lightstrength=30, phase=50); □add 元画像を波に重ねるかどうか（0（false） = 重ねない、1（true） = 重ねる）□freq 波の数（数値） □strength 波の横幅（数値） □lightstrength 光の強さ（0（弱） ～ 100（強））□phase 波の開始位置（0 ～ 100）<div style="width: 100%; padding-left: 10px; filter: wave(strength=5, lightstrength=50, phase=75);"><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100"></div>表示例↓こんな感じですね（＾＾）<div style="font: bold 20pt sans-serif; color: red; width: 100%; padding-left: 10px; filter: wave(freq=1, strength=3, lightstrength=50);">アクセスアップのでめらら</div>表示例↓こんな感じですね（＾＾）アクセスアップのでめらら*****************************************************【庶事所感】楽天広場のページにInfoseekマネーの株価の推移が3件まで表示できるようになりました。･･･流行っているのかなぁ、「株」わたくしの知っている方々はことごとく株で損をした方ばかりです。いっとき利益を得ることがあっても、減らした回数が多く、証券会社への手数料で凹んでいる方ばかりです。ほかのことでもそうでしょうが、本当に儲かっていらっしゃるのはほんの少しの方なのかも知れませんね。*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.06.08
コメント(11)
-
スタイルシート（35）
スタイルシート>>フィルタ ■chroma(透過)と■mask(マスク)////////////////////////////////////////////////////////////////////【filter: ***(***); で指定できる属性一覧】○■alpha() ･･･透明・半透明・透明グラデーションの効果を表示します×■shadow() ･･･やわらかい影をつけてくれます×■dropshadow() ･･･シャープな影をつけてくれます×■blur() ･･･「ブレ」の効果を表示します×■glow() ･･･発光しているような効果を表示します×■wave() ･･･波状に表示します△■fliph() ･･･左右反転します△■flipv() ･･･上下反転します○■xray() ･･･Ｘ線写真のような表示をします○■invert() ･･･ポジ・ネガのように色の反転をします△■gray() ･･･白黒写真に変換します×■chroma() ･･･特定した色だけを透過表示します△■mask() ･･･透過部分を特定の色で塗りつぶし、不透明の部分の色を透明にします※複数のフィルター属性を半角スペースで区切って記述することで一度に指定することもできます。楽天広場では表示されないフィルター効果もありますので、注意が必要ですね（＞＜）今回のサンプルフィルターサンプル--------------------------------------------------------------------▲直接指定の記述方法【フィルタなしの状態】<img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/16.gif" alt="アクセスアップのでめらら" width="150" height="100">表示例↓こんな感じですね（＾＾）<div style="font: bold 20pt sans-serif; width: 100%;">アクセスアップの<span style="color: red;">でめらら</SPAN></div>表示例↓こんな感じですね（＾＾）アクセスアップのでめらら--------------------------------------------------------------------■chroma() ･･･特定した色だけを透過表示します【透過】□画像：黒い部分を透過しました<img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/16.gif" alt="アクセスアップのでめらら" width="150" height="100" style="filter: chroma(color=#000000);">表示例↓こんな感じですね（＾＾）□文字：赤い文字を透過しました<div style="font: bold 20pt sans-serif; width: 100%; filter: chroma(color=red);">アクセスアップの<span style="color: red;">でめらら</SPAN>の赤を透過</div>表示例↓こんな感じですね（＾＾）アクセスアップのでめららの赤を透過--------------------------------------------------------------------▲直接指定の記述方法【フィルタなしの状態】<img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100">表示例↓こんな感じですね（＾＾）<div style="font: bold 20pt sans-serif; width: 100%;">かわいいトマト</div>表示例↓こんな感じですね（＾＾）かわいいトマト--------------------------------------------------------------------△■mask() ･･･透過部分を特定の色で塗りつぶし、不透明の部分の色を透明にします【マスク】□画像：黒い部分を透過しました<img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="filter: mask(color=yellow);>表示例↓こんな感じですね（＾＾）<div style="font: bold 20pt sans-serif; width: 100%; filter: mask(color=#0000FF);">かわいいトマト</div>表示例↓こんな感じですね（＾＾）かわいいトマト*****************************************************【庶事所感】楽天さんのマークが変わりましたね。・・・う～ん、何だかＲの文字が真ん中にあってちょっと安っぽくなったように感じているのはわたくしだけなのでしょうか！？わたくしは前のほうがよかったなぁ（＞＜）*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.06.07
コメント(6)
-
スタイルシート（34）
スタイルシート>>filter: xray();（Ｘ線）filter: invert();（反転）filter: gray();（白黒）////////////////////////////////////////////////////////////////////昨日の続きです（＾＾）--------------------------------------------------------------------【filter: ***(***); で指定できる属性一覧】○■alpha() ･･･透明・半透明・透明グラデーションの効果を表示します×■shadow() ･･･やわらかい影をつけてくれます×■dropshadow() ･･･シャープな影をつけてくれます×■blur() ･･･「ブレ」の効果を表示します×■glow() ･･･発光しているような効果を表示します×■wave() ･･･波状に表示します△■fliph() ･･･左右反転します△■flipv() ･･･上下反転します○■xray() ･･･Ｘ線写真のような表示をします○■invert() ･･･ポジ・ネガのように色の反転をします△■gray() ･･･白黒写真に変換します×■chroma() ･･･特定した色だけを透過表示します△■mask() ･･･透過部分を特定の色で塗りつぶし、不透明の部分の色を透明にします※複数のフィルター属性を半角スペースで区切って記述することで一度に指定することもできます。楽天広場では表示されないフィルター効果もありますので、注意が必要ですね（＞＜）フィルターサンプル--------------------------------------------------------------------▲直接指定の記述方法【フィルタなしの状態】 <img src="画像のファイル名" alt="" width="150" height="150">表示例↓こんな感じですね（＾＾）<div style="font: bold 20pt sans-serif; width: 100%;">浜田省吾</div>表示例↓こんな感じですね（＾＾）浜田省吾 --------------------------------------------------------------------filter: xray();【Ｘ線写真】 <img src="画像のファイル名" alt="" width="150" height="150" style="="filter: xray();">表示例↓こんな感じですね（＾＾）<div style="font: bold 20pt sans-serif; width: 10em; filter: xray();">浜田省吾</div>表示例↓こんな感じですね（＾＾）浜田省吾--------------------------------------------------------------------filter: invert();【色を反転】 <img src="画像のファイル名" alt="" width="150" height="150" style="filter: invert();">表示例↓こんな感じですね（＾＾）<div style="font: bold 20pt sans-serif; width: 10em; filter: invert();">浜田省吾</div>表示例↓こんな感じですね（＾＾）浜田省吾--------------------------------------------------------------------filter: gray();【白黒】 <img src="画像のファイル名" alt="" width="150" height="150" style="filter: gray();">表示例↓こんな感じですね（＾＾）<div style="font: bold 20pt sans-serif; color: red; width: 10em; filter: fliph() flipv();">浜田省吾</div>表示例↓こんな感じですね（＾＾）浜田省吾*****************************************************【庶事所感】『厚生労働省臓器移植対策室は６日午後、骨髄バンクを運営する同省所管の財団法人「骨髄移植推進財団」（東京都千代田区）に臨時の立ち入り検査を実施した。財団は、国の指針を大幅に上回る約５億円の内部留保資産を抱えているとされ、その使途も含めた財団の運営方針や財務管理状況などの実態を把握するのが目的。３年に１度の定期検査と別に検査に入るのは、きわめて異例だ。内部留保資産については、患者らが以前から、高額な患者負担金の引き下げに充てることなどを求めていた。』直接ではないのですが、列車の運転士さんも、骨髄バンクさんもひとの命を扱う、お仕事なのにねぇ･･･などと今朝は、愚にもつかないことを考えていたのでありました。*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.06.06
コメント(4)
-
スタイルシート（33）
スタイルシート>>filter: fliph();とfilter: flipv();（左右反転と上下反転）////////////////////////////////////////////////////////////////////わたくしのパソコンの使用環境がIE6.0ですので、NNやその他のブラウザをお使いのかたがどう見えているのかがわかりませんしそれぞれ、楽天広場では効果の出ないfilterプロパティもあるようですのでわたくしの環境下で見えていないものに印をつけました。別途これらも整理はしていきたいと思います。効果が出て表示されているかた、ぜひ教えてくださいネ（＾＾）--------------------------------------------------------------------【filter: ***(***); で指定できる属性一覧】○■alpha() ･･･透明・半透明・透明グラデーションの効果を表示します×■shadow() ･･･やわらかい影をつけてくれます×■dropshadow() ･･･シャープな影をつけてくれます×■blur() ･･･「ブレ」の効果を表示します×■glow() ･･･発光しているような効果を表示します×■wave() ･･･波状に表示します△■fliph() ･･･左右反転します△■flipv() ･･･上下反転します○■xray() ･･･Ｘ線写真のような表示をします○■invert() ･･･ポジ・ネガのように色の反転をします△■gray() ･･･白黒写真に変換します×■chroma() ･･･特定した色だけを透過表示します△■mask() ･･･透過部分を特定の色で塗りつぶし、不透明の部分の色を透明にします※複数のフィルター属性を半角スペースで区切って記述することで一度に指定することもできます。楽天広場では表示されないフィルター効果もありますので、注意が必要ですね（＞＜）フィルターサンプル--------------------------------------------------------------------▲直接指定の記述方法【フィルタなしの状態】 <img src="画像のファイル名" alt="" width="150" height="150">表示例↓こんな感じですね（＾＾）<div style="font: bold 20pt sans-serif; width: 100%;">浜田省吾</div>表示例↓こんな感じですね（＾＾）浜田省吾 --------------------------------------------------------------------filter: fliph();【左右に反転】 <img src="画像のファイル名" alt="" width="150" height="150" style="filter: fliph();">表示例↓こんな感じですね（＾＾）<div style="font: bold 20pt sans-serif; width: 10em; filter: fliph();">浜田省吾</div>表示例↓こんな感じですね（＾＾）浜田省吾※文字は反転して見えないかもしれません（＞＜）--------------------------------------------------------------------filter: flipv();【上下に反転】 <img src="画像のファイル名" alt="" width="150" height="150" style="filter: flipv();">表示例↓こんな感じですね（＾＾）<div style="font: bold 20pt sans-serif; width: 10em; filter: flipv();">浜田省吾</div>表示例↓こんな感じですね（＾＾）浜田省吾※文字は反転して見えないかもしれません（＞＜）--------------------------------------------------------------------【上下+左右反転】<img src="画像のファイル名" alt="" width="150" height="150" style="filter: fliph() flipv();">表示例↓こんな感じですね（＾＾）<div style="font: bold 20pt sans-serif; width: 10em; filter: fliph() flipv();">浜田省吾</div>表示例↓こんな感じですね（＾＾）浜田省吾※文字は反転して見えないかもしれません（＞＜）*****************************************************【庶事所感】え”～（＞＜）タレントさんと同じようにアナウンサーがテレビ番組のクイズに答えていました。･･･あんなに知識も無く、ことばも知らないでアナウンサーでいいのかぁ（＠o＠）ニュースだって意味もわからず読んでいるのだろうか・・・いや、そもそもテレビ局だって自分の会社の社員がこんなに低レベルですよ！なんて番組を作っていることが不思議？？？でも責任者のかただって、某ホリ○モンさんと揉めてたときに、「この人って、なんだかなぁ･･･」と思わされたものなぁ･･･お願いだから、いい加減なニュースなどを流さないで欲しいけれど･･･気のせいか「お詫びして、訂正いたします」のことばも非常に多い気がします。*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.06.05
コメント(4)
-
スタイルシート（32）
スタイルシート>>filter: alpha();////////////////////////////////////////////////////////////////////filterプロパティは、Internet Explorerが独自に追加したプロパティで画像や文字に対して、影をつけたりグラデーションをかけたりいろいろな効果を表示することができます。（対応しないブラウザでは効果が表示されませんが画像や文字はデフォルト（標準）の状態で表示はされます）filterプロパティはDIV、SPAN、IMGなどをはじめ大抵のタグに対して指定することが可能です。DIVタグやSPANタグにフィルタを指定する場合は、width または height プロパティでサイズを指定しておく必要があります。（または position プロパティで absolute を指定しておきます。） --------------------------------------------------------------------【filter: ***(***); で指定できる属性】■alpha() ･･･透明・半透明・透明グラデーションの効果を表示します■shadow() ･･･やわらかい影をつけてくれます■dropshadow() ･･･シャープな影をつけてくれます■blur() ･･･「ブレ」の効果を表示します■glow() ･･･発光しているような効果を表示します■wave() ･･･波状に表示します■fliph() ･･･左右反転します■flipv() ･･･上下反転します■xray() ･･･Ｘ線写真のような表示をします■invert() ･･･ポジ・ネガのように色の反転をします■gray() ･･･白黒写真に変換します■chroma() ･･･特定した色だけを透過表示します■mask() ･･･透過部分を特定の色で塗りつぶし、不透明の部分の色を透明にします※複数のフィルター属性を半角スペースで区切って記述することで一度に指定することもできます。楽天広場では表示されないフィルター効果もありますので、注意が必要ですね（＞＜）フィルターサンプル--------------------------------------------------------------------■alpha() ･･･透明・半透明・透明グラデーションの効果を表示します□style ･･･透明グラデーションのスタイル（0=指定なし、1=線形、2=円形、3=方形）□opacity ･･･開始透明度（0[透明] ～ 100[不透明]）□finishopacity ･･･終了透明度（0[透明] ～ 100[不透明]）□startx ･･･水平開始位置□starty ･･･垂直開始位置□finishx ･･･水平終了位置□finishy ･･･垂直終了位置--------------------------------------------------------------------------------▲直接指定の記述方法【フィルタなしの状態】□画像<img src="画像のファイル名" alt="" width="150" height="150">表示例↓こんな感じですね（＾＾）□文字<div style="font: bold 20pt sans-serif; width: 100%;">浜田省吾</div>表示例↓こんな感じですね（＾＾）浜田省吾--------------------------------------------------------------------------------【グラデーションなし・半透明】□画像<img src="画像のファイル名" alt="" width="150" height="150" style="filter: alpha(style=0, opacity=30);">表示例↓こんな感じですね（＾＾）□文字<div style="font: bold 20pt sans-serif; width: 100%; filter: alpha(style=0, opacity=30);">浜田省吾</div>表示例↓こんな感じですね（＾＾）浜田省吾--------------------------------------------------------------------------------【線形グラデーション・方向・位置】□画像・style=線形・開始=透明度0・終了=透明度100(不透明)<img src="画像のファイル名" alt="" width="150" height="150" style="filter: alpha(style=1, opacity=0, finishopacity=100);">表示例↓こんな感じですね（＾＾）・style=線形・開始=透明度100(不透明)・終了=透明度0<img src="画像のファイル名" alt="" width="150" height="150" style="filter: alpha(style=1, opacity=100, finishopacity=0);">表示例↓こんな感じですね（＾＾）・style=線形・開始=透明度100(不透明)・終了=透明度0・開始位置(ｘ=60,y=0)・終了位置(x=60,y=120)<img src="画像のファイル名" alt="" width="150" height="150" style="filter: alpha(style=1, opacity=100, finishopacity=0, startx=60, starty=0, finishx=60, finishy=120);">表示例↓こんな感じですね（＾＾）・style=線形・開始=透明度0・終了=透明度100(不透明)・開始位置(ｘ=0,y=0)・終了位置(x=120,y=120)<img src="画像のファイル名" alt="" width="150" height="150" style="filter: alpha(style=1, opacity=0, finishopacity=100, startx=0, starty=0, finishx=170, finishy=120);">表示例↓こんな感じですね（＾＾）□文字<div style="font: bold 20pt sans-serif; width: 10em; filter: alpha(style=1, opacity=0, finishopacity=100);">浜田省吾</div>表示例↓こんな感じですね（＾＾）浜田省吾--------------------------------------------------------------------------------【円形グラデーション・方向】□画像・style=円形・開始=透明度100<img src="画像のファイル名" alt="" width="150" height="150" style="filter: alpha(style=2, opacity=100);">表示例↓こんな感じですね（＾＾）・style=円形・開始=透明度0・終了=透明度100(不透明)<img src="画像のファイル名" alt="" width="150" height="150" style="filter: alpha(style=2, opacity=0, finishopacity=100);">表示例↓こんな感じですね（＾＾）□文字<div style="font: bold 20pt sans-serif; width: 10em; filter: alpha(style=2, opacity=100);">浜田省吾</div>表示例↓こんな感じですね（＾＾）浜田省吾--------------------------------------------------------------------------------【方形グラデーション・方向】□画像・style=方形・開始=透明度100<img src="画像のファイル名" alt="" width="150" height="150" style="filter: alpha(style=3, opacity=100);">・style=方形・開始=透明度0・終了=透明度100(不透明)<img src="画像のファイル名" alt="" width="150" height="150" style="filter: alpha(style=3, opacity=0, finishopacity=100);">□文字<div style="font: bold 20pt sans-serif; width: 10em; filter: alpha(style=3, opacity=100);">浜田省吾</div>表示例↓こんな感じですね（＾＾）浜田省吾*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.06.04
コメント(10)
-
スタイルシート（31）
スタイルシート>>フィルター////////////////////////////////////////////////////////////////////filterプロパティは、Internet Explorerが独自に追加したプロパティで、指定する値により、画像やテキストに様々な「フィルタ効果」を与えます。したがってNNなどをはじめブラウザによっては正しく表示できないケースも多いのですが･･･取り敢えず本日は試しに載せてみます。解説は明日以降ということで（＞＜）楽天広場外の比較ページみなさんがどう見えているのか教えていただけると嬉しいです。半透明・グラデーションalpha()浜田省吾やわらかい影shadow()浜田省吾シャープな影dropshadow()浜田省吾ブレblur()浜田省吾発光glow()浜田省吾波状wave()浜田省吾左右反転fliph()浜田省吾上下反転flipv()浜田省吾Ｘ線写真xray()浜田省吾色の反転invert()浜田省吾白黒gray()浜田省吾透過chroma()浜田省吾マスクmask()にゃおん*****************************************************【庶事所感】このごろ焼肉やステーキなどが食べたいと思わなくなってきました。子供の頃から魚は大っ嫌いで、肉しか食べなかったこのわたくしが、いまやお魚のほうが好きなのです･･･気がつくとそうなっていました。ひとのからだって不思議ですね。*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.06.03
コメント(6)
-
スタイルシート（30）
スタイルシート>>リスト////////////////////////////////////////////////////////////////////箇条書き表示に関するスタイルです。リストタグの指定方法よりより細かな指定が可能になってきます。--------------------------------------------------------------------■marker-offset(ほとんどのブラウザで未対応です＞＜)■list-style-type: ***; マークの種類を指定する ■list-style-image: url(***); マークを画像で表示する ■list-style-position: ***; マークの位置を指定する ■list-style: ***; マークの設定をひとまとめに行う --------------------------------------------------------------------■list-style-type: ***; マークの種類を指定する 【list-style-type: ***;に使用できる値】□disc･･･黒丸（デフォルト）□circle･･･白丸□square･･･四角□decimal･･･数字□※decimal-leading-zero･･･01,02,03,04,...□lower-roman･･･小文字ローマ数字i,ii,iii,iv,v,...□upper-roman･･･大文字ローマ数字I,II,III,IV,V,...□※lower-greek･･･小文字ギリシャ文字α,β,γ,δ,ε,ζ,η...□lower-alpha･･･小文字アルファベットa,b,c,d,...(=※lower-latin）□upper-alpha･･･大文字アルファベットA,B,C,D,...(=※upper-latin）□※hebrew･･･ヘブライ数字□※armenian･･･アルメニア数字□※georgian･･･グルジア数字□※cjk-ideographic･･･漢数字 (CJK=Chinese, Japanese, Korean)□※hiragana･･･あ,い,う,え,...□※katakana･･･ア,イ,ウ,エ,...□※hiragana-iroha･･･い,ろ,は,に,...□※katakana-iroha･･･イ,ロ,ハ,ニ,...□none･･･マークなし□inherit･･･※ブラウザの設定や閲覧環境によって表示できない場合も多いです--------------------------------------------------------------------▲直接指定の記述方法<ul style="list-style-type: disc;"><li>テンプレートMENU</li><li>楽天HTML一覧</li><li>でめららTipsMENU</li><li>アクセスアップMENU</li></ul>それぞれ↓こんな感じですね（＾＾）list-style-type: disc;黒丸テンプレートMENU楽天HTML一覧でめららTipsMENUアクセスアップMENU<ul style="list-style-type: circle;">list-style-type: circle;白丸テンプレートMENU楽天HTML一覧でめららTipsMENUアクセスアップMENU<ul style="list-style-type: square;">list-style-type: square;黒四角テンプレートMENU楽天HTML一覧でめららTipsMENUアクセスアップMENU<ul style="list-style-type: decimal;">list-style-type: decimal;算用数字テンプレートMENU楽天HTML一覧でめららTipsMENUアクセスアップMENU<ul style="list-style-type: decimal-leading-zero;">list-style-type: decimal-leading-zero;先頭に0をつけた算用数字<ul style="list-style-type: lower-roman;">list-style-type: lower-roman;小文字のローマ数字テンプレートMENU楽天HTML一覧でめららTipsMENUアクセスアップMENU<ul style="list-style-type: upper-roman;">list-style-type: upper-roman;大文字のローマ数字テンプレートMENU楽天HTML一覧でめららTipsMENUアクセスアップMENU<ul style="list-style-type: lower-greek;">list-style-type: lower-greek;小文字のギリシャ文字<ul style="list-style-type: lower-alpha;">list-style-type: lower-alpha;小文字のアルファベットテンプレートMENU楽天HTML一覧でめららTipsMENUアクセスアップMENU<ul style="list-style-type: lower-latin;">list-style-type: lower-latin;小文字のアルファベット<ul style="list-style-type: upper-alpha;">list-style-type: upper-alpha;大文字のアルファベットテンプレートMENU楽天HTML一覧でめららTipsMENUアクセスアップMENU<ul style="list-style-type: upper-latin;">list-style-type: upper-latin;大文字のアルファベット<ul style="list-style-type: hebrew;">list-style-type: hebrew;ヘブライ数字<ul style="list-style-type: armenian;">list-style-type: armenian;アルメニア数字<ul style="list-style-type: georgian;">list-style-type: georgian;グルジア数字<ul style="list-style-type: cjk-ideographic;">list-style-type: cjk-ideographic;漢数字<ul style="list-style-type: hiragana;">list-style-type: hiragana;ひらがなのあいうえお順<ul style="list-style-type: katakana;">list-style-type: katakana;カタカナのアイウエオ順<ul style="list-style-type: hiragana-iroha;">list-style-type: hiragana-iroha;ひらがなのいろはにほへと順<ul style="list-style-type: katakana-iroha;">list-style-type: katakana-iroha;カタカナのイロハニホヘト順<ul style="list-style-type: none;">list-style-type: none;マーカーなしテンプレートMENU楽天HTML一覧でめららTipsMENUアクセスアップMENU--------------------------------------------------------------------■list-style-image: url(***); マークを画像で表示する<ul style="list-style-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/37.gif);">以下略↓こんな感じですね（＾＾）テンプレートMENU楽天HTML一覧でめららTipsMENUアクセスアップMENU<ul style="list-style-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/41.gif);">以下略↓こんな感じですね（＾＾）生まれたところを遠く離れてLOVE TRAIN Illumination MIND SCREEN --------------------------------------------------------------------■list-style-position: ***; マークの位置を指定する□outside … （領域の外側に表示）デフォルト □inside … （領域の内側に表示） <ul style="list-style-position: outside;"><li>テンプレートMENU</li><li>楽天HTML一覧</li><li>でめららTipsMENU</li><li>アクセスアップMENU</li></ul>↓こんな感じですね（＾＾）テンプレートMENU左のマークの位置に注目楽天HTML一覧左のマークの位置に注目でめららTipsMENU左のマークの位置に注目アクセスアップMENU左のマークの位置に注目<ul style="list-style-position: inside;">以下略↓こんな感じですね（＾＾）テンプレートMENU上のマークの位置に注目楽天HTML一覧上のマークの位置に注目でめららTipsMENU上のマークの位置に注目アクセスアップMENU上のマークの位置に注目--------------------------------------------------------------------■list-style: ***; マークの設定をひとまとめに行う<ul style="list-style:square url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/40.gif) inside;"><li>ShogoHamada 1stALBUM<br>「生まれたところを遠く離れて」</li><li>ShogoHamada 2ndALBUM<br>「LOVE TRAIN」</li><li>ShogoHamada 3rdALBUM<br>「Illumination」</li></ul>↓こんな感じですね（＾＾）ShogoHamada 1stALBUM「生まれたところを遠く離れて」ShogoHamada 2ndALBUM「LOVE TRAIN」ShogoHamada 3rdALBUM「Illumination」 *****************************************************【庶事所感】昨夜東京湾を震源地とする地震が以下の通りありました。5月28日の日記に書いたのですが、やっぱり雲と地震には因果関係があるように思います（＞＜）先日見たのはまさに東京湾方面から伸びる大きな三本の雲だったのです。2005年6月2日 1時20分 2005年6月2日 1時10分ごろ 東京湾 1 2005年6月1日 22時12分 2005年6月1日 22時2分ごろ 東京湾 1 2005年6月1日 20時49分 2005年6月1日 20時44分ごろ 東京湾 3 2005年6月1日 19時50分 2005年6月1日 19時40分ごろ 東京湾 2 2005年6月1日 19時16分 2005年6月1日 19時6分ごろ 東京湾 2 *****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.06.02
コメント(2)
-
スタイルシート（29）
スタイルシート>>基本>>ボックス>>float: ***;（回り込み）clear: ***;（回り込みの解除）////////////////////////////////////////////////////////////////////基本のボックス関連のスタイルはこれで終了です。ボックスが自由自在に作成でき、自由自在に配置できるようになりますとかなり面白いテンプレートを作ったり、ホームページのコンテンツのレイアウトができるようになると思います。--------------------------------------------------------------------■float: ***;「float」は浮かせるという意味かと思いますが、ページの中にボックスを浮かべるようなイメージをしていただくといいのかと思います。実際の効果としては続く文章や他の画像その他が回り込んで配置されますので、回り込みの作成ととらえることが出来ると思います。【float: ***;に使用できる値】□left･･･ボックスを左に、後に続く内容はその反対側の右に回り込みます□right･･･ボックスを右に、後に続く内容はその反対側の左に回り込みます□none･･･初期値、回り込みはありません--------------------------------------------------------------------▲直接指定の記述方法<div style="width: 100px; height: 100px; float: left; background-color: red;">左ボックス</div>続く文章<div style="width: 100px; height: 100px; float: right; background-color: blue;">右ボックス</div>続く文章<div style="width: 100px; height: 100px; float: none; background-color: green;">初期値ボックス</div>続く文章↓こんな感じですね（＾＾）左ボックス前人未踏の超ロングツアー“ON THE ROAD 2001”の魅力を余すことなく凝縮した永久保存版BOXセット（DVD２枚＋ＣＤ1枚）。1998～2000年のホールツアー、1999年夏の野外コンサート、2001年のアリーナツアー、2002年の20年振りの日本武道館公演から選りすぐりのライブ映像・音源をピックアップ。またDVDのデータ部分にはツアースケジュール及び全会場の演奏曲リスト等のデータと舞台裏の浜田省吾を追いかけた未公開映像等も収録した究極のライブドキュメント。限定盤、通常盤同時発売。 右ボックス'76年のデビュー以来、独自の世界を築き上げ、日本のロック界に大きな足跡を残してきた浜田省吾。本作は1996年2月にビデオで発売されてたライブ作品「ROAD OUT "MOVIE"」のDVD版。主に1994年の横浜アリーナ、みちのく湖畔でのライブ映像を中心に、このビデオのために新たに録音された楽曲も収録。DVD化にあたってはサウンドをリマスタリングしてのリリースとなっている。初期値ボックス1998年から2001年の4年間に渡った“ON THE ROAD2001”から厳選されたライブ映像を収録。ライブアーティスト浜田省吾のいわばライブ映像のベスト盤！！7/31発売DVD BOXには収録されなかった映像も収録！〔「MONEY」「君の名を呼ぶ」「もうひとつの土曜日」（武道館ヴァージョン）〕等10曲を含む全14曲・80分収録する豪華な内容です。 --------------------------------------------------------------------■clear: ***;（回り込みの解除）clear は、文字の回り込みを途中で解除するプロパティですfloat プロパティで left または right を指定している場合に使用します【clear: ***;に使用できる値】□left…左フロートボックスの右側にある文字の回り込みを解除します□right…右フロートボックスの左側にある文字の回り込みを解除します□both…右左両方のボックスの周りある文字の回り込みを解除します□none…解除しない（デフォルト）--------------------------------------------------------------------▲直接指定の記述方法<div style="width: 100px; height: 100px; float: left; background-color: red;">左ボックス</div>続く文章<br>改行しても回り込みの位置で表示されます<br style="clear: both;">回り込みが解除されボックスそのものから改行されます↓こんな感じですね（＾＾）左ボックス前人未踏の超ロングツアー“ON THE ROAD 2001”の魅力を余すことなく凝縮した永久保存版BOXセット（DVD２枚＋ＣＤ1枚）。1998～2000年のホールツアー、1999年夏の野外コンサート、2001年のアリーナツアー、2002年の20年振りの日本武道館公演から選りすぐりのライブ映像・音源をピックアップ。またDVDのデータ部分にはツアースケジュール及び全会場の演奏曲リスト等のデータと舞台裏の浜田省吾を追いかけた未公開映像等も収録した究極のライブドキュメント。限定盤、通常盤同時発売。 *****************************************************【庶事所感】googleのdanceが始まったようです（＞＜）バックリンクのチェックやキーワードでの表示順位が大きく動いています。シタバタするわけではないのですが、ページランクの設定や検索エンジンの結果表示がどのように変わってくるのか、ワクワクドキドキハラハラの数日になりそうです（＾＾）*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.06.01
コメント(2)
全23件 (23件中 1-23件目)
1
-
-
- 楽天アフィリエイト♪
- 【最大8TB増設も可能】11-in-1ドッキ…
- (2026-05-31 12:24:10)
-
-
-
- デジタル一眼レフカメラ
- 風邪治らん
- (2026-05-21 09:32:44)
-
-
-
- 花、風景の写真を撮るカメラとレンズ
- 寒風にも負けず水仙の花(1/26)
- (2026-02-02 14:22:42)
-
