CSSについて質問です。

Question

aiomock

269

267もっと見る

90pt

コンピュータインターネット

CSSについて質問です。

現在CSSについて興味があります。

http://aiomock2008.kage-tora.com/link.html

上記のページではリンクが３つあり、これをCSSで保存し
外部からHTMLへ読み込みをしたいと考えています。
自分で先ほどのリンク（http://aiomock2008.kage-tora.com/link.html）のコードをlink.cssで保存して
<link rel="stylesheet" type="text/css" href="link.css">
で呼び込みをしてみたのですが上手く表示されず困っております。
大変お手数をおかけしますが詳しい方おりましたらご回答いただければと考えております。

またCSSについて初心者なのですが普段よくCSSを使用される方はどのように使用されていますか？
ページのレイアウトや繰り返しページのパーツを使用出来る事に強みがあるような気がするのですが、、。
実践での色々な使用方法がありましたら教えていただければと思います。

お手数をおかけしますがよろしくお願いいたします。

回答の条件

1人2回まで

登録：2010/02/04 18:05:19
終了：2010/02/09 23:07:19

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

No.1

kaz200422010/02/04 19:19:37

23pt

外部スタイルシートの呼び出し自体は、質問にあるコードで問題ありません。

（XHTML の場合最後が「 />」になりますが、呼び出しの可否には関係ありません）

この場合、まずチェックすべきは呼び出すファイルが正しい名前で、正しい位置にあるかです。

HTML と同じ場所に、正しい名前でファイルが存在しているでしょうか。

タイプミスの可能性もあるため、ファイル名をコピー＆ペーストすることをおすすめします。

それでも駄目な場合、CSS が正しく保存されているか、中身をチェックしてください。

CSS を練習・使用する際のポイントは、CSS より先に HTML の基本をおさえることです。

シンプルかつ意味に沿った HTML をつくり、外観のほぼ全ては CSS で整える。

これを念頭に置くと、CSS でやることの範囲が広いため大変ですが、

「標準に沿った HTML / CSS の習熟」「ブラウザの違いに強いコーディング」等が身に付くのでおすすめです。

ご回答ありがとうございます。

2010/02/06 17:50:34

No.3

km1967541402010/02/04 22:28:00

22pt

ご質問の意味がよく分かりません。

そもそもご質問のページはhtmlで書かれていますから、cssで呼び出そうということは無理です。

また、リンク先のページであるYahoo!JAPANもまたhtmlで書かれていますから、cssで呼び出そうということはできません。

CSSの基礎としては下記サイトがオススメです。

http://www.tohoho-web.com/css/basic.htm

ご回答ありがとうございます。

2010/02/06 17:52:39

No.4

ヨネちゃん813942010/02/07 02:44:26

22pt

印刷用のスタイルシート

http://web.okanos.com/css/css_introduction/incorporates.shtm

や、

携帯電話用のスタイルシート

http://www.marguerite.jp/Nihongo/WWW/Mobile/CSS.html

を作り、多数のHTMLをユーザの用途に合わせたデザインに出来るところが非常に便利だと思います。

ご回答ありがとうございます。

2010/02/08 21:39:31

aiomock 2010/02/04 18:06:55

link.cssは以下のようなコードです。

<html>
<head>

</head>

<body>

<link rel="stylesheet" type="text/css" href="link.css">

</body>
</html>
aiomock 2010/02/04 18:11:27

HTMLとCSSを組み合わせてフレキシブルなページを作成するのが狙いです。
HTMLとｃｓｓの組み合わせ自体はそもそも可能なのでしょうか？
rouge_2008 2010/02/04 18:49:09

CSSはHTMLの見た目を変更します。
フォントの色・サイズ・太さ、ボックスの幅・位置・枠の色・枠の太さ・背景色等・・・
ページのレイアウト変更には使用できますが、パーツの繰り返し使用といった事は出来ません。
「link.html」を「link.css」で保存して、どのような事を実現したいと思ったのですか？

CSSファイルの中身は、通常以下のような物です。

/* bodyタグに対する指定 */
body {
color: brown; /* フォントの色を茶色に指定 */
font-size: 20px; /* フォントサイズを20pxに指定 */
}

/* idをboxAにしたdivタグに対する指定 */
div#boxA {
width: 500px; /* ボックスの幅を500pxに指定 */
padding: 5px 10px; /* ボックスの内側の空白を上下5px、左右10pxに指定 */
}
kaz 2010/02/04 19:25:13

コメントの補足を読まずに答えを書き込んでしまいました。
コメントの内容に間違いが無ければ、
aiomock さんが保存されたファイルは、CSS ではなく HTML です。

例にあるページの CSS を練習のために呼び出したいのなら、
保存するのは以下のアドレスのファイルです。
http://img.shinobi.jp/tadaima/tdftad.css
rouge_2008 2010/02/04 19:55:25

kazさん

そのCSSファイルは、レンタルスペース提供の「shinobi.jp」で表示している広告用のCSSのようです。

aiomockさん

HP作成には何というソフトを使用していますか？
パーツの繰り返し使用でしたら、もしあればですが、テンプレート機能を使用すると良さそうです。
CSSは一つの記述で、複数の同じ要素(HTMLタグ)あるいは同じクラス名を指定した複数の要素などに同じ見た目の効果を適用できますが、先ほどのコメントに書いた通りパーツの繰り返し使用は出来ません。

※少し書き直して再度コメントしています。
kaz 2010/02/05 07:35:01

> rouge_2008 さん
> そのCSSファイルは、レンタルスペース提供の...

それは理解しています。
例示されたページは1つしか無いので、そこで使用されている CSS として挙げました。
（ul リストを横並びにし、class に従ってアイコンをつける効果があるので、
　それを試してみたかったのではないでしょうか）

aiomock さんの言う繰り返し、というのは例示ページの CSS にもあるような
「単純な ul リストをある程度のデザインに整形する」といった効果を、
簡単に使い回せるという事のような気がします。
rouge_2008 2010/02/05 14:22:07

kazさん

『上記のページではリンクが３つあり、これをCSSで保存し
外部からHTMLへ読み込みをしたいと考えています。』

質問文に上記のようにありますので、やはり、リンク先のリンクが3つ記述されたHTMLのコードを、外部から読み込んで使いまわしたいという意味だと思います。
『ページのレイアウトや繰り返しパーツを使用出来る事』とは書いていますが、リストやその他のHTML要素に効果を適用したいとは書いていませんので、やはりメニューやリンクなどの文章をパーツとして繰り返し利用したいという希望ではないかと思いますが・・・

とりあえず、aiomockさんのお返事を待ちたいと思います。
aki1960 2010/02/06 02:30:16

rouge_2008さんと同じく、

「複数のページで使いまわしたいhtmlを、cssとして読み込んで使いたい」と読み取れますね。
そうすると、質問文の意味不明な部分のつじつまがあうような。
つまり、通常ムリヤリやるなら、例えばexecでcgi介してhtmlを挿入するか、iframeで読み込むかのような、テンプレート的な配置のコーディングを省略記述したい、と。
(まぁ、普通は毎回同じ内容返すのにexecなんかは使いませんけど、iframeも今後はどうでしょうね・・・蛇足！)

そうなると、質問主さんがcssを完全に勘違いしていると思われますので、やりたいことと方法が違ってます。という回答かなぁ。

cssを使った実践という意味では、ウラ技的な使い方ですけど、
私は、htmlに２つのcssを指定して(htmlからの相対指定で)、アップロードするサーバによってcssを切り替えるてのはよくやりますね。
サーバAには、StyleA.cssしかなく、サーバBには、StyleB.cssしかない、という状態にしておくと、同じhtmlで全く異なった見た目が実現できるので。
aiomock 2010/02/06 17:57:33

皆さんご回答ありがとうございます。
私がしたいこととしてはメニューの使いまわしが出来るようにしたくてそれがCSSだったら実現できるのではないかと思い質問させていただきました。
しかし回答を見る限りですと無理そうですね。。
①execでcgi介してhtmlを挿入する
②iframe
これで無理やり！？出来るような感じですが
少し検討してみたいと思います。
ご回答ありがとうございます。。

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

HowManyFiles · Accepted Answer · 2010-02-04T19:57:22+09:00

http://aiomock2008.kage-tora.com/link.html に存在するのはHTMLドキュメントで、

CSSではありません。なので、CSSとして読み込むことは不可能です。また、CSSはHTMLの要素(html p li など)をどのように表示すべきかを指定するための物ですので、ページそのものやコンテンツの一部を生成することはできません。

あなたがやりたいことがちょっとわからないのですが、仮に『いくつかのページに共通して存在する部分を一々書かずに何らかの方法で使い回ししたい』というような具合でしたら、HTML や CSS にはそのような機能がないため、別の方法を考える必要があります。

次に、HTMLとCSSの使用例ということで、ひとまず簡単なものを。

以下のコードを test.html として保存してください。

<html>
  <head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="test.css" />
  </head>
  <body>
    <p class="foo">html test.</p>
    <p class="bar">この中身は青い文字で表示され、さらになんか枠がついているはずです。</p>
    <p class="baz">ここは灰色の背景で表示されるはずです。</p>
	<p>ちょっと工夫すると、<a href="http://q.hatena.ne.jp">リンク</a>をボタンみたいな見た目にすることもできますよ。</p>
  </body>
</html>

次に、以下のコードを test.css として保存してください。

p.foo
{
  color: #ff0000;
}

p.bar
{
  color: #0000ff;
  border: 1px solid #000000;
}

p.baz
{
  background-color: #aaaaaa;
}

a:link
{
  background-color: #dddddd;
  text-decoration: none!important;
  color: #000000;
  font-weight: bold;
  font-size: 0.8em;
  padding: 2px;
  border-top:    1px solid #000000;
  border-right:  2px solid #000000;
  border-bottom: 2px solid #000000;
  border-left:   1px solid #000000;
  border-radius: 0.3em;
  -moz-border-radius: 0.3em;
}

a:active
{
  border-top:    2px solid #000000;
  border-right:  1px solid #000000;
  border-bottom: 1px solid #000000;
  border-left:   2px solid #000000;
}

test.html と test.css を同じフォルダに置いてブラウザから test.html を閲覧すると、CSS によって文字の色や背景色、縁取りなどを変更している様子がわかると思います。このように、HTMLの特定の要素や、特定のclass (もしくは id)属性を持つ要素に対して『色はこんな具合で、背景色はこんな具合で』と、表示の仕方を教えることができるわけです。

CSS でどんな事ができるかという点に関しては、『たかだかページの装飾程度しかできません』とも言えますし、『使い方次第では高度なデザインを実現可能です』とも言えます。

実際にウェブサイトを構築する際には、私は以下のように複数のCSSを作り、ファイル毎に必要に応じて読み込ませています。

すべてのHTMLに対して適用したい、基本的な事が書かれた物
- (文字の大きさやページの背景画像など、すべてのページで共通すること)
特定のページ、もしくは特定のカテゴリのHTMLだけに対して適用したい、例外的なことが書かれた物

CSS による表現は多種多様で、それだけで書籍が何冊も出ていたり、CSS コーダという職業が成立したりする程なので、CSSのすべてを解説することはできないのですが、参考になりそうなリンクをいくつか列挙しておきます。

基本的なことを解説しているサイト
- 優しいホームページ入門
- スタイルシート倶楽部
CSSを使った素敵なサイトを紹介しているサイト
- CSSでイケてるデザインサイトリンク集2
- （　´∀｀）＜ CSSでイケてるデザインサイトリンク集・分室

HowManyFiles · Accepted Answer · 2010-02-04T19:57:22+09:00

http://aiomock2008.kage-tora.com/link.html に存在するのはHTMLドキュメントで、

CSSではありません。なので、CSSとして読み込むことは不可能です。また、CSSはHTMLの要素(html p li など)をどのように表示すべきかを指定するための物ですので、ページそのものやコンテンツの一部を生成することはできません。

あなたがやりたいことがちょっとわからないのですが、仮に『いくつかのページに共通して存在する部分を一々書かずに何らかの方法で使い回ししたい』というような具合でしたら、HTML や CSS にはそのような機能がないため、別の方法を考える必要があります。

次に、HTMLとCSSの使用例ということで、ひとまず簡単なものを。

以下のコードを test.html として保存してください。

<html>
  <head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="test.css" />
  </head>
  <body>
    <p class="foo">html test.</p>
    <p class="bar">この中身は青い文字で表示され、さらになんか枠がついているはずです。</p>
    <p class="baz">ここは灰色の背景で表示されるはずです。</p>
	<p>ちょっと工夫すると、<a href="http://q.hatena.ne.jp">リンク</a>をボタンみたいな見た目にすることもできますよ。</p>
  </body>
</html>

次に、以下のコードを test.css として保存してください。

p.foo
{
  color: #ff0000;
}

p.bar
{
  color: #0000ff;
  border: 1px solid #000000;
}

p.baz
{
  background-color: #aaaaaa;
}

a:link
{
  background-color: #dddddd;
  text-decoration: none!important;
  color: #000000;
  font-weight: bold;
  font-size: 0.8em;
  padding: 2px;
  border-top:    1px solid #000000;
  border-right:  2px solid #000000;
  border-bottom: 2px solid #000000;
  border-left:   1px solid #000000;
  border-radius: 0.3em;
  -moz-border-radius: 0.3em;
}

a:active
{
  border-top:    2px solid #000000;
  border-right:  1px solid #000000;
  border-bottom: 1px solid #000000;
  border-left:   2px solid #000000;
}

test.html と test.css を同じフォルダに置いてブラウザから test.html を閲覧すると、CSS によって文字の色や背景色、縁取りなどを変更している様子がわかると思います。このように、HTMLの特定の要素や、特定のclass (もしくは id)属性を持つ要素に対して『色はこんな具合で、背景色はこんな具合で』と、表示の仕方を教えることができるわけです。

CSS でどんな事ができるかという点に関しては、『たかだかページの装飾程度しかできません』とも言えますし、『使い方次第では高度なデザインを実現可能です』とも言えます。

実際にウェブサイトを構築する際には、私は以下のように複数のCSSを作り、ファイル毎に必要に応じて読み込ませています。

すべてのHTMLに対して適用したい、基本的な事が書かれた物
- (文字の大きさやページの背景画像など、すべてのページで共通すること)
特定のページ、もしくは特定のカテゴリのHTMLだけに対して適用したい、例外的なことが書かれた物

CSS による表現は多種多様で、それだけで書籍が何冊も出ていたり、CSS コーダという職業が成立したりする程なので、CSSのすべてを解説することはできないのですが、参考になりそうなリンクをいくつか列挙しておきます。

基本的なことを解説しているサイト
- 優しいホームページ入門
- スタイルシート倶楽部
CSSを使った素敵なサイトを紹介しているサイト
- CSSでイケてるデザインサイトリンク集2
- （　´∀｀）＜ CSSでイケてるデザインサイトリンク集・分室

CSSについて質問です。

ベストアンサー

HowManyFiles2472010/02/04 19:57:22

その他の回答（3件）

kaz200422010/02/04 19:19:37

HowManyFiles2472010/02/04 19:57:22ここでベストアンサー

km1967541402010/02/04 22:28:00

ヨネちゃん813942010/02/07 02:44:26

コメント（9件)

この質問への反応（ブックマークコメント）