- ベストアンサー
HP作成。スタイルの付け方を教えてください。
超初心者です。 cssのコツが理解できずに困っています。 HPの幅800pxで作っています。 <p style="background-color:#1976D2; color: ffffff;">××××</p></div> この文字列の:#1976D2の色のついた背景だけフルサイズで、文字は800pxにしたいのですが、クラス指定がよくわかりません。 どうぞよろしくお願いいたします。
- HPsakusei
- お礼率100% (2/2)
- その他（インターネット・Webサービス）
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
どの様なHPサイトかヒントを(タイトルで囲んだ部分でも) クラスが出てくるとは、外部のページにCSSを記述できるページが有るのかな それとも、同一ページで指定かな 下記は昔勉強した所です、参考になれば 文字の800pxはどうかな スタイルシートリファレンス http://www.htmq.com/style/index.shtml TAG index - HTML & CSS ホームページ作成情報 http://www.tagindex.com/
その他の回答 (1)
- 4017B
- ベストアンサー率73% (1306/1777)
<body style="margin:0; padding:0; width:100%; background-color:#1976D2;"> .... <p style="color:ffffff; font-size:800px;">××××</p> .... </boby> ～みたいな。
お礼
HP作成を始めて以来、基礎的な理解不足で本やサイトで調べることだけでも苦労しています。 「文字を800px」というのは、文字列の幅を800pxという意味ですが、この辺りの理解が出来ていないのでclassの指定が出来ないのだと気が付きました。 またお世話になることがあると思います。ありがとうございました。
関連するQ&A
- スタイルシートの記述について
例えば、文字を黒く、背景色を白くしたい場合ですが、どちらの記述が正しいですか？ (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サービス）
- 外部スタイルシートへの記入方法について
外部スタイルシートへの記入方法について 下記ボックスを利用したいのですが 外部ファイルにまとめて記載できたらと思いましたがどうも上手くいきません。 どなたか詳しい方にご教授願えないでしょうか、 よろしくお願い致します。 <div class="box_01"> この中にタイトルを記載と 本文を記載する </div> <TABLE width="400"><TR><TD> <DIV style="width : 400px"> <DIV style="border-width : 1px;border-color : #333333 ;border-style : solid"> <DIV style="border-width : 1px;border-color : #FFFFFF #999999 #999999 #FFFFFF;border-style : solid;"> <DIV style="background-color : #D0D0D0;padding : 1px"> <DIV style="padding : 3 3 4 3px;text-align : center">- タイトル -</DIV> <DIV style="border-width : 1px;border-color : #999999 #FFFFFF #FFFFFF #999999;border-style : solid;"> <DIV style="border : 1px #333333 solid;background-color : #FFFFFF;padding : 10px;"> <br><hr> ↓<BR> ↓<BR> <center> ↓<BR> ↓<BR> </center> ↓<BR> ↓<BR> <hr> </DIV> </DIV> </DIV> </DIV> </DIV> </TD></TR></TABLE> くれくれで恐縮ですがどうぞよろしくお願い致します。
- ベストアンサー
- CSS
- ＣＳＳの作成方法で
ＨＰ作成、初心者です。ＣＳＳで段組をしました。 現在、下記の状態ですがヘッダーの上にもう１個<DIV>を入れて空白のスペースを作りたいのですが ＨＴＭＬの<ＤＩＶ 外枠><ＤＩＶ ヘッダー>の間にもう一個<ＤＩＶ 空白></ＤＩＶ>を作り ＣＳＳ側で＃空白 { width:900px; height:50px; background-color: #FFFFFF ～にしたいのですが どうしても間に白い背景の空白欄ができません。左サイドにナビを入れているので背景にサイド部分の色つきの背景が全部に入ってます。なので空欄ができても背景が白になりません。また空欄も文字を入れるとプレビューで見れますが、文字なしだと空白欄が形成されません。 外枠 { width:900px; margin-right: auto; margin-left: auto; background-image: url(画像1.jpg); ここが左サイドナビの背景になっている background-color: #FFFFFF; margin-top: 0px; border: 1px solid #060; } #ヘッダー { width:900px; height:130px; background-image: url(画像2.jpg); background-color: #FFF; text-align: center; } どのようにすればいいでしょうか。 初心者なので、この書き方で分かりますでしょうか。 よろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- 外部スタイルシートで段落の行揃えと幅とを指定する
divを外部cssでスタイル指定し、 すべてのファイルの段落を中央揃え・背景色白にしています。 div { text-align: center; background-color: #FFFFFF; } これに以下のように幅指定を加えたところ、 width: 400px; 中央揃えが反映されなくなりました。 (IE6.0、NN7.0 WindowsXP) 行揃えと幅とを同時に指定し、反映させるにはどのように記述すればよいでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
- スタイルシートで背景を伸ばしたい
以下のソースで、文字列のside side...の高さをmain,main...に揃えたいです。 色々試してみたのですが、side の文字のある側の背景が下まで伸びてくれません。 どうしたらよいでしょうか。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style TYPE="text/css"> <!-- body{ font-size: 10pt; text-align: center; } #container { width: 752px; border-left: 1px solid #599E3D; border-right: 1px solid #599E3D; } #main { float: right; width: 570px; background: #FFFFFF; } #side { float: left; width: 180px; background: #E0FFFF; border-right: 1px solid #F2992F; } --> </style> </head> <body> <div id="container"> <div id="main"> main<br> main<br> main<br> main<br> main<br> </div> <div id="side"> side<br> side<br> side<br> </div> </div> </body> </html>
- ベストアンサー
- HTML
- CSSのfilterでテキストまで透明化される
CSSのfilterプロパティで背景色だけでなくテキストまで透明化されてしまいます。 以下のように親divの中に子divを造り、その子divにテキストを入力し、 親divに設定した背景画像が子divに透き通って見えるように 子divにfilterプロパティを設定しました。 子divの背景色（白）が透明化され親divの背景画像が見えるようになったのはいいのですが、 背景色（白）だけでなくテキスト文字まで透明化されてしまいます。 テキスト文字だけ透明化されないように設定したいです。 ブラウザチェック：windows IE 8 です。 ******************************************************* 【XHTML】 <div class="test1"><div class="test2">テキスト</div></div> 【ＣＳＳ】 .test1{ width:300px; height:300px; background-image:url("image.jpg"); } .test2{ width:150px; height:50px; background-color:#ffffff; filter:alpha(opacity=30); ←背景色（白）が透明ぽくなるように設定 } ******************************************************* テキスト文字まで透明化されるので、さらにそのテキストをpタグで囲ってみましたが、 それでもテキストが透明化されている（親divのfilterがpタグまで継承されているから？）ので pタグにfilterプロパティで不透明を１００に戻すような設定をしてみましたが適用されません。 ************************* 【変更後】 *********************** 【XHTML】 <div class="test1"><div class="test2">テキスト</div></div> 【ＣＳＳ】 .test1{ width:300px; height:300px; background-image:url("image.jpg"); } .test2{ width:150px; height:50px; background-color:#ffffff; filter:alpha(opacity=30); ←背景色（白）が透明ぽくなるように設定 } p { filter:alpha(opacity=100); ←テキスト文字まで透明化されるのでpタグで囲って不透明１００に設定 } ******************************************************* ご指導のほどよろしくお願いします。
- ベストアンサー
- CSS
- CSSでテーブル状にレイアウトしたが，背景色の範囲が意図と異なる．
cssを使って3列のテーブル状のレイアウトを作成しています． 外部cssファイルにてbackground-colorを記述して 背景色を3列それぞれにつけているのですが，行数の 違いによって背景色の付く範囲がそれぞれの列で 変わってしまっています． （下のソースでいうと，111...は3行分の背景色が付きますが， 他の222...と333...は1行分の背景色しかつきませんが， 222...と333...の部分も背景色は3行分つけたいのです．） 原因は文字数の違いにより行数が異なるためと思いますが， これを解決する方法はありますか？ 【html記述】 <div id="table"> <div id="table_left"> 111111<br> 111111<br> 111111<br> </div> <div id="table_center"> 222222 </div> <div id="table_right"> 333333 </div> <BR class="clears"> </div> 【css記述】 #table { width:700px; margin:0px auto 0px; border-style:solid; border-color:#999; border-width:1px; } #table_left { width:64px; background-color:#e5ded7; color:#80655e; padding:8px; float:left; } #table_center { width:294px; padding:8px; float:left; } #table_right { width:294px; background-color:#edf8b1; background-repeat:repeat; padding:8px; color:#3d6e14; float:right; }
- 締切済み
- CSS
- divの幅が 中身英字だと 固定されない なぜ？
例えば、 <div style="width:200px; background-color:yellow;"> ttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt </div> とした場合、字列が折り返されず、幅がどんどん伸びてくんですが、 <div style="width:200px; background-color:yellow;"> ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ </div> とした場合は、字が折り返されて、幅が固定されます。 ひらがなと英字を混ぜて、 <div style="width:200px; background-color:yellow;"> ああtttttttttttttttttttttああああああああああああaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaああああああああああああああああああああaaaaaaaaaaaaaaああああああああああああああああああああああああああああああああああああああああああああ </div> としても、英字が長く続いている分だけ幅が伸びていくようでした。 英字があっても、幅が固定されて、折り返されるようにしたいのですが、 どなたか良い方法があれば教えてください。
- 締切済み
- HTML
- 直接書き込むCSSを外部ファイルに設定したい
CSS初心者です。下記の携帯テンプレートを使ってサイトを作りたいです。 タグに直接書き込むタイプのCSSが多いのですが、 このソースの一部を外部ファイルに設定するには、どういう書き方をしたら良いでしょうか？ 【外部に設定したい項目】 ★タイトル下線のMARGIN-RIGHT: 47% ★真ん中の線(画像位置)BACKGROUND-POSITION: 53% ★一番下線のMARGIN-LEFT: 53%; 外部にしたい理由は携帯とパソコンで見た時にそれぞれ線の位置を変えたいと思って いるからです。出来ますでしょうか？CSSに詳しい方、どうかお願いします(>_<) 【全タグ】 <html> <HEAD> <TITLE>TITLE</TITLE> </HEAD> タイトル <H1 style="PADDING-LEFT: 7px; MARGIN: 0px; PADDING-TOP: 10px; BACKGROUND-COLOR: #ffffff"></H1> <DIV style="BACKGROUND-POSITION: 53% 40%; BACKGROUND-IMAGE: url(http://deai.mokuren.ne.jp/up/src/up3891.gif); BACKGROUND-REPEAT: repeat-y"> <DIV style="BORDER-TOP: #000000 1px solid; MARGIN-RIGHT: 47%"> <P style="PADDING-RIGHT: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 7px"></P></DIV> <DIV style="MARGIN-LEFT: 40%; PADDING-TOP: 17px"> <DIV style="WIDTH: 300px; MARGIN-RIGHT: 20px"> <H2 style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 13px; PADDING-BOTTOM: 2px; MARGIN: 0px 0px 3px; PADDING-TOP: 3px; BACKGROUND-COLOR: #000000"> <font color="#ffffff">コンテンツ</font></H2></font> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説２</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">その他</a></div> </DIV></DIV> <DIV style="MARGIN-LEFT: 53%; BORDER-BOTTOM: #000000 1px solid"> <P style="PADDING-RIGHT: 5px; MARGIN: 0px; PADDING-TOP: 17px" align=right></DIV></DIV> <P style="PADDING-RIGHT: 5px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-TOP: 5px" align=right> </HTML>
- 締切済み
- CSS
- 背景色を指定したのに反映されません。
CSSは外部ファイルに記述しています。 画像のように色をつけたいのですが、うまくいきません。 上端から150pxです。テキスト・画像を表示しないで背景色のみの表示もできますでしょうか? ・HTML <body>間のみ ※<head>間に<link rel="stylesheet" href="sample.css" type="text/css">の記述はあります。 <body> <div class="color1"><p class>文字など（できれば入れない）</p></div> </body> ・CSS（sample.css） <style type="text/css"> div.color1 { width: 100%; height: 150px; color: black; background-color: blue; } </style> 同じ階層?に両ファイルはあります。
- ベストアンサー
- CSS
お礼
基本的な理解不足で説明が出来ていなくてすみません。 <p>のclassをフルサイズにして、左にマージンを280px取ると このHPの幅が800pxで出来ているので文字の頭が揃うようにしたいと質問するべきでした。 教えてくださったスタイルシートリファレンスのページを参考にしたら上手くいきました。 コードのコピペで何とかHPを作ったので、HTMLとCSSの仕組みが理解できていないのが良くないです。良く勉強するのでまたお世話になることがあるかと思います。よろしくお願いいたします。 ありがとうございました。