- 締切済み
スタイルシートに関して教えてください！本当に困っています！
超初心者で悪いのですが、スタイルシートの記述方法がよく分かりません。確か記述方法は３つあると思うのですが、ＣＳＳファイルを利用して記述する方法が分からない(できない)のです。ここからは実際に自分が今使っているホームページ作成サイト(初心者)に書かれていて理解できない(実際にやってみたがうまくいかない)所をここに書きます。 ３、ＣＳＳファイル利用により記述する方法 テキストエディターで”スタイルを適用する対象名 { ～ }”として記述し、 ファイル保存するときに、拡張子が”.css”というＣＳＳファイルを作ります。 そして、ＨＴＭＬファイル内にはＣＳＳファイルを参照しなさいという指示である、<LINK href="ＣＳＳファイル名.css" type="text/css" rel=stylesheet> をヘッダー部分に記述します。 ＜＜ ＣＳＳファイルデータ例（下記のデータだけを記述して.cssファイルを作成 ＞＞ ＜ ファイル名＝style.css ＞ p { color:blue } ＜＜ HTMLデータ例（.cssファイルと同じフォルダ内に作成する） ＞＞ <html> <head> <LINK href="style.css" type="text/css" rel=stylesheet> </head> <body> <p>スタイルシート</p> </body> </html> ＜＜ ブラウザ表示 ＞＞ スタイルシート 分かりずらかったらここを参照してください。(たぶん削除されると思うが) http://homepage-how.com/hp/hp-css2.html まず、３に書いてあるとおりにＣＳＳファイルを作成しました。 次からがよく分からないのです。３に書いてあるとおりにＨＴＭＬファイルを作成しようと思ったのですが、なぜか、ホームページの基本構造ではないのです。 こういう事です ↓ <html> <head> <LINK href="style.css" type="text/css" rel=stylesheet> </head> <body> <p>スタイルシート</p> </body> </html> 見ても分かるとおり、タイトルの部分がないのです。 タイトルがなくても良いのですか？ あと、このＨＴＭＬデータを.ＣＳＳファイルと同じフォルダ内に作成するという意味が分かりません。 本当に超初心者で悪いのですが、本当に困っています。誰か分かりやすく教えてくれる方はいないでしょうか？お願いします。
- youthdish
- お礼率23% (129/556)
- HTML
- 回答数7
- ありがとう数0
- みんなの回答 （7）
- 専門家の回答
みんなの回答
- green_eye
- ベストアンサー率0% (0/0)
> いや、そういうことではなくて、言葉の意味自体は分かるんですよ。 > ただ、それはどのようにするのかがまったく分からないのです。 > 何回かいろんな方法で試してみたのですが、やはり分からない(できない)です。 > ここに関して詳しく教えてくれませんか？ > これが分からなくて(できなくて)困ってます。 x_jouet_xさんが仰られているように絶対パスと相対パスの理解が出来ると解決できるかと思います。 youthdishさんがどういったファイルの配置をしているかわかると説明もしやすいのですが、参考までにHTMLサーバにファイルを配置した時の例で説明します。 ■絶対パス cssファイルをサーバのrootフォルダにに置くと「http://xxxx.xxx.xx/style.css」の形でcssファイルが参照できます。 もしrootフォルダの中にcssというフォルダを作成してファイルを配置すると「http://xxxx.xxx.xx/css/style.css」で表示が出来るはずです。 上記の「」内の記述を<LINK href="http://xxxx.xxx.xx/css/style.css" type="text/css" rel=stylesheet>と言った形で記述するのが絶対パスとなります ■相対パス HTMLファイルからみたcssファイルの配置先を記述する方法です。 【ファイル配置簡易図】 □root ├style1.css ├□main │├style2.css │└index.html └□css └style3.css ※□はフォルダをあらわしています 上記のファイル配置簡易図の様にファイルが存在するとしてindex.htmlよりcssファイルを相対参照する際のherfの記述方法は下記になります。 (1)../style1.css (2)style2.css (3)../css/style3.css 「../」で上の階層に行き、フォルダ名を記述すると対象のフォルダ内にといった形で参照先を特定します。
- reverie013
- ベストアンサー率18% (26/143)
> いや、そういうことではなくて、言葉の意味自体は分かるんですよ。 > ただ、それはどのようにするのかがまったく分からないのです。 > 何回かいろんな方法で試してみたのですが、やはり分からない(できない)です。 > ここに関して詳しく教えてくれませんか？ > これが分からなくて(できなくて)困ってます。 仰られている意味が良く...？？ ファイルの移動方法がわからないということですか？ それでしたら対象のファイルを入れたいフォルダに ドラッグ・ドロップするだけですが。 ↑はローカルの話ですが、ネットワーク上の話ですか？ それでしたらFTPでファイルを入れたいフォルダを開いて、 そこにアップロードすれば良いと思いますが。 何がどうわからないのか、 何をしてみたけど駄目だったのかを お教え頂きたいです。 以上横槍失礼しました。
このＨＴＭＬデータを.ＣＳＳファイルと同じフォルダ内に作成するという意味が分かりません。＞＞ index.htmlが次のものとして <html> <head> <LINK href="style.css" type="text/css" rel=stylesheet> </head> <body> <p>スタイルシート</p> </body> </html> <LINK href="style.css" type="text/css" rel=stylesheet>ならば、 index.htmlとstyle.cssは同じフォルダ内におさめる。 <LINK href="css/style.css" type="text/css" rel=stylesheet>ならば、 style.cssはindex.htmlと同じフォルダのcssフォルダに内におさめる。 ** 以下のようなものは、ＨＴＭＬの種類により違いますが、 !DOCTYPE宣言や文字コードの指定は本来すべきものです。 （例） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> titleも必要です。細かく言うと必要なものは、まだたくさんありますので勉強してください。
- x_jouet_x
- ベストアンサー率68% (162/236)
> あと、このＨＴＭＬデータを.ＣＳＳファイルと同じフォルダ内に作成するという意味が分かりません。 HTMLやCSSを色々調べながら作成することは素晴らしいことだと思います。 誤り等の指摘は他の回答者さんがしているので、私からはWebページにおける「絶対パス」と「相対パス」を理解するようアドバイスします。 ・絶対パスと相対パス http://masaboo.cside.com/new_html1/ht_67.htm
- green_eye
- ベストアンサー率0% (0/0)
＞タイトルがなくても良いのですか？ タイトルの部分というのは恐らく「<title>たいとる</title> 」のような部分のことと思われますが、こちらはウィンドウの上部にあるタイトルバーに表示させたい文字列を入力する箇所となっておりますが、基本的には省略不可のタグですので記述したほうがHTMLの規約に沿っております。 しかし、省略したからといってHTMLが動作せず表示が出来なくなるというものでもありません。 ＞あと、このＨＴＭＬデータを.ＣＳＳファイルと同じフォルダ内に作成するという意味が分かりません。 別々のファイルで作成するということはどこのどのファイルを見るということがわからなければ見つけることができないからです。 ＞<LINK href="style.css" type="text/css" rel=stylesheet> 上記のhrefに記述されている箇所がファイル名になっています。 ファイルの置き場所をHTMLファイルと同じところにcssフォルダを作ってその中にstyle.cssファイルを配置した場合には「href="css/style.css"」 と記述すれば参照することが可能となります。 【ファイル配置簡易図】 □root ├index.html └□css └style.css ※□はフォルダをあらわしています
- torayoshi
- ベストアンサー率62% (910/1449)
あくまで分かりやすく例としての記述例だと思うので、 タイトルなどは省略してあるのでしょう。 そんなこと言ったらドキュメント宣言やメタ情報とかもないでしょ？ htmlとCSSファイルを同じ階層に置かなければならないとう決まりはありません。 あくまでこの記述例に沿った場合の例ですから。 つまり、『LINK href="style.css"と書いたらhtmlと同じ階層に置かなければパスが通らなくなりますよ。』 という意味です。 別階層に置く場合はまた違った記述になります。それだけです。 違う階層に置く場合、例えばhtmlと同じ階層に『CSS』というディレクトリ(フォルダ)を作り、 その中にstyle.cssを入れれば、LINK href="CSS/style.css" ということになります。
<title>題名</title>は<head>～</head>に記述。 出来たら<title>の前はmeta、</head>の後はlinkを記述すれば整理仕やすいでしょう。 文法上titleは必須。 同じディレクトリ（フォルダ）内に設置。 意味が解りませんか？ サイトの初期のディレクトリが「hoge」だとしたら、hogeの中にHTMLとCSSファイルを作成し一緒にアップロード。 rel=stylesheetもrel="stylesheet"と括る。
関連するQ&A
- スタイルシート２
１．スタイルシートで、外部スタイルシートがありますが これはそんなに使い勝手がよいでしょうか？ <link rel="stylesheet" type="text/css" href="style.css"> と記述する上で、これはルールですからしょうがないでしょうが、<link rel="stylesheet" type="text/css" とここで、stylesheetを指定していて、さらにtext/css" でも、”スタイルシート”ですよ！！ といっているのですから、最後のhref"URL"後のstyle.css の記述は無駄になるような（くどい＾＾）気もします。 これは、しょうがないですよねー。 個人で使うなら、HTMLで充分なような・・ あと、埋め込みスタイルでよういような・・ ２．さらに、スタイルシートはたしかに軽くなりますが、 記述が面倒で、フルスペル（省略できない）。 HTMLでは、<Li></LI>や、<tr></tr>で 表示できますが、こちらはすべて書かなくてはならないので便利とはいえ、つかいやすいでしょうか＾＾ リンクできるのは、見やすく便利ですが・・・
- ベストアンサー
- その他（プログラミング・開発）
- スタイルシートの設定
スタイルシートをリンク設定したく、文頭に下記の記述をしました。 ++++++++++++++++++++++++++++++++ <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> ++++++++++++++++++++++++++++++++ まったく、反映されません・・ どうして何でしょうか？ どなたかお助けください。
- 締切済み
- ホームページ作成ソフト
- スタイルシート
こんばんは。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サービス）
- PHPスクリプトの記述内でスタイルシートとリンクさせたいのですが。
サイト作成中フリーのＰＨＰスクリプト内を組み込んでみました。 出力されるＨＴＭＬにスタイルシートを適用させたいと思っているのですがＰＨＰスクリプトの記述に関してはど素人なので、どなたかご教授いただければ幸いです。 echoでＨＴＭＬに書き出すらしいことがわかり echo <head> <link rel="stylesheet" href="rssstyle.css" type="text/css" />; </head> 以上のように書いてみましたがParse errorが出ます。 宜しくお願いいたします。
- ベストアンサー
- PHP
- CSSのスタイルシート適用について
<link href="/○○○.css" rel="stylesheet" type="text/css"> としてスタイルシートを呼び出した後に、再び <style type="text/css"> と記述してスタイルのいくつかを再設定することはできるんでしょうか？その場合はその宣言したものだけが変わって、ＬＩＮＫされたほうのスタイルシートデータも他の内容は生き残って適用されますか？
- ベストアンサー
- HTML
- MacIEだけに読込ませる外部スタイルシート
Band Pass Filterとやらを使って、MacIEだけに読込ませる外部スタイルシートを実現したいのですがうまくいきません。どこのが悪いのでしょうか。 下記の記述が間違っていなければ、IE6やFirefoxでは文字は赤に、MacIE5.xでは文字は黒になるはずなんですが… ご教授ください。 【html】 <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link href="main.css" rel="stylesheet" type="text/css" /> </head> <body> <p>あいうえお</p> </body> </html> 【main.css】 p{color:#FF0000;} /*\*//*/@import ("ie5mac.css");/**/ 【ie5mac.css】 p{color:#000000;}
- ベストアンサー
- HTML
- 外部スタイルシートが読み込めない
こんにちは。 外部スタイルシートが読み込めず 困っています。 HTMLは、 <html> <head> <link rel="stylesheet" href="controlbox2.css" type="text/css"> </head> <body> <div class="modal">syun</div> </body> </html> controlbox2.cssは .modal{ background-color:#fff; padding:10px; border:1px solid #333; } だけです。 もちろん同じディレクトリで あり何度も確認しています。 ブラウザは、IE7です。 ヘッダー部分に スタイルシートを書くと 当然効果があります。 <head> <style type="text/css"> .modal{ background-color:#fff; padding:10px; border:1px solid #333; } </style> </head> 文字コードは、ともに SHIFT_JISで保存しています。 何が悪いのか、 全くわかりません。 何か分かる人がいましたら、 よろしくお願いします。
- ベストアンサー
- HTML
- CSSで、外部スタイルシートを2つ指定した場合。
たとえば、 <link href="style.css" rel="stylesheet" type="text/css"> <link href="info.css" rel="stylesheet" type="text/css"> のように２つスタイルシートを指定した場合、同じ内容のスタイルシートを書き込んだ場合どちらが優先されるのでしょうか。
- ベストアンサー
- HTML
- スタイルシートでの文字サイズ指定について
ホームページの文字表示サイズについての質問です。 私は全てWindows Vistaのメモ帳で作っているのですが、文字サイズを <Font Size="サイズ"> で指定するやり方では、ＭＡＣで有効ではないと分かり、スタイルシートの外部から引き出すやり方で、まずs.cssに、 BODY { font-size: 13px } と書き、index.htmlに <head> <style Type="text/css"> <!-- body,td {line-height:15pt;} --> </style> <link href="s.css" rel="stylesheet" type="text/css"> </head> と打ち込んでみました。 しかし、こうするとMacX10.5では文字化けを起こしてしまいました。 <link href="s.css" rel="stylesheet" type="text/css"> を挿入するやり方がどこかおかしいのでしょうか。 または、文字サイズの指定のやり方が、他にもあるのでしょうか。お手数かと思いますが、どうかお助けください。
- 締切済み
- HTML
- スタイルシートのフォント指定
他の人が作成した外部スタイルシートをベースにしてホームページを作っています。スタイルシートと同じ階層、またはその１つしたまではちゃんと指定通り表示されるのですが、のフォルダから2つしたの階層になると文字の大きさがそれ以外の所と違うサイズになります。まったく外部スタイルシートを読んでいないわけでもないようなのですが、、、。分かりません。 どなたか分かる方、どうかよろしくお願いします。 <link href="../../css/link.css" rel="stylesheet" type="text/css"> <noscript> <link href="../../css/winie.css" rel="stylesheet" type="text/css"> </noscript>
- ベストアンサー
- ホームページ作成ソフト
補足
＞別々のファイルで作成するということはどこのどのファイルを見るということがわからなければ見つけることができないからです。 いや、そういうことではなくて、言葉の意味自体は分かるんですよ。 ただ、それはどのようにするのかがまったく分からないのです。 何回かいろんな方法で試してみたのですが、やはり分からない(できない)です。 ここに関して詳しく教えてくれませんか？ これが分からなくて(できなくて)困ってます。