- ベストアンサー
CSSを利用するにあたって
ホームページをCSSを利用して作りましたが、 ある人（プロではない一般人）にCSSを利用しない方が良いと言われました。 理由は 『CSSをブラウザに対応していない人（切っている人）や CSSファイルがリンク切れする場合もある。』 と言う事らしいのです。 一般的に多くのプロの方々がCSSで作っていますし 全く心配していなかったのですが、考えたらそうかもｗ 質問 このような事は、多少なりともある事なのでしょうか？ もしそうなら head内とかに内部style.cssとして書いたほうが良いのでしょうか？ それだったらCSSの意味が少なくなるような...
- takumana20
- お礼率91% (434/473)
- HTML
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
結論から言うと、その方のアドバイスは間違っています。ウェブサイトのHTMLを作成するに当たって、信頼すべき基準はあくまで、W3Cの勧告です。 HTML4.01の仕様書には、 Better distinction between document structure and presentation, thus encouraging the use of style sheets instead of HTML presentation elements and attributes.(2.3.2 Accessibility) →文書の構造とプレゼンテーション(見栄え)を要素や属性で指定する代わりにスタイルシートの使用を奨励する。 ・・邦訳はHTML 4.01 Specification (ja)/ http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html と明言してあります。 具体的に指摘すると ★「CSSをブラウザに対応していない人（切っている人）や」については、HTMLでデザインすること自体にいえる事で、そもそもCSSがなくても、きちんと意味が通じるHTMLを書けばいささかも問題になるはずはありません。もし、スタイルシートを使用せずに書かれていたら、そのHTMLが訪問者にとって読みにくしからとサイト指定のCSSを切って、あるいは自分なりのスタイルシートを適用して閲覧することもできなくなります。 ★「CSSファイルがリンク切れする場合も」について言えば、極めて例外的な場合で、HTMLからリンクしているファイルはスタイルシートだけでなくjavascriptや画像もあります。 ★「head内とかに内部style.cssとして書いたほうが良いのでしょうか？」については、一概に言えませんが、基本的には複数のページで共通するプレゼンテーションは別途記述し、そのページだけに適用されるスタイルシートはそのページの<head></head>内に、さらに、特定の要素だけに適用させたい場合は<要素の属性>として記述するのが良いでしょう。 私は、外部スタイルシートを主に使用しますが、その場合でも <link rel="stylesheet" type="text/css" href="[基本的なCSSのURI]" /> <link rel="stylesheet" type="text/css" media="screen" title="標準" href="[サイトすべてに共通CSSのURI]" /> <link rel="stylesheet" type="text/css" media="screen" title="標準" href="[テーマ毎のデザインCSSのURI]" /> <link rel="stylesheet" type="text/css" media="screen" title="標準" href="[テーマ毎の色指定CSSのURI]" /> という風に、固定スタイルシート/複数の優先スタイルシート/代替スタイルシート、および印刷用スタイルシートを置いています。 そうすることで、HTMLの仕様書/CSSの仕様書/アクセスビリティに関する仕様など、可能な限りW3Cに準拠したものを作成するようにしています。いわゆる【ウェブ標準】 次期IEも、ついに【ウェブ標準】に準拠します。自信を持ってHTMLで文書構造を記述し、プレゼンテーションはスタイルシートで行ってください。 貴方が作成したHTML、およびその方が作成したHTMLを下記参照URI--Another HTML-lint gatewayでテストしてみてください。
お礼
CSSは、外部で１つのテキストでにしています。 リンク切れや沢山あると管理が難しいのでｗ 文法チェックは、アンカーターゲット部分で注意されましたがほかは、問題ありませんでした。 CSSでのリンク切れは、通常は、無いと考えた方が良いのですね？
こんにちは。 まず、僕はCSSの使用を控える必要は無いと思います。 対応していない人、切っている人というのはごくわずかで、個人がホームページを作る限り、ほとんど気にする必要が無いからです。 また僕の知る限り、CSSのリンクが突然切れたりする事はありません。 CSSがきちんとしていて、ファイル名がきちんと指定されていれば大丈夫です。 外部ファイル化する事によって、サイトのデザインに統一感を出せる、サイト全体のデザインの変更が容易になる、と言うのはCSSの大きな利点の一つです。 一つ一つ内部に記述する必要はありません。 HTMLは文書を記述し、CSSはそれを装飾する役割を持っています。 ですから、万が一CSSがリンク切れなどを起こしても、HTMLが文書としてしっかりしていれば、酷い見た目になる事は無いはずです。 HTMLの構造をしっかりさせた上でCSSを使うのが理想、個人のホームページなのだから"ある人"の言っていた様な事は気にする必要は無い、と言うのが結論です。 逆に、HTMLでむりやり装飾しようとする方がよくないと思います。
お礼
同感でしたが やはり言われたりすると一理あるんですよねｗ CSSがリンクエラーの場合とか考えてなかったので・・・ 他のサイト見ていてテキストオンリーのサイトとか、 CSSが切れてるのかな？って。心配しすぎですか？・・・
前者はブラウザにユーザーズ・スタイルシートを組み込んでる場合。 後者は外部ファイル化して読み込みエラーに成る場合。 基本的に直接でも内部でも外部でも、今やCSSはHTMLと密接に関係して無くては為らない規格ですからね。 私はCSSを使わないでコーディング出来る人なら使わなくても良いと考えてますが、実情は極めて困難でしょう。 現在のwebはCSSは必須条件の一つとして認識してる箇所も在りますからね。 CSSは拡張・修正を重ねてる状態なので、コレを完全に体現化出来るブラウザが無いと云う事から、質問者に対して云った人が拡大解釈して「使用を控えよ」と云った可能性も否定出来無いとも思う。
補足
＞後者は外部ファイル化して読み込みエラーに成る場合 そのサイトと同じ階層に置いた場合でも 読み込みエラーになる事が多いのでしょうか？ それとも別階層に置いた場合よりも確率的にはエラーが少ないでしょうか？ どっちでも同じですか？？
- yambejp
- ベストアンサー率51% (3827/7415)
ある人はおそらく「cssをつかったときにcssをきったら極端に表示が おかしくなるようなhtmlしか書けない技術の人」なのでしょう。 通常htmlは構造、cssは見た目を担当すると考えます。 仮にcssがなくても、構造がきちんとできていれば、htmlというのは 十分みやすいものでなくてはいけません。 もしそこで見にくいのであればそれは「構造がおかしい」のです。 cssがない場合を想定してhtmlを書くという心構えは必要ですね。 ＞head内とかに内部style.cssとして書いたほうが良いのでしょうか？ これはstyleタグでcssを実現すべきかという質問でしょうか？ 構造と表示をきりわけるという理由では意味があることです。 「リンク切れ」が頻繁におこるような特殊な環境の方に向けては 意味があるかもしれませんね。 （cssを切っている人にとっては同じような気がしますが・・・） もちろん外部ファイル化しておいたほうが、使いまわしがききますし、 スキンのような感覚で切り替えがきくのでcssを切り分ける意味がありますね。 ご理解いただいているとおもいますが、外部ファイル化した場合でも cssが指定できるのはheadタグ内だけですのでご留意ください。
お礼
floatの枠組みが落っこちて見た目が悪くなりましたｗ head内やstyleで直接書くのもどうかと思いますし... HTMLの移行型のバージョンで折角のCSSをHTMLに戻したり テーブルを使ったりするのもしっくりこないって言うか... 全てが上手く行く方法は、ないんですね(+_+) ありがとうございました。
関連するQ&A
- htmlとcssがリンクしません
htmlを独学で学んでいます。いま、cssを作ってhtmlとリンクさせようとしているのですが、できません。もうひとつ他に簡単なhtmlをかいて、そこに簡単なcssをリンクさせようとしたのですがそれでもうまくいきません。以下がぼくが作った簡単なhtmlとcssです。 【html】 <!DOCTYPE html> <html> <head> <meta charset=“utf-8”> <title> aaa </title> <link ret=“stylesheet” href=“style3.css”> </head> <body> <h1> 壁 </h1> <p> htmlとcssがうまくリンクしなくてこまっている。 </p> </body> </html> 【css】 h1{color: #ff0000;} h1のところを赤い文字にしたいのですがブラウザで開いても黒文字のままです。 なにか原因が分かる方はご指摘お願いします。
- ベストアンサー
- HTML
- css の適用について
HP作成の勉強に、ローカル内で、htmlとcssを試しに書いてみたところ、 cssが適用されず、困っております。 外部のcssファイルを読み込む場合も、htmlの<head>や要素に<style>を追加する場合も適用されません。<head>内でlinkや属性指定の記述もしており、パスもあっています。 W3Cの検証も済んでいます。htmlとcssのコーディングも一致させています。 作成の環境は、Mac OS X version 10.9.4で、Emacsで書いています。 また、どのブラウザでも適用されていません。 他に考えられるとしたら、どのような原因で適用されないのでしょうか？ 教えて頂きたいと思います。よろしく御願いします。
- ベストアンサー
- Mac
- HTMLメールの外部CSSが有効になりません
HTMLメールから以下のように外部CSS（http://から始めてます）を利用したいのですが、実際にOUTLOOK 2003 SP3で見るとスタイルが適用されていません。 ローカルで同じHTMLをブラウザで開くとスタイルは適用されます。HTMLメールのときは何か特別なことが必要なのでしょうか？ <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> ヘッダ全体を以下に掲載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <title>TITLE</title> <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>
- 締切済み
- HTML
- css、スタイルシートの読み込み順について
head内に<link type="text/css……>でスタイルシートを3つ読み込んでいて ①reset.css ②style.css ③content.css の順で上から下に並べてるのですが②が後で読み込まれます。 !importantはどのスタイルシート内にもついてませんし、リンクの指定ミス等もありませんでした、メディアクエリのミスもありません。 一体なにが原因として考えられるでしょうか…お知恵を貸していただけますと嬉しいです。
- 締切済み
- CSS
- cssが読み込まれません。
VScodeでhtmlの練習を始めましたが、どうやってもcssが読み込まれません。同じフォルダ内に保存してます。名前間違いもないです。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>方法1</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>方法1:外部のCSSファイルを読み込む</p> </body> </html> CSS @charset "UTF-8"; p { color: blue; }
- ベストアンサー
- HTML
- ＣＳＳが反映されないで困っています；；
日本のホストの時は、ＣＳＳがＨＴＭＬにうまく反映されていたのですが、 ホストを海外の Ｔ３５Hosting と Graffiti.net で同じ様に挑戦したら ＣＳＳが反映されませんでした；； index.htmlのヘッド内に下記を書いて、 top.cssの名前でＣＳＳを書きました。 <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="top.css" type="text/css"> </head> なぜか、反映されませんでした；； 「/」（ルートディレクトリ）と何か関係あるのでしょうか。 <link rel="stylesheet" href="top.css" type="text/css">の行の href="top.css" を href="/.top.css" などに変えなくてはいけないのでしょうか。。。 お知りの方 よろしくお願いします。
- ベストアンサー
- ブログ
- CSSのMETA http-equiv・・・・
<link rel="stylesheet" href="style.css" type="text/css"> と ところどころ<span>でCSSを利用していますが、 <META http-equiv="Content-Style-Type" content="text/css"> を書いたほうがいいのでしょうか。 もし、<span>を使用しなければ書かなくても良いものなのでしょうか。
- ベストアンサー
- HTML
- IEにおいて、CSSの記述順番によって表示が異なる？！
CSSの外部ファイルを読み込んで、スタイルを効かせているのですが、 ブラウザIEだとスタイルの書き順によってスタイルが効いたり効かなかったりします。 例えば、 <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="http://sample.com/style.css"/> </head> <body> <div id="style0"> <!--style0の始まり--> <div id="style1"><p>■■■</p></div> <p id="style2">■■■</p> <ul class="style3"> <li id="style4">■■■</li> <li id="style4">■■■</li> </ul> </div> <!--style0の終わり--> </body> </html> というHTMLにおけるCSSの書き順は、 #style0{ ▲▲▲ } #style1{ ▲▲▲ } #style2{ ▲▲▲ } .style3{ ▲▲▲ } #style4{ ▲▲▲ } の様に、HTMLファイル内でスタイルを指定した順に（スタイルの登場順に）、CSSファイル内ではスタイルを記述しきゃならないのでしょうか？ もっとも、登場順に指定した方が良いかどうかも、私には分かっていません。ただ言えるのは、IEにおいて、書き順によって表示に違いが生じるということだけです。 なお、私が知りたいことは、 ・こういう現象が起こることは一般的にあることなのかどうか ・この現象の発生メカニズム ・IEにおけるCSSの正しい記述法（記述順番） 以上３点です。 ちなみに、FireFoxやOperaでは、順不同で問題なさそうです。 くどくなりますが、IEで問題が生じる場合というのは、 例えば、上の例で言えば、 スタイルの書き順を、 style3{ ▲▲▲ } style2{ ▲▲▲ } style4{ ▲▲▲ } のように順番を変えて記述した場合です。 この問題についてネット上で色々と調べたのですが、解決に至りませんでした。 リンクのスタイルなど、書き順が重要なものがあるということは知っているのですが、本件とはまた別の話だと思っています。 質問の記載方法に不備がありましたら、適宜補足をさせて頂きます。 以上、どなたか回答をよろしくお願い致します。
- 締切済み
- HTML
- HPの文字の大きさを変えるCSSがうまくいきません
ネット上によく出ているjsやcssを利用した文字サイズを変える方法を、ソースを取り込んでみるのですががうまくできません。 初心者なので、かわかり易く教えていただると助かります。 尚、styleswitcher.jsはダウンロード済です。 ソースは、 <!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"> <link rel="stylesheet" type="text/css" href="style1.css" title="style1"> <link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2"> <link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3"> <script type="text/javascript" src="styleswitcher.js"></script> <style type="text/css"> style1.css body {font-size: 100%;} style2.css body {font-size: 80%;} style3.css body {font-size: 120%;} </style> <title></title> </head> <body> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style2'); return false;">サイズ小</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style1'); return false;">サイズ中</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style3'); return false;">サイズ大</a> <br> <br> テスト<br> </body> </html> よろしくお願いいたします。
- ベストアンサー
- HTML
- yahooジオシティーズでのCSS読み込ませ方法
こんにちは。 ジオシティーズでHP作成を試みていたのですが、style.cssを作ってジオシティーズの"EZ-アップローダー”をつかってアップしてみたところ、スタイルがファイルに反映されません。 CSSを読み込ませる特殊な方法でもあるのでしょうか? 念のためヘッダは、 <html lang="ja"> <head> <meta http-equiv="Content-style-Type" content="text/html"; charset=euc-jp> <title>:::style-test:::</title> <link rel="stylesheet"type="text/css href="style.css"media="all"> </head> です。 お分かりの方いましたら、ご教授ください。 ちなみに当方、HP作成の初心者です。
- ベストアンサー
- ホームページ作成ソフト
- DS-360Wのスキャナーが止まらない現象について解決方法をご紹介します。
- DS-360Wのスキャナーが強制終了できずに動き続ける問題が発生しています。
- DS-360Wのスキャナーが青く光りながら紙を読み取らずに動き続ける現象にお困りの方への対処方法をご紹介します。
お礼
floatの枠組みが落っこちて見た目が悪くなりましたｗ リンク切れのリスクは、大きいですがhead内に書くのも... 悩みどころです。 ありがとうございました。