人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSについて質問です。

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

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

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

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

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

●質問者: aiomock
●カテゴリ:コンピュータ インターネット
✍キーワード:CSS HTML LINK コード リンク
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● kaz
●23ポイント

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

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

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


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

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

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


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

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

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

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

◎質問者からの返答

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


2 ● HowManyFiles
●23ポイント ベストアンサー

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を作り、ファイル毎に必要に応じて読み込ませています。

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

◎質問者からの返答

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


3 ● km1967
●22ポイント

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


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

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


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

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

◎質問者からの返答

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


4 ● ヨネちゃん
●22ポイント

印刷用のスタイルシート

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

や、

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

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

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

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ