- 締切済み
スタイルシートに関して教えてください！本当に困っています！
超初心者で悪いのですが、スタイルシートの記述方法がよく分かりません。確か記述方法は３つあると思うのですが、ＣＳＳファイルを利用して記述する方法が分からない(できない)のです。ここからは実際に自分が今使っているホームページ作成サイト(初心者)に書かれていて理解できない(実際にやってみたがうまくいかない)所をここに書きます。 ３、ＣＳＳファイル利用により記述する方法 テキストエディターで”スタイルを適用する対象名 { ～ }”として記述し、 ファイル保存するときに、拡張子が”.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> 見ても分かるとおり、タイトルの部分がないのです。 タイトルがなくても良いのですか？ あと、このＨＴＭＬデータを.ＣＳＳファイルと同じフォルダ内に作成するという意味が分かりません。 本当に超初心者で悪いのですが、本当に困っています。誰か分かりやすく教えてくれる方はいないでしょうか？お願いします。
- みんなの回答 （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"と括る。
補足
＞別々のファイルで作成するということはどこのどのファイルを見るということがわからなければ見つけることができないからです。 いや、そういうことではなくて、言葉の意味自体は分かるんですよ。 ただ、それはどのようにするのかがまったく分からないのです。 何回かいろんな方法で試してみたのですが、やはり分からない(できない)です。 ここに関して詳しく教えてくれませんか？ これが分からなくて(できなくて)困ってます。