全372件 (372件中 201-250件目)
-
スタイルシート（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)
-
スタイルシート（28）つづき
スタイルシート>>基本>>ボックス>>z-index: ***;（ボックスの重なりの順序を指定）////////////////////////////////////////////////////////////////////【ボックスの重なりの順序指定】複数のボックスを「position: ***;」で位置の指定をして任意の場所にボックスを表示する場合重なり合う順番を任意に指定することができます。--------------------------------------------------------------------■z-index: ***;positionで指定したボックスの重なりを指定するプロパティです。※したがって値 static では使用できません。【z-index: ***;に使用できる値】□intege･･･整数(－、0、＋符号は不要)ゼロを基準に数字が大きい程、上に表示されます□auto･･･デフォルト□inherit 親要素での指定を継承--------------------------------------------------------------------▲直接指定の記述方法順番を良く見てくださいね！<div style="width:500px; height:250px; background-color:black; border:#000000; position:relative"><div style="width:100px; height:100px; background-color:red; position:absolute; top:10px; left:10px; z-index: 1;">商品画像</div><div style="width:100px; height:100px; background-color:blue; position:absolute; top:30px; left:90px; z-index: 2;">商品画像</div><div style="width:100px; height:100px; background-color:green; position:absolute; top:50px; left:180px; z-index: 3;">商品画像</div><div style="width:100px; height:100px; background-color:yellow; position:absolute; top:70px; left:270px; z-index: 4;">商品画像</div><div style="width:100px; height:100px; background-color:orange; position:absolute; top:90px; left:360px; z-index: 5;">商品画像</div></div><div style="width:500px; height:250px; background-color:black; border:#000000; position:relative"><div style="width:100px; height:100px; background-color:red; position:absolute; top:10px; left:10px; z-index: 5;">商品画像</div><div style="width:100px; height:100px; background-color:blue; position:absolute; top:30px; left:90px; z-index: 3;">商品画像</div><div style="width:100px; height:100px; background-color:green; position:absolute; top:50px; left:180px; z-index: 1;">商品画像</div><div style="width:100px; height:100px; background-color:yellow; position:absolute; top:70px; left:270px; z-index: 2;">商品画像</div><div style="width:100px; height:100px; background-color:orange; position:absolute; top:90px; left:360px; z-index: 4;">商品画像</div></div>↓こんな感じですね（＾＾）*****************************************************【庶事所感】楽天トラベル見ながら･･･あぁ温泉に行きたいなぁ･･･と眺めておりました。関東近県にもけっこうたくさんの良さそうな温泉が･･･ゆっくり「湯」につかりたいなぁ（＾＾）*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.31
コメント(8)
-
スタイルシート（28）
スタイルシート>>基本>>ボックス>>position: ***;（ボックスの位置を指定）////////////////////////////////////////////////////////////////////【ボックスの位置の指定】スタイルのボックスで表示するメリットとしてHTMLタグではできないテキストや画像を任意の場所に表示することができるということがあげられます。ボックスを重ねて表示したりすることで変化のある表示画面ができます。--------------------------------------------------------------------■position: ***;positionはボックスの位置を指定するプロパティです。【position: ***;に使用できる値】□static･･･通常のボックスです。(デフォルト)□relative･･･通常の位置に対して相対的に指定することができます。続くボックスがあればこのボックスの位置を基準に位置が決まります。□absolute･･･絶対的な位置の指定です。ボックスの位置及びサイズは、left、right、top、bottomで指定します。独立したボックスなので続くボックスがあってもこのボックスの位置は影響しません。□fixed･･･(NNのみ)ボックスの位置がページやウィンドウなどの表示域に対して固定され、スクロールやページ分割に対して移動しません。--------------------------------------------------------------------▲直接指定の記述方法<div style="height:60px; background-color:#F0E68C; font-weight:bold; position:relative">position:static<div style="color:#ff0000; position:static; top:10px; left:10px;">staticの場合の表示</div><div style="color:#0000FF; display: block;">続くボックス</div></div>↓こんな感じですね（＾＾）position:staticstaticの場合の表示続くボックスデフォルト表示を意味しますのでtopもleftも効果がありません。<div style="height:60px; background-color:#F0E68C; font-weight:bold; position:relative">position:relative<div style="color:#ff0000; position:relative; top:10px; left:10px;">relativeの場合の表示（相対表示）</div><div style="color:#0000FF; display: block;">続くボックス</div></div>↓こんな感じですね（＾＾）position:relativerelativeの場合の表示（相対表示）続くボックスposition:relativeの文字を含むボックスから数えて上から10px左から10pxの位置に指定されます。また「続くボックス」は「relativeの場合の表示」ボックスが通常(デフォルト)に表示された場合と認識しますのでstaticと同じ位置に表示されます。<div style="height:60px; background-color:#F0E68C; font-weight:bold; position:relative">position:absolute<div style="color:#ff0000; position:absolute; top:10px; left:10px;">absoluteの場合の表示（絶対表示）</div><div style="color:#0000FF; display: block;">続くボックス</div></div>↓こんな感じですね（＾＾）position:absoluteabsoluteの場合の表示（絶対表示）続くボックス親要素である＜div＞内の上から10px左から10pxの位置に指定されます。また「続くボックス」は前に「absoluteの場合の表示」ボックスは無いものとして表示されます。<div style="height:60px; background-color:#F0E68C; font-weight:bold; position:relative">position:fixed<div style="color:#ff0000; position:fixed; top:10px; left:10px;">fixedの場合の表示</div><div style="color:#0000FF; display: block;">続くボックス</div></div>↓こんな感じですね（＾＾）position:fixedfixedの場合の表示続くボックスIEでは有効ではありません「absoluteの場合の表示」と同じですがスクロールしても動かなくなります。【応用編】表示位置の指定だけでテキトーに作っています（＾＾;汗）<div style="width:90%; background-color:#000000; position:relative"><div style="width:100px; height:100px; background-color:red; position:relative; top:10px; left:10px; padding:20px;">商品画像</div><div style="width:100px; height:100px; background-color:blue; position:relative; top:0px; left:90px; padding:20px;">商品画像</div><div style="width:100px; height:100px; background-color:green; position:relative; top:-10px; left:170px; padding:20px;">商品画像</div><div style="width:100px; height:100px; background-color:yellow; position:absolute; top:30px; left:170px; padding:21px;">商品画像</div><div style="width:100px; height:100px; background-color:orange; position:absolute; top:120px; left:260px; padding:20px;">商品画像</div></div>↓こんな感じですね（＾＾）*****************************************************【庶事所感】ヤフオクが偽ブランド対策を強化『ヤフーは「Yahoo！オークション」で5月30日から、偽ブランド品対策を強化した。特定商取引法上の事業者に当たると同社が判断したブランド品出品者には、表示義務を守るよう指導。違反を続ける場合はIDを削除する。偽物が多く出回っているブランドに関しては、個人でも出品数を制限する仕組みの導入も検討する。また、商標権について解説するサイト「知的財産権保護ガイド 商標権」をこのほどオープンした。偽ブランド品や海賊版CDなどを出品・落札する場合に生じるリスクを、イラスト入りで説明している。』やっと今頃になって･･･というカンジがしました（＞＜）web上での商取引がいまだに世の中の認知度が低いのは日本は自己責任感がすごく低いのもありますが、こうした面での対策が本当に遅れていたからだと思いました。*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.30
コメント(4)
-
スタイルシート（27）
スタイルシート>>基本>>ボックス>>display: ***; 表示のタイプ（ブロック・インライン・リスト・非表示）を指定する ////////////////////////////////////////////////////////////////////【ブロックとインライン】もちろんホームページの作成はHTMLタグとスタイル(CSS)の組み合わせで作り上げるわけですが(簡易な装飾だけならHTMLタグだけでも出来上がるのですが･･･)HTMLタグをボックスの考え方でわけると大きく分けてふたつブロックフォーマットとインラインフォーマットに分けることができると思います。ブロックフォーマットのボックスは前後のコンテンツ、ボックスとは別のひとかたまりとして存在します。一般的には改行され、前のボックスとも後ろのボックスともマージンの値の分だけ離れて並ぶこととなります。■デフォルト(標準の状態)でブロックレベルであるHTMLタグとはaddress、blockquote、center、dir、div、dl、fieldset、form、h1～h5、hr、menu、noframes、ol、p、pre、table、ul などインラインフォーマットは行というボックスのなかの要素になります。一般的には改行されず、簡単にいうとテキストの一部になります。行ボックスの高さはテキスト用のスタイル、margin、top、bottom、line-heightで決まります。また高さを vertical-align で、水平方向(右寄せ左寄せ均等割付など)を text-align で揃えることができます。(テキストの一部ですからテキストに使えるスタイルが使えるということですね)■デフォルト(標準の状態)でインラインレベルであるHTMLタグとはa、abbr、acronym、applet、b、basefont、big、br、button、cite、code、em、font、i、iframe、img、input、label、map 、object、q、select、small、span、strong、sub、sup、textarea、u、ruby など--------------------------------------------------------------------■display: ***;displayはボックスの種類を指定するプロパティです。デフォルトとは無関係にブロック要素をインライン形式で表示したり、インライン要素をブロック形式で表示することができます。【display: ***;に使用できる値】□block･･･要素をブロックレベル要素として表示します□inline･･･要素をインラインレベル要素として表示します□list-item･･･インライン要素をリストで表示します□marker･･･ブロックレベル要素に対する擬似要素 :before, :after と共に使うとリスト形式で表示されます。その他ではインラインと同じです。 □none･･･要素が全くボックスを生成せず、表示されません□run-in･･･前後の状況により、ブロックレベルになったりインラインレベルになったりします。□compact･･･前後の状況により、ブロックレベルになったりインラインレベルになったりします。テーブル関連の要素に類似した要素を定義します。□table，□inline-table，□table-row-group， □table-column， □table-column-group， □table-header-group， □table-footer-group， □table-row，□table-cell, □table-caption --------------------------------------------------------------------▲直接指定の記述方法<p>インライン要素である<span style="display: block;">spanをブロックの形式</span>で表示します</p><p>ブロック要素である<div style="display: inline;">divをインラインの形式</div>で表示します</p><p>インライン要素である<span style="display: list-item; margin-left: 1em; ">spanを</span><span style="display: list-item; margin-left: 1em; ">リストで</span><span style="display: list-item; margin-left: 1em; ">表示します</span></p><p>テキストのなかで<span style="display: none;">この指定をしますと</span>表示されません</p>↓こんな感じですね（＾＾）インライン要素であるspanをブロックの形式で表示します↑ブロック化されて改行されましたブロック要素であるdivをインラインの形式で表示します↑インライン化されて改行がなくなりましたインライン要素であるspanをリストで表示します↑リスト化されて一種のブロック要素になりますテキストのなかでこの指定をしますと表示されません↑消されてしまいました--------------------------------------------------------------------■visibility: ***;visibility は表示・非表示を指定するプロパティです。ただし非表示化されても、ボックスは生成されるので、後続のボックスなどコンテンツに影響します【visibility: ***;に使用できる値】□visible･･･ボックスが表示されます。□hidden･･･ボックスが表示化されます。非可視状態(透明)にはなりますが、ボックスは生成されていますので、後続のコンテンツに影響します。□collapse･･･テーブル（表）の行や列に指定すると、その部分を詰めて表示します。列の'visibility'の値を'collapse'に指定する場合、列のセルは非表示化されて、他の列にまたがるセルはトリミング(切り取る)されます。表の幅は切り取られた列の幅だけ狭くなる。その他の要素に指定した場合は、hidden と同じです。※非表示ではなく、ボックス自体をなくしてしまいたい場合には、displayプロパティでnoneを指定します。<a href="http://pt.afl.rakuten.co.jp/c/00109923.9f323d8e/?url=http%3a%2f%2fitem.rakuten.co.jp%2fajewelry%2fsecl-208%2f" target="_blank"><img src="http://thumbnail.image.rakuten.co.jp/@0_mall/ajewelry/cabinet/hagyo/secl-208.jpg?_ex=64x64" border=0 alt="浜田省吾 CD【My First Love】送料無料（7/6発売）" style="visibility: hidden;"></a><a href="http://pt.afl.rakuten.co.jp/c/00109923.9f323d8e/?url=http%3a%2f%2fitem.rakuten.co.jp%2fajewelry%2fsecl-208%2f" target="_blank"><img src="http://thumbnail.image.rakuten.co.jp/@0_mall/ajewelry/cabinet/hagyo/secl-208.jpg?_ex=64x64" border=0 alt="浜田省吾 CD【My First Love】送料無料（7/6発売）" style="visibility: visible;"></a>↓こんな感じですね（＾＾）↑非表示ですが領域は確保されています見えないけれどリンクはしますよ（＾＾）↑普通に表示されています*****************************************************【庶事所感】昨日は時間がなく日記が日をまたいでしまいました（＞＜）見た目に派手な変化のあるカラフルなスタイル(背景色や指定画像など)や動きのあるスタイル(スクロールなど)の指定は、地味ながらこのような表示形式や配置を指定するスタイルによって設定できるものなのですが、見た目のはでなスタイルは説明し易いのですが、重要で基本的なものほど概念的な要素が多く説明がなかなか難しいので文章が捗らないです（＞＜）*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.29
コメント(4)
-
スタイルシート（26）つづき
スタイルシート>>基本>>ボックス>>スクロールの詳細設定////////////////////////////////////////////////////////////////////昨日のスクロールの詳細設定を個別に解説させていただきます。■scrollbar-***-color: ***; スクロールバーの色を変える 簡単に全体を指定する□scrollbar-base-color 全体の色をまとめて指定します個別のパーツごとに色指定する□scrollbar-face-color ボタン部分を指定します □scrollbar-track-color レール部分を指定します □scrollbar-arrow-color 矢印を指定します □scrollbar-highlight-color 内側のハイライトを指定します □scrollbar-shadow-color 内側の影を指定します □scrollbar-3dlight-color 外側のハイライトを指定します □scrollbar-darkshadow-color 外側の影を指定します --------------------------------------------------------------------以下は赤くなっている箇所が色の指定をした場所になります。--------------------------------------------------------------------□scrollbar-base-color 全体の色をまとめて指定します<div style="width: 70%; height: 100px; overflow: scroll; scrollbar-base-color: Red;">（本文内容略）</div>↓こんな感じですね（＾＾）浜田省吾2005年第二弾シングルはお父さんの応援歌！？2005年第二弾オリジナル・ニュー・シングルは、父の日を前に、頑張るお父さんへの応援歌--------------------------------------------------------------------□scrollbar-face-color ボタン部分を指定します<div style="width: 70%; height: 100px; overflow: scroll; scrollbar-face-color: Red;">（本文内容略）</div>↓こんな感じですね（＾＾）浜田省吾2005年第二弾シングルはお父さんの応援歌！？2005年第二弾オリジナル・ニュー・シングルは、父の日を前に、頑張るお父さんへの応援歌--------------------------------------------------------------------□scrollbar-track-color レール部分を指定します<div style="width: 70%; height: 100px; overflow: scroll; scrollbar-track-color: Red;">（本文内容略）</div>↓こんな感じですね（＾＾）浜田省吾2005年第二弾シングルはお父さんの応援歌！？2005年第二弾オリジナル・ニュー・シングルは、父の日を前に、頑張るお父さんへの応援歌--------------------------------------------------------------------□scrollbar-arrow-color 矢印を指定します <div style="width: 70%; height: 100px; overflow: scroll; scrollbar-arrow-color: Red;">（本文内容略）</div>↓こんな感じですね（＾＾）浜田省吾2005年第二弾シングルはお父さんの応援歌！？2005年第二弾オリジナル・ニュー・シングルは、父の日を前に、頑張るお父さんへの応援歌--------------------------------------------------------------------□scrollbar-highlight-color 内側のハイライトを指定します <div style="width: 70%; height: 100px; overflow: scroll; scrollbar-highlight-color: Red;">（本文内容略）</div>↓こんな感じですね（＾＾）浜田省吾2005年第二弾シングルはお父さんの応援歌！？2005年第二弾オリジナル・ニュー・シングルは、父の日を前に、頑張るお父さんへの応援歌--------------------------------------------------------------------□scrollbar-shadow-color 内側の影を指定します <div style="width: 70%; height: 100px; overflow: scroll; scrollbar-shadow-color: Red;">（本文内容略）</div>↓こんな感じですね（＾＾）浜田省吾2005年第二弾シングルはお父さんの応援歌！？2005年第二弾オリジナル・ニュー・シングルは、父の日を前に、頑張るお父さんへの応援歌--------------------------------------------------------------------□scrollbar-3dlight-color 外側のハイライトを指定します <div style="width: 70%; height: 100px; overflow: scroll; scrollbar-3dlight-color: Red;">（本文内容略）</div>↓こんな感じですね（＾＾）浜田省吾2005年第二弾シングルはお父さんの応援歌！？2005年第二弾オリジナル・ニュー・シングルは、父の日を前に、頑張るお父さんへの応援歌--------------------------------------------------------------------□scrollbar-darkshadow-color 外側の影を指定します<div style="width: 70%; height: 100px; overflow: scroll; scrollbar-darkshadow-color: Red;">（本文内容略）</div>↓こんな感じですね（＾＾）浜田省吾2005年第二弾シングルはお父さんの応援歌！？2005年第二弾オリジナル・ニュー・シングルは、父の日を前に、頑張るお父さんへの応援歌--------------------------------------------------------------------<div style="width: 70%; （ボックスの横幅指定）height: 100px; （ボックスの高さ指定）background-color: #F0E68C; （背景色の指定）border: 1px blue solid; （境界線の指定）overflow-y: scroll; （スクロールの指定）scrollbar-face-color:#FF8C00; （ボタン部分色の指定）scrollbar-track-color:#FFF8DC; （レール部分色の指定）scrollbar-arrow-color:#FFFFFF; （矢印色の指定）scrollbar-highlight-color:#FFF8DC; （内側のハイライト色の指定）scrollbar-shadow-color:SeaGreen; （内側の影色の指定）scrollbar-3dlight-color:#FFEBCD; （外側のハイライト色の指定）scrollbar-darkshadow-color:Maroon; （外側の影色の指定）padding: 10px; （パッディングの指定）">（本文内容略）</div>↓こんな感じですね（＾＾）浜田省吾2005年第二弾シングルはお父さんの応援歌！？浜田省吾 I am a father-CD-(6/8)AIDOから30年の今年、そして来年ソロデビュー30周年を迎える浜田省吾。4/13発売のオリジナル・ニュー・シングル『光と影の季節』につづいての2005年第二弾オリジナル・ニュー・シングルは、父の日を前に、頑張るお父さんへの応援歌！？エンジニアに、グリーンデイのMixを手がけるクリス・ロード・アレジを迎えたエッジのきいたロックサウンドに現代の父親の苦悩と家族愛をストレートな言葉で綴った、浜田省吾ならではのロック・チューン！！某有名俳優を起用した頑張るお父さんを描いた話題満載のビデオクリップはスポ-ツ紙、ワイドショー等での露出も見込める要注目な内容！！夏には4年ぶりのオリジナル・ニュー・アルバム、秋からはこちらも4年ぶりとなる全国アリーナ・ツアーをひかえる浜田省吾。今年から来年に向けて、目が離せません。待望のニューアルバム「My First Love」2005年7月6日発売予定01.光と影の季節 Flash and Shadow02.この夜に乾杯！ Cheers for Tonight03.旅立ちの朝 Brand new Morning04.Thank you05.デスク越しの恋 Wink06.誰かどこかで Somewhere not here07.I am a father08.花火 Hanabi09.初恋 My First Love10.君と歩いた道（aｌbum ver.） You are the one11.ある晴れた夏の日の午後 One Fine Summer Day浜田省吾4年ぶりオリジナル・ニュー・アルバム。少年の頃に恋したロックへの思いを 込めて、"ひと言で言うと「初心に帰る」"それでいて"また新しいドアを開けた感じ"と本人も語る今作、主人公の男達の日々の中にある"光と陰"、その一瞬一瞬を切り取った、情景豊かな浜田省吾ならではのロック・アルバム！ *****************************************************【庶事所感】一昨日空を見上げましたら、南北になんだか空に切れ目を入れたような雲が3本･･･これって地震雲？？？災害対策も当然必要なことなのですが、雲と地震の因果関係･･･きっと何か関係があるような･･･こんなことの研究なんて国ではやらないでしょうねぇ（＞＜）*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.28
コメント(10)
-
スタイルシート（26）
ボックススタイルシート>>基本>>ボックス>>大きさとスクロール////////////////////////////////////////////////////////////////////■width: ***; height: ***; ボックスの大きさは「width: ***; height: ***; 」で指定することができます。単位つきの数字やパーセンテージを使って大きさを指定します。autoで自動設定、つまりデフォルト(標準)となります。【ボックスで使用できる単位】□length（単位数値の指定）「相対値指定の単位、em、ex、px」「絶対値指定の単位 、in、cm、mm、pt、pc」□percentage（パーセンテージの指定）「当該ボックスを包含する包含ブロックの幅を 100% とする比率で計算します」□auto（ブラウザに依存します）<div style="width: 300px; height: 50px; background-color: blue;">横幅300px高さ50pxのボックスです</div><h1 style="width: 50%; background-color: red;">横幅50%、高さは指定していません</h1><p style="width: 30em; height: 3em; background-color: green;">横幅30文字分高さ3文字分のボックスです</p>↓こんな感じですね（＾＾）横幅300px高さ50pxのボックスです横幅50%、高さは指定していません 横幅30文字分高さ3文字分のボックスです※ネットスケープでは以下の指定もできますmax-width: ***; min-width: ***; ボックスの最大幅と最小幅を指定するmax-height: ***; min-height: ***; ボックスの最大の高さと最小の高さを指定する--------------------------------------------------------------------ボックスを決めた大きさに設定はしたけれども、記述内容がはみ出してこぼれてしまうような場合オーバーフローとなりますがその部分は隠してしまったり、スクロールさせたりできます。1.）オーバーフロー■overflow: ***;□visible … （領域を広げて表示する）デフォルト □hidden … （はみ出した部分を表示しない） □scroll … （スクロールで表示する） □auto … （自動） <div style="width: 70%; height: 100px; background-color: #85B9E9; border: 1px #000000 solid; overflow: hidden;">浜田省吾2005年第二弾シングルはお父さんの応援歌！？AIDOから30年の今年、そして来年ソロデビュー30周年を迎える浜田省吾。4/13発売のオリジナル・ニュー・シングル『光と影の季節』につづいての2005年第二弾オリジナル・ニュー・シングルは、父の日を前に、頑張るお父さんへの応援歌！？エンジニアに、グリーンデイのMixを手がけるクリス・ロード・アレジを迎えたエッジのきいたロックサウンドに現代の父親の苦悩と家族愛をストレートな言葉で綴った、浜田省吾ならではのロック・チューン！！某有名俳優を起用した頑張るお父さんを描いた話題満載のビデオクリップはスポ-ツ紙、ワイドショー等での露出も見込める要注目な内容！！夏には4年ぶりのオリジナル・ニュー・アルバム、秋からはこちらも4年ぶりとなる全国アリーナ・ツアーをひかえる浜田省吾。今年から来年に向けて、目が離せません。</div><div style="width: 70%; height: 100px; background-color: #85B9E9; border: 1px #000000 solid; overflow: scroll;">浜田省吾～（略）</div>↓こんな感じですね（＾＾）浜田省吾2005年第二弾シングルはお父さんの応援歌！？AIDOから30年の今年、そして来年ソロデビュー30周年を迎える浜田省吾。4/13発売のオリジナル・ニュー・シングル『光と影の季節』につづいての2005年第二弾オリジナル・ニュー・シングルは、父の日を前に、頑張るお父さんへの応援歌！？エンジニアに、グリーンデイのMixを手がけるクリス・ロード・アレジを迎えたエッジのきいたロックサウンドに現代の父親の苦悩と家族愛をストレートな言葉で綴った、浜田省吾ならではのロック・チューン！！某有名俳優を起用した頑張るお父さんを描いた話題満載のビデオクリップはスポ-ツ紙、ワイドショー等での露出も見込める要注目な内容！！夏には4年ぶりのオリジナル・ニュー・アルバム、秋からはこちらも4年ぶりとなる全国アリーナ・ツアーをひかえる浜田省吾。今年から来年に向けて、目が離せません。浜田省吾2005年第二弾シングルはお父さんの応援歌！？AIDOから30年の今年、そして来年ソロデビュー30周年を迎える浜田省吾。4/13発売のオリジナル・ニュー・シングル『光と影の季節』につづいての2005年第二弾オリジナル・ニュー・シングルは、父の日を前に、頑張るお父さんへの応援歌！？エンジニアに、グリーンデイのMixを手がけるクリス・ロード・アレジを迎えたエッジのきいたロックサウンドに現代の父親の苦悩と家族愛をストレートな言葉で綴った、浜田省吾ならではのロック・チューン！！某有名俳優を起用した頑張るお父さんを描いた話題満載のビデオクリップはスポ-ツ紙、ワイドショー等での露出も見込める要注目な内容！！夏には4年ぶりのオリジナル・ニュー・アルバム、秋からはこちらも4年ぶりとなる全国アリーナ・ツアーをひかえる浜田省吾。今年から来年に向けて、目が離せません。2.）スクロールの方向指定■overflow-***: scroll; 縦横のスクロールを個別に指定する□overflow-x … 横方向の処理 □overflow-y … 縦方向の処理 これにscroll … （スクロールで表示する）を指定しますとタテのみスクロールや横のみでスクロールが指定できます<div style="width: 70%; height: 50px; background-color: #F0E68C; border: 1px #ff0000 solid; overflow-x: scroll; white-space: nowrap;">浜田省吾2005年第二弾シングルはお父さんの応援歌！？AIDOから30年の今年、そして来年ソロデビュー30周年を迎える浜田省吾。4/13発売のオリジナル・ニュー・シングル『光と影の季節』につづいての2005年第二弾オリジナル・ニュー・シングルは、父の日を前に、頑張るお父さんへの応援歌！？エンジニアに、グリーンデイのMixを手がけるクリス・ロード・アレジを迎えたエッジのきいたロックサウンドに現代の父親の苦悩と家族愛をストレートな言葉で綴った、浜田省吾ならではのロック・チューン！！某有名俳優を起用した頑張るお父さんを描いた話題満載のビデオクリップはスポ-ツ紙、ワイドショー等での露出も見込める要注目な内容！！夏には4年ぶりのオリジナル・ニュー・アルバム、秋からはこちらも4年ぶりとなる全国アリーナ・ツアーをひかえる浜田省吾。今年から来年に向けて、目が離せません。</div><div style="width: 70%; height: 50px; background-color: #F0E68C; border: 1px #ff0000 solid; overflow-y: scroll;">浜田省吾～（略）</div>↓こんな感じですね（＾＾）浜田省吾2005年第二弾シングルはお父さんの応援歌！？AIDOから30年の今年、そして来年ソロデビュー30周年を迎える浜田省吾。4/13発売のオリジナル・ニュー・シングル『光と影の季節』につづいての2005年第二弾オリジナル・ニュー・シングルは、父の日を前に、頑張るお父さんへの応援歌！？エンジニアに、グリーンデイのMixを手がけるクリス・ロード・アレジを迎えたエッジのきいたロックサウンドに現代の父親の苦悩と家族愛をストレートな言葉で綴った、浜田省吾ならではのロック・チューン！！某有名俳優を起用した頑張るお父さんを描いた話題満載のビデオクリップはスポ-ツ紙、ワイドショー等での露出も見込める要注目な内容！！夏には4年ぶりのオリジナル・ニュー・アルバム、秋からはこちらも4年ぶりとなる全国アリーナ・ツアーをひかえる浜田省吾。今年から来年に向けて、目が離せません。浜田省吾2005年第二弾シングルはお父さんの応援歌！？AIDOから30年の今年、そして来年ソロデビュー30周年を迎える浜田省吾。4/13発売のオリジナル・ニュー・シングル『光と影の季節』につづいての2005年第二弾オリジナル・ニュー・シングルは、父の日を前に、頑張るお父さんへの応援歌！？エンジニアに、グリーンデイのMixを手がけるクリス・ロード・アレジを迎えたエッジのきいたロックサウンドに現代の父親の苦悩と家族愛をストレートな言葉で綴った、浜田省吾ならではのロック・チューン！！某有名俳優を起用した頑張るお父さんを描いた話題満載のビデオクリップはスポ-ツ紙、ワイドショー等での露出も見込める要注目な内容！！夏には4年ぶりのオリジナル・ニュー・アルバム、秋からはこちらも4年ぶりとなる全国アリーナ・ツアーをひかえる浜田省吾。今年から来年に向けて、目が離せません。3.）スクロールバーの色指定スクロールバーの色も背景色や文字色などとのコーディネイトで変えることが出来ます。■scrollbar-***-color: ***; スクロールバーの色を変える 簡単に全体を指定する□scrollbar-base-color 全体の色をまとめて指定します個別のパーツごとに色指定する□scrollbar-face-color ボタン部分を指定します □scrollbar-track-color レール部分を指定します □scrollbar-arrow-color 矢印を指定します □scrollbar-highlight-color 内側のハイライトを指定します □scrollbar-shadow-color 内側の影を指定します □scrollbar-3dlight-color 外側のハイライトを指定します □scrollbar-darkshadow-color 外側の影を指定します ※どの部分かは使ってみていただいて慣れるのがいちばん解り易いと思います*****************************************************【庶事所感】理屈や理論を知っていれば何でもできるわけではない、と解ってはいるのですがどうしても、理屈にこだわってしまう、ということがあるようで困ってしまいます。何色と何色を混ぜればどんな色になるかわかっていても素晴らしい絵画は画けないし、ボールをどう打てばホームランになるかかわっていてもホームランは打てないし、音階やリズムについての知識がいくらあっても素晴らしい曲をつくることはできないです。「そんなこと、言われなくてもわかってる！」（＾＾）そうですよねだから難しいのですものね（＞＜）*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.27
コメント(6)
-
スタイルシート（25）
ボックスの構成の基本スタイルシート>>基本>>ボックス>>マージン、パッディング、ボーダーまとめ////////////////////////////////////////////////////////////////////ボックスの装飾方法であるマージン、パッディング、ボーダーのまとめです。それぞれが指定されるとどんな効果が現れるかを比較してみるとわかりやすいと思います。※余白などの比較のため背景色を#85B9E9に指定してあります。1.)マージン「余白」のみ指定<div style="margin: 50px;">■margin: 50px;マージン「余白」は上下左右50pxずつ空けます。■padding: パッディング「詰め物」は指定していません。■border: ボーダー「境界線＝枠」は指定していません。</div>↓こんな感じですね（＾＾）■margin: 50px;マージン「余白」は上下左右50pxずつ空けます。■padding: パッディング「詰め物」は指定していません。■border: ボーダー「境界線＝枠」は指定していません。2.)マージン「余白」+ パッディング「詰め物」を指定<div style="margin: 50px; padding: 30px; background-color: #F0E68C;">■margin: 50px;マージン「余白」は上下左右50pxずつ空けます。■padding: 30px;パッディング「詰め物」の幅は上下左右30pxずつです。background-color: #F0E68C; 詰め物の色は#F0E68Cです。■border: ボーダー「境界線＝枠」は指定していません。</div>↓こんな感じですね（＾＾）■margin: 50px;マージン「余白」は上下左右30pxずつ空けます。■padding: 30px;パッディング「詰め物」の幅は上下左右30pxずつです。background-color: #F0E68C; 詰め物の色は#F0E68Cです。■border: ボーダー「境界線＝枠」は指定していません。3.)マージン「余白」+ パッディング「詰め物」+ボーダー「境界線＝枠」すべてを指定<div style="margin: 50px; padding: 30px; background-color: #F0E68C; border: thick solid #FFB6C1;">■margin: 50px;マージン「余白」は上下左右50pxずつ空けます。■padding: 30px;パッディング「詰め物」の幅は上下左右30pxずつです。background-color: #F0E68C; 詰め物の色は#F0E68Cです。■border: thick solid #FFB6C1;ボーダー「境界線＝枠」の太さはthick種類はsolid色は#FFB6C1です。</div>↓こんな感じですね（＾＾）■margin: 50px;マージン「余白」は上下左右50pxずつ空けます。■padding: 30px;パッディング「詰め物」の幅は上下左右30pxずつです。background-color: #F0E68C; 詰め物の色は#F0E68Cです。■border: thick solid #FFB6C1;ボーダー「境界線＝枠」の太さはthick種類はsolid色は#FFB6C1です。4.）応用例<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;"><a href="http://pt.afl.rakuten.co.jp/c/001098f8.be52e715/?url=http%3a%2f%2fwww.rakuten.co.jp%2fplazahamada%2f452275%2f456012%2f486321%2f553626%2f%23643159" target="_blank"><img src="http://image.rakuten.co.jp/wshop/data/ws-mall-img/plazahamada/img64/img10231554010.jpeg" border=0 alt="●浜田省吾 “光と影の季節”CD（2005/4/13）" align="left"></a>「光と影の季節」ビデオクリップフルコーラス公開！パソコンのCD-ROMドライブに「光と影の季節」（SECL-180）の＜CD＞を入れて、以下の「ConnecteDで映像を見る」のボタンをクリックして次ぎのページにアクセスすると、ビデオクリップのフルコーラスをご覧いただけます。※コンテンツに画像と文章を書き入れてみました。■margin: 25px;マージン「余白」は上下左右25pxずつ空けます。■padding: 30px;パッディング「詰め物」の幅は上下左右30pxずつです。background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/39.gif); 詰め物は画像を指定しました。■border: thin dotted blue;ボーダー「境界線＝枠」の太さはthin種類はdotted色はblueです。</p>↓こんな感じですね（＾＾）「光と影の季節」ビデオクリップフルコーラス公開！パソコンのCD-ROMドライブに「光と影の季節」（SECL-180）の＜CD＞を入れて、以下の「ConnecteDで映像を見る」のボタンをクリックして次ぎのページにアクセスすると、ビデオクリップのフルコーラスをご覧いただけます。※コンテンツに画像と文章を書き入れてみました。■margin: 25px;マージン「余白」は上下左右25pxずつ空けます。■padding: 30px;パッディング「詰め物」の幅は上下左右30pxずつです。background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/39.gif); 詰め物は画像を指定しました。■border: thin dotted blue;ボーダー「境界線＝枠」の太さはthin種類はdotted色はblueです。--------------------------------------------------------------------▲CSS本来の記述方法(楽天ではできません)<style type="text/css"><!-- p{margin: 50px; padding: 50px; background-color: #F0E68C; border: thick solid #FFB6C1;}--></style>*****************************************************【庶事所感】「たまごっちプラス」というものが売れているそうです。売上上位の5位くらいまでを占めているではないですか（☆o☆）すごい！しかし・・・この商品、むかしのたまごっちの改良品！？？ヤバイ！！わたくし何が面白いのかがわかりません・・・*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.26
コメント(6)
-
スタイルシート（24）
ボックスの構成の基本スタイルシート>>基本>>ボックス>>ボーダー////////////////////////////////////////////////////////////////////ボーダー(境界線)はひとことで言えば「枠」だといえると思います。つまりブラウザに表示されて目で見える範囲のコンテンツを囲む一番外にあるものです。ボックス(箱)という考え方はHTMLタグではテーブルでなければ囲ったり枠を付けることができませんが、スタイルでは＜td＞＜tr＞などテーブルタグはもちろん＜h1＞＜h2＞･･･＜p＞＜div＞などのタグをもひとつのボックス(箱)として装飾することができるのが凄く大きな利点のひとつだと思います。□マージンはコンテンツ要素と周りの距離を調節することが本来の役目です、色をつけたり装飾的な役割はなくあくまでも「余白」です。□パッディングも距離の調整がわりにはなります(着色せずに幅を変える)が本来の役目は背景色や背景画像などを設定する「詰め物」になります。□ボーダーでも距離の調整は可能ですが(着色や形式を設定せず太さを変える)本来の役目はコンテンツを装飾する「境界線＝枠」だといえます。【ボーダー(境界線)borderで指定できること「ボーダーの三指定」】■border-width: ***; border-***-width: ***; 枠線の太さを指定する■border-style: ***; border-***-style: ***; 枠線の種類を指定する■border-color: ***; border-***-color: ***; 枠線の色を指定する■border: ***; border-***: ***; 枠線の設定をひとまとめに行う--------------------------------------------------------------------【ボックスのイメージとボーダーの位置】余白（margin）↑↓←→境界（border）↑↓←→詰め物（padding）↑↓←→コンテンツ←→↑↓←→↑↓←→↑↓--------------------------------------------------------------------■border-width: ***; border-***-width: ***; 枠線の太さを指定する ボーダーの太さを指定する CSS プロパティが border-width です。四方をまとめて指定する方法と個別に指定する方法があります。【border-widthの単位】●三段階の値□thin 細い線 □medium 中くらいの線 □thick 太い線 ●詳細設定の場合□length（単位数値の指定）「相対値指定の単位、em、ex、px」「絶対値指定の単位 、in、cm、mm、pt、pc」□inherit 親要素での指定を継承 【border-widthの設定方法】1.）太さを上下左右に個別に設定することが出来ます。□border-top-width: thin; □border-right-width: medium; □border-bottom-width: thick; □border-left-width: 12px; 2.）太さをまとめて設定できます。ただし以下の4つの方法が考えられます。□border-width: 2px; … ［上下左右］ を指定 □border-width: 2px 4px; … ［上下］ と ［左右］ を指定 □border-width: 2px 4px 6px; … ［上］ と ［左右］ と ［下］ を指定 □border-width: 2px 4px 6px 8px; … ［上］ と ［右］ と ［下］ と ［左］ を指定 【実例】□thin細（style="border: thin dotted blue;"）□medium中（style="border: medium dashed blue;"）□thick太（style="border: thick solid blue;"）--------------------------------------------------------------------■border-style: ***; border-***-style: ***; 枠線の種類を指定するボーダーの種類を指定する CSS プロパティが border-style です。四方をまとめて指定する方法と個別に指定する方法があります。【border-styleの値】□none ボーダーなし。隣接する要素で重なるボーダーが存在すればそのボーダーが表示されます。□hidden ボーダーなし。隣接する要素で重なるボーダーが存在しても強制的に非表示になります。□solid 実線□dotted 点線□dashed 破線□double 2重線 □outset 凸□inset 凹□ridge 山□groove 谷□inherit 親要素での指定を継承【border-styleの設定方法】1.）種類を上下左右に個別に設定することが出来ます。□border-top-style: solid; □border-right-style: dotted; □border-bottom-style: dashed; □border-left-style: double; 2.）種類をまとめて設定できます。ただし以下の4つの方法が考えられます。□border-style: outset; … ［上下左右］ を指定 □border-style: inset ridge; … ［上下］ と ［左右］ を指定 □border-style: solid dotted dashed; … ［上］ と ［左右］ と ［下］ を指定 □border-style: double outset inset ridge; … ［上］ と ［右］ と ［下］ と ［左］ を指定【実例】□none（style="border: 5px none LimeGreen;"）□hidden（style="border: 5px hidden LimeGreen;"）□solid 実線（style="border: 5px solid LimeGreen;"）□dotted 点線（style="border: 5px dotted LimeGreen;"）□dashed 破線（style="border: 5px dashed LimeGreen;"）□double 2重線（style="border: 5px double LimeGreen;"）□outset 凸（style="border: 5px outset LimeGreen;"）□inset 凹（style="border: 5px inset LimeGreen;"）□ridge 山（style="border: 5px ridge LimeGreen;"）□groove 谷（style="border: 5px groove LimeGreen;"）--------------------------------------------------------------------■border-color: ***; border-***-color: ***; 枠線の色を指定するボーダーの色を指定する CSS プロパティが border-color です。四方をまとめて指定する方法と個別に指定する方法があります。【border-colorの値】□カラーコードかネームで記述します□transparent 透明□inherit 親要素での指定を継承する指定【border-colorの設定方法】1.）カラーを上下左右に個別に設定することが出来ます。□border-top-color: red; □border-right-color: yellow; □border-bottom-color: green; □border-left-color: blue; 2.）カラーをまとめて設定できます。ただし以下の4つの方法が考えられます。□border-color: #F4A460; … ［上下左右］ を指定 □border-color: #87CEEB #7B68EE; … ［上下］ と ［左右］ を指定 □border-color: #FF69B4 #ADFF2F #FFFAF0; … ［上］ と ［左右］ と ［下］ を指定 □border-color: #6495ED #FF6347 #FF4500 #90EE90; … ［上］ と ［右］ と ［下］ と ［左］ を指定--------------------------------------------------------------------■まとめて表示四方が全て同じ指定値で、個別に指定する必要がなければ、省略プロパティとして、'border' が使えます（border: 幅 種類 色;）□border: 10px solid red;四方それぞれに幅 種類 色をまとめて指定もできます。（border-指定箇所: 幅 種類 色;）□border-top: 1px solid red;□border-right: 1em solid #c00;□border-bottom: 1px solid blue;□border-left: 2em double maroon;--------------------------------------------------------------------▲直接指定の記述方法三つの指定「幅、種類、色」をそれぞれ上下左右に個別に設定すると合計12の指定を際限なく組合すことが出来ます。<p style="border-top-width: 5px; border-right-width: 8px; border-bottom-width: 11px; border-left-width: 14px; border-top-style: solid; border-right-style: dotted; border-bottom-style: dashed; border-left-style: double; border-top-color: Red; border-right-color: Yellow; border-bottom-color: Green; border-left-color: Blue;">このブロックのボーダー(境界線)＝枠の設定は「太さ」上＝5px 右＝8px 下＝11px 左＝14px「種類」上＝solid 右＝dotted 下＝dashed 左＝double「色」上＝Red 右＝Yellow 下＝Green 左＝Blueとなっています。</p>↓こんな感じですね（＾＾）このブロックのボーダー(境界線)＝枠の設定は「太さ」上＝5px 右＝8px 下＝11px 左＝14px「種類」上＝solid 右＝dotted 下＝dashed 左＝double「色」上＝Red 右＝Yellow 下＝Green 左＝Blueとなっています。*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.25
コメント(4)
-
スタイルシート（23）
ボックスの構成の基本スタイルシート>>基本>>ボックス>>パッディング////////////////////////////////////////////////////////////////////【マージンとパッディングの違いは？】マージンは周りの要素との距離の設定であり、もしマージンが無い、もしくは設定が"0"であれば当該要素と境界線(ボーダー)が接しているほかの要素がぴったりくっついてしまいます。パッディングは境界線(ボーダー)とコンテンツ(要素=内容)との間の距離を設定します。もしパッディングが無ければ、もしくは設定が"0"であればコンテンツ(要素=内容)である文章や画像などのまわりの境界線(ボーダー)とぴったりくっついてしまいます。※もしパッディングを適度に設定しない場合は文字と枠がくっつくわけですから、非常に読みにくくなりますよね（＞＜）パッディングの部分は'background'関連が反映する場所になります。つまり、よく見かける文字や画像の周りの背景色や背景画像などが設定されているのはこの部分なのです。【パッディング部分に反映するバックグラウンド】background-color: ***; ボックスの背景に色を付ける background-image: url(***); ボックスの背景に画像を使う background-repeat: ***; 背景画像の並び方を指定する background-position: ***; 背景画像の表示位置を指定する background-attachment: fixed; 背景画像をスクロールさせない background: ***; 背景の設定をひとまとめに行う--------------------------------------------------------------------【ボックスのイメージ】【margin-top】【margin-left】余白（margin）境界（border）↑詰め物（padding）【padding-top】↓←【padding-left】→コンテンツ←【padding-right】→↑【padding-bottom】↓この部分は透明だと思ってください(透過)【margin-right】【margin-bottom】--------------------------------------------------------------------パッディングの設定もマージとまったく同じように設定できます。【パッディングの単位】□length（単位数値の指定）「相対値指定の単位、em、ex、px」「絶対値指定の単位 、in、cm、mm、pt、pc」□percentage（パーセンテージの指定）「当該ボックスを包含する包含ブロックの幅を 100% とする比率で計算します」□auto（ブラウザに依存します）【パッディングの設定方法】1.）パッディングを上下左右に個別に設定することが出来ます。□padding-top: 5px;□padding-right: 10px;□padding-bottom: 15px;□padding-left: 20px;2.）パッディングをまとめて設定できます。ただし以下の4つの方法が考えられます。□padding: 2px; … ［上下左右］ を指定□padding: 2px 4px; … ［上下］ と ［左右］ を指定□padding: 2px 4px 6px; … ［上］ と ［左右］ と ［下］ を指定□padding: 2px 4px 6px 8px; … ［上］ と ［右］ と ［下］ と ［左］ を指定--------------------------------------------------------------------▲直接指定の記述方法<p style="background-color: #85B9E9; padding-top: 20px; padding-bottom: 10px;">上に20px、下に10pxのパッディング< /p><p style="background-color: #85B9E9; padding-right: 60px; padding-left: 80px;">右に60px、左に80pxのパッディング< /p><p style="background-color: #85B9E9; padding: 50px;">上下左右に50pxのパッディング< /p>↓こんな感じですね（＾＾）上に20px、下に10pxのパッディング右に60px、左に80pxのパッディング上下左右に50pxのパッディング※文字と周りの境界までの幅に注意して見てください！--------------------------------------------------------------------▲CSS本来の記述方法(楽天ではできませんが、本来はbodyに指定して壁紙を設定するなどが一番多い使い道です)<style type="text/css"><!-- p{margin-top: 5px;margin-right: 10px;margin-bottom: 15px;margin-left: 20px;padding-top: 5px;padding-right: 10px;padding-bottom: 15px;padding-left: 20px;}--></style>*****************************************************【庶事所感】東京は夕べ突然の大雨でした「バケツをひっくり返した」とはよく言ったもので、そんな表現がぴったり（＞＜）インターネットの天気予報もっと細かく情報提供してくださるサイトはないのかなぁ･･･*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.24
コメント(2)
-
スタイルシート（22）
ボックスの構成の基本スタイルシート>>基本>>ボックス>>マージン////////////////////////////////////////////////////////////////////○コンテンツ：HTMLで書かれたテキスト(文書)はホームページやブログなどのwebページの「核」の部分になります。○要素：コンテンツの中のテキスト(文書)は要素の集合体だと言えます。つまりここがwebページの「内容」そのものになります。○ボックス：この「核」を中心にしたひとかたまりをスタイルでは「ボックス」ととらえます。ボックスのデザイン・配置・イメージを決める設定のための基礎知識は、コンテンツ(内容)部分を取巻く、マージン、パッディング、ボーダーの3点を抑えておくことだと思います。●マージン （他の要素たちとの余白の部分。背景は常に透明で、ページ全体の基本設定(親要素)の背景などが透過します） ●パッディング （要素のまわりにすき間をつくるか作らないかなど、ボーダー線などと要素であるコンテンツをぴったりくっつけるのもここの値）⇒'background'関連●ボーダー （いろいろな線で囲ったり、枠を設定します。視覚的にはココまでがひとつのかたまりのように見えます）⇒'border' 関連●コンテンツ （内容には、単純なテキスト、画像などの置換内容、その代替テキストなどが考えられます）--------------------------------------------------------------------【ボックスのイメージ】【margin-top】【margin-left】余白（margin）境界（border）詰め物（padding）コンテンツこの部分は透明だと思ってください(透過)【margin-right】【margin-bottom】--------------------------------------------------------------------【マージンの単位】□length（単位数値の指定）「相対値指定の単位、em: フォントの大きさ 'font-size' を 1 、ex: 小文字の高さ 'x-height' を 1、px: ピクセル。解像度に依存してサイズが決定」「絶対値指定の単位 、in: インチ=2.54 cm、cm: センチメートル、mm: ミリメートル、pt: ポイント=1/72 インチ、pc: パイカ=12 ポイント」□percentage（パーセンテージの指定）「当該ボックスを包含する包含ブロックの幅を 100% とする比率で計算します」□auto（ブラウザに依存します）【マージンの設定方法】1.）マージンを上下左右に個別に設定することが出来ます。□margin-top: 5px; □margin-right: 10px; □margin-bottom: 15px; □margin-left: 20px; 2.）マージンをまとめて設定できます。ただし以下の4つの方法が考えられます。□margin: 2px; … ［上下左右］ を指定 □margin: 2px 4px; … ［上下］ と ［左右］ を指定 □margin: 2px 4px 6px; … ［上］ と ［左右］ と ［下］ を指定 □margin: 2px 4px 6px 8px; … ［上］ と ［右］ と ［下］ と ［左］ を指定 【マージンの相殺】個別の要素にこのマージンを設定できるわけですが、たとえば＜ｐ1＞の要素のボックスと＜ｐ2＞の要素のボックスが上下にあった場合に＜ｐ1＞の要素のボックスには下の部分に1em分のマージンが設定されています↓margin-bottom: 1em;↑margin-top: 2em;＜ｐ2＞の要素のボックスには上の部分に2em分のマージンが設定されていますこの場合双方のマージンが1em分重複しますので1em分は相殺されて実質2emのマージンとなります。--------------------------------------------------------------------▲直接指定の記述方法<p style="background-color: #85B9E9; margin-top: 20px; margin-bottom: 10px;">上に20px、下に10pxのマージン< /p><p style="background-color: #85B9E9; margin-right: 60px; margin-left: 80px;">右に60px、左に80pxのマージン< /p><p style="background-color: #85B9E9; margin: 50px;">上下左右に50pxのマージン< /p>↓こんな感じですね（＾＾）上に20px、下に10pxのマージン右に60px、左に80pxのマージン上下左右に50pxのマージン--------------------------------------------------------------------▲CSS本来の記述方法(楽天ではできませんが、本来はbodyに指定して壁紙を設定するなどが一番多い使い道です)<style type="text/css"><!-- p{margin-top: 5px; margin-right: 10px; margin-bottom: 15px; margin-left: 20px; }--></style>*****************************************************【庶事所感】時間帯でとってもインターネットが動かなくなってくることが多くなりました。きっとインターネット人口が急激に増えているのでしょう（＞＜）それとも･･･わたくしのマシーンが脆弱なだけ？？？金曜日の夜はすごかったなぁ（ToT）*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.23
コメント(6)
-
スタイルシート（21）
ボックスという考え方CSSでは＜div＞などのブロックレベルの要素をボックスと呼んでひとかたまりのものとして考えます。このボックス（箱）は核となるコンテンツがあってこれを詰め物（padding）、境界（border）、余白（margin）が装飾を施すようなかたちの集合体として考えるとわかりやすいかもしれません。--------------------------------------------------------------------------------【ボックスのイメージ】余白（margin）境界（border）詰め物（padding）コンテンツ--------------------------------------------------------------------------------そして、これらを以下のように制御して表示するようにします。きっといままでご紹介したスタイルの表示方法から想像がつくのでは（＾＾）（例です、まだ整理しきっていません;汗 整理しながら書いていきたいと思います。）配置float: ***; ボックスに並ぶ文字の位置を指定する clear: ***; 文字の回り込みを解除する position: ***; ボックスの配置方法を指定する top: ***; right: ***; bottom: ***; left: ***; ボックスの位置を指定する z-index: ***; 重なりの順序を指定する 表示方法 overflow: scroll; ボックスに入りきらない内容をスクロールで表示する overflow-***: scroll; 縦横のスクロールを個別に指定する scrollbar-***-color: ***; スクロールバーの色を変える display: ***; 表示のタイプ（ブロック・インライン・リスト・非表示）を指定する visibility: ***; 表示・非表示を指定する大きさと背景width: ***; height: ***; ボックスの大きさを指定する max-width: ***; min-width: ***; ボックスの最大幅と最小幅を指定する max-height: ***; min-height: ***; ボックスの最大の高さと最小の高さを指定する background-color: ***; ボックスの背景に色を付ける background-image: url(***); ボックスの背景に画像を使う background-repeat: ***; 背景画像の並び方を指定する background-position: ***; 背景画像の表示位置を指定する background-attachment: fixed; 背景画像をスクロールさせない background: ***; 背景の設定をひとまとめに行う境界線border-width: ***; border-***-width: ***; 枠線の太さを指定する border-color: ***; border-***-color: ***; 枠線の色を指定する border-style: ***; border-***-style: ***; 枠線のスタイルを指定する border: ***; border-***: ***; 枠線の設定をひとまとめに行う 余白と詰め物margin: ***; ボックスのマージン（外側の余白）を指定する margin-***: ***; 上下左右のマージンを個別に指定する padding: ***; ボックスのパディング（内側の余白）を指定する padding-***: ***; 上下左右のパディングを個別に指定する *****************************************************【庶事所感】昨日今日とお祭りのところが多いようです（＾＾）テレビで浅草の三社祭の報道があって、人ごみに大変弱いくせに、とっても行きたくなっていたでめららでした（＞＜）*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.22
コメント(8)
-
文字実体参照 その（3）
文字数が多くていっぱいいっぱいです（＞＜）あらためて整理しなければいけないなぁ･･･と思いました（＞＜ギャフン）////////////////////////////////////////////////////////////////////////文字実体参照 その（3）番号文字参照文字実体参照例ΑΑΑΒΒΒΓΓΓΔΔΔΕΕΕΖΖΖΗΗΗΘΘΘΙΙΙΚΚΚΛΛΛΜΜΜΝΝΝΞΞΞΟΟΟΠΠΠΡΡΡΣΣΣΤΤΤΥΥΥΦΦΦΧΧΧΨΨΨΩΩΩαααβββγγγδδδεεεζζζηηηθθθιιικκκλλλμμμνννξξξοοοπππρρρςςςσσστττυυυφφφχχχψψψωωωϑϑϑϒϒϒϖϖϖ•••………′′′″″″‾‾‾⁄⁄⁄℘℘℘ℑℑℑℜℜℜ™™™ℵℵℵ←←←↑↑↑→→→↓↓↓↔↔↔↵↵↵⇐⇐⇐⇑⇑⇑⇒⇒⇒⇓⇓⇓⇔⇔⇔∀∀∀∂∂∂∃∃∃∅∅∅∇∇∇∈∈∈∉∉∉∋∋∋∏∏∏∑∑∑−−−∗∗∗√√√∝∝∝∞∞∞∠∠∠∧∧∧∨∨∨∩∩∩∪∪∪∫∫∫∴∴∴∼∼∼≅≅≅≈≈≈≠≠≠≡≡≡≤≤≤≥≥≥⊂⊂⊂⊃⊃⊃⊄⊄⊄⊆⊆⊆⊇⊇⊇⊕⊕⊕⊗⊗⊗⊥⊥⊥⋅⋅⋅⌈⌈⌈⌉⌉⌉⌊⌊⌊⌋⌋⌋〈⟨⟨〉⟩⟩◊◊◊♠♠♠♣♣♣♥♥♥♦♦♦*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.21
コメント(15)
-
文字実体参照 その（2）
昨日の続きです。HTMLタグの中では「<」や「>」をはじめいろいろな記号が使われていますから、そのまま記述したのでは表示されません（＞＜）この場合は以下の表のように番号文字参照や文字実体参照を使うことになります。※残念ながら＃番号文字は楽天広場では使えませんが、一般的なブラウザでは番号で表示できますので、他サイト運営のかたはお試しください（＾＾）////////////////////////////////////////////////////////////////////////文字実体参照 その（2）番号文字参照文字実体参照例&<< <>> >&&& &'' '"" "ŒŒ Œœœ œŠŠŠšššŸŸ Ÿˆˆ ˆ˜˜ ˜         ‌‌ ‍‍ ‎‎ ‏‏ –– –—— —‘‘ ‘’’ ’‚‚ ‚““ “”” ”„„ „†††‡‡‡‰‰‰‹‹‹›››€€ €*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.20
コメント(6)
-
文字実体参照 その（1）
【ちょっと一息】今日はこんなものもあるんだということでちょっと一息しましょう（＾＾）ホームページを作っていてキーボードからでは使えない文字がたくさんあることを感じていらっしゃる方は多いのではないでしょうか。例えばウムラートやアクサン、ロシア語やフランス語などで表示したいなんてあると思います。セディーユが使えたらなぁ･･･、グラーヴが･･･じつは、英語主体のパソコンの世界ですので、日本の特殊な文字、やコードなども含め文字実体参照というものがあります。またHTMLで記述すると<だって制御用の記号と解釈されますので、そのまま記述できませんハートマークやコマーシャルマークなどほかにもそんなものがたくさんあります。////////////////////////////////////////////////////////////////////////文字実体参照 その（1）番号文字参照文字実体参照例  ¡¡¡¢¢¢£££¤¤¤¥¥¥¦¦¦§§§¨¨¨©©©ªªª«««¬¬¬­­®®®¯¯¯°°°±±±²²²³³³´´´µµµ¶¶¶···¸¸¸¹¹¹ººº»»»¼¼¼½½½¾¾¾¿¿¿ÀÀÀÁÁÁÂÂÂÃÃÃÄÄÄÅÅÅÆÆÆÇÇÇÈÈÈÉÉÉÊÊÊËËËÌÌÌÍÍÍÎÎÎÏÏÏÐÐÐÑÑÑÒÒÒÓÓÓÔÔÔÕÕÕÖÖÖ×××ØØØÙÙÙÚÚÚÛÛÛÜÜÜÝÝÝÞÞÞßßßàààáááâââãããäääåååæææçççèèèéééêêêëëëìììíííîîîïïïðððñññòòòóóóôôôõõõööö÷÷÷øøøùùùúúúûûûüüüýýýþþþÿÿÿ*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.19
コメント(6)
-
スタイルシート（20）
スタイルシート>>全般>>HR（horizontal rule=水平線）関連////////////////////////////////////////////////////////////////////////■width: ***; height: ***;（水平線のサイズ「長さと太さ」を指定する）■text-align: ***; margin-***: ***;（水平線の「位置位置と余白」を指定する）■color: ***; background-color: ***;（水平線に色を付ける）■background-image: url(***);（水平線の背景に画像を使う）■border: ***;（水平線の枠線を指定する）----------------------------------------------------------------------【HTMLタグで使えるプロパティ(属性)】□width=「横幅」□size=「太さ」□color=「色」□noshade「平面化」□align=「横方向の位置指定」HTMLタグでもある程度の装飾を施すことができますが、以上のようになります。スタイルの場合と比較してみていただくと簡素なことがわかります。しかしこれはシンプルなのではなくHTMLコンテンツに直接書かれた主要構造部の一部なわけですから本当はできるだけ使いたくない指定方法なのです。これをスタイルで指定することによって主要構造部をシンプルにして、かつ詳細なデザインをすることができるようになるのですから、スタイルってほんとに素晴らしい発想だと思います。////////////////////////////////////////////////////////////////////////▲直接指定の記述方法■width: ***; height: ***;（水平線のサイズ「長さと太さ」を指定する）（width 線の長さを指定します：height 線の太さを指定します）□percentage（パーセンテージで指定する場合）□length（単位で指定する場合）『相対値指定の単位 em: フォントの大きさ ex: 小文字の高さ px: ピクセル 』『絶対値指定の単位 in: インチ。2.54 cm cm: センチメートル mm: ミリメートル pt: ポイント。1/72 インチ pc: ピカ。12 ポイント 』<hr style="width: 80%; height: 20px;">こんな感じですね（＾＾）↓■text-align: ***; margin-***: ***;（水平線の「位置位置と余白」を指定する）（text-align: ***;は本来は文章の位置を指定するものですが、hrタグに指定すると位置を変えてくれます）□left ･･･････････････････左寄せにします。□right ･･･････････････････右寄せにします。□center ･･･････････････････中央揃えにします。<hr style="width: 33%; height: 10px; text-align: left;"><hr style="width: 33%; height: 10px; text-align: right;"><hr style="width: 33%; height: 10px; text-align: center;">こんな感じですね（＾＾）↓(テーブルタグの中でも箱の位置指定にspacingやpaddingで余白を決めますが、スタイルでも同じ考え方でmarginとpaddingをセットで覚えるのが便利だと思います）□margin-top･･･････････････････上マージンを指定します。□margin-bottom･･･････････････下マージンを指定します。□margin-left･･･････････････････左マージンを指定します。□margin-right･･････････････････右マージンを指定します。□margin･･･････････････････････マージンに関する指定をまとめて行います。それぞれの数値が上、右、下、左の順番で指定されたものとしますが以下のように指定できます。値を1つ指定した場合：指定した値が[上下左右]の余白になります。値を2つ指定した場合：記述した順に[上下][左右]の余白になります。値を3つ指定した場合：記述した順に[上][左右][下]の余白になります。値を4つ指定した場合：記述した順に[上][右][下][左]の余白になります。<hr style="width: 33%; height: 10px; margin-top: 30px;"><hr style="width: 33%; height: 10px; margin-bottom; 10pt;"><hr style="width: 33%; height: 10px; margin-left: 20%;"><hr style="width: 33%; height: 10px; margin-right: 30px;"><hr style="width: 33%; height: 10px; margin: 10 20 30 40 ;">こんな感じですね（＾＾）↓■color: ***; background-color: ***;（水平線に色を付ける）IEではcolor: ***;で指定できますが、NNではbackground-color: ***;になります。両方で見えるようにするには両方指定しちゃいましょう（＾＾）またborder: 0;を指定しないと境界線が表示されてしまいます（＞＜）<hr style="color: #FF0000; background-color: #FF0000; border: 0;"><hr style="color: #0000FF; background-color: #0000FF; border: 0;">こんな感じですね（＾＾）↓■background-image: url(***);（水平線の背景に画像を使う）<hr style="height: 20px; background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/39.gif);"><hr style="height: 40px; background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/12.gif); background-color: #E2F5E0; background-repeat: no-repeat; background-position: right;">こんな感じですね（＾＾）↓■border: ***;（水平線の枠線を指定する）テーブルタグの1-9でご紹介しましたborder枠線がhrにも使えます。<hr style="border: 1px #A52A2A solid; background-color: #CD853F2; color: #CD853F; height: 10px;"><hr style="border-style: solid; border-width: 2px; border-color: #7FFFD4 #20B2AA #20B2AA #7FFFD4; background-color: #E0FFFF; color: #E0FFFF; height: 10px;"><hr style="border-style: dotted none none none; border-top-width: 3px; border-top-color: #FF0000; height: 3px;">こんな感じですね（＾＾）↓----------------------------------------------------------------------▲CSS本来の記述方法<style type="text/css"><!-- hr{width: ***;height: ***;text-align: ***;margin-***: ***;background-color: #FF8080;color: #FF8080;border-style: solid;border-width: 2px;border-color: #C40000 #FFDFE2 #FFDFE2 #C40000;}--></style>*****************************************************【庶事所感】昨日、大型電気店で血圧計を見てきました。じつは、血筋なのか血圧が高いので、この頃気にし始めたのですが、そこで買おう！と決めないで「イヤイヤインターネット見てからにしよう」わたくしの生活の中にはホントしっかりインターネットが入り込んでいます（＞＜）*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.18
コメント(14)
-
style19（background-背景）
スタイルシート>>全般>>background（背景）////////////////////////////////////////////////////////////////////////■background-color: ***;（要素内の背景に色を付ける）■background-image: url(***);（要素内の背景に画像を使う）■background-repeat: ***;（背景画像の並び方を指定する）■background-position: ***;（背景画像の表示位置を指定する）■background-attachment: fixed;（背景画像をスクロールさせない）■background: ***;（背景の設定をひとまとめに行う）----------------------------------------------------------------------▲直接指定の記述方法■background-color: ***;（要素内の背景に色を付ける）<p style="background-color: #FFA500;">要素内の背景に色を付ける</p>こんな感じですね（＾＾）↓要素内の背景に色を付ける■background-image: url(***);（要素内の背景に画像を使う）<p style="background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/39.gif);">要素内背景に画像を使う</p>こんな感じですね（＾＾）↓要素内背景に画像を使う■background-repeat: ***;（背景画像の並び方を指定する）□repeat … （敷き詰める）デフォルト<div style="width: 400px; height: 100px;background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/11.gif); background-repeat: repeat;">repeat … （敷き詰める）デフォルト</div>こんな感じですね（＾＾）↓repeat … （敷き詰める）デフォルト□repeat-x … （横方向に繰り返し並べる）<div style="width: 400px; height: 100px; background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/11.gif); background-repeat: repeat-x;">（横方向に繰り返し並べる）</div>こんな感じですね（＾＾）↓（横方向に繰り返し並べる）□repeat-y … （縦方向に繰り返し並べる）<div style="width: 400px; height: 100px; background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/11.gif); background-repeat: repeat-y;">（縦方向に繰り返し並べる）</div>こんな感じですね（＾＾）↓（縦方向に繰り返し並べる）□no-repeat … （1つだけ表示繰り返さない）<div style="width: 400px; height: 100px; background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/11.gif); background-repeat: no-repeat;">（1つだけ表示繰り返さない）</div>こんな感じですね（＾＾）↓（1つだけ表示繰り返さない）□inherit（ほとんど使いませんが、一応(;笑)、親要素の値を明示的に継承する指定の値です）■background-position: ***;（背景画像の表示位置を指定する）このプロパティでは値をひとつ記述した場合とふたつ記述した場合が設定できます。ひとつだけ記述しますと左右の値を現し、上下位置は中央に表示されます。ふたつ記述しますと(1)左右の値(2)上下の値を現します。□percentage（パーセンテージで指定する場合）background-position: 20% 70%; … 左から20%、上から70%の位置に表示<div style="width: 400px; height: 100px; background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/11.gif); background-repeat: no-repeat; background-position: 20% 70%;">左から20%、上から70%の位置に表示</div>こんな感じですね（＾＾）↓左から20%、上から70%の位置に表示background-position: 50%; … 左から50%、上から50%の位置に表示<div style="width: 400px; height: 100px; background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/11.gif); background-repeat: no-repeat; background-position: 50%;">左から50%、上から50%の位置に表示</div>こんな感じですね（＾＾）↓左から50%、上から50%の位置に表示□length（単位で指定する場合）『相対値指定の単位 em: フォントの大きさ ex: 小文字の高さ px: ピクセル 』『絶対値指定の単位 in: インチ。2.54 cm cm: センチメートル mm: ミリメートル pt: ポイント。1/72 インチ pc: ピカ。12 ポイント 』background-position: 100px 40px; … 左から100px、上から40pxの位置に表示<div style="width: 400px; height: 100px; background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/11.gif); background-repeat: no-repeat; background-position: 100px 40px;">左から100px、上から40pxの位置に表示</div>こんな感じですね（＾＾）↓左から100px、上から40pxの位置に表示background-position: 80px; … 左から80px、上から50%の位置に表示<div style="width: 400px; height: 100px; background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/11.gif); background-repeat: no-repeat; background-position: 80px;">左から80px、上から50%の位置に表示</div>こんな感じですね（＾＾）↓左から80px、上から50%の位置に表示□『水平方向：left（左）center（中央）right（右）』『垂直方向：top（上）center（中央）bottom（下）』【記述例】background-position: right bottom; … 右より下部に表示 background-position: left top; … 左より上部に表示 background-position: right; … 右の中央に表示（省略された場合すべてcenterと同じになります） background-position: bottom; … 下の中央に表示 background-position: center; … 中央に表示<div style="width: 400px; height: 100px; background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/11.gif); background-repeat: no-repeat; background-position: right bottom;">右より下部に表示</div>こんな感じですね（＾＾）↓右より下部に表示■background-attachment: fixed; 背景画像をスクロールさせない □fixed（背景画像の位置固定、スクロールしても動かなくなります。）□scroll（スクロールにしたがい、背景画像も移動します。）<div style="width: 400px; height: 100px; background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/11.gif); background-repeat: no-repeat; background-position: right bottom; background-attachment: fixed;">背景画像の位置固定、スクロールしても動かなくなります</div>こんな感じですね（＾＾）↓背景画像の位置固定、スクロールしても動かなくなります■background: ***; 背景の設定をひとまとめに行う<div style="width: 400px; height: 100px; background: #FFA500 url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/11.gif) repeat-y fixed right top;">背景の設定をひとまとめに行う</div>こんな感じですね（＾＾）↓背景の設定をひとまとめに行う----------------------------------------------------------------------▲CSS本来の記述方法(楽天ではできませんが、本来はbodyに指定して壁紙を設定するなどが一番多い使い道です)<style type="text/css"><!-- body {background-image: url("../images/***.jpg");background-repeat: no-repeat;background-attachment: fixed;background-position: right bottom}--></style>*****************************************************【庶事所感】時間の使い方って本当に難しいなと思います。何でもダイジェストで見れたり聞けるといいのですが、そうは行かないものが多くて･･･要領の良い悪いもあるのかもしれませんが、どうもこのところ段取りが悪いのか一日に思っていることの半分以下のことしか出来ません（＞＜）*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.17
コメント(8)
-
style18（cursor: ***;-カーソルの形）
スタイルシート>>全般>>cursor: ***;////////////////////////////////////////////////////////////////////////■cursor: ***;（カーソルの形を変える）まったく使わないかもしれません（＞＜）といいますか、わたくしはほとんど使いません。遊びのページにはこんなのもいいかなと思います。例えば、魚釣りのページでしたらお魚のカーソルとか、キャラクタのページであればキャラクタのカーソルを作って使うのもいいですね。----------------------------------------------------------------------▲直接指定の記述方法■cursor: ***;（カーソルをリサイズする「形を変える」）文章、文字の上でカーソルが変わる<span style="cursor: progress;">テンプレートとアクセスアップのでめらら日記</span>↓こんな感じですね（＾＾）テンプレートとアクセスアップのでめらら日記アンカータグの上でカーソルが変わる<a href="http://www.priority-one.info/inner/" style="cursor: move;">・女性下着通販【インナーコレクション】</a>↓こんな感じですね（＾＾）・女性下着通販【インナーコレクション】イメージ（画像）の上でカーソルが変わる<img src="http://my.plaza.rakuten.co.jp/img/user/99/06/4429906/7.png" style="cursor: not-allowed;">↓こんな感じですね（＾＾）----------------------------------------------------------------------値内容カーソルをのせて見てくださいauto自動（デフォルト）■■自動（デフォルト）のカーソル■■default標準■■標準のカーソル■■pointerリンク■■リンクのカーソル■■crosshair十字■■十字のカーソル■■move移動■■移動のカーソル■■textテキスト■■テキストのカーソル■■wait処理中■■処理中のカーソル■■helpヘルプ■■ヘルプのカーソル■■n-resize上リサイズ■■上リサイズのカーソル■■e-resize右リサイズ■■右リサイズのカーソル■■s-resize下リサイズ■■下リサイズのカーソル■■w-resize左リサイズ■■左リサイズのカーソル■■ne-resize右上リサイズ■■右上リサイズのカーソル■■se-resize右下リサイズ■■右下リサイズのカーソル■■sw-resize左下リサイズ■■左下リサイズのカーソル■■nw-resize左上リサイズ■■左上リサイズのカーソル■■col-resize左右リサイズ■■左右リサイズのカーソル■■row-resize上下リサイズ■■上下リサイズのカーソル■■all-scroll上下左右スクロール■■上下左右スクロールのカーソル■■not-allowed不可■■不可のカーソル■■no-dropドロップ不可■■ドロップ不可のカーソル■■progress処理中■■処理中のカーソル■■vertical-text縦書テキスト■■縦書テキストのカーソル■■url(***.cur)オリジナルカーソルサンプルなし----------------------------------------------------------------------▲CSS本来の記述方法<style type="text/css"><!-- .p1 {cursor: wait;} .p2 {cursor: help;} .p3 {cursor: url(***.cur);} --></style>----------------------------------------------------------------------※オリジナルカーソルは素材サイトなどで無償配布されていますし、また自作のできるサイトもあります。（カーソル 無料 作成）で検索したらたくさんソフトがありましたよ（＾＾）※使用できるファイルの拡張子はカーソル（ .cur ）とアニメーションカーソル（ .ani ）です。gifやjpgは使えません。*****************************************************【庶事所感】スタイルシートの属性（プロパティ）をざっと数えてみると155ありました（＞＜）整理するとどれもが互いに関係しあうので分類が難しいのですが、、全般⇒ボックスの順で解説しようと考えています。*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.16
コメント(14)
-
style17（writing-mode: tb-rl;-縦書き、direction: ***; unicode-bidi: ***;-文章の方向）
スタイルシート>>テキスト>>writing-mode: tb-rl;＆direction: ***; unicode-bidi: ***;////////////////////////////////////////////////////////////////////////■writing-mode: tb-rl;（縦書きを指定する）■direction: ***; unicode-bidi: ***;（文章の方向「左右」を指定する）「横文字」ということばがありますが、多くの言語は横方向（行＝横書き）に文字を並べることによって文章を作るようになっています。しかし、日本語や一部の言語（中国語など）では縦方向（列＝縦書き）に文字を並べて表現する言語があり、特に日本語では縦方向（列＝縦書き）に文字を並べることによって表現することで横書きには無い独特の感性を与えてくれるように思います。また、横文字であってもアラビア語や一部の言語では文字の配列が左から右では無く、右から左へ書かれていくものがあります。日本語ももともとが縦書きで右から左へ記述される言語であるため、時代によっては横書きも右はじまり左方向へすすむ記述がされていました。----------------------------------------------------------------------▲直接指定の記述方法■writing-mode: tb-rl;（縦書きを指定する）<p style="writing-mode: tb-rl;">いづれの御時にか、女御、更衣あまたさぶらひたまひけるなかに、いとやむごとなき際にはあらぬが、すぐれて時めきたまふありけり。はじめより我はと思ひ上がりたまへる御方がた、めざましきものにおとしめ嫉みたまふ。同じほど、それより下臈の更衣たちは、ましてやすからず。朝夕の宮仕へにつけても、人の心をのみ動かし、恨みを負ふ積もりにやありけむ、いと篤しくなりゆき、もの心細げに里がちなるを、いよいよあかずあはれなるものに思ほして、人のそしりをもえ憚らせたまはず、世のためしにもなりぬべき御もてなしなり。</P>↓こんな感じですね（＾＾）いづれの御時にか、女御、更衣あまたさぶらひたまひけるなかに、いとやむごとなき際にはあらぬが、すぐれて時めきたまふありけり。はじめより我はと思ひ上がりたまへる御方がた、めざましきものにおとしめ嫉みたまふ。同じほど、それより下臈の更衣たちは、ましてやすからず。朝夕の宮仕へにつけても、人の心をのみ動かし、恨みを負ふ積もりにやありけむ、いと篤しくなりゆき、もの心細げに里がちなるを、いよいよあかずあはれなるものに思ほして、人のそしりをもえ憚らせたまはず、世のためしにもなりぬべき御もてなしなり。★☆追記です（＾＾）font-family: 'HGP行書体'を加えてみました☆★いづれの御時にか、女御、更衣あまたさぶらひたまひけるなかに、いとやむごとなき際にはあらぬが、すぐれて時めきたまふありけり。はじめより我はと思ひ上がりたまへる御方がた、めざましきものにおとしめ嫉みたまふ。同じほど、それより下臈の更衣たちは、ましてやすからず。朝夕の宮仕へにつけても、人の心をのみ動かし、恨みを負ふ積もりにやありけむ、いと篤しくなりゆき、もの心細げに里がちなるを、いよいよあかずあはれなるものに思ほして、人のそしりをもえ憚らせたまはず、世のためしにもなりぬべき御もてなしなり。///////////////////////////////////////////////////////////////////////■direction: ***; unicode-bidi: ***;（文章の方向「左右」を指定する）■direction □ltr … （左から右へ）デフォルト□rtl … （右から左へ）■unicode-bidi□bidi-override … （有効にする）□embed … （状況により）□normal … （標準）デフォルト※もしアラビア語やヘブライ語で記述した文書をそのまま書くのであれば、これらの指定は必要ありません。Unicode（ユニコード）といいまして世界統一基準のなかでたとえば日本語や英語は左から右の設定がされており、アラビア語やヘブライ語は右から左の設定があらかじめされているからです。とまりそれらがデフォルト（標準）ということになります。----------------------------------------------------------------------▲直接指定の記述方法<p style="direction: rtl; unicode-bidi: bidi-override;"><b>オリックス</b>時代より速い！<b>イチロー</b>１００度目の猛打賞 </P">↓こんな感じですね（＾＾）オリックス時代より速い！イチロー１００度目の猛打賞 ----------------------------------------------------------------------▲CSS本来の記述方法<style type="text/css"><!-- p {writing-mode: tb-rl;}--></style>*****************************************************【庶事所感】「四国アイランドリーグは１４日、坊っちゃんスタジアムなどで２試合を行った。愛媛マンダリンパイレーツは９―０で高知ファイティングドックスに完勝、このカード初白星をあげた。香川オリーブガイナーズは徳島インディゴソックスに４―０の完封勝ち。」これって、一般のテレビでは放送してくれないのかなぁ（＞＜）確かに四国4県だけの世界だものなぁ･･･愛媛県出身のわたくしとしましては、身贔屓でもっと宣伝してほしいなぁと思ってます(*^^*)/*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.15
コメント(9)
-
style16（ruby-align: ***; ruby-position: ***;ルビ「ふりがな」）
スタイルシート>>テキスト>>ruby-align: ***; ruby-position: ***;////////////////////////////////////////////////////////////////////////■ruby-align: ***; ruby-position: ***;（ルビ「ふりがな」の位置を指定する）※■vertical-align: ***;（上付文字と下付文字）についてはこのあと「ボックス」という項目の中で解説したいと思います。----------------------------------------------------------------------■ruby-align: ***; ruby-position: ***;（ルビ「ふりがな」の位置を指定する）■ruby-align … ふりがなの位置を、左、中央、右、両端揃え、均等、行端揃えで指定します。□auto … （自動）デフォルト ルビの位置を指定ふりがな □left … （左寄せ） ルビの位置を指定ふりがな □center … （中央） ルビの位置を指定ふりがな □right … （右寄せ） ルビの位置を指定ふりがな □distribute-letter … （両端揃え） ルビの位置を指定ふりがな □distribute-space … （均等） ルビの位置を指定ふりがな □line-edge … （行端揃え）■ruby-position … ふりがなの位置を、対象文字の上部（デフォルト）か右側で指定します。□above … （上部）デフォルト ルビの位置を指定ふりがな □inline … （右側） ルビの位置を指定ふりがな ----------------------------------------------------------------------▲直接指定の記述方法■ruby-align□auto（自動）<ruby style="ruby-align: auto;">浜 田 省 吾<rt>はまだしょうご<rt></ruby>↓こんな感じですね（＾＾）浜 田 省 吾はまだしょうご□left（左寄せ）<ruby style="ruby-align: left;">浜 田 省 吾<rt>はまだしょうご<rt></ruby>↓こんな感じですね（＾＾）浜 田 省 吾はまだしょうご□cente（中央）<ruby style="ruby-align: center;">浜 田 省 吾<rt>はまだしょうご<rt></ruby>↓こんな感じですね（＾＾）浜 田 省 吾はまだしょうご□right（右寄せ）<ruby style="ruby-align: right;">浜 田 省 吾<rt>はまだしょうご<rt></ruby>↓こんな感じですね（＾＾）浜 田 省 吾はまだしょうご□distribute-letter（両端揃え）<ruby style="ruby-align: distribute-letter;">浜 田 省 吾<rt>はまだしょうご<rt></ruby>↓こんな感じですね（＾＾）浜 田 省 吾はまだしょうご□distribute-space（均等割付）<ruby style="ruby-align: distribute-space;">浜 田 省 吾<rt>はまだしょうご<rt></ruby>↓こんな感じですね（＾＾）浜 田 省 吾はまだしょうご□line-edge（行端揃え）<p><ruby style="ruby-align: line-edge;">省吾<rt>はまだしょうご<rt></ruby>、1952年12月29日、広島県竹原市に生まれる</p>「行頭が揃っていることに注意してください」<p>浜田省吾、1952年12月29日、<ruby style="ruby-align: line-edge;">竹原市<rt>ひろしまけんたけはらし<rt></ruby>に生まれる</p>「両端が同じ幅でわりふられます」↓こんな感じですね（＾＾）省吾はまだしょうご、1952年12月29日、広島県竹原市に生まれる浜田省吾、1952年12月29日、竹原市ひろしまけんたけはらしに生まれる■ruby-position□above（上部）<ruby style="ruby-position: above;">浜 田 省 吾<rt>はまだしょうご<rt></ruby>↓こんな感じですね（＾＾）浜 田 省 吾はまだしょうご□inline（右側）<ruby style="ruby-position: inline;">浜 田 省 吾<rt>(はまだしょうご)<rt></ruby>↓こんな感じですね（＾＾）浜 田 省 吾(はまだしょうご)----------------------------------------------------------------------▲CSS本来の記述方法<style type="text/css"><!-- rt {color: #ff0000（ルビの色が指定できます）}.con {ruby-position: above;ruby-align: distribute-space;}--></style>*****************************************************【庶事所感】『伊東観光協会は今年、海の恵みいっぱいの伊東温泉をアピールしようと地引き網体験を２０年ぶりに復活させた。伊東温泉に宿泊した人たちに伊東オレンジビーチで地引き網に挑戦してもらう企画。第１回体験の開かれた１日には２００人以上の親子連れらが詰めかけ、大盛況となった。』子供の頃からいちどやってみたい！と思っていたのですが、一度もやったことがない「地引網」何だか楽しそう（＾＾）何とか時間とっていってみようかなぁ･･･*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.14
コメント(8)
-
style15（text-transform: ***;-大文字化／小文字化、white-space: ***;-空白類文字の制御方法）
スタイルシート>>テキスト>>text-transform＆white-space////////////////////////////////////////////////////////////////////////■text-transform: ***;（大文字化／小文字化を指定します）■white-space: ***;（空白類文字の制御方法を指定します）■line-height: ***;（行間を指定する）----------------------------------------------------------------------■text-transform: ***;（大文字化／小文字化を指定します）□capitalize（各単語の先頭文字を大文字にします）□uppercase（各単語のすべての文字を大文字にします）□lowercase（各単語のすべての文字を小文字にします）□none（指定なし）デフォルト□inherit（ほとんど使いませんが、一応(;笑)、親要素の値を明示的に継承する指定の値です）日本語には大文字・小文字がありませんので対応はしません----------------------------------------------------------------------▲直接指定の記述方法<p style="text-transform: capitalize;">Internet giant Yahoo! has unveiled a new</p>↓こんな感じですね（＾＾）Internet giant Yahoo! has unveiled a new<p style="text-transform: uppercase;">Internet giant Yahoo! has unveiled a new</p>↓こんな感じですね（＾＾）Internet giant Yahoo! has unveiled a new<p style="text-transform: lowercase;">Internet giant Yahoo! has unveiled a new</p>↓こんな感じですね（＾＾）Internet giant Yahoo! has unveiled a new<p style="text-transform: none;">Internet giant Yahoo! has unveiled a new</p>↓こんな感じですね（＾＾）Internet giant Yahoo! has unveiled a new----------------------------------------------------------------------■white-space: ***;（空白類文字の制御方法を指定します、nowrapで自動改行禁止）□normal（デフォルト、テーブルやボックスの中では自動改行されます）□pre（ソース中の連続する半角スペース・タブ・改行を、そのまま表示します）□nowrap（ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示します）□inherit（ほとんど使いませんが、一応(;笑)、親要素の値を明示的に継承する指定の値です）----------------------------------------------------------------------▲直接指定の記述方法<p style="white-space: normal;">MyFirstLove2005年7月6日発売決定!! 価格:\3,059(税込)01.光と影の季節 Flash and Shadow02.この夜に乾杯！ Cheers for Tonight03.旅立ちの朝 Brand new Morning04.Thank you05.デスク越しの恋 Wink06.誰かどこかで Somewhere not here07.I am a father08.花火 Hanabi09.初恋 My First Love10.君と歩いた道（aｌbum ver.） You are the one11.ある晴れた夏の日の午後 One Fine Summer Day浜田省吾4年ぶりオリジナル・ニュー・アルバム。少年の頃に恋したロックへの思いを 込めて、"ひと言で言うと「初心に帰る」"それでいて"また新しいドアを開けた感じ"と本人も語る今作、主人公の男達の日々の中にある"光と陰"、その一瞬一瞬を切り取った、情景豊かな浜田省吾ならではのロック・アルバム！ </p>↓こんな感じですね（＾＾）MyFirstLove2005年7月6日発売決定!! 価格:\3,059(税込)01.光と影の季節 Flash and Shadow02.この夜に乾杯！ Cheers for Tonight03.旅立ちの朝 Brand new Morning04.Thank you05.デスク越しの恋 Wink06.誰かどこかで Somewhere not here07.I am a father08.花火 Hanabi09.初恋 My First Love10.君と歩いた道（aｌbum ver.） You are the one11.ある晴れた夏の日の午後 One Fine Summer Day浜田省吾4年ぶりオリジナル・ニュー・アルバム。少年の頃に恋したロックへの思いを 込めて、"ひと言で言うと「初心に帰る」"それでいて"また新しいドアを開けた感じ"と本人も語る今作、主人公の男達の日々の中にある"光と陰"、その一瞬一瞬を切り取った、情景豊かな浜田省吾ならではのロック・アルバム！ <p style="white-space: pre;">MyFirstLove2005年7月6日発売決定!! 価格:\3,059(税込)01.光と影の季節 Flash and Shadow02.この夜に乾杯！ Cheers for Tonight03.旅立ちの朝 Brand new Morning04.Thank you05.デスク越しの恋 Wink06.誰かどこかで Somewhere not here07.I am a father08.花火 Hanabi09.初恋 My First Love10.君と歩いた道（aｌbum ver.） You are the one11.ある晴れた夏の日の午後 One Fine Summer Day浜田省吾4年ぶりオリジナル・ニュー・アルバム。少年の頃に恋したロックへの思いを 込めて、"ひと言で言うと「初心に帰る」"それでいて"また新しいドアを開けた感じ"と本人も語る今作、主人公の男達の日々の中にある"光と陰"、その一瞬一瞬を切り取った、情景豊かな浜田省吾ならではのロック・アルバム！ </p>↓こんな感じですね（＾＾）MyFirstLove2005年7月6日発売決定!! 価格:\3,059(税込)01.光と影の季節 Flash and Shadow02.この夜に乾杯！ Cheers for Tonight03.旅立ちの朝 Brand new Morning04.Thank you05.デスク越しの恋 Wink06.誰かどこかで Somewhere not here07.I am a father08.花火 Hanabi09.初恋 My First Love10.君と歩いた道（aｌbum ver.） You are the one11.ある晴れた夏の日の午後 One Fine Summer Day浜田省吾4年ぶりオリジナル・ニュー・アルバム。少年の頃に恋したロックへの思いを 込めて、"ひと言で言うと「初心に帰る」"それでいて"また新しいドアを開けた感じ"と本人も語る今作、主人公の男達の日々の中にある"光と陰"、その一瞬一瞬を切り取った、情景豊かな浜田省吾ならではのロック・アルバム！ <p style="white-space: nowrap;">MyFirstLove2005年7月6日発売決定!! 価格:\3,059(税込)01.光と影の季節 Flash and Shadow02.この夜に乾杯！ Cheers for Tonight03.旅立ちの朝 Brand new Morning04.Thank you05.デスク越しの恋 Wink06.誰かどこかで Somewhere not here07.I am a father08.花火 Hanabi09.初恋 My First Love10.君と歩いた道（aｌbum ver.） You are the one11.ある晴れた夏の日の午後 One Fine Summer Day浜田省吾4年ぶりオリジナル・ニュー・アルバム。少年の頃に恋したロックへの思いを 込めて、"ひと言で言うと「初心に帰る」"それでいて"また新しいドアを開けた感じ"と本人も語る今作、主人公の男達の日々の中にある"光と陰"、その一瞬一瞬を切り取った、情景豊かな浜田省吾ならではのロック・アルバム！ </p>↓こんな感じですね（＾＾）MyFirstLove2005年7月6日発売決定!! 価格:\3,059(税込)01.光と影の季節 Flash and Shadow02.この夜に乾杯！ Cheers for Tonight03.旅立ちの朝 Brand new Morning04.Thank you05.デスク越しの恋 Wink06.誰かどこかで Somewhere not here07.I am a father08.花火 Hanabi09.初恋 My First Love10.君と歩いた道（aｌbum ver.） You are the one11.ある晴れた夏の日の午後 One Fine Summer Day浜田省吾4年ぶりオリジナル・ニュー・アルバム。少年の頃に恋したロックへの思いを 込めて、"ひと言で言うと「初心に帰る」"それでいて"また新しいドアを開けた感じ"と本人も語る今作、主人公の男達の日々の中にある"光と陰"、その一瞬一瞬を切り取った、情景豊かな浜田省吾ならではのロック・アルバム！ ----------------------------------------------------------------------▲CSS本来の記述方法<style type="text/css"><!-- div {text-align: center;letter-spacing: 1em;word-spacing: 1em;text-transform: capitalize;white-space: nowrap;}--></style>*****************************************************【庶事所感】5月14日までまた、レディースデイです（＠＠）もれなく500ポイント進呈だそうです。おーい！楽天さん！！ジェントルマンデーも作ってくださいよ～*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.13
コメント(6)
-
style14（letter-spacing: ***;-文字の間隔、word-spacing: ***;-単語の間隔）
スタイルシート>>テキスト>>letter-spacing＆word-spacing////////////////////////////////////////////////////////////////////////■letter-spacing: ***;（文字の間隔を指定する）■word-spacing: ***;（単語の間隔を指定する）HTMLやstyleは日本語向けに作られたものではないので、使い方を考えなければなりませんが、これらも意外と使うことができるスタイルだと思います。----------------------------------------------------------------------■letter-spacing: ***;（文字の間隔を指定する）□normal（デフォルト）□length（いちばん使うサイズ指定ではないでしょうか）「相対値指定の単位、em: フォントの大きさ 'font-size' を 1 、ex: 小文字の高さ 'x-height' を 1、px: ピクセル。解像度に依存してサイズが決定」「絶対値指定の単位 、in: インチ=2.54 cm、cm: センチメートル、mm: ミリメートル、pt: ポイント=1/72 インチ、pc: パイカ=12 ポイント」□inherit（ほとんど使いませんが、一応(;笑)、親要素の値を明示的に継承する指定の値です）----------------------------------------------------------------------▲直接指定の記述方法<p style="letter-spacing: 1em;">テンプレートとアクセスアップのでめらら日記</p>↓こんな感じですね（＾＾）テンプレートとアクセスアップのでめらら日記<p style="letter-spacing: -3px;">テンプレートとアクセスアップのでめらら日記</p>↓こんな感じですね（＾＾）テンプレートとアクセスアップのでめらら日記<p style="letter-spacing: 2pt;">テンプレートとアクセスアップのでめらら日記</p>↓こんな感じですね（＾＾）テンプレートとアクセスアップのでめらら日記<p style="letter-spacing: 1em;">Internet giant Yahoo! has unveiled a new</p>↓こんな感じですね（＾＾）Internet giant Yahoo! has unveiled a new<p style="letter-spacing: 1px;">Internet giant Yahoo! has unveiled a new</p>↓こんな感じですね（＾＾）Internet giant Yahoo! has unveiled a new<p style="letter-spacing: 1pt;">Internet giant Yahoo! has unveiled a new</p>↓こんな感じですね（＾＾）Internet giant Yahoo! has unveiled a new----------------------------------------------------------------------■word-spacing: ***;（単語の間隔を指定する）□normal（デフォルト）□length（いちばん使うサイズ指定ではないでしょうか）「相対値指定の単位、em: フォントの大きさ 'font-size' を 1 、ex: 小文字の高さ 'x-height' を 1、px: ピクセル。解像度に依存してサイズが決定」「絶対値指定の単位 、in: インチ=2.54 cm、cm: センチメートル、mm: ミリメートル、pt: ポイント=1/72 インチ、pc: パイカ=12 ポイント」□inherit（ほとんど使いませんが、一応(;笑)、親要素の値を明示的に継承する指定の値です）----------------------------------------------------------------------▲直接指定の記述方法<p style="word-spacing: 1em;">テンプレートとアクセスアップのでめらら日記</p>↓こんな感じですね（＞＜）かわらない！テンプレートとアクセスアップのでめらら日記<p style="word-spacing: 30px;">テンプレートとアクセスアップのでめらら日記</p>↓こんな感じですね（＞＜）かわらない！テンプレートとアクセスアップのでめらら日記<p style="word-spacing: 1pt;">テンプレートとアクセスアップのでめらら日記</p>↓こんな感じですね（＞＜）かわらない！テンプレートとアクセスアップのでめらら日記<p style="word-spacing: 1em;">Internet giant Yahoo! has unveiled a new</p>↓こんな感じですね（＾＾）Internet giant Yahoo! has unveiled a new<p style="word-spacing: 30px;">Internet giant Yahoo! has unveiled a new</p>↓こんな感じですね（＾＾）Internet giant Yahoo! has unveiled a new<p style="word-spacing: 1pt;">Internet giant Yahoo! has unveiled a new</p>↓こんな感じですね（＾＾）Internet giant Yahoo! has unveiled a new----------------------------------------------------------------------▲CSS本来の記述方法<style type="text/css"><!-- div {text-align: center;letter-spacing: 1em;word-spacing: 1em;}--></style>*****************************************************【庶事所感】「アイスコーヒーを買おう」と思いました。便利そうなので「リキッドタイプ」がいいかもなぁ！「無農薬もしくは低農薬、有機栽培のものが欲しいなぁ」「でも、待てよ･･･リキッドタイプということは、その水はどうなのだろう？？？豆は無農薬もしくは低農薬、有機栽培でも作られたときの水は塩素やダイオキシンたっぷりなんてこともあるじゃん（＞＜）」「やっぱり、豆を買って、水は自宅のアルカリイオン水で淹れることにしよう･･･」からだが痒くなくなったり、花粉症が改善されたこのカンジになってから本当に飲み物や食べ物について気にするようになりました。気にし過ぎるのもよくないでしょうけれど、食品の「原材料名」を見ていると気にせざるを得ない気がします（ToT）*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.12
コメント(6)
-
style13（text-align: ***;（右寄せ／左寄せ／中央揃え）
スタイルシート>>テキスト>>text-align////////////////////////////////////////////////////////////////////////■text-align: ***;（右寄せ／左寄せ／中央揃えなどの表示位置を指定します）■text-decoration: ***;（テキストの装飾方法を指定します）■text-shadow: ***;（影の効果を指定します）※text-decorationは一昨日の日記を参照ください※text-shadowはマッキントッシュの一部のブラウザでのみ有効です----------------------------------------------------------------------■text-align: ***;（右寄せ／左寄せ／中央揃えなどの表示位置を指定します）□left（左寄せにします）□right（右寄せにします）□center（中央揃えにします）□justify（均等割付にします）text-justify: ***;が必要です。----------------------------------------------------------------------▲直接指定の記述方法<p style="text-align: left;">テンプレートとアクセスアップのでめらら日記</p>↓こんな感じですね（＾＾）テンプレートとアクセスアップのでめらら日記<p style="text-align: right;">テンプレートとアクセスアップのでめらら日記</p>↓こんな感じですね（＾＾）テンプレートとアクセスアップのでめらら日記<p style="text-align: center;">テンプレートとアクセスアップのでめらら日記</p>↓こんな感じですね（＾＾）テンプレートとアクセスアップのでめらら日記<p style="text-align: justify; text-justify: distribute-all-lines;">テンプレートとアクセスアップのでめらら日記</p>↓こんな感じですね（＾＾）テンプレートとアクセスアップのでめらら日記----------------------------------------------------------------------▲CSS本来の記述方法<style type="text/css"><!-- div {text-align: center;}--></style>*****************************************************【庶事所感】今年は、なんとかゴールデンウィークまでと思い誤魔化しながら薬や医師に頼らず。やり過ごした『花粉症』だったのですが、ここ何日かは鼻づまりで目が覚めるようになっています（＞＜）免疫力はそれなりについてきているとは思うのです（ものすごく軽くすみましたもの(＾＾)）が、これだけは辛いです（＞＜）、喉がカラカラで目が覚めてしまいますので（;大泣）*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.11
コメント(10)
-
style12(text-indent: ***;-インデント、行頭の字下げ)
ここからは、「テキスト関連のスタイル」のご紹介です。ごめんなさい（＞＜）「text-decoration」を昨日font周りの装飾スタイルとしてご紹介いたしましたが、ちょっと区別が難しいのですが、（3）～（9）までが「font」周りのスタイルとして整理したいと思います。また「line-height」はfont指定でまとめて指定する場合指定できる項目に含まれているのですが、区分するとテキスト関連と言えそうです。テキスト関連のスタイルを整理しますと、以下のようになると思います。■text-indent: ***;（インデント、行頭の字下げを指定します）■text-align: ***;（右寄せ／左寄せ／中央揃えなどの表示位置を指定します）■text-decoration: ***;（テキストの装飾方法を指定します）■text-shadow: ***;（影の効果を指定します）■letter-spacing: ***;（文字の間隔を指定する）■word-spacing: ***;（単語の間隔を指定する）■text-transform: ***;（大文字化／小文字化を指定します）■white-space: ***;（空白類文字の制御方法を指定します）■line-height: ***;（行間を指定する） ■vertical-align: ***;（上付文字と下付文字）■white-space: nowrap;（改行させない）■ruby-align: ***; ruby-position: ***;（ルビ「ふりがな」の位置を指定する）■writing-mode: tb-rl;（縦書きを指定する）■direction: ***; unicode-bidi: ***;（文章の方向「左右」を指定する）で、「パンくず」表示しますと、こんなカンジでしょうか（＾＾）スタイルシート>>テキスト>>text-indent////////////////////////////////////////////////////////////////////////■text-indent: ***;（インデント、行頭の字下げを指定します）----------------------------------------------------------------------□length（単位数値の指定）「相対値指定の単位、em: フォントの大きさ 'font-size' を 1 、ex: 小文字の高さ 'x-height' を 1、px: ピクセル。解像度に依存してサイズが決定」「絶対値指定の単位 、in: インチ=2.54 cm、cm: センチメートル、mm: ミリメートル、pt: ポイント=1/72 インチ、pc: パイカ=12 ポイント」□percentage（パーセンテージの指定）「使用したフォントのサイズを 100% として計算します」□inherit（ほとんど使いませんが、一応(;笑)、親要素の値を明示的に継承する指定の値です）----------------------------------------------------------------------▲直接指定の記述方法<div style="text-indent: 1em;">「永遠のともだち／砂の祈り」チャリティーシングルの収益金を、J.S.FOUNDATION に送金いたしました。第一回目の寄付金合計額は、￥１２,２２９,６８０－ です。本当にたくさんの方々から温かいお気持ちをいただき、どうもありがとうございました！このお金は、「国境なき医師団」「UNHCR」（イラク・アフガニスタンへの送金）、また、「ピースウインズ・ジャパン」「AMDA」等の団体と協議の上、現在、 困難な境遇にある人たちに役立てていただきます。</div>↓こんな感じですね（＾＾）「1文字目注目です！」「永遠のともだち／砂の祈り」チャリティーシングルの収益金を、J.S.FOUNDATION に送金いたしました。第一回目の寄付金合計額は、￥１２,２２９,６８０－ です。本当にたくさんの方々から温かいお気持ちをいただき、どうもありがとうございました！このお金は、「国境なき医師団」「UNHCR」（イラク・アフガニスタンへの送金）、また、「ピースウインズ・ジャパン」「AMDA」等の団体と協議の上、現在、 困難な境遇にある人たちに役立てていただきます。<div style="text-indent: 50%;">「永遠のともだち／砂の祈り」チャリティーシングルの収益金を、J.S.FOUNDATION に送金いたしました。第一回目の寄付金合計額は、￥１２,２２９,６８０－ です。本当にたくさんの方々から温かいお気持ちをいただき、どうもありがとうございました！このお金は、「国境なき医師団」「UNHCR」（イラク・アフガニスタンへの送金）、また、「ピースウインズ・ジャパン」「AMDA」等の団体と協議の上、現在、 困難な境遇にある人たちに役立てていただきます。</div>↓こんな感じですね（＾＾）「1文字目注目です！」「永遠のともだち／砂の祈り」チャリティーシングルの収益金を、J.S.FOUNDATION に送金いたしました。第一回目の寄付金合計額は、￥１２,２２９,６８０－ です。本当にたくさんの方々から温かいお気持ちをいただき、どうもありがとうございました！このお金は、「国境なき医師団」「UNHCR」（イラク・アフガニスタンへの送金）、また、「ピースウインズ・ジャパン」「AMDA」等の団体と協議の上、現在、 困難な境遇にある人たちに役立てていただきます。----------------------------------------------------------------------▲CSS本来の記述方法<style type="text/css"><!-- div {text-indent: 1em;}--></style>*****************************************************【庶事所感】『女優の竹内結子さん（２５）と歌舞伎俳優の中村獅童さん（３２）が１０日までに、結婚を前提に交際していることを、それぞれの公式ＨＰで報告した。ＨＰで竹内さんは、「結婚を前提にしたお付き合いをさせて頂いていることをご報告致します。女優業は変わらず続けていきます」、中村さんも「この人を一生大切にしたい、と思い始めました」と記している。２人は０４年１０月公開の映画「いま、会いにゆきます」（東宝系）で、夫婦役で共演していた。』･･･むかしから、ドラマの共演は結婚への道なんですね（＾＾）竹内結子さんはNHK朝の連ドラ、中村獅童さんは昨年NHK「新撰組」で好演なさっており、おふたかたともわたくしも大好きな俳優さん、うまくいくといいですね！*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.10
コメント(8)
-
style11(text-decoration-文字の装飾線、点滅)
font周りのスタイル-「text-decoration」スタイルシート>>フォント>>font周りのスタイル(2)////////////////////////////////////////////////////////////////////////■text-decoration（文字の装飾線、点滅を指定するプロパティ）----------------------------------------------------------------------□underline … （下線）□overline … （上線）IEとNN6で有効□line-through … （抹消線）□blink … （点滅）NNのみ有効□none … （指定なし）デフォルトこれらを同時に指定もできます。半角スペースで区切って記述text-decoration: underline overline; ----------------------------------------------------------------------<p style="text-decoration: underline;">「underline」下線を指定</p>↓こんな感じですね（＾＾）「underline」下線を指定<p style="text-decoration: overline;">「overline」上線を指定</p>↓こんな感じですね（＾＾）「overline」上線を指定<p style="text-decoration: line-through;">「line-through」抹消線を指定</p>↓こんな感じですね（＾＾）「line-through」抹消線を指定<p style="text-decoration: blink;">「blink」点滅を指定</p>↓こんな感じですね（＾＾）「blink」点滅を指定<p style="text-decoration: underline overline;">「underline overline」上下線を指定</p>↓こんな感じですね（＾＾）「underline overline」上下線を指定----------------------------------------------------------------------じつはこのテキストデコレーションはいろんなところでお目にかかっているスタイルだろうと思います。アンカータグの「hover」と組み合わせて、ポイントしたとき（リンクテキストの上にカーソルやポインターを重ねたとき）だけ文字の下などに線を表示させたりするのに使います。楽天広場ではアンカータグの定義済みクラス（通常時、アクセス済み、ポイント時、クリック時での変化）を管理画面で指定できますが、スタイルを追加はできません（＞＜）----------------------------------------------------------------------▲CSS本来の記述方法<style type="text/css"><!-- P {font-style: italic;font-variant: normal;font-weight: 900;font-size: 200%;/line-height: 2em;font-family: sans-serif;zoom: 1.5;color: #00FF00;text-decoration: underline overline;}--></style>*****************************************************【庶事所感】交流戦でやっと（＞＜）楽天が巨人に勝ちましたね！ポイント2倍だぁ、わたくしはコーヒーを買おうかなぁと思っていま～す（＾＾）その昔、西武やダイエーが優勝しますと「優勝セール」やダメでも「残念セール」とか催されて、主婦の方々が「野球はわかんないけど西武がいい、ダイエーがいい」よ仰ってたお気持ちがよくわかりま～す(*^^*)*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.09
コメント(3)
-
style10(zoom-拡大、color-文字色)
font周りのスタイル-「text-decoration」fontのスタイルではないのですがテキストを修飾するスタイルがいくつかあります。スタイルシート>>フォント>>font周りのスタイル(1)////////////////////////////////////////////////////////////////////////■zoom（拡大を指定するプロパティ）■color（文字色を指定するプロパティ）■text-decoration（文字の装飾線、点滅を指定するプロパティ）----------------------------------------------------------------------■zoom（拡大を指定するプロパティ）□number（使用したフォントサイズに対する倍率（小数可）で指定します）zoom: 1.5; … 1.5倍に拡大zoom: 1; … デフォルトzoom: 0.5; … 半分に縮小□percentage（使用したフォントのサイズを 100% として計算します）zoom: 150%; … 1.5倍に拡大zoom: 100%; … デフォルトzoom: 50%; … 半分に縮小□number<p style="zoom: 1.5;">1.5倍ですABCDEFGHIJKLMNOPQRSTUVWXYZ</p><p style="zoom: 1;">デフォルトですABCDEFGHIJKLMNOPQRSTUVWXYZ</p><p style="zoom: 0.5;">0.5倍(半分)ですABCDEFGHIJKLMNOPQRSTUVWXYZ</p>↓こんな感じですね（＾＾）1.5倍ですABCDEFGHIJKLMNOPQRSTUVWXYZデフォルトですABCDEFGHIJKLMNOPQRSTUVWXYZ0.5倍(半分)ですABCDEFGHIJKLMNOPQRSTUVWXYZ□percentage<p style="zoom: 150%;">1.5倍ですABCDEFGHIJKLMNOPQRSTUVWXYZ</p><p style="zoom: 100%;">デフォルトですABCDEFGHIJKLMNOPQRSTUVWXYZ</p><p style="zoom: 50%;">0.5倍(半分)ですABCDEFGHIJKLMNOPQRSTUVWXYZ</p>↓こんな感じですね（＾＾）1.5倍ですABCDEFGHIJKLMNOPQRSTUVWXYZデフォルトですABCDEFGHIJKLMNOPQRSTUVWXYZ0.5倍(半分)ですABCDEFGHIJKLMNOPQRSTUVWXYZ----------------------------------------------------------------------■color（文字色を指定するプロパティ）BODY, TD, THのタグにもスタイルで色指定できますが当然段落のスタイルにも有効です。また、HTMLタグでは色指定はカラーコードとカラーネームだけですがスタイルでは以下のように細かい指定ができます。□color: #FF0000･･･ シャープ（ # ）で始まる6桁のカラーコードで指定 [タグと共通]□color: red･･･ redやgreen、whiteといったカラーネームで指定 [タグと共通]□color: #F00 シャープ･･･（ # ）で始まる3桁のカラーコードで指定 □color: rgb(255,0,0)･･･ rgb( )による指定（0～255） □color: rgb(100%,0%,0%)･･･ rgb( )による指定（0%～100%） ですので、ちなみに以下の五つの記述はスタイルの世界ではすべて同じ『赤』です（＾＾）color: #FF0000color: redcolor: #F00color: rgb(255,0,0)color: rgb(100%,0%,0%)いずれも各々の表示がＲＧＢを表していますので「白」はcolor: #FFFFFFcolor: whitecolor: #FFFcolor: rgb(255,255,255)color: rgb(100%,100%,100%)「赤」color: #FF0000color: redcolor: #F00color: rgb(255,0,0)color: rgb(100%,0%,0%)「緑」color: #00FF00color: greencolor: #0F0color: rgb(0,255,0)color: rgb(0%,100%,0%)「青」color: #0000FFcolor: bluecolor: #00Fcolor: rgb(0,0,255)color: rgb(0%,0%,100%)「黒」color: #000000color: blackcolor: #000color: rgb(0,0,0)color: rgb(0%,0%,0%)<p style="color: rgb(255,0,0)">赤い文字ですが「緑」や「青」の数字を変えると明るくなってきます（＠o＠）</p><p style="color: MediumSlateBlue">MediumSlateBlueなんて色の名前を覚えるほうが大変なのでは（＠o＠）</p>↓こんな感じですね（＾＾）赤い文字ですが「緑」や「青」の数字を変えると明るくなってきます（＠o＠）MediumSlateBlueなんて色の名前を覚えるほうが大変なのでは（＠o＠）----------------------------------------------------------------------▲CSS本来の記述方法<style type="text/css"><!-- P {font-style: italic;font-variant: normal;font-weight: 900;font-size: 200%;/line-height: 2em;font-family: sans-serif;zoom: 1.5;color: #00FF00}--></style>*****************************************************【庶事所感】「楽天-巨人」・・・本当はまったく興味無いんです（＞＜）なのに最後まで見てしまった。最終回大きな点差のなかで、飛び出したホームラン！なぜか感激が込み上げて、楽天がんばれ！！ん・・・勝ったら、買い物しようと思ってただけなんですけど（＾＾）point2倍ですものね。意外と本気になってしまいましたぁ*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.08
コメント(6)
-
色の構成について
カラーチャートを作りました（＾＾）カラーネームとコード併記いたしました。良かったら見てみてくださいね。ホームページの構成要素の中でもビジュアル面での『色』の持つ要素は本当に大きいものがあると思うのですが、一体この色というのはどうやって作られているのでしょう。コード指定方法では約1670万もの色が作れるのですがもともとこれはたった３色だけで作られているのですね。光の三原色と言えば赤(Red)、緑(Green)、青(Blue)になりますが、よく単純にRGBという表現を使いますね。そしてホームページを見ているブラウザではこれら三原色を使って1670万色の色を表現しています。使用するパソコンやOSやブラウザで表示方法が多少違うようですが、基本的には概ね以下のような内容で指定できます。色のコードの構成は＃（シャープ）と6桁の英数字で構成されていますがひとつの原色につき二桁の[16進数](0、1、2、3、4、5、6、7、8、9、A、、B、C、D、E、F）の文字を使って作られています。＃ＲＲＧＧＢＢにそれぞれ（0～F）の数字英字が入ります。赤(Red)｛16×16＝256段階の色合い｝[16進数](0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F）[16進数](0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F）緑(Green)｛16×16＝256段階の色合い｝[16進数](0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F）[16進数](0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F）青(Blue)｛16×16＝256段階の色合い｝[16進数](0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F）[16進数](0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F）ということは各々16種のものの組み合わせですから16×16×16×16×16×16＝16,777,216ということで1670万色の色が表現できると言うわけです。0は光が消えている状態であり、Ｆは最高発光の状態です。したがって「000000」は３色とも消えている状態なので「黒」に見えます。また「FFFFFF」は３色とも最高発光の状態で「白」に見えるわけです。*****************************************************【庶事所感】プロ野球の交流戦と言うのが始まりましたね（＾＾）昨年はいろんな面でプロ野球はつまらないですよ、ということが嫌ほど見せられて何だかなぁ･･･と思わされてしまいましたが、少しは楽しくなるのでしょうかねぇ･･･どちらのチームが贔屓ということはないですが、素晴らしいプレイをたくさん見せてほしいなぁと思います。*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.07
コメント(12)
-
style09（font-まとめて記述する）
font は、フォントに関する設定（font-style、font-variant、font-weight、font-size、line-height、font-family）を一度に指定するプロパティです。スタイルシート>>フォント>>font(まとめて記述する)////////////////////////////////////////////////////////////////////////【直接指定の記述方法】ほとんどのタグの中でstyleは指定できます。（これは楽天広場でも使えます！）<h1 style="宣言(指定内容を宣言と呼びます)">アクセスアップのでめらら</h1>【CSS本来の記述方法】ソースのheadタグの中や外部ファイルを作って記述する場合（楽天ではできません;＞＜）div {宣言}p {color: red;}td {color: red;}･･･etc////////////////////////////////////////////////////////////////////////■fontで指定できるもの（font-style、font-variant、font-weight、font-size、line-height、font-family）□font-style（フォントのスタイル）□font-variant（フォントのバリエーション）□font-weight（フォントの太さ）□font-size（フォントの大きさ）□line-height（行の高さ）□font-family（フォントのファミリー）※それぞれの値の記述は、半角スペースで区切ります。※サイズとフォントは省略不可です。（必須項目）※行間を指定する場合は、サイズの後にスラッシュ（ / ）を入れます。※font-style、font-variant、font-weightの記述順は、自由です。 ----------------------------------------------------------------------▲直接指定の記述方法<p style="font:italic normal 900 200%/2em sans-serif;">詳細をまとめて省略指定いたしましたABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789</p>↓こんな感じですね（＾＾）詳細をまとめて省略指定いたしましたABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789----------------------------------------------------------------------▲CSS本来の記述方法<style type="text/css"><!-- P {font-style: italic;font-variant: normal;font-weight: 900;font-size: 200%;/line-height: 2em;font-family: sans-serif;}--></style>----------------------------------------------------------------------システムフォント（楽天広場では出来ません）OSのデフォルトのフォント（標準書体）をあらかじめ指定する記述で、次のような種類があります。□caption（ボタンやドロップダウン）□icon（アイコンのラベル）□menu（ドロップ・ダウン・メニューやメニュー・リスト）□message-box（ダイアログ・ボックス）□small-caption（スモール制御）□status-bar（ウィンドウ・ステータス・バー）*****************************************************【庶事所感】『【ケープカナベラル（米フロリダ州）＝共同】化石が少なく実像が謎に包まれていた、アジア起源とされる恐竜「テリジノサウルス」類の一種のほぼ全身をカバーする骨の化石が米ユタ州で発掘され、ユタ大などのチームが五日付の英科学誌ネイチャーに新種として報告した。この仲間で最古とされていた中国のベイピャオサウルス（北票竜）とほぼ同年代だが、より原始的な特徴もあり、アジア起源説に疑問を投げかける発見。また肉食恐竜と、進化した草食恐竜の中間的な形態で、恐竜の食性の進化を探る上でも貴重な資料になりそうだ。』科学力ってすごいですよね。ほんの少しの骨のカケラからものすごい復元をしてしまうなんて、ちょっと恐ろしいけれど、本物の恐竜って見てみたいなぁ･･･などと考えていました。時間を取って博物館にでもいこうかしら（＾＾）*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.06
コメント(6)
-
style08(line-height-行の高さ)
次はline-height（行の高さです。※注意したいのは行間の幅では無いことです。）スタイルシート>>フォント>>line-height////////////////////////////////////////////////////////////////////////【直接指定の記述方法】ほとんどのタグの中でstyleは指定できます。（これは楽天広場でも使えます！）<h1 style="宣言(指定内容を宣言と呼びます)">アクセスアップのでめらら</h1>【CSS本来の記述方法】ソースのheadタグの中や外部ファイルを作って記述する場合（楽天ではできません;＞＜）div {宣言}p {color: red;}td {color: red;}･･･etc////////////////////////////////////////////////////////////////////////■line-height（セレクタにマッチした対象のインラインボックスの最初の高さを指定･･･一行目の文字の最下部から次の行の文字の最下部までの距離｢行の高さ｣がベースであって一行目の文字の最下部からニ行目文字の最上部までの距離｢行間｣ではありません）日本語には大文字や小文字といった区別がありませんよね。しかし、概ね西洋の文字は英語やフランス語など、ラテン語系の文字は大文字小文字の区別があるためこの行の高さ指定でビジュアルがまったく違って見えます。英字などでテキストを記述したい場合などにはかなり重要な要素になると思います。また日本語や中国語などでも読みやすい設定というものもあると思いますので場合にあわせて設定できるようにしておきたいですね。----------------------------------------------------------------------□normal（numberの1.0～1.2と同じ）□number（使用したフォントサイズに対する倍率（小数可）で指定します）□length「相対値指定の単位、em: フォントの大きさ 'font-size' を 1 、ex: 小文字の高さ 'x-height' を 1、px: ピクセル。解像度に依存してサイズが決定」「絶対値指定の単位 、in: インチ=2.54 cm、cm: センチメートル、mm: ミリメートル、pt: ポイント=1/72 インチ、pc: パイカ=12 ポイント」□percentage（使用したフォントのサイズを 100% として計算します）□auto（'margin', 'top'/'bottom' の値にあわせて自動的に設定します）□inherit（ほとんど使いませんが、一応(;笑)、親要素の値を明示的に継承する指定の値です）----------------------------------------------------------------------▲直接指定の記述方法□normal<p style="line-height: normal;">line-height: normalを指定した文字<br>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>abcdefghijklmnopqrstuvwxyz<br>0123456789</p>↓こんな感じですねline-height: normalを指定した文字ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789□number<p style="line-height: 1.5;">line-height: 1.5を指定した文字<br>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>abcdefghijklmnopqrstuvwxyz<br>0123456789</p>↓こんな感じですね（＾＾）line-height: 1.5を指定した文字ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789□length<p style="line-height: 1.5em;">line-height: 1.5emを指定した文字<br>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>abcdefghijklmnopqrstuvwxyz<br>0123456789</p>↓こんな感じですね（＾＾）line-height: 1.5emを指定した文字ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789<p style="line-height: 20px;">line-height: 20pxを指定した文字<br>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>abcdefghijklmnopqrstuvwxyz<br>0123456789</p>↓こんな感じですね（＾＾）line-height: 20pxを指定した文字ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789□percentage<p style="line-height: 200%;">line-height: 200%を指定した文字<br>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>abcdefghijklmnopqrstuvwxyz<br>0123456789</p>↓こんな感じですね（＾＾）line-height: 200%を指定した文字ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789----------------------------------------------------------------------▲CSS本来の記述方法<style type="text/css"><!-- P {font-family: 'Times New Roman';font-style: normal;font-variant: small-caps;font-weight: 900;font-size: 80%;line-height: 2em;}--></style>*****************************************************【庶事所感】三浦友和「赤いシリーズ」に出る『俳優・三浦友和（５３）が、夫人・山口百恵さんとの思い出の作品、ＴＢＳ系ドラマ「赤い疑惑」リメーク版に特別出演することが３日、発表された。７５年の放送では、三浦は百恵さんの恋人役として出演。今作ではトラックの運転手役を務める。』当時は正直「なんだこの荒唐無稽のバカバカしいドラマは!?」と思って何度も見なかったシリーズドラマなのですが、中三トリオももう50前なんだなぁ･･･リメイク版時間があったら見てみようかと思います（＾＾）*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.05
コメント(6)
-
style07(font-stretch-フォントの形の幅)
次はfont-size（フォントの大きさを指定します。フォントの大文字と小文字の比率に基づく 'font-size-adjust' も同時に指定できます）です（font-stretchは対応ブラウザを使っていらっしゃるかたはほとんどないと思いますので）スタイルシート>>フォント>>font-size////////////////////////////////////////////////////////////////////////【直接指定の記述方法】ほとんどのタグの中でstyleは指定できます。（これは楽天広場でも使えます！）<h1 style="宣言(指定内容を宣言と呼びます)">アクセスアップのでめらら</h1>【CSS本来の記述方法】ソースのheadタグの中や外部ファイルを作って記述する場合（楽天ではできません;＞＜）div {宣言}p {color: red;}td {color: red;}･･･etc////////////////////////////////////////////////////////////////////////■フォントフォントの指定には以下のような種類があります。□font-family（フォントのデザインの種類を指定します）□font-style（通常体、イタリック体、斜体を区別して指定します）□font-variant（英数文字の場合に、小文字／Small Caps を区別して指定します）□font-weight（フォントの太さを指定します）□font-stretch（レンダリングするフォントの形の幅を指定します）□font-size（フォントの大きさを指定します。フォントの大文字と小文字の比率に基づく 'font-size-adjust' も同時に指定できます）////////////////////////////////////////////////////////////////////////■font-size（フォントの大きさを指定します。フォントの大文字と小文字の比率に基づく 'font-size-adjust' も同時に指定できます）----------------------------------------------------------------------□absolute-size（キーワード指定で、7 種類あります。CSS2 では各々 1.2 倍ずつ大きくなります）「(最小)xx-small＜x-small＜small＜medium（デフォルト）＜large＜x-large＜xx-large(最大)」 □relative-size（指定無しの値よりも大きい「larger」、小さい「smaller」を指定します）□length（いちばん使うサイズ指定ではないでしょうか※負の数字は存在しません）「相対値指定の単位、em: フォントの大きさ 'font-size' を 1 、ex: 小文字の高さ 'x-height' を 1、px: ピクセル。解像度に依存してサイズが決定」「絶対値指定の単位 、in: インチ=2.54 cm、cm: センチメートル、mm: ミリメートル、pt: ポイント=1/72 インチ、pc: パイカ=12 ポイント」□percentage（継承したフォントのサイズを 100% として計算します。120%=1.2emとなります。※負の数字は存在しません）□inherit（ほとんど使いませんが、一応(;笑)、親要素の値を明示的に継承する指定の値です）■font-size-adjust（そこで使われているフォントのアスペクト値を指定します。アスペクト値とは、大文字と小文字の高さの比率です。Mozilla でのみ有効のようです）----------------------------------------------------------------------▲直接指定の記述方法□absolute-size<p style="font-size: xx-small;">xx-smallを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）xx-smallを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789<p style="font-size: x-small;">x-smallを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）x-smallを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789<p style="font-size: small;">smallを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）smallを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789<p style="font-size: medium;">mediumを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）mediumを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789<p style="font-size: large;">largeを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）largeを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789<p style="font-size: x-large;">x-largeを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）x-largeを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789<p style="font-size: xx-large;">xx-largeを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）xx-largeを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789□relative-size<p style="font-size: larger;">largerを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）largerを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789<p style="font-size: smaller;">smallerを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）smallerを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789□length<p style="font-size: .5em;">.5emを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）.5em;を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789<p style="font-size: 1.5em;">1.5emを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）1.5emを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789□percentage<p style="font-size: 80%;">80%を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）80%を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789<p style="font-size: 130%;">130%を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）130%を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789----------------------------------------------------------------------▲CSS本来の記述方法<style type="text/css"><!-- P {font-family: 'Times New Roman';font-style: normal;font-variant: small-caps;font-weight: 900;font-size: 80%;}--></style>----------------------------------------------------------------------フォントサイズの考え方絶対値指定をホームページで使うことは全くお勧めいたしません。ユーザーの環境に全く関係なく大きさが決定しているわけですのでメリットが何らありません（＞＜）px指定は非常に多く使われているのですが、そのメリットとしてはブラウザの指定やユーザーの設定に関係なくウェッブサイトのデザインが崩れないのでサイト全体の構成がしやすいことがあげられます。これと逆なのがabsolute-size、em、percentageなどですが、ブラウザで指定することで大きな文字で見たい、小さい字でみたいなど簡単に変更できるメリットがあります。当然デメリットとしてウエッブデザインに注意しなければ大小でたちまちデザインが崩壊してしまいます（＞＜）したがって、px指定で指定したい場合は、なるべく大勢のユーザーに読みづらくないサイズを設定しデザインを固定して良いようにしたいabsolute-size、em、percentageなどで指定したい場合は、ブラウザの指定やユーザーの設定で壊れてしまわないデザインに気をつける。ことなのではないかと思います。*****************************************************【庶事所感】本日は楽天さんのメンテナンスとのことでしばらく日記がかけないとのことでちょいとお出かけいたしましたので日記もこんな時間になってしまいました（＠＠）天気は良かったですが、風が強く、たくさんくしゃみをさせていただきました（＞＜）海の近くになるとやっぱり風は強いのだとあらためて納得しました。*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.04
コメント(6)
-
style06(font-weight-フォントの太さ)
次はfont-weightですスタイルシート>>フォント>>font-weight////////////////////////////////////////////////////////////////////////【直接指定の記述方法】ほとんどのタグの中でstyleは指定できます。（これは楽天広場でも使えます！）<h1 style="宣言(指定内容を宣言と呼びます)">アクセスアップのでめらら</h1>【CSS本来の記述方法】ソースのheadタグの中や外部ファイルを作って記述する場合（楽天ではできません;＞＜）div {宣言}p {color: red;}td {color: red;}･･･etc////////////////////////////////////////////////////////////////////////■フォントフォントの指定には以下のような種類があります。□font-family（フォントのデザインの種類を指定します）□font-style（通常体、イタリック体、斜体を区別して指定します）□font-variant（英数文字の場合に、小文字／Small Caps を区別して指定します）□font-weight（フォントの太さを指定します）□font-stretch（レンダリングするフォントの形の幅を指定します）□font-size（フォントの大きさを指定します。フォントの大文字と小文字の比率に基づく 'font-size-adjust' も同時に指定できます）////////////////////////////////////////////////////////////////////////■font-weight（フォントの太さを指定します）----------------------------------------------------------------------□normal□bold□bolder(より太く)□lighter(より細く)□inherit（ほとんど使いませんが、一応(;笑)、親要素の値を明示的に継承する指定の値です）数値で指定する場合は、100-900 の範囲内で 100 飛びで指定し、数字が大きい方が太くなりますそして、400は「normal」と同じ、700は「bold」と同じとなります----------------------------------------------------------------------▲直接指定の記述方法font-family:sans-serif … ゴシック体系の場合□lighter(より細く)<p style="font-family:sans-serif; font-weight: lighter;">lighterを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）lighterを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789□100<p style="font-family:sans-serif; font-weight: 100;">normalを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）normalを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789□200<p style="font-family:sans-serif; font-weight: 200;">200を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）200を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789□300<p style="font-family:sans-serif; font-weight: 300;">300を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）300を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789□400は「normal」と同じになります<p style="font-family:sans-serif; font-weight: 400;">400を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）400を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789□500<p style="font-family:sans-serif; font-weight: 500;">500を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）500を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789□600<p style="font-family:sans-serif; font-weight: 600;">600を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）600を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789□700は「bold」と同じになります<p style="font-family:sans-serif; font-weight: 700;">700を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）700を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789□800<p style="font-family:sans-serif; font-weight: 800;">800を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）800を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789□900<p style="font-family:sans-serif; font-weight: 900;">900を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）900を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789□bolder(より太く)<p style="font-family:sans-serif; font-weight: bolder;">bolderを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）bolderを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789font-family: serif … 明朝体系の場合□100<p style="font-family: serif; font-weight: 100;">normalを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）normalを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789□400は「normal」と同じになります<p style="font-family: serif; font-weight: 400;">400を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）400を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789□700は「bold」と同じになります<p style="font-family: serif; font-weight: 700;">700を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）700を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789□900<p style="font-family: serif; font-weight: 900;">900を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）900を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789□bolder(より太く)<p style="font-family: serif; font-weight: bolder;">bolderを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>↓こんな感じですね（＾＾）bolderを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789----------------------------------------------------------------------▲CSS本来の記述方法<style type="text/css"><!-- P {font-family: 'Times New Roman';font-style: normal;font-variant: small-caps;font-weight: 900;}--></style>*****************************************************【庶事所感】『打ち上げが再開されるスペースシャトル「ディスカバリー」に、日本人宇宙飛行士野口聡一さん（４０）が搭乗する。日本人のシャトル搭乗は二〇〇〇年の若田光一さん以来。毛利衛さんから五人目、八回目だ。小さいころから宇宙にあこがれを抱いてきた野口さん。』ガンバレ！！４０代（＾＾）なんちゃって、いつかきっと誰でもが宇宙旅行できるようになるのでしょうねぇ*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.03
コメント(8)
-
style05(font-variant-Small Caps を区別)
次はfont-variantです（小さくても大文字！！）スタイルシート>>フォント>>font-variant////////////////////////////////////////////////////////////////////////【直接指定の記述方法】ほとんどのタグの中でstyleは指定できます。（これは楽天広場でも使えます！）<h1 style="宣言(指定内容を宣言と呼びます)">アクセスアップのでめらら</h1>【CSS本来の記述方法】ソースのheadタグの中や外部ファイルを作って記述する場合（楽天ではできません;＞＜）div {宣言}p {color: red;}td {color: red;}･･･etc////////////////////////////////////////////////////////////////////////■フォントフォントの指定には以下のような種類があります。□font-family（フォントのデザインの種類を指定します）□font-style（通常体、イタリック体、斜体を区別して指定します）□font-variant（英数文字の場合に、小文字／Small Caps を区別して指定します）□font-weight（フォントの太さを指定します）□font-stretch（レンダリングするフォントの形の幅を指定します）□font-size（フォントの大きさを指定します。フォントの大文字と小文字の比率に基づく 'font-size-adjust' も同時に指定できます）////////////////////////////////////////////////////////////////////////■font-variant（英数文字の場合に、小文字／Small Caps を区別して指定します）----------------------------------------------------------------------□対象のフォント・ファミリーの、小文字(normal)／スモールキャプス(small-caps)の区別を指定します□normal（デフォルト）□small-caps（フォントファミリーに、スモールキャプスフォントが存在すれば、該当するフォントが使われます、場合は、通常の大文字を使ったり、大文字を小文字の高さにして表示します）□inherit（ほとんど使いませんが、一応(;笑)、親要素の値を明示的に継承する指定の値です）▲直接指定の記述方法□<p style="font-variant: normal;">normalを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz</p>↓こんな感じですね（＾＾）normalを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz□<p style="font-variant: small-caps;">small-capsを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz</p>↓こんな感じですね（＾＾）small-capsを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz▲CSS本来の記述方法<style type="text/css"><!-- P {font-variant:normal;}--></style>----------------------------------------------------------------------□font-family:との組み合わせ▲直接指定の記述方法font-family:sans-serif … ゴシック体系の場合<p style="font-family: sans-serif; font-variant: normal;">normalを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz</p>↓こんな感じですね（＾＾）normalを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz<p style="font-family: sans-serif; font-variant: small-caps;">small-capsを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz</p>↓こんな感じですね（＾＾）small-capsを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyzfont-family:serif … 明朝体系の場合<p style="font-family: serif; font-variant: normal;">normalを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz</p>↓こんな感じですね（＾＾）normalを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz<p style="font-family: serif; font-variant: small-caps;">small-capsを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz</p>↓こんな感じですね（＾＾）small-capsを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz▲CSS本来の記述方法<style type="text/css"><!-- P {font-family: 'Times New Roman';font-style: normal;font-variant: small-caps;}--></style>*****************************************************【庶事所感】フリーページの編集を始めました。恐ろしいほどの誤字脱字です（＞＜）･･･完成はいつになるのでしょう･･･倦まず、諦めず、ゆっくりやろうと思います。昨日、今日と「花粉」がちょっと来てるなぁ・・・という状況でして、鼻が痛いので集中力が無くって（＞＜）頑張らねば！*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.02
コメント(6)
-
style04(font-style-通常体、イタリック体、斜体)
font-familyの次はfont-styleです！スタイルシート>>フォント>>font-style////////////////////////////////////////////////////////////////////////【直接指定の記述方法】ほとんどのタグの中でstyleは指定できます。（これは楽天広場でも使えます！）<h1 style="宣言(指定内容を宣言と呼びます)">アクセスアップのでめらら</h1>【CSS本来の記述方法】ソースのheadタグの中や外部ファイルを作って記述する場合（楽天ではできません;＞＜）div {宣言}p {color: red;}td {color: red;}･･･etc////////////////////////////////////////////////////////////////////////■フォントフォントの指定には以下のような種類があります。□font-family（フォントのデザインの種類を指定します）□font-style（通常体、イタリック体、斜体を区別して指定します）□font-variant（英数文字の場合に、小文字／Small Caps を区別して指定します）□font-weight（フォントの太さを指定します）□font-stretch（レンダリングするフォントの形の幅を指定します）□font-size（フォントの大きさを指定します。フォントの大文字と小文字の比率に基づく 'font-size-adjust' も同時に指定できます）////////////////////////////////////////////////////////////////////////■font-style（通常体、イタリック体、斜体を区別して指定します）----------------------------------------------------------------------□プロパティ 'font-style' は、セレクタにマッチした対象のインストール済みのフォント・ファミリーの、普通(normal)/イタリック(italic)/斜体(oblique)の区別を指定します。※スタイルの指定内容を普通『プロパティ』といいます。そして'font-style'の部分は『プロパティ名』、普通(normal)/イタリック(italic)/斜体(oblique)の部分を『値』と言います。□normal（普通の字体、デフォルト）□italic（イタリックの字体）□oblique（オーブリック、斜体の字体）□inherit（ほとんど使いませんが、一応(;笑)、親要素の値を明示的に継承する指定の値です）※種類は４種類なのですが「表示される見た目」はイタリック(italic)と斜体(oblique)は同じですし、inheritは使わないので２種類、つまり標準と斜体になります。▲直接指定の記述方法<p style="font-style:normal">normalを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz</p>↓こんな感じですね（＾＾）normalを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz<p style="font-style:italic">italicを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz</p>↓こんな感じですね（＾＾）italicを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz<p style="font-style:oblique">obliqueを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz</p>↓こんな感じですね（＾＾）obliqueを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz▲CSS本来の記述方法<style type="text/css"><!-- P {font-style:normal;}--></style>----------------------------------------------------------------------□font-family:との組み合わせで見てまいりますと字体が倍に増えますね（＾＾）font-family:'Helvetica'の場合<p style="font-family: 'Helvetica'; font-style: normal;">normalを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz</p>↓こんな感じですね（＾＾）normalを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz<p style="font-family: 'Helvetica'; font-style: italic;">italicを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz</p>↓こんな感じですね（＾＾）italicを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz<p style="font-family: 'Helvetica'; font-style: oblique;">obliqueを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz</p>↓こんな感じですね（＾＾）obliqueを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyzfont-family: 'Times New Roman'の場合<p style="font-family: 'Helvetica'; font-style: normal;">normalを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz</p>↓こんな感じですね（＾＾）normalを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz<p style="font-family: 'Helvetica'; font-style: italic;">italicを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz</p>↓こんな感じですね（＾＾）italicを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz<p style="font-family: 'Helvetica'; font-style: oblique;">obliqueを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz</p>↓こんな感じですね（＾＾）obliqueを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz▲CSS本来の記述方法<style type="text/css"><!-- P {font-family: 'Times New Roman';font-style:normal;}--></style>*****************************************************【庶事所感】http://plaza.rakuten.co.jp/demerara/7002楽天広場で使えるタグの一覧も作り始めました。説明内容のページ作成とリンクさせていくつもりですのでご興味ありましたらご覧下さいませ。宜しくお願い致しますリンク切れが目立ち始めましたので（;汗）トップページをいじり始めました。少しずつリニューアルしていきたいと思います。（＾＾）*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.05.01
コメント(6)
-
style03(font-family-フォントのデザイン)
スタイルシート（３）ちょっとややこしくなってきますので、「パンくず」表示させていただきますね（＾＾）スタイルシート>>フォント>>font-family////////////////////////////////////////////////////////////////////////【まずは･･･】スタイルシートの最大の魅力はcssファイルを使用することで、htmlソースを簡素化させることでの更新時の利便性を図ることと検索エンジンへの対応の期待ですが、段階的に理解するため1.)スタイルの直接指定での使用方法とそれぞれの機能2.)クラス使用のhead内の記述3.)cssファイルの作成の順番で書こうと思います。【直接指定の記述方法】ほとんどのタグの中でstyleは指定できます。（これは楽天広場でも使えます！）<h1 style="宣言(指定内容を宣言と呼びます)">アクセスアップのでめらら</h1><div style="color: red;">アクセスアップのでめらら</div><span style="color: red;">アクセスアップのでめらら</span><p style="color: red;">アクセスアップのでめらら</p><th style="color: red;">アクセスアップのでめらら</th><td style="color: red;">アクセスアップのでめらら</td>･･･etc【CSS本来の記述方法】ソースのheadタグの中や外部ファイルを作って記述する場合（楽天ではできません;＞＜）div {宣言}p {color: red;}td {color: red;}･･･etc////////////////////////////////////////////////////////////////////////■フォントフォントの指定には以下のような種類があります。□font-family（フォントのデザインの種類を指定します）□font-style（通常体、イタリック体、斜体を区別して指定します）□font-variant（英数文字の場合に、小文字／Small Caps を区別して指定します）□font-weight（フォントの太さを指定します）□font-stretch（レンダリングするフォントの形の幅を指定します）□font-size（フォントの大きさを指定します。フォントの大文字と小文字の比率に基づく 'font-size-adjust' も同時に指定できます）////////////////////////////////////////////////////////////////////////■font-family（フォントのデザインの種類を指定します）----------------------------------------------------------------------□具体的フォント名で指定（対象の字体フォントがインストールされていませんと表示されません）※フォント名にスペースが含まれる場合は、ダブルクォーテーション（ " ）かシングルクォーテーション（ ' ）で囲みます【例】'ＭＳ Ｐゴシック'や"ＭＳ Ｐゴシック"▲直接指定の記述方法<p style="font-family:江戸勘亭流">江戸勘亭流体のフォント</p>↓こんな感じですね（＾＾）江戸勘亭流体のフォント ▲CSS本来の記述方法<style type="text/css"><!-- P {font-family: "ＭＳ Ｐ明朝"; } --></style>----------------------------------------------------------------------□体系フォントの種類で指定（汎用性を考えたものでgeneric-familyといいます）sans-serif … ゴシック体系serif … 明朝体系cursive … 筆記体系fantasy … 装飾系monospace … 等幅系▲直接指定の記述方法<p style="font-family:sans-serif">sans-serifのフォント</p>↓こんな感じですね（＾＾）sans-serifのフォント<p style="font-family:serif">serifのフォント</p>↓こんな感じですね（＾＾）serifのフォント<p style="font-family:cursive">cursiveのフォント</p>↓こんな感じですね（＾＾）cursiveのフォント<p style="font-family:fantasy">fantasyのフォント</p>↓こんな感じですね（＾＾）fantasyのフォント<p style="font-family:monospace">monospaceフォント</p>↓こんな感じですね（＾＾）monospaceフォント▲CSS本来の記述方法<style type="text/css"><!-- P {font-family:serif; } --></style>----------------------------------------------------------------------□いくつか候補を用意する▲直接指定の記述方法<p style="font-family: "候補 1","候補 2","候補 3"; ">インストールされているフォント</p>【例】<p style="font-family:Gergia, "ＭＳ 明朝", serif">インストールされているフォント</p>▲CSS本来の記述方法<style type="text/css"><!-- P {font-family:"候補 1","候補 2","候補 3"; } --></style>*****************************************************【庶事所感】『タレント・萩本欽一（６３）が監督を務める野球クラブチーム「茨城ゴールデンゴールズ」の公式応援歌「筑波山麓Ｇｏ★Ｇｏ伝説」の公開レコーディングが２８日、都内で行われた。作詞、作曲を担当したメーンボーカルのトータス松本に加え、バックコーラスに欽ちゃんと、女性投手の片岡安祐美選手（１８）、さらに藤本博史（２８）、仁平翔（１８）、雀ケ野賢太（２１）、鹿取真央（１９）のイケメン４選手が参加。ノリノリで見事にそろった歌声を披露した。』なんだか毎日、ニュース番組コンテンツが悲しく辛い情報が多くて、本当に心の痛む記事ばかりなのですが、そんな中で今日目に入ったのがこの記事。トータス松本さん、その場で『欽ちゃん球団』に入団ですって（＾＾）*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.04.30
コメント(4)
-
style02(大きさの基準)
大きさの基準を理解しよう思うようにホームページをデザインするにはまずタグを作成する際の大きさの単位を知っていることが必要ではないでしょうか。一般的には絶対値指定をする場合の基本はポイント（pt）になります。----------------------------------------------------------------------■絶対指定の単位(ブラウザや画面の大きさには関係なく決まった大きさ)□mm （ミリメートル） 10mm = 1cm □cm （センチメートル） 1cm = 10mm □in （インチ） 1in = 2.54cm □pt （ポイント） 72pt = 1in □pc （パイカ） 1pc = 12pt ■相対指定の単位(小さな画面では小さく大きな画面では大きく表示されます)□em （エム） 1em = 大文字 M の高さ □ex （エックスハイト） 1ex = 小文字 x の高さ □px （ピクセル） 1px = 画面上の1ピクセル □% （パーセント） 割合 ※相対単位はデフォルト（標準）の大きさを基準にしていると考えます。1.）スタイルシートのなかでは数値が 0 以外の場合は、単位が必要です。2.）整数以外、小数点表示も出来るので細かい設定が可能です。----------------------------------------------------------------------■絶対指定の単位日常生活で馴染みのある単位がこれらだと思います。決められた大きさの単位ですのでそのまま使いますが日本ではインチに馴染みが薄いと思いますのでいちばん使うポイント(pt)はイメージできるようにしておきたいものですネ。１in（インチ）＝72pt（ポイント）１in（インチ）＝2.54cm（センチメートル）なので１pt（ポイント）＝0.03527（センチメートル）＝約0.35mm（ミリメートル）【例】14ptの文字とは約4.93mmの大きさの文字ということになります。■相対指定の単位□em （エム）というのは、現時点の環境のなかで見えている（いまこの目の前の）ブラウザで表示される『M』という文字の大きさを基準にした表示単位です。もしいま見ているブラウザで表示される文字『M』の大きさが14ptだったとしますと1em … 14pt （基準の大きさ）2em … 28pt （基準の2倍の大きさ）0.5em … 7pt （基準の半分の大きさ）に指定されます。したがってテキストの文章などは行間指定するのに1行分なら1em、1.5行分の行間なら1.5emと細かい指定ができるわけです。□ex （エックスハイト）というのは、現時点の環境のなかで見えている（いまこの目の前の）ブラウザで表示される『x』という文字の大きさを基準にした表示単位です。小文字の英字abcdefghijklmnopqrstuvwxyzを良く見ますと1.acemnorsuvwxz は上下はみ出し無し文字、2.bdfhijklt は上はみ出し文字、3.gjpqy は下はみ出し文字に分類できます。これらのなかで上下はみ出しのない『x』が基準なわけです。□px （ピクセル）□% （パーセント）は凄く使うと思いますので注意点としては、何に比較しての大きさなのかを理解して使いたいですね。※相対表示はどうしてもブラウザやその他の環境に左右される表示単位です。使用にあたっては充分に考慮したうえでつかいたいものですね。*****************************************************【庶事所感】『４０代前後の世代には懐かしい初代ウルトラマンと一緒に怪獣と戦う気分を味わえるアトラクションが、このゴールデンウイークから国内の遊園地やテーマパークに登場する。日立ケーイーシステムズ、円谷エンターテインメント、バンダイの３社が共同制作した新ソフト「ウルトラマン・ザ・ライド」によるもので、まず和歌山県白浜町の白浜エネルギーランドで２９日に公開される。』あれ！それじゃ昭和40年生まれくらいのかただからオリジナルのウルトラマンではなく再放送なのだろうなぁ・・・それにしてもUSJに続いて関西方面にはこのタイプのソフトはふたつめの開設、関東方面にも早く配給してくれないかなぁと思いました。ん！こども向けなのですよね（＾＾）でも行きたいのです。ズバリ「ウルトラマン」世代ですので（＠＠）*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.04.29
コメント(7)
-
style01(スタイルシートの設定方法)
わたくしは外部スタイルシートはホームページの構造をよりシンプルにさせることによって検索エンジンの巡回ロボットが巡回し易くさせるのに効果が相当にあると思いますので是非方法を理解したいタグ記述だと言えると考えています。■設定方法スタイルシートの設定方法には、次の三種類があります。 1. 外部ファイルにまとめて設定する（残念ながら楽天広場ではできません）コンテンツのページとは別にスタイルシート専用のファイルを作り（CSSファイル）、そこへスタイルの指定をまとめて記述します。サイト全体のスタイルを指定していますのでここを更新することですべてのページの装飾がいっぺんに変更することができます。2. ページ内にまとめて設定する（残念ながら楽天広場ではできません、予めこの方法で楽天さんがスタイルを記述しているのです）ページのHEADタグの内部に、スタイルの指定をまとめて記述します。ページ単位でスタイルを指定することができます。 3. タグに直接指定する（楽天広場でできるのはこれだけです、また使用不可のタグも多いです）タグに直接スタイルを記述します。個別にスタイルを指定することができます。■設定内容の優先順位 これらの記述方法はそれぞれ単独で使用することも可能ですし、また同時にも使用できます。同時に設定した場合の優先順位は外部ファイルの設定＜ページ内HEADタグに設定＜タグに直接指定の順になりますので、全体に設定されたスタイルがあっても直接指定したものが最優先というわけです。したがって楽天広場では予め（2）のパターンでスタイルが記述されていますが、直接指定することで自分の希望する装飾に変えることができるのです。【設定例】青＜赤＜緑ですのでこの場合は緑で表示されるわけです。（外部ファイル）style.cssという外部ファイルの中に記述---------------(1)div { color: blue; }「divの色は青ですと指定しています」（コンテンツページ） <html><head><title>テンプレートとアクセスアップのでめらら</title><link rel="stylesheet" type="text/css" href="style.css"><style type="text/css">-----------------------------(2)<!--div { color: red; }「divの色は赤ですと指定しています」--></style></head><body><div style="color: green;">コンテンツ内の文章</div>----(3)「divの色は緑ですと指定しています」</body></html>（楽天広場の各ページ場合改行しますと通常の改行<br>と同じになります。ですのでタグ通りの表示をさせるためには改行やスペースを全て排除して全部つなげてください）*****************************************************【庶事所感】『テレビ朝日の広瀬道貞社長（７０）は２６日の会見で、民放テレビのキー局に対する敵対的買収への備えとして「民放キー局間で株式を持ち合うことを研究してはどうか」と発言、キー局が互いに安定株主となることで買収しにくくする手法を提案した。民放テレビ局は電波を独占的に利用する“既得権化”がしばしば問題視されてきた。広瀬社長は持ち合い比率について「例えば２％ぐらい」としたが、業界が結束して買収を通じた新規参入への道を狭めるものと受け取られかねず、今後、波紋を広げそうだ。』自分達の利益だけを考えているように聞こえてしましました。全員でグルになって自分達を守ろうとする･･･普通そのようなことを企業が行うことが許されるわけもなく、テレビ局なんてより公正でなければならない性格の企業ではないのでしょうか？そんなことをすれば独占的なのもそうですが「報道」そのものがよりテレビ局の捏造だらけになるのではないのでしょうか？自分達に都合のいい報道だけをするような･･･責任感のない社長さんのはなしにガックリテレビで言えば虚偽の話も本当の話のように聞こえます。間違っていてもきちんと訂正もしない、自分達の間違いや不正は隠そうとする、そんな気持ちの現われを感じてしまうのはわたくしだけなのでしょうか･･･*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.04.28
コメント(5)
-
検索結果に表示させる方法
検索結果に表示させる方法Yahoo! japanでは今までカテゴリでのサイト申請と登録推薦ができませんでしたが、URL登録での推薦が可能になりました!!------------------------------------------------------http://submit.search.yahoo.co.jp/add/request登録を希望するサイトのURLを入力してください。入力されるのは、サイトのトップページのURLだけで結構です。トップページからリンクされているページは、検索エンジン用ロボットが巡回して自動的に登録します。登録は無料です。推薦されたサイトを検索エンジン用ロボットが巡回するまで、通常約2～4週間かかります。 巡回したサイトを検索対象のデータベースに追加する際には、さまざまな条件でチェックが行われています。ここで推薦されたサイトが必ずしも検索結果に表示されるわけではないことをあらかじめご了承ください。 ------------------------------------------------------googleのように各ページ登録するべきかはまだ調べきっていませんのでわかりません（＞＜）*****************************************************【庶事所感】名古屋で以前食べた「手羽先」のお店の支店が東京にもできたと聞いていましたので、昨夜そこへ参りまして、しこたま痛飲いたしまして、何ヶ月ぶりと言うほどの二日酔いでした（＞＜）いけませんね、自分の年齢も考えず暴飲暴食（＞＜」ギャフン）しばし・・・反省いたします。*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.04.27
コメント(12)
-
テキストタグ編（10）
アンカータグでリンクを作成するホームページがたったの“１ページっぺら”だったらどうでしょう？ボリュームも無いので、本当に中身の無いものになってしまうのではないのでしょうか？リンクの作成はホームページの内容を無限に広げ、繋げてくれるタグです。そしてこれがHTML言語がハイパーである所以なのではないでしょうか。また、このタグで囲まれたテキストにはウェイトが掛かります。上手に使いたいですね！－－－－－－－－－－－－－－－－－－－－－－－－－－－－－■アンカータグでテキストリンクボタンを作る<a href="">■画像をリンクボタンにする<a href=""><img src=""><a href=""><img src="" border="0"> 画像の枠を消す■リンクを開くウィンドウを指定する<a href target="">□_blank … （新たにブラウザを立ち上げて表示します）□_new … （新たにブラウザを立ち上げて表示します）□_top … （フレームの分割を廃止し画面全体で表示します）□_self … （リンク元と同じフレーム(ウィンドウ)に表示します）デフォルト□_parent … （親フレームに表示します）□フレーム名 … （任意のフレーム(ウィンドウ)に表示します）■ページ内リンクを貼る□同じページ内の任意の場所にリンクする <a href="#"><a name="">□別のページの任意の部分へリンクする <a href="url#"><a name="">■メール送信リンク <a href="mailto:address"> リンクのクリックでメールソフトを起動させる <a href="mailto:address?subject=&body="> 起動させたメールに件名や本文を入れる ■<base href=""> 相対リンクの基準となるページを指定する －－－－－－－－－－－－－－－－－－－－－－－－－－－－－■アンカータグでテキストリンクボタンを作る基本的なアンカータグです。<a href="リンク先URL">テキスト</a><a href="http://plaza.rakuten.co.jp/demerara/">テンプレートとアクセスアップのでめらら</a>↓こんな感じですね（＾＾）テンプレートとアクセスアップのでめらら■画像をリンクボタンにする<a href="リンク先URL"><img src="画像のurl"></a><a href="http://plaza.rakuten.co.jp/demerara/"><img src="http://my.plaza.rakuten.co.jp/img/user/99/06/4429906/16.gif"></a>↓こんな感じですね（＾＾）<a href="リンク先URL"><img src="画像のurl" border="0"></a> 画像の枠を消す↓こんな感じですね（＾＾）■リンクを開くウィンドウを指定する<a href target="">□_blank … （新たにブラウザを立ち上げて表示します）<a href="http://plaza.rakuten.co.jp/demerara/" target="_blank">テンプレートとアクセスアップのでめらら</a>↓こんな感じですね（＾＾）テンプレートとアクセスアップのでめらら□_new … （新たにブラウザを立ち上げて表示します）<a href="http://plaza.rakuten.co.jp/demerara/" target="_new">テンプレートとアクセスアップのでめらら</a>↓こんな感じですね（＾＾）テンプレートとアクセスアップのでめらら□_top … （フレームの分割を廃止し画面全体で表示します）<a href="http://plaza.rakuten.co.jp/demerara/" target="_top">テンプレートとアクセスアップのでめらら</a>□_self … （リンク元と同じフレーム(ウィンドウ)に表示します）デフォルト<a href="http://plaza.rakuten.co.jp/demerara/" target="_self">テンプレートとアクセスアップのでめらら</a>□_parent … （親フレームに表示します）<a href="http://plaza.rakuten.co.jp/demerara/" target="_parent">テンプレートとアクセスアップのでめらら</a>□フレーム名 … （任意のフレーム(ウィンドウ)に表示します）<a href="http://plaza.rakuten.co.jp/demerara/" target="フレーム名">テンプレートとアクセスアップのでめらら</a>■ページ内リンクを貼る□同じページ内の任意の場所にリンクする <a href="#"><a name="">□別のページの任意の部分へリンクする <a href="url#"><a name=""><a name="top"></a><br><a href="http://plaza.rakuten.co.jp/demerara/7001#1">1の場所へ移動</a><br><a href="http://plaza.rakuten.co.jp/demerara/7001#2">2の場所へ移動</a><br><a href="http://plaza.rakuten.co.jp/demerara/7001#3">3の場所へ移動</a><br><br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br><br><a name="1">ここが1の場所</a><br><a href="http://plaza.rakuten.co.jp/demerara/7001#top">ページのトップへ</a><br><br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br><br><a name="2">ここが2の場所</a><br><a href="http://plaza.rakuten.co.jp/demerara/7001#top">ページのトップへ</a><br><br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br><br><a name="3">ここが3の場所</a><br><a href="http://plaza.rakuten.co.jp/demerara/7001#top">ページのトップへ</a><br><br><br>こんな感じですね（＾＾）■メール送信リンク <a href="mailto:address"> リンクのクリックでメールソフトを起動させる <a href="mailto:address?subject=&body="> 起動させたメールに件名や本文を入れる <a href="mailto:demerara@pulaza.com?subject=お問い合わせ&body=ご記入ください">メールはこちらへ</a>↓こんな感じですね（＾＾）メールはこちらへ■<base href=""> 相対リンクの基準となるページを指定する これは楽天広場ではできません。<html><head><base href="http://www.リンク先.com/"><title> テンプレートとアクセスアップのでめらら</title></head><body>コンテンツ</body></html>（楽天広場の各ページ場合改行しますと通常の改行<br>と同じになります。ですのでタグ通りの表示をさせるためには改行やスペースを全て排除して全部つなげてください）*****************************************************【庶事所感】フリーページに日記をまとめなおして「でめららTips」というタイトルで書きなおし始めました。よかったら見てみてくださいね。*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.04.26
コメント(12)
-
テキストタグ編（９）
テキストタグ編（９）リストタグを使ってテキストを整理しよう！（3）■<dl>定義型リスト（Definition List）定義型のリストを作るタグです。dlタグに囲まれた部分で、dtタグとddタグを組み合わせて指定します□compact---短いことばと説明を一行のなかで表示させる場合に使用【基本的な記述方法】<dl><dt>定義づけしたいことば（1）</dt><dd>定義づけしたい内容の説明（1）</dd><dt>定義づけしたいことば（2）</dt><dd>定義づけしたい内容の説明（2）</dd><dt>定義づけしたいことば（3）</dt><dd>定義づけしたい内容の説明（3）</dd></dl>【省略記述方法】<dt><dd>の閉じタグ</dt></dd>は省略できます（^^）<dl><dt>定義づけしたいことば（1）<dd>定義づけしたい内容の説明（1）<dt>定義づけしたいことば（2）<dd>定義づけしたい内容の説明（2）<dt>定義づけしたいことば（3）<dd>定義づけしたい内容の説明（3）</dl><dl><dt>Google</dt><dd>ページの人気度を反映したランキングを行なうサーチエンジンの日本語版。</dd><dt>Yahoo!</dt><dd>掲示板、オークションなどの参加型コンテンツがあるディレクトリ。</dd><dt>MSN</dt><dd>マイクロソフトネットワークによる検索サービス。Looksmartのディレクトリを使用。</dd></dl>↓こんな感じですね（＾＾）Googleページの人気度を反映したランキングを行なうサーチエンジンの日本語版。Yahoo!掲示板、オークションなどの参加型コンテンツがあるディレクトリ。MSNマイクロソフトネットワークによる検索サービス。Looksmartのディレクトリを使用。【短文型一行記述方法】<dl compact><dt>定義づけしたいことば（1）</dt><dd>定義づけしたい内容の説明（1）</dd><dt>定義づけしたいことば（2）</dt><dd>定義づけしたい内容の説明（2）</dd><dt>定義づけしたいことば（3）</dt><dd>定義づけしたい内容の説明（3）</dd></dl><dl compact><dt>Google</dt><dd>ランキングを行なうサーチエンジン</dd><dt>Yahoo!</dt><dd>参加型コンテンツがあるディレクトリ</dd><dt>MSN</dt><dd>マイクロソフトによる検索サービス</dd></dl>↓こんな感じですね（＾＾）Googleランキングを行なうサーチエンジンYahoo!参加型コンテンツがあるディレクトリMSNマイクロソフトによる検索サービスリストタグはほかにも以下のものがありますが、今後の使用はしないほうが無難だと思います。－－－－－－－－－－－－－－－－－－－－－－－－－－－－－<listing> ～ </listing>listing タグで囲まれたテキストはリスト扱いで、改行やスペースが無視されないで、記述したまま小さな字体で表示される。一行の文字数を132に指定して、<pre>タグとほぼ同様にそのまま表示するタグですがhtml4.0で廃止予定です。<xmp> ～ </xmp>listing タグ同様<pre>タグとほぼ同様です。html4.0で廃止予定です。（楽天広場の各ページ場合改行しますと通常の改行<br>と同じになります。ですのでタグ通りの表示をさせるためには改行やスペースを全て排除して全部つなげてください）*****************************************************【庶事所感】『「ウイルスバスター」不具合、原因は多重の人為ミス 情報セキュリティー会社「トレンドマイクロ」（東京・渋谷）のウイルス対策ソフト「ウイルスバスター」の更新ファイルの不具合により、企業などのパソコンが使えなくなった問題で、同社は24日、更新ファイルのプログラムミスや検査を怠るなど人為的なミスが重なったことが原因だったと発表した。週明けの25日にも一部のパソコンでトラブルが起きる可能性があると指摘。顧客の被害が大きければ賠償も検討するとしている。』って今日ですよね、苦情は24万件だそうです（＞＜）恐～い*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.04.25
コメント(9)
-
テキストタグ編（８）
テキストタグ編（８）リストタグを使ってテキストを整理しよう！（2）箇条書きは頭に記号ではなくナンバーや英字をあてることができます。■<ol>順番ありリスト（Ordered List）□type=""記号変更1 … （アラビア数字）デフォルト A … （大文字のアルファベット） a … （小文字のアルファベット） I … （大文字のローマ数字） i … （小文字のローマ数字） □start=""開始番号変更□value=""番号途中変更－－－－－－－－－－－－－－－－－－－－－－－－－－－－－【記述方法】□type=""記号変更▲type="1" … （アラビア数字）デフォルト <ol type="1">＝<ol><li>Google</li><li>Yahoo!</li><li>MSN</li></ol>↓こんな感じですね（＾＾）GoogleYahoo!MSN▲type="A" … （大文字のアルファベット）<ol type="A"><li>Google</li><li>Yahoo!</li><li>MSN</li></ol>↓こんな感じですね（＾＾）GoogleYahoo!MSN▲type="a" … （小文字のアルファベット） <ol type="a"><li>Google</li><li>Yahoo!</li><li>MSN</li></ol>↓こんな感じですね（＾＾）GoogleYahoo!MSN▲type="I" … （大文字のローマ数字）<ol type="I"><li>Google</li><li>Yahoo!</li><li>MSN</li></ol>↓こんな感じですね（＾＾）GoogleYahoo!MSN▲type="i" … （小文字のローマ数字）<ol type="i"><li>Google</li><li>Yahoo!</li><li>MSN</li></ol>↓こんな感じですね（＾＾）GoogleYahoo!MSN－－－－－－－－－－－－－－－－－－－－－－－－－－－－－□start=""開始番号変更(途中の番号や英字から始めることができます)▲デフォルトstart="5"で始めますと<ol start="5"><li>Google</li><li>Yahoo!</li><li>MSN</li></ol>↓こんな感じですね（＾＾）GoogleYahoo!MSN▲type="A" … （大文字のアルファベット）start="5"で始めますと<ol type="A" start="5"><li>Google</li><li>Yahoo!</li><li>MSN</li></ol>↓こんな感じですね（＾＾）GoogleYahoo!MSN※ほかの属性でも同じように指定できます。－－－－－－－－－－－－－－－－－－－－－－－－－－－－－□value=""番号途中変更(リストの途中で番号記号を飛ばせます)▲デフォルト<ol><li>Google</li><li>Yahoo!</li><li>MSN</li><li value="8">excite</li><li>Goo</li><li>Infoseek</li></ol>↓こんな感じですね（＾＾）GoogleYahoo!MSNexciteGooInfoseek▲type="I" … （大文字のローマ数字）<ol type="I"><li>Google</li><li>Yahoo!</li><li>MSN</li><li value="8">excite</li><li>Goo</li><li>Infoseek</li></ol>↓こんな感じですね（＾＾）GoogleYahoo!MSNexciteGooInfoseek※ほかの属性でも同じように指定できます。－－－－－－－－－－－－－－－－－－－－－－－－－－－－－（楽天広場の各ページ場合改行しますと通常の改行<br>と同じになります。ですのでタグ通りの表示をさせるためには改行やスペースを全て排除して全部つなげてください）*****************************************************【庶事所感】googleのページランクが予想通り今月見直しがありました。みなさんどのような状況になっていらっしゃるでしょうか？わたくしの場合はおおよそ、想像していた状況通りなのですが、不明点もいくつかあり、googleの変更点を時間をとってまたいろいろ調べてみたいと思っています。*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.04.24
コメント(10)
-
テキストタグ編（７）
テキストタグ編（７）リストタグを使ってテキストを整理しよう！（1）サイト内をスッキリ見せる方法として箇条書きの方法があると思うのですが、コレにもいろいろな手法があります。■<ul>順番なし普通のリスト（Unordered List）□type=""記号変更disc … （黒丸）デフォルトcircle … （白丸）square … （四角）【記述方法】▲disc … （黒丸）デフォルト<ul type="disc">＝<ul><li>Google</li><li>Yahoo!</li><li>MSN</li></ul>↓こんな感じですね（＾＾）GoogleYahoo!MSN▲circle … （白丸）<ul type="circle"><li>Google</li><li>Yahoo!</li><li>MSN</li></ul>↓こんな感じですね（＾＾）GoogleYahoo!MSN▲square … （四角）<ul type="square"><li>Google</li><li>Yahoo!</li><li>MSN</li></ul>↓こんな感じですね（＾＾）GoogleYahoo!MSN▲個別指定<ul><li type="disc">Google</li><li type="circle">Yahoo!</li><li type="square">MSN</li></ul>↓こんな感じですね（＾＾）GoogleYahoo!MSN－－－－－－－－－－－－－－－－－－－－－－－－－－－－－（楽天広場の各ページ場合改行しますと通常の改行<br>と同じになります。ですのでタグ通りの表示をさせるためには改行やスペースを全て排除して全部つなげてください）*****************************************************【庶事所感】大阪で「きずし」を食べたのですが、東京でいう「シメサバ」と同じなのでしょうか？「きずし」にはさば以外に野菜が刻んで入っていますが、「シメサバ」はサバだけのような･･･「がんもどき」はきっと「ひりょうず(飛龍頭)」または「ひろうす」と似ているものだと思うのですが、同じものだとしているインターネットのサイトもありますが、わたくしはちょっと違うような気がするのです。「関東焚き」も「おでん」と厳密には違うような･･･（＞＜）関東でも「おでん」の具って家庭ごとに違うのでしょうか･･･？？？*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.04.23
コメント(6)
-
テキストタグ編（６）
テキストタグ編（６）このタグもあまり多用したくないタグなのですが、現在のところほとんどの個人作成のサイトの場合利用されているタグです。大手企業のホームページなどでは見かけなくなってきました。その理由は、実を言いますとHTMLのバージョンの向上が幾度もなされてきているのですが、HTML４およびXHTMLではこのタグは廃止予定となっているからなのです。■<font size=""> 文字のサイズを指定する■<font color=""> 文字の色を指定する■<font face=""> 字体を指定する■<basefont size=""> 基準の文字サイズなどを指定する－－－－－－－－－－－－－－－－－－－－－－－－－－－－－■size="" （文字のサイズを指定する） 文字のサイズは以下のように数字を入れて指定することができます。□絶対的指定---1（小さい）～7（大きい）までの数値（デフォルト「標準」は3になります）□相対的指定---デフォルトの大きさに対して-1、+2というふうに指定します↓こんな感じですね（＾＾）<font size="1">(font size１の文字)</font>＝<font size="-2">(font size-2の文字)</font>(font size１の文字)＝(font size-2の文字)<font size="2">(font size２の文字)</font>＝<font size="-1">(font size-1の文字)</font>(font size２の文字)＝(font size-1の文字)<font size="3">(font size３の文字)</font>＝<デフォルト>(font size３の文字)＝(デフォルトの文字)<font size="4">(font size４の文字)</font>＝<font size="+1">(font size+1の文字)</font>(font size４の文字)＝(font size+1の文字)<font size="5">(font size５の文字)</font>＝<font size="+2">(font size+2の文字)</font>(font size５の文字)＝(font size+2の文字)<font size="6">(font size６の文字)</font>＝<font size="+3">(font size+3の文字)</font>(font size６の文字)＝(font size+3の文字)<font size="7">(font size７の文字)</font>＝<font size="+4">(font size+4の文字)</font>(font size７の文字)＝(font size+4の文字)■color="" （文字の色を指定する） □カラーコード指定---シャープ（ # ）で始まる6桁のコードを指定□カラーネーム指定---red、blue、green、white、blackなど英語で指定<font size=5><font color="#ff0000">テ</font><font color="#ff6200">ン</font><font color="#ffc400">プ</font><font color="#ffff00">レ</font><font color="#d7ff00">ー</font><font color="#75ff00">ト</font><font color="#13ff00">と</font><font color="#00ff00">ア</font><font color="#00ff4e">ク</font><font color="#00ffb0">セ</font><font color="#00ffff">ス</font><font color="#00ebff">ア</font><font color="#0089ff">ッ</font><font color="#0027ff">プ</font><font color="#0000ff">の</font><font color="#3a00ff">で</font><font color="#9c00ff">め</font><font color="#fe00ff">ら</font><font color="#ff00ff">ら</font></font>↓こんな感じですね（＾＾）テンプレートとアクセスアップのでめらら■face="" (字体を指定する)※フォントを指定しても、見る人の環境にそのフォントがインストールされていなければ、指定したとおりのフォントで表示されません。※指定したフォントが表示できない場合を考え、複数の候補を設定しておくこともできます。 <font face="候補1,候補2,候補3">字体を変えたい文章</font>大きく分けてマッキントッシュとウィンドゥズではフォントの名前自体が違うのですが、イメージを合わせたい場合には以下を参考にしていただくと良いかと思います。Chicago(Mac) ⇔ Impact(Win)Courier(Mac) ⇔ Courier New (Win)Geneva(Mac) ⇔ Comic Sans MS(Win) Helvetica(Mac) ⇔ Arial(Win)Helvetica Black(Mac) ⇔ Arial Black(Win) Times(Mac) ⇔ Times New Roman(Win)Osaka ＭＳ(Mac) ⇔ Ｐゴシック(Win)平成明朝 ＭＳ(Mac) ⇔ Ｐ明朝(Win)平成角ゴシック(Mac) ⇔ ＭＳ Ｐゴシック(Win)細明朝体 ＭＳ(Mac) ⇔ Ｐ明朝(Win)<font face="Chicago,Impact">Macをお使いでChicagoをインストール済みの方にはChicagoで表示、Winをお使いの方でImpactをインストール済みの方にはImpactで表示されています。</font>↓こんな感じですね（＾＾）Macをお使いでChicagoをインストール済みの方にはChicagoで表示、Winをお使いの方でImpactをインストール済みの方にはImpactで表示されています。※わたくしは、フォント（字体）はインストールさえされておれば大変いろいろな表現ができるのですが、いろいろなかたに見てもらう前提で考えるのであれば、フォント（字体）に頼らないコンテンツ作りをしたほうが良いと考えます。■basefont size="" (基準の文字サイズなどを指定)※このタグで指定した内容は、このタグ以降の全ての文字に適用されます。 ※指定できるのは、size="" color="" face="" です。※BODYタグの範囲の中で有効です【例】<html><head><title>アクセスアップのでめらら</title></head><body><basefont size="2">ここ以降は基準のサイズが２ですので<font size="+2">ここのサイズは2+2で4になります</font>色や字体の基準も同様です</body></html>－－－－－－－－－－－－－－－－－－－－－－－－－－－－－（楽天広場の各ページ場合改行しますと通常の改行<br>と同じになります。ですのでタグ通りの表示をさせるためには改行やスペースを全て排除して全部つなげてください）*****************************************************【庶事所感】急遽大阪までお出かけしまして日記が二日分溜まってしまいました（＞＜）かんばって書かねば（;汗）*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.04.22
コメント(6)
-
テキストタグ編（５）
テキストタグ編（５）わたくしは使いませんし、あまり必要ないと思っているのですが、ホームページを賑やかにしたい場合にはこれらの記述方法があります。ホームページの読み手が読みづらくなったり、意味が解らなくならないように使うのがいいのではないかと思います。（ただ、字が動くのは楽しいですし、組み合わせによってはflashみたいに動画っぽくできるので遊びにはいいですよね！）■<blink> 文字を点滅させる ■<marquee>文字をスクロールさせる －－－－－－－－－－－－－－－－－－－－－－－－－－－－－■<blink> 文字を点滅させるBLINKタグに囲まれた文字は、点滅して表示されます。この指定はNetscape（バージョン6を除く）で対応しています。IEではできません！<blink>この部分が点滅します</blink>↓こんな感じですね（＾＾）この部分が点滅します －－－－－－－－－－－－－－－－－－－－－－－－－－－－－■<marquee> 文字をスクロールさせるこのタグは詳細の設定方法がたくさんありますので以下に分類しますね1.）スクロール範囲の設定 WIDTH="幅"（ピクセル数または%で指定）---スクロール範囲の幅の大きさを指定 HEIGHT="高さ"（ピクセル数または%）---スクロール範囲の高さを指定 HSPACE="左右の余白"（ピクセル数）---スクロール範囲の余白を指定（左右） VSPACE="上下の余白"（ピクセル数）---スクロール範囲の余白を指定（上下） BGCOLOR="背景色"（カラーコードまたはカラーネーム）---スクロール範囲の背景色を指定 2.）スクロールの動きを設定 BEHAVIOR="動き方" （指定がない場合「デフォルト」はscroll） (1)scroll 片側から出てきて横切る繰り返し (2)slide 片側から出てきて端まで来ると停止 (3)alternate 左右（上下）に往復させる DIRECTION="移動の方向"（指定がない場合「デフォルト」はleft） (1)left 右から左へ移動 (2)right 左から右へ移動 (3)up 下から上へ移動 (4)down 上から下へ移動 LOOP="回数" （指定がない場合は無限） 回数 スクロールの繰り返し回数を指定 SCROLLDELAY="間隔" （指定がない場合は85） 秒数（1/1000秒単位） スクロールのスピードに影響します。数値が小さいと速く、大きいと遅く移動します。 SCROLLDELAYを59以下に設定する場合は、このTRUESPEEDを行います（例：<MARQUEE SCROLLDELAY="40" TRUESPEED>スクロール文字</MARQUEE>） SCROLLAMOUNT="移動距離" （指定がない場合は6） ピクセル数 スクロールのスピードに影響します。数値が大きいと速く、小さいと遅く移動します（小さいほど動きはなめらかになります）－－－－－－－－－－－－－－－－－－－－－－－－－－－－－【実例】------------------------------------------------------■基本タグ<marquee>何も指定しないマーキー</marquee>↓こんな感じですね（＾＾）何も指定しないマーキー------------------------------------------------------■スクロール範囲の背景色を指定<marquee bgcolor="lightskyblue">背景色を指定しました</marquee>↓こんな感じですね（＾＾）背景色を指定しました------------------------------------------------------■範囲の幅指定を追加 <marquee bgcolor="lightskyblue" width="50%">範囲の幅を半分に指定</marquee>↓こんな感じですね（＾＾）範囲の幅を半分に指定------------------------------------------------------■上下左右の余白を指定 <marquee bgcolor="lightskyblue" hspace="50" vspace="20">上下左右の余白指定</marquee>↓こんな感じですね（＾＾）上下左右の余白指定------------------------------------------------------■往復させる動きを指定<marquee behavior="alternate">往復を繰り返す</marquee>↓こんな感じですね（＾＾）往復を繰り返す------------------------------------------------------■移動方向を左から右に指定<marquee direction="right">左から右に移動</marquee>↓こんな感じですね（＾＾）左から右に移動------------------------------------------------------■移動方向を上から下に指定<marquee direction="down" height="100">上から下に移動（高さが無いと読みにくいですよ！！）</marquee>↓こんな感じですね（＾＾）上から下に移動（高さが無いと読みにくいですよ！！）------------------------------------------------------■入れ子<MARQUEE DIRECTION="DOWN" BEHAVIOR="ALTERNATE" HEIGHT="100"><marquee behayior="alternate"><font color="red">♥</font></marquee></marquee>↓こんな感じですね（＾＾）♥------------------------------------------------------■移動速度<marquee scrolldelay="85" scrollamount="6">標準</marquee><BR><marquee scrolldelay="50" scrollamount="10" truespeed>超速く</marquee><BR><marquee scrolldelay="200" scrollamount="3">超遅</marquee>↓こんな感じですね（＾＾）標準超速く超遅－－－－－－－－－－－－－－－－－－－－－－－－－－－－－■うら技IEでもBLINK<marquee direction="up" scrollamount="30" width="150" height="30" scrolldelay="1000">BLINK（点滅）するぞ</marquee>↓こんな感じですね（＾＾）BLINK（点滅）するぞ （楽天広場の各ページ場合改行しますと通常の改行<br>と同じになります。ですのでタグ通りの表示をさせるためには改行やスペースを全て排除して全部つなげてください）*****************************************************【庶事所感】この間の日曜日、街まで徒歩運動のため!?買い物のため、出かけましたら通り沿いに「沖縄市場」の文字が目に入りまして、思わず入ってみました（＾＾）黒糖のかりーとう（かりんとう）とインスタントソーキソバ（沖縄そば）とジーマーミ豆腐（落花生の豆腐）を購入！やっぱり、沖縄独特の味わいで、しばし満足しました。今度いったら「しーくゎさー」のジュース買おうかなぁ･･･なんだかすっぱそうだったけど、3本2680円1本だと1000円･･･一本でいいんだけど、損したように思うし･･･（＾＾）*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.04.21
コメント(18)
-
テキストタグ編（４）
テキストタグ編（４）スタイルを使わないでもブラウザ(画面)の上では太字であったり斜文字であったりいろいろと装飾できますが、タグを大きく分けますと「見た目を変えるだけのタグ」と「意味を込めたタグ」があります。見た目が同じでも内容が違ってきます。そのホームページの中で重要なセンテンス（文章）やワード（単語）は意味の込められたタグでマークアップして、見た目だけ目立たせたい場合は「テキスト拡張モジュール」を使うのが望ましいと思います。－－－－－－－－－－－－－－－－－－－－－－－－－－－－－■「見た目を変えるだけのタグ」□水平線は色や形を属性やスタイルで変化させることができます。<hr> (horizontal rule)水平線□文字の見た目をいろんな形で表示させましょう。<sub> (subscript)下付き添え字 </sub><sup> (superscript)上付き添え字 </sup><tt> (teletype or monospaced text)等幅テキスト </tt><i> (italic text style)イタリック体テキスト </i><b> (bold text style)太字体テキスト </b><big> (text in a "large" font)大きい文字のテキスト </big><small> (text in a "small" font)小さい文字のテキスト </small><del> (deleted text)削除済みテキスト </del><ins> (inserted text)挿入テキスト </ins><strike> この文章には打ち消し線が引かれます。 </strike><s> この文章には打ち消し線が引かれます。 </s><u> アンダーラインを引く </u>□知っておくと便利かもしれませんね（＾＾）<ruby><rt> ルビをふる<rp></ruby><address> アドレス、連絡先<br />(forced line break)強制改行■「意味を込めたタグ」※強調する必要のないセンテンス（文章）やワード（単語）には使わないことをおすすめいたします。<em> (emphasis)強調 </em><strong> (stronger emphasis)より強い強調 </strong>－－－－－－－－－－－－－－－－－－－－－－－－－－－－－【実例】■「見た目を変えるだけのタグ」まずは線を引きますネ（＾＾）↓<hr> (horizontal rule)水平線つぎは、実際の文章を見てみてください□文字の見た目をいろんな形で表示させましょう。これらのタグはマークアップ（挟む）されたタグは表示がかわりますがウェイトは付きません<sub>は (subscript)下付き添え字 です。逆に<sup>は (superscript)上付き添え字 、<tt>を使うと(teletype or monospaced text)等幅テキスト。もともと欧米の文字がもとになっているので<i>(italic text style)イタリック体テキストもよく使われます。太字にしたいときは<b>(bold text style)太字体テキストを使いますが、これは強調の意味はありません。大小には簡単に<big>(text in a "large" font)大きい文字のテキスト<small>(text in a "small" font)小さい文字のテキストを使えます。打ち消し線はいくつが種類があって<del><ins>(deleted text)削除済みテキスト(inserted text)挿入テキストで入れ替えたり、消すだけなら<strike>この文章には打ち消し線が引かれます。、省略形だと<s>この文章には打ち消し線が引かれます。になります。またあまり使うことはお勧めしませんが、<u>アンダーラインを引くも引けます。□知っておくと便利かもしれませんね（＾＾）のタグ▲ルビをふる<ruby>浜田省吾<rp>（</rp><rt>はまだしょうご</rt><rp>）</rp></ruby>↓こんな感じですね（＾＾）ブラウザによって見え方が違っていると思います。どんな風に見えていますか？？？浜田省吾（はまだしょうご▲アドレス、連絡先<address>Copyright © 2005,<a href="mailto:???[???A?h???X">demerara</a>All Rights Reserved!ご意見・ご感想をメールでお寄せください。</address>↓こんな感じですね（＾＾）Copyright © 2005,demeraraAll Rights Reserved!ご意見・ご感想をメールでお寄せください。▲<p>タグのなかに記述しても強制的に改行されます<br />(forced line break)強制改行↓こんな感じですね（＾＾）▲<p>タグのなかに記述しても強制的に改行されます(forced line break)強制改行■「意味を込めたタグ」このタグは見た目だけでなくそのことばの重要性も<em> (emphasis)強調 します。さらに、このタグを使うと<strong> (stronger emphasis)より強い強調 をあらわします（楽天広場の各ページ場合改行しますと通常の改行<br>と同じになります。ですのでタグ通りの表示をさせるためには改行やスペースを全て排除して全部つなげてください）*****************************************************【庶事所感】『昭和の文壇で活躍し、小説「親鸞」「厭（いや）がらせの年齢」などで知られる文化勲章受章者の作家、丹羽文雄（にわ・ふみお）さんが二十日午前零時二十五分、肺炎のため東京都武蔵野市西久保の自宅で亡くなった。百歳。三重県四日市市出身。親族で密葬をした後、日本文芸家協会が協会葬をする予定。日程などは未定。喪主は長男直樹（なおき）氏。』もう百歳でいらっしゃったんですね！存じませんでした。ご冥福をお祈りいたします。*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.04.20
コメント(10)
-
テキストタグ編（３）
テキストタグ編（３）■<H*> 『見出し』を指定する* の部分には1（大きい）～6（小さい）の数値を指定します。これはこのまま階層を表現します。また検索エンジンのウェイト付けもその数字の順番と考えられます。小説などを読みますと「第一章」「第一節」「その1」などと大きな単元から順次小さな単元のくくりに記述されているのをよく見かけますが、これと同じだと思っていいと思います。【基本的なテキストコンテンツの構成方法例】<h1>大見出し（1）</h1><h2>中見出し（1-1）</h2><h3>小見出し（1-1-1）</h3><h3>小見出し（1-1-2）</h3><h2>中見出し（1-2）</h2><h3>小見出し（1-2-1）</h3><h3>小見出し（1-2-2）</h3><h1>大見出し（2）</h1><h2>中見出し（2-1）</h2><h3>小見出し（2-1-1）</h3><h2>中見出し（2-2）</h2><h3>小見出し（2-2-1）</h3><h3>小見出し（2-2-2）</h3><h1>大見出し（3）</h1><h2>中見出し（3-1）</h2><h3>小見出し（3-1-1）</h3><h2>中見出し（3-2）</h2><h3>小見出し（3-2-1）</h3><h3>小見出し（3-2-2）</h3>※このタグで囲まれた文字は太く強調され、上下に1行分のスペースを空けて改行が行われます。 ※大きさは変わりますが、見栄えの再現やプレゼンテーションではなく、論理（意味）的構造の、マークアップによる表現ですので大きさを変えるのに使ってはいけません。※したがって<h1>の次に<h3>や<h4>が記述されるようなことはあり得ません。※フォントのサイズを変えたい場合は<font>タグではなくスタイルの中で変えるのが望ましいと思います。※属性指定でalign="left" （左側に表示します:デフォルト）、align="center"（中央に表示します）、align="right"（右側に表示します）などが使えます。<h1 align="center">大分類「生物」</h1><p>[テキスト本文]生物とは・・・です。</p><h2>中分類「動物」</h2><p>[テキスト本文]動物とは・・・です。</p><h3>小分類「哺乳類」</h3><p>[テキスト本文]哺乳類とは・・・です。</p><h3>小分類「爬虫類」</h3><p>[テキスト本文]爬虫類とは・・・です。</p><h2>中分類「植物」</h2><p>[テキスト本文]植物とは・・・です。</p><h3>小分類「木」</h3><p>[テキスト本文]木とは・・・です。</p><h3>小分類「草」</h3><p>[テキスト本文]草とは・・・です。</p>↓こんな感じですね（＾＾）大分類「生物」[テキスト本文]生物とは・・・です。中分類「動物」[テキスト本文]動物とは・・・です。小分類「哺乳類」[テキスト本文]哺乳類とは・・・です。小分類「爬虫類」[テキスト本文]爬虫類とは・・・です。中分類「植物」[テキスト本文]植物とは・・・です。小分類「木」[テキスト本文]木とは・・・です。小分類「草」[テキスト本文]草とは・・・です。－－－－－－－－－－－－－－－－－－－－－－－－－－－－－※＜h3＞に関しては、楽天広場のわたくしのサイトはスタイルシートで以下の指定がされていますので画面での表示は四角で囲われて、文字サイズは10ptに設定されています。style="margin: 6px 0px 14px 0px; width: 100%; padding:4px; font-size:10pt; font-weight:normal;border: 1px solid #AAAAAA; color: #666666;スタイルの解説はまたいたしたいと思います。（楽天広場の各ページ場合改行しますと通常の改行<br>と同じになります。ですのでタグ通りの表示をさせるためには改行やスペースを全て排除して全部つなげてください）*****************************************************【庶事所感】すみません（＞＜）時間がなく、まとめきれませんので、文字の強調について書きたかったのですが明日以降にいたします。じつはテキストコンテンツの中でキーワードの設定をする場合においては今日の＜Heading＞のタグと「強調」が重要なキーポイントになります。*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.04.19
コメント(12)
-
テキストタグ編（２）
テキストタグ編（２）文章だけで構成されたコンテンツを想定した場合の文章作成をHTMLタグにあてはめますと文章主体ですと本文[第一段落<p>[例<pre>]][第ニ段落<p>[引用<blockquote>]][第三段落<p>]装飾を主体にしますと本文[第一段落<div>[例<pre>]][第ニ段落<div>[引用<blockquote>]][第三段落<div>]といった感じが一般的かと思いますが、今回はこの例や引用をするためのタグについてです。■例<pre>□<pre> ソース中のスペース・改行などを等幅フォントでそのまま表示</pre>■引用<blockquote>□<blockquote> 比較的長めの文章を引用する際に使用</blockquote>（※短文用の引用符<q>～</q>はほとんどのブラウザで表示できません＞＜）－－－－－－－－－－－－－－－－－－－－－－－－－－－－－■例<pre>通常ソースタグの中ではスペースや改行を入れましてもブラウザ上では反映しませんが、このタグでマークアップしますとソース上に書いたスペースや改行がそのままブラウザ上に反映して表示されます。<pre><h2>浜田省吾 SHOGO HAMADA</h2>1952年12月29日、広島県竹原市に生まれる。1973年広島時代の音楽仲間と共に"AIDO"を結成し、翌年には吉田拓郎の全国ツアーにバックバンドとして参加。当時はドラムスを担当していた。1975年5月1日にアルバム「AIDO」とシングル「二人の夏」でCBS SONYからデビューしたが9月末には脱退、翌1976年4月21日、アルバム「生まれたところを遠く離れて」、シングル「路地裏の少年」でソロデビューした。</pre>↓こんな感じですね（＾＾）<h2>浜田省吾 SHOGO HAMADA</h2>1952年12月29日、広島県竹原市に生まれる。1973年広島時代の音楽仲間と共に"AIDO"を結成し、翌年には吉田拓郎の全国ツアーにバックバンドとして参加。当時はドラムスを担当していた。1975年5月1日にアルバム「AIDO」とシングル「二人の夏」でCBS SONYからデビューしたが9月末には脱退、翌1976年4月21日、アルバム「生まれたところを遠く離れて」、シングル「路地裏の少年」でソロデビューした。※ただし、「<」と「>」はタグとして反応しますので特殊表現の < と > と記入すれば表示されます。－－－－－－－－－－－－－－－－－－－－－－－－－－－－－■引用<blockquote><blockquote>～</blockquote>で囲まれた部分は 上下に1行分のスペース、左右はインデント（字下げ）され、上下左右にスペースが空きます。 わたくしの大好きなアーティスト浜田省吾について簡単に紹介しますと<blockquote>浜田省吾 SHOGO HAMADA<br>1952年12月29日、広島県竹原市に生まれる。1973年広島時代の音楽仲間と共に"AIDO"を結成し、翌年には吉田拓郎の全国ツアーにバックバンドとして参加。当時はドラムスを担当していた。1975年5月1日にアルバム「AIDO」とシングル「二人の夏」でCBS SONYからデビューしたが9月末には脱退、翌1976年4月21日、アルバム「生まれたところを遠く離れて」、シングル「路地裏の少年」でソロデビューした。</blockquote>と言った経歴のかたなのです↓こんな感じですね（＾＾）わたくしの大好きなアーティスト浜田省吾について簡単に紹介しますと浜田省吾 SHOGO HAMADA1952年12月29日、広島県竹原市に生まれる。1973年広島時代の音楽仲間と共に"AIDO"を結成し、翌年には吉田拓郎の全国ツアーにバックバンドとして参加。当時はドラムスを担当していた。1975年5月1日にアルバム「AIDO」とシングル「二人の夏」でCBS SONYからデビューしたが9月末には脱退、翌1976年4月21日、アルバム「生まれたところを遠く離れて」、シングル「路地裏の少年」でソロデビューした。と言った経歴のかたなのです※左右はインデントされますが、本来引用を目的としたタグですので、文中で一文字下げたい、行を変えたいなどで使うのは厳禁です。と言うのもこのタグ、検索ロボットはキチンと引用と認識しているみたいですので（＞＜）－－－－－－－－－－－－－－－－－－－－－－－－－－－－－（楽天広場の各ページ場合改行しますと通常の改行＜br＞と同じになります。ですのでタグ通りの表示をさせるためには改行やスペースを全て排除して全部つなげてください）*****************************************************【庶事所感】『奈良県明日香村の高松塚古墳の壁画（国宝）が劣化している問題で、文化庁が、壁画の描かれた石室を解体して古墳の外へ運び出し、修復・保存する方法を検討していることがわかった。７２年に発見されて以降、カビの発生などが抑えられず急激に劣化が進んでおり、現地での保存は困難と判断。絵の下地のしっくいの状態が悪く、同村のキトラ古墳の壁画のように引きはがすのも難しいという。ただ、壁画を傷めずに石室を解体・搬出できるかどうかの議論はこれからで、専門家の間には慎重論もある。』･･･愚かですね、発見されるまでの気が遠くなるほどの年数に亘って綺麗に保存されてきたものが、発見されて露出した途端保存することができなくなっている。現代の科学技術などというものは太古の先達の知恵に比べると本当に愚かで稚拙なものなのだろうなぁと考えさせられます。どんどん人類の遺産はこうして破壊されていくのでしょうね、と少し悲しくなったのでした。*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.04.18
コメント(4)
-
テキストタグ編（１）
テキストタグ編（１）わたくしたちは日常日本語で文章を書く際にはいちいち「第一段落」「第二段落」などと書いたりしませんが、HTML言語で文章を書く際にはこのような『段落』や『見出し』『小見出し』などを付けた方がよいです。日記などは「起承転結」を入れて書くようなことは無いかもしれませんが、文章のまとめ方を予め考えて書くようにしますと構造がすっきりします。すっきりしますと、更新作業が楽になりますし、検索エンジンのロボットの巡回にも適合し易くなります。要領としてはなるべく散文的な表現を避けて具体的な表現に注意しながら書くといいのですが、なかなか難しいですよね（＞＜）■改行□<br> 改行させる□<nobr> 改行させない■段落と位置□<p> 段落を指定する□<div> 段落（ブロックタイプ）□<span> 段落（インラインタイプ）－－－－－－－－－－－－－－－－－－－－－－－－－－－－－■改行■<br>改行させる本来ソースタグ上で長文を記述した場合適宜<br>タグで改行をしますが楽天広場の日記などの記述は作成中にEnterキーを押して改行を入れただけで改行されて<br>タグをいれたのと同じ効果があります。これは楽天広場だけ（ほかにもひょっとしたらあるかも知れませんが）のローカルルールですので、ほかでは必ず<br>で改行することとなります。･･･このタグには閉じタグ</br>は不要です。■<nobr>改行させないブラウザのなかでは文字が画面幅いっぱいになりますと自動的に折り返して改行されたのと同じになりますがこのタグを利用しますと自動改行を禁止します。<nobr>自動改行したくない文章をマークアップ（タグで挟み込む）します</nobr>（<nobr>はHTMLタグですが、非改行はスタイルタグでも同様の指定ができます。本来文章の装飾に近い手法ですので、わたくしはこのような手法はスタイルタグに任せるべきだと考えています。）－－－－－－－－－－－－－－－－－－－－－－－－－－－－－■段落と表示■<p>このマークアップで段落を指定します</p>※<p>～</p>の前後には一行余白が入ります。 <p>4年ぶりとなるオリジナル・アルバム絶賛制作中の浜田省吾。</p><p>ヒットシングル『君に捧げるlove song』から1年半ぶりのオリジナル・ニュー・シングルは、ファンも待ち焦がれた浜田省吾ならではのロック。</p><p>“ひと言で言うと「初心に帰る」”それでいて“またひとつ新しいドアを開けた感じ”と本人も語るニュー・アルバムはもちろんのこと、今後の浜田省吾を代表し、21世紀の日本のロック史にも残る名曲</p>↓こんな感じですね（＾＾）4年ぶりとなるオリジナル・アルバム絶賛制作中の浜田省吾。ヒットシングル『君に捧げるlove song』から1年半ぶりのオリジナル・ニュー・シングルは、ファンも待ち焦がれた浜田省吾ならではのロック。“ひと言で言うと「初心に帰る」”それでいて“またひとつ新しいドアを開けた感じ”と本人も語るニュー・アルバムはもちろんのこと、今後の浜田省吾を代表し、21世紀の日本のロック史にも残る名曲■<div>このマークアップで段落を指定します</div>（ブロックタイプ）※<div>～</div>の前後は改行されます。 <div>4年ぶりとなるオリジナル・アルバム絶賛制作中の浜田省吾。</div><div>ヒットシングル『君に捧げるlove song』から1年半ぶりのオリジナル・ニュー・シングルは、ファンも待ち焦がれた浜田省吾ならではのロック。</div><div>“ひと言で言うと「初心に帰る」”それでいて“またひとつ新しいドアを開けた感じ”と本人も語るニュー・アルバムはもちろんのこと、今後の浜田省吾を代表し、21世紀の日本のロック史にも残る名曲</div>↓こんな感じですね（＾＾）4年ぶりとなるオリジナル・アルバム絶賛制作中の浜田省吾。ヒットシングル『君に捧げるlove song』から1年半ぶりのオリジナル・ニュー・シングルは、ファンも待ち焦がれた浜田省吾ならではのロック。“ひと言で言うと「初心に帰る」”それでいて“またひとつ新しいドアを開けた感じ”と本人も語るニュー・アルバムはもちろんのこと、今後の浜田省吾を代表し、21世紀の日本のロック史にも残る名曲■<span>このマークアップで段落を指定します</span> （インラインタイプ）※<span>～</span>の前後は余白も改行もありません。<span>4年ぶりとなるオリジナル・アルバム絶賛制作中の浜田省吾。</span><span>ヒットシングル『君に捧げるlove song』から1年半ぶりのオリジナル・ニュー・シングルは、ファンも待ち焦がれた浜田省吾ならではのロック。</span><span>“ひと言で言うと「初心に帰る」”それでいて“またひとつ新しいドアを開けた感じ”と本人も語るニュー・アルバムはもちろんのこと、今後の浜田省吾を代表し、21世紀の日本のロック史にも残る名曲</span>↓こんな感じですね（＾＾）4年ぶりとなるオリジナル・アルバム絶賛制作中の浜田省吾。ヒットシングル『君に捧げるlove song』から1年半ぶりのオリジナル・ニュー・シングルは、ファンも待ち焦がれた浜田省吾ならではのロック。“ひと言で言うと「初心に帰る」”それでいて“またひとつ新しいドアを開けた感じ”と本人も語るニュー・アルバムはもちろんのこと、今後の浜田省吾を代表し、21世紀の日本のロック史にも残る名曲－－－－－－－－－－－－－－－－－－－－－－－－－－－－－■段落の表示位置と装飾□<p>このマークアップで段落を指定します</p>（divの場合はpをdivに置き換えて使えます。spanは一部できません）この目的としては文章のひとかたまりを認識させたいとき、またこの部分のみの装飾指定をしたいときに使います。1.）<p align="left">左に寄せてみます。</p>2.）<p align="center">中央に配置してみます。</p>3.）<p align="right">右に寄せてみます。</p>4.）<p style="border-style:dotted ; --------- (点線で囲みます！)border-width:3px; ----------（線の太さは３ピクセルです！）border-color:#FF9900 ; ----------（線の色コードは#FF9900です！）padding:10px ; ----------（10ピクセルの詰め物をいれます）margin:20px ; ----------（20ピクセルの余白をとります）background-color:#FFFFCC"> ----------（背景色の色コードは#FFFFCCです）<font size="3" color="#CC0033"><b><u>光と影の季節</u></b></font><br><font size="2" color="#333333"><br>4年ぶりとなるオリジナル・アルバム絶賛制作中の浜田省吾。ヒットシングル『君に捧げるlove song』から1年半ぶりのオリジナル・ニュー・シングルは、ファンも待ち焦がれた浜田省吾ならではのロック。“ひと言で言うと「初心に帰る」”それでいて“またひとつ新しいドアを開けた感じ”と本人も語るニュー・アルバムはもちろんのこと、今後の浜田省吾を代表し、21世紀の日本のロック史にも残る名曲</font></p>↓こんな感じですね（＾＾）1.）左に寄せてみます。2.）中央に配置してみます。3.）右に寄せてみます。4.）光と影の季節4年ぶりとなるオリジナル・アルバム絶賛制作中の浜田省吾。ヒットシングル『君に捧げるlove song』から1年半ぶりのオリジナル・ニュー・シングルは、ファンも待ち焦がれた浜田省吾ならではのロック。“ひと言で言うと「初心に帰る」”それでいて“またひとつ新しいドアを開けた感じ”と本人も語るニュー・アルバムはもちろんのこと、今後の浜田省吾を代表し、21世紀の日本のロック史にも残る名曲－－－－－－－－－－－－－－－－－－－－－－－－－－－－－（楽天広場の各ページ場合改行しますと通常の改行＜br＞と同じになります。ですのでタグ通りの表示をさせるためには改行やスペースを全て排除して全部つなげてください）*****************************************************【庶事所感】『ＪＲ横浜駅前の三越横浜店が５月に閉店するのに伴い、建物を所有する学校法人「岩崎学園」は１５日、後継のテナントとして大手家電量販店「ヨドバシカメラ」（本社・東京）と賃貸借契約を結ぶことで基本合意したと発表した。同社によると、１１月の開店を見込んでいるという。』大阪駅の桜橋口側にも物凄くおおきなディスカウントカメラ屋さんのビルができていますが、あの業種は儲かっているのでしょうか（＠＠）！店舗を構えることや広告宣伝、大幅な値引き･･･どうなっているのでしょうね？？？それに引き換え、百貨店は･･･*****************************************************なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
2005.04.17
コメント(13)
全372件 (372件中 201-250件目)
-
-
- ジャンクパーツ
- 秋原他でのお買い物240428気になった…
- (2024-11-17 17:25:13)
-
-
-
- 新生活にむけてほしい家電は？
- シャープ 加湿空気清浄機 KI-PS40-W …
- (2024-11-23 20:49:50)
-
-
-
- 花、風景の写真を撮るカメラとレンズ
- 望遠マクロ撮影(11/3)
- (2024-11-11 14:52:31)
-
