はじめまして。

htmlとcssを使ってwebサイトを作成しているのですが、ちょっと困っていることがあります。

/------------------------------------------------------/

<div class="sample">
<b>
<a href="http://*****.html" class="sample">*******</a>
<br>
ここに文章が入っています。
</b>
</div>

/------------------------------------------------------/

このような状態のhtmlが存在するのですが、<a>のテキストだけfont-sizeを23px、その下の<br>の次のテキストのfont-sizeを15pxにしたいです。

色々ありましてこのhtmlの状態から書き換えることができません。
何かいい方法がありましたら回答よろしくお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/08/29 18:02:36
  • 終了:2014/08/30 02:59:54
id:ak69187

補足です。
htmlを書き換えることができないのは、外部のサイトからphp使ってhtmlを読み込んで抽出しているからです。(単にどうすればいいかわからない...)
もし、取得した状態にタグなどを追加して書き換えることができるのであればその方法も教えていただけると幸いです。
cssだけで解決できない場合は、phpやjqueryなどでも大丈夫なのでよろしくお願いします。

ベストアンサー

id:corer No.1

Core回答回数3ベストアンサー獲得回数12014/08/29 18:46:02

<html>
<head>

<style>
<!--
body {font-size: 15px;}
a {font-size: 23px;}
-->
</style>

</head>
<body>

<div class="sample">
<b>
<a href="http://*****.html" class="sample">*******</a>
<br>
ここに文章が入っています。
</b>
</div>

</body>
</html>

その他の回答(2件)

id:corer No.1

Core回答回数3ベストアンサー獲得回数12014/08/29 18:46:02ここでベストアンサー

<html>
<head>

<style>
<!--
body {font-size: 15px;}
a {font-size: 23px;}
-->
</style>

</head>
<body>

<div class="sample">
<b>
<a href="http://*****.html" class="sample">*******</a>
<br>
ここに文章が入っています。
</b>
</div>

</body>
</html>

id:a-kuma3 No.2

a-kuma3回答回数4442ベストアンサー獲得回数18252014/08/29 19:09:10

「<br> の次の」というのが、css のセレクタでは実現できないので、こんな風に読み替えました。

  • <div class="sample"> の中にある <a class="sample"> の中は 23px
  • <div class="sample"> の中にある <b> の中は 15px

css にすると、こんな感じ。

DIV.sample A.sample {
    font-size: 23px;
}
DIV.sample B {
    font-size: 15px;
}

<div class="sample"> の中にある HTML が、実際はどんなになってるかで、font-size: 15px を、どう指定するかは、変わってくるとは思いますけれど。

jsFiddle というサイトで試してみたのが、こちら。
http://jsfiddle.net/bb84hek4/
分かりやすいように、色も付けてます。
確認してみてください。

id:jwrekitan No.3

椶櫚回答回数188ベストアンサー獲得回数682014/08/29 19:12:23

例題では親要素にあたるdivと、子要素にあたるaに、どちらもsampleという同じクラス名を与えていますが、このクラス名を変えるだけで別々のスタイルを参照させる事ができます。この意味がわかれば問題は解決するでしょう。



なお、cssのcとはカスケード…と説明すると難しく感じるかもしれませんが、要は上書きの原理なんですね。親要素に与えたスタイルは、子要素にも全て受け継がれます。

例えば、親要素に、A,B,C,D,E、というスタイルを与えたとします。ここで子要素に、Cを上書きするC-2というスタイルだけしか与えなかったとしても、子要素は、A,B,C-2,D,E、というスタイルになるのです。こうした基本をしっかりおさえておくと、少ない定義で数々のバリエーションを生み出すことが可能となります。

だから本当は、bodyを直接定義、またはそれが無理ならばdivを直接定義してしまえば、記述をかなり簡略化できたりしますよ。Coreさんのやり方が丁度そうですね。classを使うのは、それでは間に合わない細かな指定をしたい場合のみでいいのです。

コメントはまだありません

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません