タグの本を読んでいたのですが、スタイルシートが推奨されるそうです。
私も使いたいんですが質問があります。
(背景)
<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 ソースBのbody部分 </body>
まとめて良いのでしょうか?
ps まとめても、分けても WEB上にアップして見ても
普通に表示できました、でもどれかが無茶な(無理の、無駄のある)
文法だと思うんです。
解りづらい説明かと思いますが、アドバイス頂けませんか?
No.3ベストアンサー
- 回答日時:
再び、こんにちは。
>ただ、別売り(同出版社)のスタイルシート辞典を参照してくださいとのこと・・・
つまり、HTMLのタグ辞典にオマケでついているスタイルシートの解説だったんですね。
本当は、CSSの仕様邦訳とかを見るのが一番なんでしょうが、いきなりあれはつらいですから
普通は解説本ということになるでしょうね。
>つまり HEADで全体のレイアウト(位置)を指定しておいて
>BODYには具体的な内容を入れてやる
まぁ、そんなところですかね?
HEAD部は、まんま「ヘッダ」ですから、直接的にHTMLの中身ではないスタイルシートや
各種スプリクト(JavaScriptなど)はここに入れますね。
>>#left { /* IDがleftの要素に適用するスタイル */
>の#LEFTはIDの名前で 別にhidari とかでも良いんですよね?
かまいません。
ただし、お解りになっているかもしれませんが、ID属性でhidariという名前をつける
ことができるのは、同一ページではひとつだけです。
<P ID="hidari">段落1</P>
なんたらかんたら
<P ID="hidari">段落2</P>
のような使い方はできません。
IDは、Identificationですからね、IDをいったらただひとつの対象が特定できるように。
もし、単純に、「左寄せをするスタイル」をいろいろなタグにつけたかったら、CLASS
を使ってみてください。こっちならばOKです。
.hidari {text-align:left;}
<P CLASS="hidari">段落1</P>
といった感じで。
>背景ではなく 普通に画像を張りつけたい(連続表示しないで1枚だけ)場合それ用の
>スタイルシートの分は在るのですか?
><IMG SRC=・・・>
ないですよ。
スタイルシートの意味を考えればないのが解ると思います。
background・・・は、何かの背景スタイルを指定するものですが、
<IMG>、普通に画像を貼り付ける、ということは、「HTML文書に画像を配置する、コンテンツ
として画像というオブジェクトを持つ」ということですよね?
スタイルシートは、HTMLでマークアップされるなどして「既にあるもの」に対して、
スタイル(位置、背景、色、大きさなど)を指定するものだと思ってください。
HTMLタグの属性の部分を、スタイルシートを使って置き換えることはできますが、
HTMLのタグそのものを置き換えることはできません。
おおっ! たびたびすいません
本の後ろの方に少しだけCLASS の事が書いてありました、そうですね
CLASSをつかうという方法もあるんですね、私の使いたい方法からいえば
CLASSの方がよさそうです。
画像については、普通にタグで張りつけることにします
ほんとうにありがとうございました。
No.2
- 回答日時:
こんにちは。
>もう一つ、先の背景と文字のスタイルシートを同時に使う場合
<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の指定が二つある(背景は指定しておいて別に張りつけたいとして)とどちらかが打ち消されないのか気になるんですが・・・
もしよろしければ どなたかアドバイスいてだけ無いでしょうか?
No.1
- 回答日時:
こんにちは。
う~ん・・・
正直、ご覧になっている参考書に一体どういう解説がされている
のか理解に苦しむモノがありますが(^^;
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で全体のレイアウト(位置)を指定しておいて
BODYには具体的な内容を入れてやる(何種類かパターンがある場合、LEFT、CENTER など、はIDなどをふる必要あり)
で良いんですよね?
つまり極端には
>#left { /* IDがleftの要素に適用するスタイル */
の#LEFTはIDの名前で 別にhidari とかでも良いんですよね?
愚問かもしれませんが・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSを教えて下さい webデザイナ...
-
htmlの文字が縦書きになる
-
CSSでinputのテキストカラーを...
-
CSSを教えて下さい webデザイナ...
-
2カラム、左メニュー、特定パー...
-
iPhoneで HTMLファイルを閲覧
-
静止画画像をクリックすると音...
-
テーブルの行を折りたたみたい...
-
css初心者 フレックスボックス...
-
メモ帳の段落の揃え方
-
、URL化させるにはどうしたらい...
-
excelをhtmlに変換した途端、一...
-
WEBサイトの作成で、imgタグに...
-
htmlソース編集で、各タグを何...
-
CSSについて教えてください。 ...
-
CSS、Bootstrapについて contai...
-
HPレイアウトが同じページのヘ...
-
htmlソース文の 各行 改行位置...
-
1つの「ホームページビルダー2...
-
htmlで<form>~</form>を並べて...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたい...
-
iPhoneで HTMLファイルを閲覧
-
スマホで特定のサイトを表示さ...
-
HTML CSSの勉強のポートフォリ...
-
css初心者 フレックスボックス...
-
WEBページを強制的に横画面で見...
-
メモ帳の段落の揃え方
-
スライダーの枠に動画を収める...
-
角丸画像の背景色を透明にした...
-
、URL化させるにはどうしたらい...
-
excelをhtmlに変換した途端、一...
-
テーブルタグのセルの幅の一部...
-
ウェブサイトにアップされてい...
-
CSSファイルの日本語コメントが...
-
HTMLで特定の文字だけ色を変え...
-
先日ウェブデザイン技能検定三...
-
スマホでHTMLファイルを開いて...
-
静止画画像をクリックすると音...
-
画像が分割されて切り替わる、...
おすすめ情報