- 締切済み
CSSを使ってウェブサイトがページによってずれるのは？
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
ソースコードを提示していただかないとよくわからないですね。
関連するQ&A
- HTMLとＣＳＳ
ＣＳＳで、文字に影をつけようと思っても、プログラムを組んでもうまくいきません。他（ＣＳＳで文字に色をつける）のを組むと、上手くいきますが、影だけが失敗します。 他のＣＳＳが動いたって事は、ＣＳＳの基本は合っているので、多分、 影のＣＳＳタグが間違っていると思います。 使ったタグは下記で。 省略 <STYLE TYPE="text/css"> <!-- .ts1 {text-shadow:3px 3px} .ts2 {text-shadow:red 3px 3px;} .ts3 {text-shadow:red 3px 3px 2px;} --> </STYLE> </HEAD> <BODY> <SPAN CLASS="ts1">text-shadow</SPAN><BR><BR> <SPAN CLASS="ts2">text-shadow</SPAN><BR><BR> <SPAN CLASS="ts3">text-shadow</SPAN><BR><BR> </BODY> </HTML> 上記で失敗したので、このタグもつかいました td { filter:dropshadow (color=red ,offx=3 ,offy=3 ,positive=true) ; } 何処が原因でしょうか？
- ベストアンサー
- その他（プログラミング・開発）
- CSSでの記述についてです。
CSS初心者で独学でいろいろ試しているのですが、分からないことがあるので質問させてください。 １、スタイルシートの定義を個別にして、文章を書いたページのスタイルを一括で統一する方法を取っています。 ２、ページの下の部分に「戻る」「次へ」のリンクを作って、リンクを張りました。 ３、同じフォルダ内のページに対してリンクを貼ったとき、「戻る」と「次へ」の間にわずかに間隔があります。（それを保ちたいのです） ４、しかしひとつ階層が上の（フォルダ外）のページに対してリンクを貼ったとき、何故か「戻る」と「次へ」の間の間隔が狭くなってしまいます。 スタイルシートを文書の記述とは別に作って一括で処理しているので、その文書ページの記述に問題があるのだと思うのですが、どこが問題なのか分かりません。参考までに、以下にページの記述を記載します。 ---------------------------------------- ＜間隔がきちんとある方＞ <html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML lang="ja"> <head> <LINK rel="stylesheet" type="text/css" href="../stylesheet1.css"> <title>Torikago2</title> </head> <body><br> <p> 文書<br> </p> <br><br> <a href="torikago1.html">戻る</a> <a href="torikago3.html" class="01">次へ</a> </font> </body> </html> ------------------------------------------------- ＜間隔が狭くなる方＞ <html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML lang="ja"> <head> <LINK rel="stylesheet" type="text/css" href="../stylesheet1.css"> <title>Torikago1</title> </head> <body><br> <p> 文書<br> </p> <br><br> <a href="../toppage.html">戻る</a> <a href="torikago2.html" class="01">次へ</a> </font> </body> </html> ------------------------------------------------ ちなみに、スタイルシート＞文書フォルダ となっていて、 間隔の狭くなってしまう方のページもその文書フォルダの中にあります。 スタイルシートのリンクに対しての記述も必要でしょうか？ 以下のようなものです。 ------------------------------------------------ a {position:relative; right: -43%; bottom: 40px; background-color:white; opacity: 0.8; padding:10px; margin:0px; text-decoration: none;} a.01 {position:relative; bottom: 10px; background-color:white; opacity: 0.8; padding:10px; margin:0px; text-decoration: none;} どなたか教えて頂けると嬉しいです。
- ベストアンサー
- その他（インターネット・Webサービス）
- HPのCSSについて
超初心者です。へッダーの固定をしたページを作りたいのですが、フリーのCSSを使ってやってみたところ、背景の色、タイトルの文字の大きさ、現在センタリングになっているのを全体に表示したいのに、それが上手くいきません。以下、試してみたCSSなのですが、どこをどう変えれば、上記の変更が可能でしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSSでヘッダーを固定する 第４歩</title> <style type="text/css"> html { height:100%; } body { margin:0px; height:100%; } #body { width:700px; margin:0px auto; } #header { background:#ccffcc; height:100px; /* width:100%;*/ width:700px; position:fixed; } #main { padding-top:100px; background:#ffff99; } #footer { background:#ffcc99; height:80px; } </style> <!--[if IE 6]> <link rel="stylesheet" href="./fixheader_ie6.css" type="text/css" /> <![endif]--> </head> <body> <div id="body"> <div id="header"> ヘッダー </div> <div id="main"> コンテンツ1<br /> コンテンツ2<br /> コンテンツ3<br /> コンテンツ4<br /> コンテンツ5<br /> コンテンツ6<br /> コンテンツ7<br /> コンテンツ8<br /> コンテンツ9<br /> コンテンツ10<br /> コンテンツ11<br /> コンテンツ12<br /> コンテンツ13<br /> コンテンツ14<br /> コンテンツ15<br /> コンテンツ16<br /> コンテンツ17<br /> コンテンツ18<br /> コンテンツ19<br /> コンテンツ20<br /> コンテンツ21<br /> コンテンツ22<br /> コンテンツ23<br /> コンテンツ24<br /> コンテンツ25<br /> コンテンツ26<br /> コンテンツ27<br /> コンテンツ28<br /> コンテンツ29<br /> コンテンツ30<br /> コンテンツ31<br /> </div> <div id="footer"> フッター </div> </div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- cssについて、困っております。
DWでHTMLとCSSの練習としてHPを作成しているのですが、 CSSのスタイルが適用されず、思うようなデザインに出来ず困っております。 例でいうと <div id="main"> <p>～～～～～～～</p> <p>～～～～～～<br /></p> </div> ⬆に対し #main { margin-left:340px; font-size:18px; text-align:center; height:auto; width:600px; { などを指定しているのですが、font-size,text-alignだけが適用され、 その他のmargin,height,width,などが 「(プロパティ名)～は継承されていないため選択範囲に適用されません。外側のタグに適用されます。」 と表示され、適用されません。 この場合はどこに問題があって適用されないのでしょうか？？ また、「外側のタグに適用されます。」というのはどの外側の部分に適用されるのでしょうか？？ 初歩的な質問で申し訳ございません。 回答お願い致します。
- 締切済み
- CSS
- CSSとページの軽量化
CSSに記述するスタイルの量によってページの読み込み速度は変わりますか？ <1> *{ margin:0px; padding:0px: } <2> *{ margin:0px; padding:0px: } body{ background-color:#000 } 例えばこの場合だと<1>の方が読み込みは早くなったりするのでしょうか？
- ベストアンサー
- CSS
- CSSでページ上部に余白ができてしまいました。
下記の(質問用に作った)html とcssの記述について教えてください。 これは幅800pxの水色の範囲の中に文字や写真を配置し、その外側は青色で、閲覧者の環境によって余白(青色)の幅が左右対称に増減するようにしました。 これをFirefoxで確認すると上部に5～7mmほど余白の青が見えてしまいます。 margin-top: 0px; と記していますが、反映されていません。 どうすれば、上部の余白をなくして、上まですべて水色になるでしょうか？ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift JIS"> <title>練習・質問の為のサイトです</title> <style type="text/css"> div { width: 800px; margin-top: 0px; margin-right: auto; margin-left: auto; } .cont { width:800px; background-color:lightcyan; } body { background: navy; color: black; } h1 { background: teal; color: white } h3 { font-weight: bold; color: red; } </style> </head> <body> <div class="cont"> <h3>社会科の学習</h3> <h1>日本の地理について</h1> <p><img src="photo.jpg"></p> <h2>日本には47の都道府県があります。</h2> <h3>東北地方</h3> <p>青森 岩手 秋田 宮城 山形 福島<br> <br> <h3>関東地方</h3> <p>群馬 栃木 茨城 千葉 埼玉 東京 神奈川<br> <br> <br> <p>練習用の為、ここまでとする。 </body> </html> 以上です。 どうぞアドバイスよろしくお願いいたします。
- 締切済み
- その他(ソフトウェア)
- HTML CSS で文字を点滅させたい
HTMLにCSSを含める学習中です。 以下のようにHTMLを書き、edgeで表示してみましたが点滅してくれません。 どこが違うのか教えてもらえませんでしょうか。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html;charset=SHIFT_JIS"> <TITLE>テスト ホームページ</TITLE> <style type="text/css"> p { color: orange; font-size: 20px; animation: blinkEffect 1s ease infinite; } </style> </HEAD> <BODY> □□□□□□□□□□□ <BR> <p class="p">この部分の文字を点滅</p> ■■■■■■■■■■■ <BR> <BR> <p>これは例文です。</p> <BR> </BODY> </HTML>
- ベストアンサー
- ブラウザ
- CSSがうまく読み込まれません
いつもお世話になっています。 Dreamweaver CS4でホームページ作りをしているのですが、 突然CSSが読み込まれなくなりました。 htmlのソースは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <link href="CSS/test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="1"> <p>1</p> </div> <div id="2"> <p>2</p> </div> <div id="3"> <p>3</p> </div> <div id="4"> <p>4</p> </div> <div id="5"> <p>5</p> </div> </body> </html> cssのソースは body { padding: 20px; width: 850px; margin-right: auto; margin-left: auto; border: 1px solid #999; } #1 { width: 850px; background-color: #666; } #2 { width: 850px; background-color: #999; } #3 { background-color: #CCC; width: 850px; } #4 { background-color: #999; width: 850px; } #5 { background-color: #666; width: 850px; } です。 どちらもエンコーディングはUTF-8です。 ちなみにDreamweaverで制作中の表示ではCSSは反映されているのですが、 プレビューまたはサーバーにアップすると反映されません。 なにが原因なのでしょう。。。 何卒よろしくお願いいたします。
- ベストアンサー
- HTML
- safariだけ、cssが効きません！
こんばんは。css入門者です。 Firefoxなどは大丈夫なのですが、safariだけ、 .staffのmargin-bottom:20px;が効きません。 どこが間違ってるのかわからず、困っています。 どうぞよろしくお願いいたします。 <div class="staff"> <p class="staff_name"><img src="img/name_shige.gif" width="107" height="85" alt="ああ）" /></p><br /> <p class="staff_word">いいいいいい</p> <div class="clearfix"><hr /></div> </div><!-- staff end --> ------------------------ .staff { width:670px; margin-bottom:20px; background-color:#d1ece6; line-height:150%; } .staff_name { float:left; margin:0px; } .staff_word { background-color:#FFF; margin:0px 20px 20px 107px; padding:7px; }
- 締切済み
- CSS
- CSSの分割とウェブサイトの表示速度 (SEO)
. よく、【(1)HTTPのリクエストを抑えるために、複数のCSSファイルはひとつにまとめる】ということが言われますが、一方で、【(2)表示速度のためにCSSを分割する】ということが推奨されることもあります。 この2つが一見矛盾する感じで少々混乱しております。 ここで、例えば、ホームページ・記事ページ・製品ページの、3つのページが存在するウェブサイトを仮定するとします。 【質問A】 そこで、(1)については、ある一つのページにおいては、もしCSSを複数呼び出している場合には、できるだけその複数のCSSファイルをまとめた方がHTTPのリクエストが少なくなるのでよい。 そして、(2)については、各ページにおいては、ページごとにCSSファイルを分けていた方がそのページでは使わない無駄なCSSコードを読み込ませなくて済むのでよい。 ということなのでしょうか？ 【質問B】 そうすると、全てのCSSファイルを一つにまとめてしまうのではなく、例えば上の3つのページに共通するCSSをcommon.css 、それぞれのページに特有なCSSをindex.css、article.css、product.css といった感じで読み込ませるようにすることは、(1)(2)の両方をある程度両立させる方法といえますでしょうか？ 【質問C】 質問Bの内容を具体的に実現するには、HTMLのヘッダー部分をテンプレートパートにして、まずcommon.cssについては<head>に<link>で記述しておき、index.css、article.css、product.css についてはその下に条件分岐で記述して各ページで該当のCSSを読み込ませるという方法で問題ございませんでしょうか。 .
- ベストアンサー
- CSS
補足
http://t-and-s.co.jp/とhttp://t-and-s.co.jp/inquiry/index.htmをFirefoxでみるとずれます。