Web標準にアプローチ　〔まいまいのお宿。〕

[CSSメモ] カテゴリの記事

全19件 (19件中 1-19件目)

1

• 

  Firefoxで点々、点線が表示されてしまうのを消去する

  詳解HTML ＆ CSS ＆ JavaScript辞典第3版スタイルシート・デザイン 「 毎度おなじみ、点線消去法でございます 」お馴染みなのは、「あれ？どうするんだっけ？」って思うこと。毎回調べないと、すぐに忘れる記述なんですよね。以下は、時と場合に応じて、必要になる記述。完全に自分メモです（笑）検索して引っかかってきたページもついでにペタリンコしておきます。FirefoxのuserChrome.cssネタ #9http://hail2u.net/blog/software/firefox-usechrome-css-tricks-9.htmlTips:Firefoxで選択時に余分な点線が表示されることを防ぐ | Tech de Gohttp://www.techdego.com/2007/01/tipsfirefox.phpリンク箇所の点線を消す（Firefoxとか？）outline-width: 0 !important;overflow:hidden; ･････つづく東京２３区中心・駅近ホテルズ｜散文誌・３６５*Web標準2007年版目次*基準のソースコード文字コードは「Shift-JIS」か「EUC-JP」かJavascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーするCSSでidを指定する時は要素名とセットで記述HTMLのDOCTYPE宣言は軽視できない行間指定「line-height」の使い方@importを使って外部スタイルシートを読み込む

  2007/06/28

  コメント(0)

• 

  「FLASH」と「z-index」と「プルダウンメニュー」

  Web標準の教科書実践Web Standards designこれからはじめるFlashの本 「そうか、FLASHとプルダウンメニューは相性が悪いか」最近、あちこちで見る、プルダウンメニュー。スタイルシートスキルアップ・デザインブック（2）に載っていたやり方でちょいちょい実装しております。だけどもですねー。FLASH使っていると、どうしても背後に回ってしまうのよ。サブメニューとFLASHが重なる順番が。z-index、効かないんですね～単なる画像なら、もちろんOK。GIFアニメもOKですよ。当たり前か（笑）やり方がなくもないので、その一例をメモ。そのほかの方法も、できるようにならなくては。FLASHを透過にしてしまう？手段があるそうです。ほへぇ。初めて知りました。このアタリ関連のリンクをメモ。ライトボックスを使っている場合には、参考になる記事もありましたよ。背景が透明な Flash ムービーを作成する方法 Lightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠す教えて！goo プルダウンメニューが隠れてしまいます教えて！goo swfファイルとHTMLを重ねる最近は、「教えて！goo」の投稿記事で疑問が解決できることが多いような気がします。なぜか私の作ったプルダウンメニューは、FirefoxがOKなんだよねぇ。Operaもできちゃったりしている。条件がそろえばいいのかしら･･･WindowsIEがOKならば、あとは静止画で逃げるって手もありなんだけれど。今回は、ちーとAｌｌFlashで作ってしまうわけにもいかず、参った！条件わけに手間がかかるし、代用するしかない場合もあるようだし、次回からは避ける方向で、っと肝に銘じておこう。 ･････つづく東京２３区中心・駅近ホテルズ*Web標準2007年版目次*基準のソースコード文字コードは「Shift-JIS」か「EUC-JP」かJavascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーするCSSでidを指定する時は要素名とセットで記述HTMLのDOCTYPE宣言は軽視できない行間指定「line-height」の使い方

  2007/03/20

  コメント(0)

• 

  スタイルシートでテーブルの折り返し禁止設定ができる

  Web標準の教科書WEBレイアウト・セオリー・ブックスタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2） やっぱできるんね。テーブルで折り返し禁止の設定をするのに「<td nowrap>」ってするでしょ。あれ、スタイルシートじゃできないのかな～って疑問だったんだけどちゃんとありました。それ様のプロパティが。ちなみに「border-collapse」は使わないほうがいいのです。MacIEはアウトですし、他でも少々･･･<table cellspacing="0">として回避することをオススメします。⇒http://www.htmq.com/style/border-collapse.shtml■セルの折り返しを禁止する------------ CSS------------th , td { white-space: nowrap; }------------ (XHTML)------------<table cellspacing="0"><tr><th>サイト名</th><td>Web標準にアプローチ</td></tr></table>------------white-space⇒http://www.htmq.com/style/white-space.shtml新総理が誕生しましたね。しかし、小泉さん（前首相）は凄い！ドラマにもなっちゃったし。ウチは、母上様が見ておりました。私は、横目で通り過ぎたくらいで（笑）似てるな～ってね。岩城滉一さんの表情が。物まねみたいに（笑） ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/20

  コメント(2)

• 

  リストタグで横並びメニューと縦並びメニューを作成する

  Web標準の教科書WEBレイアウト・セオリー・ブックスタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2） CSSでメニューを作るときのメモです。リストタグを使って横並びメニューを作る例をよく見るけれど縦メニューを作るときと何が違うのかな？と思っていたの。display:block;背景色を変化させたりするときにリンクテキストの範囲のみ適用範囲にするんじゃなくてそのブロックを適用範囲にしようと思うとブロック化するためにこれを使うわけだけど･･･■横並びメニューul {    margin: 0;    padding: 0;    list-style: none;}li {    float: left;}li a {    display: block;    width: 100px;    height: 30px;    text-align: center;    color: black;}さーてと。上のソースに一行追加すると、横並びメニューが縦並びメニューになるんですよ。うーん。うーん。考えた結果、ulの括りに width:100px; と入れてみる。リストの横幅を li a で指定している横幅を参照して適当な値を入れてあげればOKだよね。この場合はボーダーも余白もないから100pxでOKってわけ☆ ･････つづく Web標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/14

  コメント(2)

• 

  リンクの指定をするスタイルシートの設定の記述順序ってのがある

  Web標準の教科書スタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2） 最初から洗いなおしてみると、基本が抜けていることに気づくのが人ってもので（汗）昨日の media に続いて、リンクについても再認識です。気にしてますか？リンクの指定をするスタイルシートの設定の記述順序。この順番でないと、うまく表現できないことがあるそうですよ。私、簡略化するために、よくこう書きます。a:link , a:visited , a:active { text-decoration : none; }a:hover { text-decoration : underline; }これだと順番が駄目なのね。むふぅ～■リンクの指定をするスタイルシートの設定の記述順序　（１）a:link　（２）a:visited　（３）a:hover　（４）a:active今日は先ほどからお天気が良くなってきました。少し寒いですね～キティちゃんブランケットを肩に掛けています（笑）昨晩、母上にお仕事のことでちょっと話したことを父上に話したらしく父上･･･少し心配なさった模様。　　　「がんばれよっ！」ってわざわざ言いに来たの。わたしが鈍感だったら「なんのこっちゃ？」って思うだろうな～（笑）人生って歩んでいくのが難いっす ･････つづく Web標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/14

  コメント(2)

• 

  CSSの指定時の「media="screen"」が背景色を隠した原因

  詳解HTML ＆ XHTML ＆ CSS辞典改訂版Designing with Web standardsWeb標準の教科書スタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2） 知～らなんだ。知～らなんだ！そりゃそーだわな！と思いながらも実感してなくって知～らなんだ！CSSで body { background:gray; } とかしてそれが記述してある外部CSSファイルにリンクするのに「<link href="cmn.css" rel="sty ・・・・・略････」って書くよね。属性に media="all" ってのは良く書いていて、それも何気になので気づかなかった。知人に「このサイトはどうして背景が印刷されないの？」って聞かれて「スタイルシートの設定がどうのこうのなってると思う」と答えたのは数ヶ月前だったかな？嘘っぱちでもないのだけど、犯人さんは media="screen" なんだよね。これだけだと、印刷時には背景がない状態になっちゃうんだよね。どのスタイルも適用されないってことか。いくらCSSに body { background:gray; } って書いてあってもグレーの背景は印刷されないわけです。ふむふむ。全部同じスタイルでよければ media="all" でいいわけだけどそうじゃなかったら、表示用、印刷用のスタイルシートを準備してそれぞれのファイルへのリンクと、指定をしてあげればヨシってことです♪実際に試してみたのは今日が初めてでした（笑）  ■全部共通の時の指定<link href="all.css" rel="stylesheet" type="text/css" media="all" />■表示用の指定<link href="csrn.css" rel="stylesheet" type="text/css" media="screen" />■印刷用の指定<link href="prnt.css" rel="stylesheet" type="text/css" media="print" />台風の影響で雨降ってます。遠くにいても、台風は侮れないんですってぇ～湿った空気が流れ込んで秋雨前線が活発になって局所的に大雨になったりして。ジメジメは梅雨シーズンだけでたくさんよ～そんな時はこの可愛いお顔を。　　めっちゃ、いいわ～グッズも売ってるんだよ。こちらにて　⇒　はんなり豆腐のウェブサイトお目当てはこの子達　⇒　はんなり豆腐のストラップ ･････つづく Web標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/13

  コメント(4)

• 

  ずんずん横にレイアウトするスタイルシートの設定

  Web標準の教科書スタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2）HTML ＆ CSSHTML／XHTML（エクスエイチティーエムエル）＋CSS例解スタイル辞典ホームページ作成マスターブック（HTML ＆スタイルシート基本） floatで左右に指定しなくても、ずんずん横にレイアウトが出来るんです！知らなかった･･･当たり前なのかな～？試したコードは以下の通りです。「a」「b」ってクラスを二つ指定してあるけど、「a」だけでもいい。色が同じだとわかり難いから二つ指定しただけですので＾＾ついでにメモ。.menuでwidthを指定しないと、<div class="menu">～</div>の下に余白が出来るので注意ですよ！（IE6だけかな？）---------- CSS----------.menu {    width: 500px;    margin: 0;    padding: 0;}.a {    float: left;    width: 100px;    margin: 0;    padding: 0;    background-color: pink;    text-align: center;}.b {    float: left;    width: 100px;    margin: 0;    padding: 0;    background-color: orange;    text-align: center;}---------- (X)HTML----------<body><div class="menu">    <div class="a">メニュー１</div>    <div class="b">メニュー２</div>    <div class="a">メニュー３</div>    <div class="b">メニュー４</div>    <div class="a">メニュー５</div></div></body>---------- 表示----------「スタイルシートスキルアップ・デザインブック（2）」を買いました。残念ながら（１）は書店にはなかったんです。やってみた感想は、また後日、徐々にレポートしていきますね！ ･････つづく Web標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/12

  コメント(2)

• 

  スタイルシートスキルアップ書籍紹介

  外に出たついでに本屋さんへ行ってきました。スタイルシートでレイアウトをする大枠がわかってきたので次のステップに進むために参考にする書籍の下見のために出向きました。スタイルシートスキルアップ・デザインブック（1）レッスン形式でマスターするCSSの実践テクニック＆アドバイス著者：エリック・A．メイヤ ／吉川典秀出版社：毎日コミュニケーションズ監修者：株式会社ミツエーリンクスサイズ：単行本／367p発行年月：2005年12月本体価格：3,200円 (税込 3,360 円) 送料別スタイルシートスキルアップ・デザインブック（2）CSSマスターになるための「プロ技」集中講座著者：エリック・A．メイヤ ／吉川典秀出版社：毎日コミュニケーションズ監修者：株式会社ミツエーリンクスサイズ：単行本／279p発行年月：2006年01月本体価格：3,000円 (税込 3,150 円) 送料別この２冊がいいのではないかと、候補にあげてきました。「スタイルシートスタンダード・デザインガイド」もいい感じなんだけど具体例でステップアップできて、私と相性がよさそうな書籍でした（笑）株式会社ミツエーリンクスが監修だしWeb標準には力を入れていると思われるのだ！ミツエーリンクスのウェブサイトでは、ここでよくブログ記事などを読んでいてためになっているのよん。ポイントで買っちゃおうかな～バッグも欲しいんだけどな～ ･････つづく

  2006/09/04

  コメント(2)

• 

  タイトル画像部分をCSSで設定するメリット

  Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。HTMLポケットリファレンス改訂第5版ちょっとだけタグを覚えたらもっと沢山知りたくなるね。ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。 タイトルだけということはないのですが、メリットです。先日、Web標準を意識してXHTML+CSSでサイトを作成していた時に気づいたことです。タイトルに画像を使った以外は、文字ベースのページです。その画像はimg要素を使わずにスタイルシートで指定しました。作ったページをモバイル（携帯電話）で見てみたところ当然ながら画像のない文字ばかりの画面が映し出されました。実際の試作ページとは違うのですが、数日前の記事「練習で作ったCSSマルチカラムレイアウトとCSS無効時の表示」で状況を見ていただくとある程度の様子がわかると思います。で、この時に、( ﾟoﾟ)ﾊｯ　っと思ったんです。気づいたんですね。携帯電話でウェブページを見るには１ページ辺りの容量に制限があるんですよ。「見られません！」って言われることも多々あることです。画像はとっても重たいですからね。テキスト（文字）とは比べ物にならない！なんと言えばいいか･･･もしも今回の試作ページで画像をimg要素で指定していたら容量オーバーで見られなかったと思います。CSSに対応していない私の携帯電話はCSSを無効にして、ウェブページを表示したんですね。ここで、( ﾟoﾟ)ﾊｯ　っと思いませんか？Web標準を意識した作り方をしているといろんなプラットフォームに対応したサイト作りが出来てしまうんですよ！こりゃ凄いわ！ちなみに楽天広場のタイトル画像もスタイルシートで指定していますね。スタイルシートで背景画像を指定するにはこんな感じで記述しますよ。【タイトル画像をスタイルシートで記述する】---------- XHTML----------<div id="title"><span id="titlealt">サイト名</span></div>---------- CSS----------div#title {background-image: url(".titile.gif");}span#titlealt {display: none;}display: none を指定すると「サイト名」が表示されなくなるのでimg要素のalt属性のような役割を果たすよ。必要のないときは、指定すべきじゃないんですけどね～＾＾ ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *Yahoo!もWeb標準に取り組みだした！html 4.01 Strict +CSS 2.1でページ作成中。スタッフブログに乗っていたよ

  2006/06/28

  コメント(6)

• 

  CSS：幅指定と余白の関係

  幅を指定したときと指定しないときの違いのメモ。IEは指定すると幅100%に指定すると横スクロールが出る。MacもWinも同様。▲Interner Explorer（GIFアニメ。スクロールの様子）幅100%ごとpaddingが設けられる。▲Firefox（IE以外はＯＫの様子）幅100%の内側で、paddingが設けられる。ありゃー！タブがいっぱい表示されたままスクリーンショットを撮ってしまった！ご愛嬌ということでご勘弁を＾＾；これ、ＮＧの例---------- XHTML----------　　：<body><div id="container">    <div id="content">content</div>    <div id="sidebar">sidebar</div></div></body>　　：---------- CSS----------div#container {    width: 100%;    padding-left: 150px;}div#content {    float: left;    width: 70%;    height: 50px;    background-color: #FFCC99;}div#sidebar {    float: right;    width: 30%;    height: 50px;    background-color: #FF9900;}これ、ＯＫの例 ----------  XHTML ---------- 　　： <body><div id="container">     <div id="content">content</div>     <div id="sidebar">sidebar</div> </div> </body> 　　： ----------  CSS ---------- div#container {     padding-left: 150px; } div#content {     float: left;     width: 70%;     height: 50px;     background-color: #FFCC99; } div#sidebar {     float: right;     width: 30%;     height: 50px;     background-color: #FF9900; }Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。HTMLポケットリファレンス改訂第5版ちょっとだけタグを覚えたらもっと沢山知りたくなるね。ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。 ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *医龍見逃しました･･･お慰みにおひとつ⇒人気blogランキング

  2006/06/09

  コメント(2)

• 

  CSSプロパティの継承と要素の入れ子

  「CSSの基本とセレクタの種類」で触れた子セレクタの適用範囲の謎。解ーけーたー【CSSを適用するときの注意】のことがわかってなかった。それが理由のひとつ。あと、透けて見える･･･とか、そういうものがあるんだな～【CSSを適用するときの注意】HTMLにおける注意点インライン要素の中にブロック要素は含められない。CSSを設定するときの注意点親レベルで設定されたプロパティは子孫レベルに継承される。（一部を除く）ワタシを悩ませ続けた子セレクタの適用範囲の謎。ここに明らかになった！あの日の日記で「文字の色が赤になっていた」のは継承されていたのね。なるほどぉ～【子セレクタの適用範囲】「子要素」は「孫要素」の入れ子になっている。colorプロパティは値を「継承する」プロパティなので「子要素」「孫要素」ともに、文字色は「#FF0000」。text-decorationは値を「継承しない」プロパティなので「孫要素」にはunderlineが無効になるように思う。しかし、入れ子になっているので上位のspan要素で適用されたunderlineの上に乗っかっていると考えるとunderlineが透けて見えることになるのでunderlineが有効になっているように表示される。下のソースで出来上がるイメージは上図の感じね。子要素で終点までのアンダーラインが引かれるんだね＾＾；--------- CSS---------div.report>span{    color:#FF0000;    text-decoration: underline;}--------- HTML---------<div class="report"><span>子要素<span>孫要素</span></span></div>ダ・ヴィンチ・コード（上）読み終えました。えろぉ～時間がかかりました（笑）面白いね。色んなことが知れる楽しさってのもある。次を読み進めるのが楽しみでござりまする。 ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *子セレクタ、継承、わかった～☆スッキリ☆

  2006/06/02

  コメント(0)

• 

  CSSの基本とセレクタの種類

  ほにゃららセレクタってのが、沢山出てきてワケがわらかなくなってきたサイバーガーデンの「Web::Blogoscope > Web標準」をお勉強中。Web標準の教科書の著者さんのブログで、番外編って感じ。ここで、子孫セレクタについて考える必要が出てきたのね。なんだっけ？って感じで･･･ちょっと、ここいらで整理してみたいと思いまする。【CSSの基本の書式とセレクタの種類】　セレクタ｛プロパティ:値｝　タイプセレクタ　body{background-color: white;}　要素名に対してスタイルを設定する。　例はbody要素に対して背景「white」を指定している。クラスセレクタ　.important{color: red;}　書式は「要素名.クラス名」。要素名はなくてもいい。　要素名とクラス名をドット「.」で区切る。　クラス属性でクラス名を指定して使う。　（例：<div class="important">）　複数の要素にスタイルを適用できる。何回使ってもOK！IDセレクタ　div#contents　書式は「要素名#ID名」。　id属性でID名を指定して使う。（<div id="contents">）　ひとつのページ内で一度しか使えない。　ページレイアウトをするときに使うことが多い。子孫セレクタ　div.report span{color:red;}　親要素に含まれる全ての子孫要素を対象にスタイルを適用する。　クラス名「report」とp要素の間はスペースひとつを記述。　スペース区切りとなる。　「div.report span{color:red;}」を適用した例を以下に記す。　【例】-------------------------------　<div class="report">　　<span>子要素    　<span>孫要素</span>　　</span>　</div>　------------------------------------　例では子要素も孫要素も赤色になる。子セレクタ　div.report>span{color:red;}　孫要素を含まない、親要素の直接の子要素だけに　スタイルが適用される。「>」区切りで指定する。　CSS２でサポートした。　現在、IEは全てのバージョンでサポートしていない。　【例】-------------------------------　<div class="report">　　<span>子要素    　<span>孫要素</span>　　</span>　</div>　------------------------------------　･･･というけれど、FirefoxでもOperaでも孫まで影響が･･･　span要素（インライン要素）を　p要素（ブロックレベル要素）にしてみても　文字は赤色で･･･CSS2じゃないのか･･･(-"-;)　※他にも「ユニバーサルセレクタ」「属性セレクタ」がある。最近早起きが定番です。日中は暑いので、朝のうちに色々としようと思って。暑くてダレそうなお昼間は、ぼへぇ～とすることも可。寒くなるまで、この生活が続くことでしょう。 ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *バスケットボールの絵文字は、項目のポイントに使えますね＾＾

  2006/06/01

  コメント(2)

• 

  コンテンツ全体のセンタリング･･･雑感

  「コンテンツのセンタリング」について、色々してみているんだけど･･･うーん。CSSで指定するんだけどさ。margin-rightプロパティとmargin-leftプロパティ双方ともにautoと指定することでコンテンツ丸ごとセンタリングすることができる。（一部ブラウザ除く／IEだけだったかな。）コンテンツ自体をセンタリングするときってさページいっぱいにしちゃうとカッコ悪いとかそういうことで80%で作ったりしてそいつが左端にいると、これまたバランスが悪い･･･とか思ってセンタリングするわけでしょう。大半は。んだったらば、ページ全体の左右マージン（余白）で制御すればいいんじゃないの？（bodyで設定するってことです。）そんなことをふと思ったのさ。うん。これ、HTMLでしようと思うとbody要素に「marginwidth="50"」とか書くんだけどIE駄目だわ･･･言うこときかんおっと左マージン「leftmargin="50"」、右マージン「rightmargin="50"」。これで言うこときいた！（Dreamweaverのページプロパティではrightmarginが設定できないので手書き）（コードビューで書くと、候補にちゃんとあがってくる！）テーブルで組むとして、それの幅80%とか適当にするよりページ全体の左右マージンをとったほうが･･･ほら・・・うん　一番外側の大枠、要らないよね？囲っていませんか？ページ全体テーブルで[影]ω￣)ｼﾞｰｰｰCSSでする方法、HTMLだけでする方法（薦めませんが！）パツパツ、パンパンキツキツ、キューキューを脱する手段になるかなと。こんな発想をしたのはMacIEでmargin-rightとmargin-leftをautoを指定した状態のページを見たらちょーっと崩れるときがあるなぁ~と。ウィンドウをガチャガチャ動かしたら、ちゃんと表示するんだけど苦しそう･･･100%以外だと苦しそうな表示状態なんだよね。うんとこらしょっって感じ。ってことで、コンテンツのセンタリングVer.2【コンテンツ全体のセンタリング　こんな方法もある！】CSS版（オススメ）body {    margin: 20px 50px;}※上下マージン：20px／左右マージン：50px　（%指定も可）HTML版（テーブルタグで全体を囲うよりはオススメだけど･･･）<body leftmargin="50" marginwidth="50" rightmargin="50"><div>ここに内容を書く</div></body>※W3Cの文書を見ると、margin関連の掲載が見つから････ってことは･･･　 定義外なんでしょうか･･･　 こんな方法もある！程度にお読みください<(_ _)>ああ！暑い！本日も３０度に迫る勢い！ ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *(;´д｀)ゞ ｱﾁｨｰ!!

  2006/05/31

  コメント(2)

• 

  Let's Web標準！画像（背景）をCSSで指定する

  CSSで画像指定をする時の注意なのです。 これもまた、ソフトを使っていると通り過ぎてしまうことのひとつかな。背景画像を指定するときを想定してみるね。BODYタグなど、HTML側で指定をするとき（推奨しません）とCSSで指定をするときは、ちょっと違うんだよ。注意なのです。こういう階層（ディレクトリ）構造でサイトを作っているとするね。------------------------------　┣ index.html　┣ css　　　　┣ cmn.css　┣ image　　　　┣ background.gif【HTMLとCSSの画像指定の設定の違い】BODYタグに書くときは　<body background="image/background.gif">CSSに書くときは　　body { background-image: url("../image/background.gif"); }CSSでは、CSSの階層（ディレクトリ）から見てどの位置にあるかで指定するの。HTMLから見て、指定をするのではないところに注意してね。HTMLはHTML。CSSはCSSなのです背景画像を指定するときはCSSで指定しましょう！これがWeb標準でのお約束です！BODYタグに書く属性って、最早ないような･･･ おまけ１ Dreamweaver MXでCSSを書くとurl("../image/background.gif")の部分のダブルクォート「"」が挿入されないのよね～挿入しておくのが正しいんだと思っているんだけど、どうなんだろ？私の指針はWeb標準の教科書です＾＾　挿入されていました＾＾（最新バージョンは更新されているかもしれません。） おまけ２ 広場では、background-imageが使えないらしい。style属性に入れてやってもエラーが返ってくるのよねなんか、いかんのでしょうか･･･以前は良かったような･･･--追記--上の疑問が解けました。url()の形にしたら、OKでした。つまりは、ダブルクォートもシングルクォートも何も無しで記述するスタイル。<div style="background-image: url(画像のアドレス);">ここに文章を書く</div>こーゆーことのようです。私なりにも調べてみました。■CSS1日本語版http://www.doraneko.org/webauth/css1/19961217/Overview.html#urlhttp://www.nextindex.net/web/CSS/values.html#uri■CSS2日本語版http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#urihttp://www.y-adagio.com/public/standards/tr_css2/syndata.html#uri■CSS1（W3C）http://www.w3.org/TR/REC-CSS1#url■CSS2（W3C）http://www.w3.org/TR/REC-CSS2/syndata.html#uriコメントくださったfinkyさん、ありがとうございました<(_ _)> ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *こーゆー仕事がしたくなってきてる。最近特に。Web標準を　もちょっと重視して行こうよね･･･(￣o￣;)ﾎﾞｿｯ

  2006/05/23

  コメント(2)

• 

  Let's Web標準！余白「margin」と「padding」の違い

  CSSレイアウトを試みているとしばしば登場するのが余白を表すこの子達。　　　　「margin」「padding」　余白･･･余白･･･余白･･･どっちかが枠（語弊があるかも）の外側で、どっちかが枠の内側の余白を表す。どっちがどっちか分からなくなるんだよね。困ったことです辞書を引いてみることにしました。英語のお名前だもん。きっと所以（ゆえん）があるでしょう。ふむふむ。「margin = へり、縁、欄外」　　Wordで言うところの文書の外側、欄外の余白だね～「padding = 詰め物」　　梱包材って思えばいいかな？ダンボールの内側に入れるし＾＾　　肩パッドって言葉を思い出した。服の内側＾＾CSSでの記述を少しメモ＾＾【この薄い黄色部分のスタイルシート設定】 CSS通常版（何と言うべきか＾＾；）div.memo {    margin: 10px 0px 10px 0px;    padding: 10px 10px 10px 10px;    background-color: #FFFFCC;    border: 1px solid #990000;}marginとpaddingに４つの値が並んでいます。これ、左から順に「上の余白」「右の余白」「下の余白」「左の余白」になってるんです。決まり、規則ね。覚えられなかったんだけど、時計回りって気づいたら、割と楽チンに頭に入ったよ。 CSS楽天版（HTMLタグごと）<div style="background-color: #FFFFCC; text-align: left; margin: 10px 0px 10px 0px; padding: 10px; width: 480px; border: 1px solid #990000;">ここに文章を書く！</div>上下左右の余白がすべて同じ値ならば、赤字部分のpaddingのように値をひとつだけ書くだけでOKYahoo!の新グローバル英和辞典って素晴らしい！英単語を調べたら、読んだ！読んだ！読んだ！お兄さんとお姉さんだった！paddingとmarginは読み手が違う！ ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *どーこーへー行くのか～♪ワタシ～σ(￣◇￣;) 生き方って迷いませんか？

  2006/05/22

  コメント(4)

• 

  Let's Web標準！リンク色を変えたい時の設定（CSS）

  リンク文字の色って何色？標準では青色ですね～＾＾訪問済みリンクや、アクティブリンクなどは自分好みの色指定ができます。HTMLタグでもできるけど･･･ここはWeb標準で設定しましょ。下の例は、リンク文字に設定できる指定のすべて。（link／visited／hover／focus／active）順番も大切だったりするよ。知らなくて、適当にしたら、思い通りに色が変わらなくてね～今、わかりました＾＾よくわかりません････って思ってるならば下のCSSをコピペで使ってみてね。色々触ってみて、実践が一番！それぞれ（linkなど）の意味は黄色い四角にコメントが入れてあるので参考にしてくださいませ。予備知識＾＾「/*」と「*/」で挟むと、CSSにコメントが書き込めます。■リンク文字の設定/*リンク文字の色*/a:link {    color: blue;}/*訪問済みリンクの色*/a:visited{    color: purple;}/*マウスオーバーの時の色（背景色つき）*/a:hover {    color: red;    background-color: #FFFFCC;}/*Tabキーなどでフォーカスされている時の色（背景色つき）*/a:focus {    color: red;    background-color: #FFFFCC;}/*クリックしている時の色（背景色つき）*/a:active {    color: red;    background-color: #FFFFCC;}昨日は、久しぶりに外食しました。なかなかよい感じのお店。 　　　⇒Prego（三重県松阪市久米町1162<バンダイワールド内> ）(ﾟ◇ﾟ)~ガーン　クーポンがある！ご利用の方は、ぜひ、印刷してお持ちください。小柱と大葉の○○パスタちゃんが美味しかったですよ＾＾えぇ、詳しいメニュー名を忘れました ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *ゲホッ！絵文字が増えてる･･･＾＾；

  2006/05/21

  コメント(4)

• 

  Let's Web標準！の輪を広げるためのテーマ投稿

  少し前から思ってた、テーマ「Web標準」を投稿。広場にはないよね。こういう関係のテーマ。楽天広場にあってもいいじゃん？だから作っちゃった広場でも、Web標準に関する情報が集まればいいな～ここのブログは、Web標準に関することとかホームページを作ることについて書き溜めていくことになると思うのでひとつ、投稿するテーマが欲しいところだったんだよね。私の成長の記録になったりして＾＾；今日覚えたことをちょっとメモ。スタイルシートの指定についてです。あまり意識してなくて、再認識！今、はっきりわかった＾＾下の例で言うとクラス名noteの適用範囲は、それぞれ、h1、h2の中だけなんだね。同じ名前をつけても大丈夫なんだね。よーく見れば、当たり前･･･なんだよな。こんな風に要素名付きで使ってなかったから、お勉強になりました。【要素名.class名】---------- CSS----------h1.note {color:red;}h2.note {color:blue;}---------- HTML----------<h1 class="note">見出し１の文字色テスト</h1><h2 class="note">見出し２の文字色テスト</h2>----------  表示例----------見出し１の文字色テスト見出し２の文字色テスト カンヌ映画祭が始まったようですね。ダ・ヴィンチ・コード。今度はスタンディングオベーションが起きる盛り上がりぶり＾＾やっぱ、面白いのかな。文庫本は、いい感じよ＾＾ ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* Web標準TOP *Yahoo!で、ちと嬉しいことがあったよ＾＾

  2006/05/19

  コメント(2)

• 

  スタイルシートの指定方法「id」と「class」の違い

  朝も早うからわかったことがあったのでメモ。ずーっとわからなかったんだ～「id」と「class」の違い広場のページのソース（右クリックのメニューから選べば見られる）を見るとふむふむと見て取れると思いますよ～たとえば、私のページのトップのソースを見てみると･･･「id="hiroba_header"」って記述は一度しか出てこない。けれど、「class="top"」はいくつ出てくるんだよ！ってくらいたくさん記述があるね～なるなるぅ～【id指定とclaass指定の違い】 id指定　　　　一度だけ値を使うことができる。（登場するのは一度だけ）　　　　※CSSでの記述方法⇒#example｛color: #666666;｝ class指定　　　　何度でも値を使うことができる。（何回登場してもOK!）　　　　※CSSでの記述方法⇒.example｛color: #666666;｝スタイルシートポケットリファレンスDREAMWEAVERWEBdesignbookホームページ作成マスターブック（HTML ＆スタイルシート基本）スタイルシート辞典第3版そのまま使えるスタイルシートサンプル集 ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *わかるって気持ちいいv(≧∇≦)v♪

  2006/05/08

  コメント(0)

• 

  CSS：余白（padding）の設定の際の注意

  CSSを使うときに気をつけることのメモを　　　「CSSメモ」カテゴリにストックしていきま～す！　　　余白が変になった！なんでやねんっ！　　　タイトル部分とメイン部分に渡って　　　背景に画像を入れたいたら　　　どうしても、隙間ができてしまった！　　　IEでは大丈夫なのにな～･･･って思っている時のメモ。 １．余白（padding）の設定の際の注意DIVタグに上下左右で違った余白を設定しようとするとFirefoxでは意図通りにならない。周囲すべてに20pxの余白が設定されてしまうようだ。下の設定は、上：20px／右：0px／下：0px／左：20px padding: 20px 0px 0px 20px; 余白の設定をゼロにしたら、意図通りになった。[確認環境]WinIE6.0/WinFirefox1.5.0.2/WinOpera8.53MacIE5.1/Netccape7.02[設定メモ]----------------------------------------index.cssのスクリプト----------------------------------------#header {    position: relative;    width: 800px;    background-image:url(../topimg/title.gif);    height: 149px;    background-repeat:no-repeat;    margin: 0px;    padding: 0px;    text-align: left;}#contents {    position: relative;    float: left;    width: 800px;    background-image: url(../topimg/title_btm.gif);    background-repeat: repeat-y;    background-position: right top;    padding: 0px;}----------------------------------------index.htmlのスクリプト（主要部分のみ）----------------------------------------　　　：　　前略<DIV id="header">　</DIV><!--paddingの設定を0pxにしないと、表示上ではここに余白分の隙間ができしまう！--><DIV id="contents">　</DIV>　　後略　　　： ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *

  2006/04/28

  コメント(0)

全19件 (19件中 1-19件目)

1