- ベストアンサー
スタイルシートのタグの入る部分
タグの本を読んでいたのですが、スタイルシートが推奨されるそうです。 私も使いたいんですが質問があります。 （背景） <STYLE type="text/css"> <!-- BODY { background-image : url(""); background-attachment: fixed; background-position: 100% 100%; } --> </STYLE> 一応HTMLの＜body>タグの中に書いているのですが TEXTの場合 <STYLE TYPE="text/css"> #left {text-align:left;} </style> <body> <p ID="left">字</P> </BODY> スタイルシートの<STYLE TYPE～＞から</BODY> をそのままHTMLの<BODY>タグの中に貼り付けて良いんでしょうか？ 個人的には＜body＞タグの中にまた<body>タグ!? もしかすると<STYLE>タグは<HEAD>タグの間に ソースの<BODY>タグの中身だけHTMLの<BODY>に貼り付けるのでしょうか？ もう一つ、先の背景と文字のスタイルシートを同時に使う場合 <STYLE>の中に背景と文字を一緒に書いていいのでしょうか？ 自分としては<STYLE>タグが分かれているとバグらないか不安なんです。 まとめると (1) <HTML> <HEAD></HEAD> <body> <STYLE>ソース（中に<BODY>タグがまだ入っている）</STYLE> </BODY> </html> で良いのか？ (2)HTML> <HEAD> <style>～</style>の部分 </HEAD> <body> <STYLE>ソース<BODY>タグで囲まれた部分 </BODY> </html> (3)二つのソースがあった場合 <style> ソースA と ソースB </STYLE> <BODY> ソースA ソースＢのbody部分 </body> まとめて良いのでしょうか？ ｐｓ まとめても、分けても WEB上にアップして見ても 普通に表示できました、でもどれかが無茶な（無理の、無駄のある） 文法だと思うんです。 解りづらい説明かと思いますが、アドバイス頂けませんか？
- twelve
- お礼率51% (180/349)
- CSS
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
再び、こんにちは。 >ただ、別売り（同出版社）のスタイルシート辞典を参照してくださいとのこと・・・ つまり、HTMLのタグ辞典にオマケでついているスタイルシートの解説だったんですね。 本当は、CSSの仕様邦訳とかを見るのが一番なんでしょうが、いきなりあれはつらいですから 普通は解説本ということになるでしょうね。 >つまり HEADで全体のレイアウト（位置）を指定しておいて >ＢＯＤＹには具体的な内容を入れてやる まぁ、そんなところですかね？ HEAD部は、まんま「ヘッダ」ですから、直接的にHTMLの中身ではないスタイルシートや 各種スプリクト(JavaScriptなど）はここに入れますね。 >＞#left { /* IDがleftの要素に適用するスタイル */ >の#LEFTはIDの名前で 別にhidari とかでも良いんですよね？ かまいません。 ただし、お解りになっているかもしれませんが、ID属性でhidariという名前をつける ことができるのは、同一ページではひとつだけです。 <P ID="hidari">段落１</P> なんたらかんたら <P ID="hidari">段落２</P> のような使い方はできません。 IDは、Identificationですからね、IDをいったらただひとつの対象が特定できるように。 もし、単純に、「左寄せをするスタイル」をいろいろなタグにつけたかったら、CLASS を使ってみてください。こっちならばOKです。 .hidari {text-align:left;} <P CLASS="hidari">段落１</P> といった感じで。 >背景ではなく 普通に画像を張りつけたい（連続表示しないで1枚だけ）場合それ用の >スタイルシートの分は在るのですか？ ><IMG SRC＝・・・> ないですよ。 スタイルシートの意味を考えればないのが解ると思います。 background・・・は、何かの背景スタイルを指定するものですが、 <IMG>、普通に画像を貼り付ける、ということは、「HTML文書に画像を配置する、コンテンツ として画像というオブジェクトを持つ」ということですよね？ スタイルシートは、HTMLでマークアップされるなどして「既にあるもの」に対して、 スタイル（位置、背景、色、大きさなど）を指定するものだと思ってください。 HTMLタグの属性の部分を、スタイルシートを使って置き換えることはできますが、 HTMLのタグそのものを置き換えることはできません。
その他の回答 (2)
- steelgreen
- ベストアンサー率50% (50/100)
こんにちは。 >もう一つ、先の背景と文字のスタイルシートを同時に使う場合 <STYLE>の中に背景と文字を一緒に書いていいのでしょうか？ 簡単に言うと一緒に書くべきです。スタイルシートは背景と文字 というように分かれているのではなくタグに対してそれぞれスタイルを 分けて書くような感じなります。 つまりある<p>に背景と文字のスタイルを指定する場合は <head> <style type="text/css"> <!-- p{ background:#ffffff url(back.jpg)/*背景の色 及び 画像*/ color:#000000; /*文字の色*/ font-size:15px; /*文字の大きさ*/ font-family:serif; /*フォントの種類*/ } --> </style> <head> <body> <p>あいうえお</p> </body> のように背景と文字の指定を同時に行うのが普通です。 スタイルシートについて解説いているサイトはたくさんありますので 色々調べてみるのがいいとおもいます。 スタイルシートは自分で作ってみながら実践的に勉強すると 早く習得できますよ。
お礼
お答え ありがとうございます。 今の状態はタグで背景の色、フォントのサイズ、色を指定 スタイルシートで文字の位置と背景の位置の指定をしています 本当はどちらかに統一した方がいいのでしょうけど・・ 私はどちらかというと色々弄って覚える方が好きです（笑） 今作ってるHPがある程度落ち着いたら 一度スタイルシートONLY（無茶かな？）に挑戦したいと思います。 で気になったんですが（本にも書いていなくて＜タグの本ですが・・・・） スタイルシートの背景に複数枚の背景画像をつかうことはできるのでしょうか？ 背景ではなく 普通に画像を張りつけたい（連続表示しないで1枚だけ）場合それ用のスタイルシートの分は在るのですか？ background-image : url(""); ＜ここで画像のURL background-attachment: fixed; ＜ここは・・・・ background-position: 100% 100% ＜画像の位置 て、のをみるとbacgroundと在りますがタグの<IMG SRC＝・・・＞のような はたらきをさせたい場合も上のようにつかうんでしょうか？ もしかするとbackgroundの指定が二つある（背景は指定しておいて別に張りつけたいとして）とどちらかが打ち消されないのか気になるんですが・・・ もしよろしければ どなたかアドバイスいてだけ無いでしょうか？
- sight
- ベストアンサー率53% (199/370)
こんにちは。 う～ん・・・ 正直、ご覧になっている参考書に一体どういう解説がされている のか理解に苦しむモノがありますが（＾＾； CSSをHTMLに適用する方法はいくつかあります。 そのなかで、 #left {text-align:left;} のように同一HTML文書内で、特定のタグ、クラス、IDに一括して 適用したい場合は、 <STYLE>～</STYLE>で囲んだスタイルシートの定義をHEAD要素の中に 書きます。つまり、 <HTML> <HEAD> <TITLE>ページのタイトル</TITLE> <STYLETYPE="text/css"> <!-- BODY { /* BODY要素のスタイル */ background-image : url(""); background-attachment: fixed; background-position: 100% 100%; } #left { /* IDがleftの要素に適用するスタイル */ text-align:left; } --> </STYLE> </HEAD> <BODY> ～ここからボディをかく～ 早い話、BODYの中身は普通に装飾なしのHTMLで記述しても、 HEAD内にスタイルの定義を挿入すればいきなり見栄えが変わる・・・ そうなるものだと思っていいのではないでしょうか？BODY要素の中は （IDやCLASSを指定する必要がある時以外）触るら無くともスタイル（見栄え） のみ変更できます。 >もう一つ、先の背景と文字のスタイルシートを同時に使う場合 ><STYLE>の中に背景と文字を一緒に書いていいのでしょうか？ 分けて書く必要はないでしょう。 >自分としては<STYLE>タグが分かれているとバグらないか不安なんです。 ですね。 分けた場合の挙動は、ブラウザの実装により異なるかもしれません。 たとえば、一番最後に書かれた<STYLE>タグの中身しか反映しない動作を するブラウザがあるかもしれません。
お礼
ありがとうございます んー 本なんですが、タグの説明のあとに唯ソースが書いていて おまけでスタイルシートのソースが書いてあるぐらいですね。HEADに書けとかBODY に書けとかはまだ見つかっていません（汗 見逃したかな？ ただ、別売り（同出版社）のスタイルシート辞典を参照してくださいとのこと・・・ まぁ 買え！ ということでしょう（笑） <HEAD>タグの部分にはHTMLの情報を入れると聞いたことがあります ＞＞早い話、BODYの中身は普通に装飾なしのHTMLで記述しても、 HEAD内にスタイルの定義を挿入すればいきなり見栄えが変わる・ つまり HEADで全体のレイアウト（位置）を指定しておいて ＢＯＤＹには具体的な内容を入れてやる（何種類かパターンがある場合、LEFT、CENTER など、はIDなどをふる必要あり） で良いんですよね？ つまり極端には ＞#left { /* IDがleftの要素に適用するスタイル */ の#LEFTはIDの名前で 別にhidari とかでも良いんですよね？ 愚問かもしれませんが・・
関連するQ&A
- テーブルにスタイルシートを使う方法
こんにちは、テーブルタグのことで質問があります。 普通、背景画像でスタイルシートを使い右下などに固定するタグは <STYLE TYPE="text/css"> <!-- BODY { background-image : url("画像の名前"); background-repeat : no-repeat; background-attachment : fixed; background-position : left bottom; background-color:#FFFFFF; } --> </STYLE> となると思いますが、これは通常<head></head>の間にいれますよね。 これをテーブルの中で使うにはどうすればいいでしょう？ テーブルの背景画像を右下や左下などに固定したいということなんですがそういうことはできますか？ よろしくお願いします；
- 締切済み
- HTML
- 外部スタイルシートが読み込めない
こんにちは。 外部スタイルシートが読み込めず 困っています。 HTMLは、 <html> <head> <link rel="stylesheet" href="controlbox2.css" type="text/css"> </head> <body> <div class="modal">syun</div> </body> </html> controlbox2.cssは .modal{ background-color:#fff; padding:10px; border:1px solid #333; } だけです。 もちろん同じディレクトリで あり何度も確認しています。 ブラウザは、IE7です。 ヘッダー部分に スタイルシートを書くと 当然効果があります。 <head> <style type="text/css"> .modal{ background-color:#fff; padding:10px; border:1px solid #333; } </style> </head> 文字コードは、ともに SHIFT_JISで保存しています。 何が悪いのか、 全くわかりません。 何か分かる人がいましたら、 よろしくお願いします。
- ベストアンサー
- HTML
- スタイルシートを二つ並べたら一つが反映されない
ホームページを作りましたが、背景があまりに殺風景だったので、画面の両端に画像を縦に並べて貼り付けようとしました。 色々調べて <style type="text/css"> <!-- body{background:fixed url(画像名) #ffffff repeat-y top right} --> </style> というソースを<head>～</head>間に打ち込めば、右端に画像が並んで表示されると分かりました。 左にも同様に画像を並べようと <style type="text/css"> <!-- body{background:fixed url(画像名２) #ffffff repeat-y top left} --> </style> と、先ほどのソースの下に打ったところ、最初に書き込んだ右の画像が消え、左の画像のみがあらわれました。 右、左を書き換えてもやっぱり上のソースは消え、下のソースのみ反映されます。 どうすれば両端共に画像が出てくるようになるでしょうか？
- ベストアンサー
- HTML
- スタイルシートで上手く段組が出来ません。
スタイルシートで段組をして、いわゆる擬似フレームのHPを作りたいのですが、いまいち上手く出来ません。 下の画像の赤紫部分(HTML内ではtopsとしている部分)も分割して、全部で5つのフレームに分けたいのですが、そこを分割しようと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- body { margin:0px; padding:0px; } #top { width:450px; height:200px; float:left; background-color:#cc6600; } #tops { width:300px; height:200px; float:left; background-color:#cc5555; } #left { width:250px; height:600px; clear: both; background-color:#ff9933; } #right { width:500px; height:600px; float:left; background-color:#ffcc66; } #under { width:750px; height:10px; clear: both; background-color:#ff9955; } --> </style> </head> <body> <div id="top"></div> <div id="tops"></div> <div id="left"></div> <div id="right"></div> <div id="under"></div> </body> </html> というタグを打つと、topsの部分はちゃんと回り込んでくれるのですが、画像のように、回り込みを解除したleftの横のrightがちゃんとfloat:left;と打ち込んでいるのにも関わらず、leftの下にいってしまうのです。 どうしたらちゃんと5つに分割出来るのでしょうか？ よろしくお願いしますm(_ _)m
- ベストアンサー
- その他([技術者向] コンピューター)
- スタイルシートの記述について
例えば、文字を黒く、背景色を白くしたい場合ですが、どちらの記述が正しいですか？ (1)は兄が教えてくれたタグの書き方で、(2)はネットで見かけたタグ（CSSについて説明していたサイト）の書き方です。 カッコの違いが気になっています。 ネット検索をしたところ、(2)の形で書かれているほうが多かったです。 今は『<!-->』は、もう古かったりなどして使わない形なのでしょうか。 それとも(2)の『{}』のみの形はCSSとして使う場合なのでしょうか。 (1) <style type="text/css"> <!--P{color:#000000;}--> <!--BODY{background-color:#ffffff;} </style"> (2) <style type="text/css"> p{color: #000000;} body{background-color:#ffffff;} </style">
- ベストアンサー
- その他（インターネット・Webサービス）
- HP作成 スタイルシート
ビルダーを使ってHPを作成しています。そこで、ページの背景の上だけにgif画像を指定したくスタイルシートを追加してみたのですがうまくなりません。ビルダーのHTMLに追加しているのですが追加する場所を間違えているような気がします。ビルダーで背景色を#cc0000設定しています。 <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY { background-image: url("image/gurad1.gif"); background-repeat: repeat-x } --> </STYLE> <LINK rel="stylesheet" href="image/table.css" type="text/css" id="_HPB_TABLE_CSS_ID_"> </HEAD> <BODY bgcolor="#cc0000" link="#ffffff" alink="#009900">
- 締切済み
- その他(ソフトウェア)
- styleの直接指定が効きません。
外部ファイルにてbodyに背景画像を設定しているんですが、インラインフレームの中だけ背景色にしたく、 (1)<head>内に <Link rel="stylesheet" href="style.css" type="text/css"> <style type="text/css"> body { background-color: #fffff3; } </style> (2)<body style="background-color: #fffff3;">～</body> と両方試してみましたが、背景色が反映されず背景画像のままです。 外部ファイルの body { color : #57450f; background-image : url(image/back01.gif); } 背景画像の部分をはずすと背景色は反映されるんですが、何が問題なのでしょうか？ 回答よろしくお願いします。
- ベストアンサー
- HTML
- 2つ画像を背景にするスタイルシートってある？
1つの画像をスタイルシートで背景にするのは、知ってるんですが、2つの画像を同じページに背景にはできるのでしょうか？下記は1つの画像を背景にするスタイルシートです。これのどこかをいじれば可能なのでしょうか？ <STYLE TYPE="text/css"> <!-- BODY { background-image:素材のURL; background-position:0% 100%; background-repeat:no-repeat; background-attachment:fixed; } --> </STYLE>
- 締切済み
- CSS
- DreamWeaverMXでスタイルシートを使わない方法
DreamWeaverMXを使用しています。 文字に色をつけたり大きさを変えたりするときに、自動的にスタイルシートでタグが入力されてしまいます。 例えば赤文字にしたときに <font color="red">赤い文字</font> こうしたいのに <head> <style type="text/css"> <!-- .style1 {color: #FF0000} --> </style> </head> <body> <span class="style1">赤い文字</span> </body> こういうタグが入ってしまいます。 これをHTMLだけのタグがはいるようにしたいのですが、そういう設定方法はないでしょうか？ ご存知の方がいましたらよろしくお願いします。
- ベストアンサー
- グラフィックソフト
- 背景を固定する。
<HTML> <HEAD> <TITLE>・・・</TITLE> <STYLE TYPE="text/css"> <!-- BODY { background-image: url(画像のＵＲＬ); background-repeat: no-repeat; background-position: right bottom; } --> </STYLE> </HEAD> <BODY> ・ ・ ・ </BODY> </HTML> このタグをいれても、背景が表示されず真っ白です。 何か間違ってるところがありますか？
- ベストアンサー
- その他（インターネット・Webサービス）
お礼
おおっ！ たびたびすいません 本の後ろの方に少しだけCLASS の事が書いてありました、そうですね CLASSをつかうという方法もあるんですね、私の使いたい方法からいえば CLASSの方がよさそうです。 画像については、普通にタグで張りつけることにします ほんとうにありがとうございました。