- ベストアンサー
CSSの記述
HTMLで普通のテキストのサイズを固定したいのですが、 うまくいきません。 何が間違っているのでしょうか。 一部のHTMLだけ、リンクの下線をはずしたいので、 HTMLに <LINK REL="stylesheet" HREF="css/style_win.css" TYPE="text/css"> <STYLE TYPE="text/css"> <!-- A { text-decoration: none; font-size: 10pt;} --> </STYLE> と記述。 こちらの方は大丈夫です。 だめなのは外部 css/style_win.css に body { font-size:10pt } と書いたほうがまったく制御していません。 初心者で、本もたくさん調べましたが わかりません。 どうかお願いいたします。
- shizuku
- お礼率86% (353/409)
- HTML
- 回答数7
- ありがとう数8
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
以下の手順で調べれば、原因が明確化する。 やってみる価値あり。 (1)外部スタイルシートに記述した内容と、まったく同一のものを内部に記述した際にうまく行く場合。 →外部スタイルシートの読み込み記述部分に何らかの記述ミスがある可能性が極めて高い。 (2)内分に同一の記述してもうまく行かない場合、 →外部スタイルシートの読み込み記述部分の問題ではない。 ※同様の記述ではなく、まったく同一の記述でうまくいくかいかないかを確かめる必要がある。 (3)本当にBODY部分の文字すらも変化していないかどうか確かめる。 →TABLEなどのネストタグではなく、BODY部分に直接文字を書いてみて、なおもそのフォントサイズがCSS指定のフォントサイズになっていないかどうかを確かめる。 →指定のフォントサイズになっていなければ、単なる記述ミス。 →BODY部分だけが指定のフォントサイズになった場合は、読み出しCSSにBODYだけでなく、TDやTHのタグなどについても、それぞれフォントサイズを指定すればOK。 TDやTH、DIVなど分けて指定しておけば指定しておくほど、あとで操作がしやすいと思います。
その他の回答 (6)
- m_nkgw
- ベストアンサー率47% (42/89)
>>><TABLE>は使っています。 だとすると、kokucho81さんのおっしゃる方法で実現できると思います。 TD { font-size: 10pt } TH { font-size: 10pt } などで指定すると望んでいる大きさに出ると思います。 がんばって下さい。
お礼
おっしゃる通りできました！ こんなに基本的なことで、みなさんにお聞きしてすみませんでした。 親切にご回答くださり、ありがとうございました。
- miy2021
- ベストアンサー率29% (7/24)
<LINK REL="stylesheet" HREF="css/style_win.css" TYPE="text/css"> と書いてありますが、 HREF="/css/style_win.css" ではどうですか？
- punchan_jp
- ベストアンサー率55% (155/280)
外部のCSSが読めてないという可能性があると思います。 A のときと同様に、html 内に body { font-size: 10pt } を入れたらどうなるでしょう？
補足
はい。 <STYLE TYPE="text/css"> <!-- body { font-size: 9pt} --> </STYLE> html内に上記のように書いた場合、だめなんです。 下記のように書いた場合は制御されます。 <STYLE TYPE="text/css"> <!-- A { text-decoration: none; font-size: 9pt;} --> </STYLE>
- m_nkgw
- ベストアンサー率47% (42/89)
状況がいまいちわからないので、まとはずれかもしれませんが、一応考えつくことを箇条書きにします。すごく初歩的なことも入っていますがお許しください。 ・ブラウザがCSSファイルを認識できるブラウザかどうか。 ・CSSファイルのある場所が正しく書かれているか。（ファイルの場所は相対パスで書かれていますがあってますか？） ・<BODY>タグ中をさらに<TABLE>タグなどで区切っていないか。（区切っていれば、さらに<TABLE>タグにもスタイルを応用するとどうなりますか？） 心当たりがなければ、補足をいただけますか？
補足
・ブラウザがCSSファイルを認識できるブラウザかどうか。 >>>IE5.0なので、大丈夫だと思います。 ・CSSファイルのある場所が正しく書かれているか。（ファイルの場所は相対パスで書かれていますがあってますか？） >>>HTMLと同列の場所のフォルダ（css）なのでcss/***.cssでOKかと思うのですが・・・。 ・<BODY>タグ中をさらに<TABLE>タグなどで区切っていないか。（区切っていれば、さらに<TABLE>タグにもスタイルを応用するとどうなりますか？） >>><TABLE>は使っています。 が、どのように書けば<TABLE>タグにスタイルを応用で きるのでしょうか。
- miy2021
- ベストアンサー率29% (7/24)
多分なのですが・・・。 <STYLE TYPE="text/css"> <!-- A { text-decoration: none; font-size: 10pt;} --> </STYLE> と記述した中のほうは、"font-size: 10pt;" と、 ちゃんと項目ごとにといったらいいのか、 スペースも入っているし、" ; " も入っているのに、 外部 css/style_win.css に body { font-size:10pt } と書いたほうには、そういう配慮というか、 決まりごとがありません。 プログラムの中では、スペースとか " ; " とか、 とても重要です。 どこで区切るのか、とかこれで区別しているのです。 スペースとか、" ; " とか、確認してみてください。
お礼
ありがとうございます。 やってみたけど、ダメでした。。。。 でも、基本的なことが大切なんですね。 勉強になりました。
- POLYSICS
- ベストアンサー率33% (10/30)
<BODY>にフォントサイズを指定するのではなくて、 <BASEFONT SIZE="1" STYLE="font-size:10pt;"> を試してみてはどうでしょう？ また、ベースフォントで指定しても、 テーブルの中のテキストにはなぜか効かないので、 個別に指定してやらないとダメですが・・・。
お礼
もどかしくて、すみません。 <BASEFONT SIZE="1" STYLE="font-size:10pt;"> これは、HTMLのほうに記述すればいいのでしょうか。
関連するQ&A
- ＣＳＳとMacの関係
ＣＳＳの制御で、 外部ＣＳＳ マック用に css/style_mac.css に body {font-size: 12pt;} td {font-size: 12pt;} ウイン用に css/style_win.cssに body {font-size: 10pt;} td {font-size: 10pt;} と記述しています。 がプラウザで確認したところ、 windows IE5.0は制御されていますが、 Mac IE5.0で制御されません。 HTMLの呼び出しは、 <SCRIPT LANGUAGE="JavaScript"> <!-- if(navigator.appVersion.indexOf("Mac",0) != -1){ document.writeln('<link rel="stylesheet" type="text/css" href="css/style_mac.css">'); } else { document.writeln('<link rel="stylesheet" type="text/css" href="css/style_win.css">'); } //--> </SCRIPT> と記述しています。 そもそもjavaがわからないので どこを直せばMacでも制御されるのでしょうか。 よろしくお願いいたします。
- ベストアンサー
- HTML
- cssにおけるフォントの大きさの制御と外部ファイルについて
現在多くの方々に見ていただけるようなホームページをと思って自分のページを制作しているのですが、フォントの大きさのことで困っています。 通常のIEではデフォルトでフォントを表示すると非常に大きな文字になるので-1のフォントを使用しています。しかしNNだと（特にお年寄りには）見づらいページになってしまうような感があります。 そこでスタイルシートでIEでもNNでもMacでもWinでも10ptの文字にして、文字にふれたときに下線がつくなどの処理をしました。 <style type="text/css"> <!-- a:link {font-size: 10pt; text-decoration:none; color:#000000; } a:visited {font-size: 10pt; text-decoration:none; color:#000000; } a:active {font-size: 10pt; text-decoration:none; color:#000000; } a:hover {font-size: 10pt; text-decoration:none; color:#FF0000; } --> </style> しかし、全く見られないなど（おそらくブラウザのバージョンにも依存するのだと思いますが）の意見もあり、困っています。 個人的には一番いい形で見てほしいし、多くの人にも見てもらいたいのでどうすればいいだろうと悩んでいます。 そこでご存じの方に教えていただきたいのですが （1）あまり負担にならない程度にそれぞれのマシンごとの識別させたい、もしくは、対応できないブラウザの場合は、通常のデフォルトサイズのフォントで見てもらうようにする方法はないでしょうか？ （2）cssやjavascriptなどは外部ファイルとしてhtmlファイルからリンクさせることが可能かと思いますが、実際の場合、htmlに埋め込む場合とリンクする場合で何か変わってくることはあるのでしょうか？（ひょっとして、複数のファイルにスタイルやスクリプトを適応させることができるというぐらいのメリットなのでしょうか？） お手数おかけしますがよろしくお願いいたします。
- ベストアンサー
- HTML
- 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サービス）
- CSS のときのヘッダの記述
<link rel="stylesheet" href="style.css" type="text/css" /> の link rel = の ●「 rel 」って何の省略なのでしょうか？ また、 ●href は Hyper link REFerence の略でしょうか？
- ベストアンサー
- HTML
- スタイルシート
こんばんは。HPを独学で作っている超初心者です。 スタイルシートが反映してくれないのです。下記の記述で 何が違うのでしょうか？？？ ---01.css--- <sytle type="text/css"> a:link{text-decoration:none;} <style> ---index.html（抜粋）--- <head> <link rel="stylesheet" href="01.css" type="text/css"> </head> どうしても index.html のリンク部分に下線が出てきます。 どうして消せないのかが分かりません！！！ どなたか教えてください！よろしくお願いいたします！
- 締切済み
- その他（インターネット・Webサービス）
- CSS、おかしいですか？
CSSですが、本を見てやっています。 下記のように記述したのですが、書かなくてもよい記述とか、おかしいところ、ありますでしょうか？ <style type=text/css> body{font-size:10pt} td {font-size:10pt; line-height:12pt} tr {font-size:10pt line-height:12pt} dive {font-size:10pt;line-height:12pt} a:link {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#990000} a:visited {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#990000} a:active {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#ff0099} a:hover {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#ff0099} </style>
- 締切済み
- CSS
- CSSの文字指定
<style type="text/css"> <!--A:link {color:#000055; text-decoration:none; } A:visited {color:#000055; text-decoration:none; } A:hover {color:#ff3300; text-decoration:underline; }--></style> 上部はcssのリンクですが、これに加えて文字のサイズ指定とフォントのフェイス指定もしたいです。 たとえば、MSゴシック,平成角ゴシックなど。 どう加えればよいですか？ <style type="text/css"> font:16px "ＭＳ Ｐゴシック",平成角ゴシック,</style>とやってもダメでした と
- ベストアンサー
- HTML
- 外部CSSの読み込みがうまくできない
<head>～ <link href="basic.css" rel="stylesheet" type="text/css"> ～</head> ↓basic.css body{font-size:80%;color:#4a4a4a;} a:link{color:#004a95;text-decoration:none;} a:visited{color:#950095;text-decoration:none;} a:hover{color:#ff80c0;text-decoration:none;} という感じで外部CSSを読み込んでいるのですが、 ブラウザのoperaやfirefoxだとbody{font-size:80%;color:#4a4a4a;}の所だけ反映されません。 IEだとその部分も反映されます。 cssファイルに修正箇所があるのでしょうか？ それとも外部cssを読み込むhtmlファイルの方に追加して記述しなければいけないタグがあるのでしょうか？
- ベストアンサー
- CSS
- CSS記述方法について
初心者的な質問ですみません。現在CSSを用いてスタイルを設定しようと 奮闘中です。だいたいの所までは設定できているのですが、次のように 【.feed_item_title】に対しアンダーラインを設定しない【link】を設定し たいと考えています。 .feed_item_title { font-size: 7pt; font-weight : bold; list-style:none; line-height: 1.4em; } 一応、a:link.feed_item_title {text-decoration:none;}や a.feed_item_title:link{text-decoration:none;}なども試してみたのです がいずれもアンダーラインが表示されてしまいダメでした。 HTML上は<div class="feed_item_title">といった形で記述しています。 見よう見まねで作成しているのであちこち間違った記述等あるかもしれま せんが、その辺はご容赦ください。よろしくお願い致します。
- ベストアンサー
- CSS
- 外部CSSがうまく表示されません
下記ファイル(index.html・sld01.html・sld02.html） について相互にリンクし、外部CSSで制御したいのですが、うまくできません。 1.index.html→sld01.html（CSS反映せずdefault表示）さらにsld02.htmlへはリンク切れとなる。 2.sld01.html→sld02.htmlの場合、sld01.htmlでの文字色が a:visitedになりsld02.htmlジャンプでCSS反映せずdefault表示となりindex.htmlへはリンク切れとなります。 どなたかご教授いただけませんでしょうか？ index.html <html> <head>省略 <link href="/styles-site.css/navi.css" rel="stylesheet" type="text/css"> <link href="/styles-site.css/waku.css" rel="stylesheet" type="text/css"> </head> <body> <table>省略 <div> <a href="index.html">top</a> </div> <div> <a href="../sldset/sld01.html">gallery</a> </div> </table> </body> </html> sld01.html・sld02.html(slid.01へ) <html> <head>省略 <title>gallery</title> <link href="/css/base.css" rel="stylesheet" type="text/css"> </head> <body> <TABLE> <TBODY> <TABLE> <TBODY> 省略（java) <font size="-1"> <a href="/contents/sldset/sld02.html">slid.02へ</a></font> </TBODY> </TABLE> <font size="-1"> <a href="/contents/index/index.html">元のページに戻る</a></font> </TBODY> </TABLE> </body> </html> base.css(一部省略） a:link { color: #FFCC33; text-decoration: none; } a:visited { color: #CCCCCC; text-decoration: none; } a:hover { color: #66CCFF; text-decoration: none; } a:active { color: #FF3366; text-decoration: none; }
- ベストアンサー
- その他（プログラミング・開発）
補足
ありがとうございます。 あとで、一通り全部やってみます。