• 締切済み
  • すぐに回答を!

スタイルシートに関して教えてください!本当に困っています!

超初心者で悪いのですが、スタイルシートの記述方法がよく分かりません。確か記述方法は3つあると思うのですが、CSSファイルを利用して記述する方法が分からない(できない)のです。ここからは実際に自分が今使っているホームページ作成サイト(初心者)に書かれていて理解できない(実際にやってみたがうまくいかない)所をここに書きます。 3、CSSファイル利用により記述する方法 テキストエディターで”スタイルを適用する対象名 { ~ }”として記述し、 ファイル保存するときに、拡張子が”.css”というCSSファイルを作ります。 そして、HTMLファイル内にはCSSファイルを参照しなさいという指示である、<LINK href="CSSファイル名.css" type="text/css" rel=stylesheet> をヘッダー部分に記述します。 << CSSファイルデータ例(下記のデータだけを記述して.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 まず、3に書いてあるとおりにCSSファイルを作成しました。 次からがよく分からないのです。3に書いてあるとおりにHTMLファイルを作成しようと思ったのですが、なぜか、ホームページの基本構造ではないのです。 こういう事です   ↓ <html> <head> <LINK href="style.css" type="text/css" rel=stylesheet> </head> <body> <p>スタイルシート</p> </body> </html> 見ても分かるとおり、タイトルの部分がないのです。 タイトルがなくても良いのですか? あと、このHTMLデータを.CSSファイルと同じフォルダ内に作成するという意味が分かりません。 本当に超初心者で悪いのですが、本当に困っています。誰か分かりやすく教えてくれる方はいないでしょうか?お願いします。

共感・応援の気持ちを伝えよう!

  • 回答数7
  • 閲覧数330
  • ありがとう数0

みんなの回答

  • 回答No.7

> いや、そういうことではなくて、言葉の意味自体は分かるんですよ。 > ただ、それはどのようにするのかがまったく分からないのです。 > 何回かいろんな方法で試してみたのですが、やはり分からない(できない)です。 > ここに関して詳しく教えてくれませんか? > これが分からなくて(できなくて)困ってます。 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 「../」で上の階層に行き、フォルダ名を記述すると対象のフォルダ内にといった形で参照先を特定します。

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • スタイルシート2

    1.スタイルシートで、外部スタイルシートがありますが これはそんなに使い勝手がよいでしょうか? <link rel="stylesheet" type="text/css" href="style.css"> と記述する上で、これはルールですからしょうがないでしょうが、<link rel="stylesheet" type="text/css" とここで、stylesheetを指定していて、さらにtext/css" でも、”スタイルシート”ですよ!! といっているのですから、最後のhref"URL"後のstyle.css の記述は無駄になるような(くどい^^)気もします。 これは、しょうがないですよねー。 個人で使うなら、HTMLで充分なような・・ あと、埋め込みスタイルでよういような・・ 2.さらに、スタイルシートはたしかに軽くなりますが、 記述が面倒で、フルスペル(省略できない)。 HTMLでは、<Li></LI>や、<tr></tr>で 表示できますが、こちらはすべて書かなくてはならないので便利とはいえ、つかいやすいでしょうか^^ リンクできるのは、見やすく便利ですが・・・

  • スタイルシートの設定

    スタイルシートをリンク設定したく、文頭に下記の記述をしました。 ++++++++++++++++++++++++++++++++ <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> ++++++++++++++++++++++++++++++++ まったく、反映されません・・ どうして何でしょうか? どなたかお助けください。

  • CSSのスタイルシート適用について

    <link href="/○○○.css" rel="stylesheet" type="text/css"> としてスタイルシートを呼び出した後に、再び <style type="text/css"> と記述してスタイルのいくつかを再設定することはできるんでしょうか?その場合はその宣言したものだけが変わって、LINKされたほうのスタイルシートデータも他の内容は生き残って適用されますか?

    • ベストアンサー
    • HTML
  • 回答No.6

> いや、そういうことではなくて、言葉の意味自体は分かるんですよ。 > ただ、それはどのようにするのかがまったく分からないのです。 > 何回かいろんな方法で試してみたのですが、やはり分からない(できない)です。 > ここに関して詳しく教えてくれませんか? > これが分からなくて(できなくて)困ってます。 仰られている意味が良く...?? ファイルの移動方法がわからないということですか? それでしたら対象のファイルを入れたいフォルダに ドラッグ・ドロップするだけですが。 ↑はローカルの話ですが、ネットワーク上の話ですか? それでしたらFTPでファイルを入れたいフォルダを開いて、 そこにアップロードすれば良いと思いますが。 何がどうわからないのか、 何をしてみたけど駄目だったのかを お教え頂きたいです。 以上横槍失礼しました。

共感・感謝の気持ちを伝えよう!

  • 回答No.5
noname#119957

このHTMLデータを.CSSファイルと同じフォルダ内に作成するという意味が分かりません。>> 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フォルダに内におさめる。 ** 以下のようなものは、HTMLの種類により違いますが、 !DOCTYPE宣言や文字コードの指定は本来すべきものです。 (例) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> titleも必要です。細かく言うと必要なものは、まだたくさんありますので勉強してください。

共感・感謝の気持ちを伝えよう!

  • 回答No.4

> あと、このHTMLデータを.CSSファイルと同じフォルダ内に作成するという意味が分かりません。 HTMLやCSSを色々調べながら作成することは素晴らしいことだと思います。 誤り等の指摘は他の回答者さんがしているので、私からはWebページにおける「絶対パス」と「相対パス」を理解するようアドバイスします。 ・絶対パスと相対パス http://masaboo.cside.com/new_html1/ht_67.htm

共感・感謝の気持ちを伝えよう!

  • 回答No.3

>タイトルがなくても良いのですか? タイトルの部分というのは恐らく「<title>たいとる</title> 」のような部分のことと思われますが、こちらはウィンドウの上部にあるタイトルバーに表示させたい文字列を入力する箇所となっておりますが、基本的には省略不可のタグですので記述したほうがHTMLの規約に沿っております。 しかし、省略したからといってHTMLが動作せず表示が出来なくなるというものでもありません。 >あと、このHTMLデータを.CSSファイルと同じフォルダ内に作成するという意味が分かりません。 別々のファイルで作成するということはどこのどのファイルを見るということがわからなければ見つけることができないからです。 ><LINK href="style.css" type="text/css" rel=stylesheet> 上記のhrefに記述されている箇所がファイル名になっています。 ファイルの置き場所をHTMLファイルと同じところにcssフォルダを作ってその中にstyle.cssファイルを配置した場合には「href="css/style.css"」 と記述すれば参照することが可能となります。 【ファイル配置簡易図】 □root ├index.html └□css  └style.css ※□はフォルダをあらわしています

共感・感謝の気持ちを伝えよう!

質問者からの補足

>別々のファイルで作成するということはどこのどのファイルを見るということがわからなければ見つけることができないからです。 いや、そういうことではなくて、言葉の意味自体は分かるんですよ。 ただ、それはどのようにするのかがまったく分からないのです。 何回かいろんな方法で試してみたのですが、やはり分からない(できない)です。 ここに関して詳しく教えてくれませんか? これが分からなくて(できなくて)困ってます。

  • 回答No.2

あくまで分かりやすく例としての記述例だと思うので、 タイトルなどは省略してあるのでしょう。 そんなこと言ったらドキュメント宣言やメタ情報とかもないでしょ? htmlとCSSファイルを同じ階層に置かなければならないとう決まりはありません。 あくまでこの記述例に沿った場合の例ですから。 つまり、『LINK href="style.css"と書いたらhtmlと同じ階層に置かなければパスが通らなくなりますよ。』 という意味です。 別階層に置く場合はまた違った記述になります。それだけです。 違う階層に置く場合、例えばhtmlと同じ階層に『CSS』というディレクトリ(フォルダ)を作り、 その中にstyle.cssを入れれば、LINK href="CSS/style.css" ということになります。

共感・感謝の気持ちを伝えよう!

  • 回答No.1
noname#100277

<title>題名</title>は<head>~</head>に記述。 出来たら<title>の前はmeta、</head>の後はlinkを記述すれば整理仕やすいでしょう。 文法上titleは必須。 同じディレクトリ(フォルダ)内に設置。 意味が解りませんか? サイトの初期のディレクトリが「hoge」だとしたら、hogeの中にHTMLとCSSファイルを作成し一緒にアップロード。 rel=stylesheetもrel="stylesheet"と括る。

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • スタイルシート

    こんばんは。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 のリンク部分に下線が出てきます。 どうして消せないのかが分かりません!!! どなたか教えてください!よろしくお願いいたします!

  • CSSで、外部スタイルシートを2つ指定した場合。

    たとえば、 <link href="style.css" rel="stylesheet" type="text/css"> <link href="info.css" rel="stylesheet" type="text/css"> のように2つスタイルシートを指定した場合、同じ内容のスタイルシートを書き込んだ場合どちらが優先されるのでしょうか。

    • ベストアンサー
    • HTML
  • スタイルシートでの文字サイズ指定について

    ホームページの文字表示サイズについての質問です。 私は全てWindows Vistaのメモ帳で作っているのですが、文字サイズを <Font Size="サイズ"> で指定するやり方では、MACで有効ではないと分かり、スタイルシートの外部から引き出すやり方で、まず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"> を挿入するやり方がどこかおかしいのでしょうか。 または、文字サイズの指定のやり方が、他にもあるのでしょうか。お手数かと思いますが、どうかお助けください。

  • スタイルシートのフォント指定

    他の人が作成した外部スタイルシートをベースにしてホームページを作っています。スタイルシートと同じ階層、またはその1つしたまではちゃんと指定通り表示されるのですが、のフォルダから2つしたの階層になると文字の大きさがそれ以外の所と違うサイズになります。まったく外部スタイルシートを読んでいないわけでもないようなのですが、、、。分かりません。 どなたか分かる方、どうかよろしくお願いします。 <link href="../../css/link.css" rel="stylesheet" type="text/css"> <noscript> <link href="../../css/winie.css" rel="stylesheet" type="text/css"> </noscript>

  • スタイルシートのリンクをはる時・・・

    <link href="css/common.css" rel="stylesheet" type="text/css">と <link href="/css/common.css" rel="stylesheet" type="text/css">の違いを教えてください。

  • ブラウザの解像度横幅1280の時スタイルシートを記述したいのですが

    記述が間違ってると思われうまくいきません。 どなたか間違ってるところを指摘してくださいませ。。 初心者ですお願い致します。 <html> <head> <title>モニタサイズに合わせてウィンドウサイズを変更する</title> <script Language="JavaScript"><!-- w = screen.width; moveTo(0,0); if (w == 1280) { document.write ("<link rel=stylesheet href="'+ a.css +'" type="text/css">"); } else if () { document.write("<link rel=stylesheet href="'+ b.css +'" type="text/css">"); } // --></script> </head> <body> </body> </html> なおa.cssには、背景黒くしてます。

  • 外部スタイルシートが読み込めない

    こんにちは。 外部スタイルシートが読み込めず 困っています。 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
  • CGIの外部スタイルシート

    お世話になっております。 CGIをIFRAMEの中にいれたところ、外部スタイルシートが反映されなくなってしまいました。 色々と書き換えて試してみましたが、反応がありません。 どのような記述を入れれば、反応するようになるのでしょうか。 index(ここにIFRAMEがあります。)  | cgi-binの中にcgiとフォルダー(style.cssが入ってます。) CGIのスタイルシートの指定は下記のようになってます。 print "<title>$title</title><link rel=\"stylesheet\" type=\"text/css\" href=\"$base/style.css\"></head>\n"; スタイルシートは a { text-decoration:none; } a:hover {color:#ff0000} body,table { font-size: 10pt; } 漠然とした質問の方法ですみません。 宜しくお願いします。

    • 締切済み
    • CGI
  • 外部スタイルシートは分ける?

    外部スタイルシートを分けるのかそれともまとめるのか? もしくは分けるべきなのかまとめるべきなのかがわかりません。 index を含む全ページに共通の class 指定があれば、1つの外部でいいですが、 各ページ固有の class 指定があった場合これは分けたほうがいいでしょうか? つまり、 <link href="main.css" rel="stylesheet" type="text/css"> と全ページに置き、全ての指定をここに入れるのか、それとも <link href="main.css" rel="stylesheet" type="text/css"> <link href="a.css" rel="stylesheet" type="text/css"> として共通の指定と、各ページ固有の指定は分けたほうがいいのか、 そのあたりがわからなくて困ってます。 前者だと1つファイルでいいとは思いますが、長くなってしまいますし、 ページによっては必要ない部分まで読み込むことになります。 多分一長一短で好み次第ということにはなるかと思いますが、 実際にどちらの方法でやっていて便利だという経験をお聞かせいただければ、 大変ありがたく思います。よろしくお願いします。

  • HP作成 スタイルシート

    ビルダーを使ってHPを作成しています。そこで、ページの背景の上だけにgif画像を指定したくスタイルシートを追加してみたのですがうまくなりません。ビルダーのHTMLに追加しているのですが追加する場所を間違えているような気がします。ビルダーで背景色を#cc0000設定しています。 <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY { background-image: url("image/gurad1.gif"); background-repeat: repeat-x } --> </STYLE> <LINK rel="stylesheet" href="image/table.css" type="text/css" id="_HPB_TABLE_CSS_ID_"> </HEAD> <BODY bgcolor="#cc0000" link="#ffffff" alink="#009900">