今だけ人気マンガ100円レンタル特集♪

まだCSS初心者ですので宜しくお願いします。

外部CSSに位置指定した「画像」にリンクを貼りたいのですが
いろいろ調べてもその方法がわかりません。
以下のタグにどのようにリンクの指定をすればよいでしょうか?

div#index{
margin-top:5px;
background:url(../img/oribox.gif) no-repeat right bottom;
}

また、HTMLにはどのように記述したらよいかも宜しくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (6件)

・backgroundに表示したい画像ファイル(../img/oribox.gif)のリンクならお書きになった書き方で適正だと思います。

ただしサーバでその場所にファイルが格納されていることが前提。

・アンカー<a></a>をつけたいと言われるなら、実体のあるテキストを置くか透明な画像でも置かない限りbackgroundにアンカーは無理。
    • good
    • 0
この回答へのお礼

ややこしくてすみません。

先に表示した画像をクリックすると別のところへジャンプ!とさせたかったのです。

普通にHTMLで書いたほうが良いのですね。。。
ただその方法だと画像の細かな位置決めで困ってます。。。

お礼日時:2007/02/10 17:53

混乱されるようなら、CSSは下手に使わない方がいいでしょう。


ブラウザによってCSSの解釈に誤差があるので、ブラウザによっては思い通りに表示されない場合もありますよ。
特に最大勢力を誇るWindows版IEはCSSに問題が多々あるので、それに合わせると他のブラウザだとレイアウトが大きくずれる事があります。
理解して使えば、ある程度は防げますが。

既に他の方々が述べられているように、CSSは背景や文字色等の装飾等のデザインをするものなので、全てをCSSで表現する必要はありません。
今まで<FONT>や<B>等で色等を指定していたのや、<table>を表じゃなくてレイアウト目的の升目として利用していたのを、CSSでやると考えて下さい。
尚、段組み等の高度なレイアウトに関しては先に述べたようにブラウザによってズレ等が生じるので、CSSを理解しきれない内は<table>を使った方が安全です。
極端にいれば、文字の装飾とマージン(間隔)設定のみをCSSでやる。

意味のある画像の表示は<img>タグで。単なる背景画像(飾り)ならCSSで。
<img>タグで表示しても、CSSで位置等の微調整は可能です。というかそれがCSSの役目です。CSSは画像を表示するのが役目ではありません。

例えば、CSSで
img {
margin: 5px 20px 5px 10px;
}
とかすれば、画像の周囲の空きを調整出来ます。
    • good
    • 0
この回答へのお礼

遅くなって申し訳御座いません
分かりやすい説明ありがとうございました!
CSSを使ってTABLEタグを消したい、というのもあったのですが
それは無理みたいですね。
ブラウザによって表示しきれない点を踏まえると
CSSの有効活用方法を間違っておりました。
どうもありがとうございました!

お礼日時:2007/03/16 09:46

時々誤解する方がいらっしゃるんですよねー^^;


確かにHTMLにあった多くの機能がCSSへと移行されていますが、それは見栄えを定義する要素のみです。
HTMLの機能が全てCSSに移行されたわけではありません。なんでもCSSで代用するって言うのは便利そうに見えて不便なこと。
リンクやらなにやらCSSにしてしまうとCSSが使えない環境下では何も表示されなくなるのです。

かなり大雑把に言うとHTMLで行うべきは段落分け、改行、リンク、通常の画像埋め込みなど、CSSで行うべきは配色、背景画像、枠のスタイルなどです。

それから、CSSを記述するものは普通、タグなんていいません。
タグに匹敵する一般的かつ広く通用した名称(俗称)は特になかったはずです。
    • good
    • 0
この回答へのお礼

御回答有難う御座います。

なるほど。。。基本はHTMLでCSSは補足と考えればよいのですね^^;
私はCSSで行うものと考えておりました^^;;
ありがとうございました。

お礼日時:2007/02/10 17:48

画像やテキストは画面を作る材料です、cssはそれらをどの様なデザインで表示するかを決める物なので、普通にHTMLで貼り付けるのがよいと思います。

    • good
    • 0
この回答へのお礼

むむ。。。
やっぱりHTMLで楽に書いたほうが良いてことですよね。。。

ありがとうございました^^;

お礼日時:2007/02/10 18:01

何が何でも、画像とかはCSSで表示するようにしなければいけない訳じゃありませんよ。


普通にHTMLで、
<a href="○"><img src="○" alt="○"></a>
でいいのでは。

よく使われる手法だと、
<h1><a href="">見出し</a><h1>
として
h1 {
margin: 0px;
padding:0px;
text-indent: -1000em;
background: url("title.jpg") no-repeat;
}
h1 a{
display: block;
margin: 0px;
padding:0px;
width: 180px;
height: 25px;
text-decoration: none;
}
    • good
    • 0
この回答へのお礼

なるほど。。。

ん~ DIV要素などの中でも同じなのでしょうか?

div#index{
margin-top:5px;
background:url(../img/oribox.gif) no-repeat right bottom;
}
div a{
margin: 0px;
padding:0px;
}

HTMLでは
<div>
<a href=""></a>
</div>

と書けばよいのでしょうか?^^;;
こんがらがってきました。。。

お礼日時:2007/02/10 18:00

cssでリンクをはらせるということはできません。



なぜhtmlでリンクするんじゃいけないのですか??
    • good
    • 0
この回答へのお礼

CSSの範囲が未だに理解できずにいたので。。。
結局基本はHTMLということなのですね?

お礼日時:2007/02/10 17:50

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSで指定した背景画像にリンクエリアを設定する方法。

メインビジュアルとしてCSSで背景画像として指定したものの中にリンクエリアを作って、そこの部分だけにマウスをもってきた時に、リンク先に飛ぶようにしたいのですが、毎回firefox, IE7,IE6でのmargin, padding,の違いに四苦八苦してます。
大抵は、margin-topを違うブラウザ用にpadding-topにして、*htmlや、*:first-child+html等のハックでカバーしてたりするのですが、今回はそれでもうまくいかず、どなたか教えて頂けたらと質問させて頂きました。

以下CSSのソースです。

#main_visual {
background:url(../img/main_visual.jpg) no-repeat;
width:666px;
height:418px;
text-indent:-9999px;
}

#main_visual a{
  display:block;
width:338px;
height:43px;
  position:relative;
top:324px;
left:308px;
}

上のように、666 X 418の画像の中に、
上から324px 左から308pxの位置に大きさ338 X 43のリンクエリアをつくリたいのですが、、上記だと、IE7 IE6ではうまくいくみたいですが、
firefoxとsafariだと、positionが全くきかず左上の位置(top:0 left:0)にリンクエリアがきてしまってます。。

どのようにリンクエリアを指定するのが最もスマートな方法なのでしょうか? 毎回悩んでます。。ちなみに、*:first-child+html このIE7用のハックってまだ使えたりするんでしょうか?^^;

メインビジュアルとしてCSSで背景画像として指定したものの中にリンクエリアを作って、そこの部分だけにマウスをもってきた時に、リンク先に飛ぶようにしたいのですが、毎回firefox, IE7,IE6でのmargin, padding,の違いに四苦八苦してます。
大抵は、margin-topを違うブラウザ用にpadding-topにして、*htmlや、*:first-child+html等のハックでカバーしてたりするのですが、今回はそれでもうまくいかず、どなたか教えて頂けたらと質問させて頂きました。

以下CSSのソースです。

#main_visual {
backgrou...続きを読む

Aベストアンサー

ANo.2です。
お役に立てた様で良かったです。

> あと、htmlのほうは、
> <div id="main_visual"><!--MAIN VISUAL-->
> <a href="https://www.rink.com">ここに文言が入ってます。</a>
> </div><!--MAIN VISUAL-->
>
> これだけのシンプルなもんです。。

そうでしたか。であれば、他の方のご指摘にもありますが、マークアップはulでされた方が妥当でしょうね。
ANo.2でのスタイルを、ulでマークアップする場合はちょっとした変更を加えるだけでOKです。
---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
(省略)
<body>
<p>リンクより上のブロック</p>

<ul id="main_visual">
<li><a href="#">ここに文言が入ってます。</a></li>
</ul>

<p>リンクより下のブロック</p>
</body>
(省略)
---------------------------------------------------------------------
【CSS】
---------------------------------------------------------------------
ul#main_visual {←"ul"はなくてもいいです(以下同)
position: relative;
background: url(../img/main_visual.jpg) no-repeat;
width: 666px;
height: 418px;
list-style: none;
margin: 0;
padding: 0;
}
ul#main_visual li {
position: absolute;
top: 324px;
left: 308px;
width: 338px;
height: 43px;
}
ul#main_visual a {
display: block;
width: 100%;
height: 100%;
text-indent: -9999px;
}
---------------------------------------------------------------------

ANo.2からの変更点は:

・#main_visualをulのマークアップに都合がよい様にディフォルトのリストスタイルや余白をリセット
・aをliの子要素とする為、位置決めや縦横サイズはliで指定
・aには親要素の幅と高さを継承させる

だけです。リンクエリアとしている背景画像の部分には当然リンク箇所である事がわかる様な文言が明示されているなり、クリックを誘導する様なボタン的デザインがされているものと想定しています。

ANo.2です。
お役に立てた様で良かったです。

> あと、htmlのほうは、
> <div id="main_visual"><!--MAIN VISUAL-->
> <a href="https://www.rink.com">ここに文言が入ってます。</a>
> </div><!--MAIN VISUAL-->
>
> これだけのシンプルなもんです。。

そうでしたか。であれば、他の方のご指摘にもありますが、マークアップはulでされた方が妥当でしょうね。
ANo.2でのスタイルを、ulでマークアップする場合はちょっとした変更を加えるだけでOKです。
------------------------------------------...続きを読む

QHTMLもしくはCSSのULでリンクを張る場合に、一行に複数リンクを張るにはどうすればいいですか?

HTMLタグとCSSを使ってリンクを表現したいのですが、

ULリンクで順番に

【1】
【2】
【3】
【4】
【5】
【6】
縦にリンクを張ることは出来るのですが、

例えば、

【1】
【2】【3】
【4】
【5】
【6】

例)
【ゴオグル】【ゴオグルログイン画面入り口】

のように
サイトへのリンクとその横に、ログイン画面へのリンクをつけたいのですが、

ULやCSSを用いて、
順番にリンクを張るうち、
何個かだけ、【2】【3】のように
変則的に並べるにはどうすればよいのでしょうか?

単純に
<li><A href="http://www...01.html">【1】</A>
<A href="http://www...02.html">【2】</A></li>

とすると、1行にリンクを並べることはできるのですが、
これだと、マウスオーバーした時にリンクの背景色を替えるなどの
設定をすると、

二つのリンクを一つにまとめて扱われてしまうので、

なんとか一つ一つに設定するにはどうしたらいいのでしょうか?

もし、分かりましたらよろしくお願いします。

HTMLタグとCSSを使ってリンクを表現したいのですが、

ULリンクで順番に

【1】
【2】
【3】
【4】
【5】
【6】
縦にリンクを張ることは出来るのですが、

例えば、

【1】
【2】【3】
【4】
【5】
【6】

例)
【ゴオグル】【ゴオグルログイン画面入り口】

のように
サイトへのリンクとその横に、ログイン画面へのリンクをつけたいのですが、

ULやCSSを用いて、
順番にリンクを張るうち、
何個かだけ、【2】【3】のように
変則的に並べるにはどうすればよいのでし...続きを読む

Aベストアンサー

class,idなどを利用するのは本来の目的から言うと誤りです。
DIVに限らず、「id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」が基本で、プレゼンテーションのためにidやclassをつけるのは避けましょう。
 先でプレゼンテーション変えるとき、class名も書き換えなければならない!!

 divやspanやidやclassがやたらと増えて煩雑なHTMLになるし、将来プレゼンテーションを変更しようとしたときにHTMLも書き換えなければならなくなります。
 HTML5では
【引用】____________ここから
NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[4.4 Grouping content — HTML5( http://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-div-element )]より
【注意】著者は、他により手義綱な要素ないときの最後の手段としてdiv要素を使用することが強く奨励されます。div要素ではなく、より適切な要素を使用する事は、読者のためには「より良いアクセシビリティ」を作者のためには「メンテナンス性の向上」につながります。

<li><A href="http://www...01.html">【1】</A>
<A href="http://www...02.html">【2】</A></li>
HTML5やXHTMLでは大文字のタグは使いません。
※【】はHTMLには書きません。検索エンジンも読み上げソフトも、いちいち読んでしまいます。

HTMLだと
<nav><!-- HTML側ではナビゲーションリンクとしてマークアップ -->
 <ul><!-- 順不同リスト -->
  <li><a href="/01.html">最初のページ</a></li>
  <li><a href="/02.html">次のページ</a></li>
  <li><a href="/03.html">ゴオグル</a></li>
  <li><a href="/04.html">ゴオグルログイン画面入り口</a></li>
  <li><a href="/05.html">テストだよ</a></li>
 </ul>
</nav>

HTML4.01だと、文書構造を示す要素が用意されていませんので
  ⇒3.1. 新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )

<div id="nav"><!-- classでナビゲーションだと知らせる -->
 <ul><!-- 順不同リスト -->
  <li><a href="/01.html">最初のページ</a></li>
  <li><a href="/02.html">次のページ</a></li>
  <li><a href="/03.html">ゴオグル</a></li>
  <li><a href="/04.html">ゴオグルログイン画面入り口</a></li>
  <li><a href="/05.html">テストだよ</a></li>
 </ul>
</div>
  ★あなたの場合、その内容でしたら
   <nav>
    <ul>
     <li><a href="/01.html">最初のページ</a></li>
     <li><a href="/02.html">次のページ</a></li>
     <li><a href="/03.html">ゴオグル</a></li>
     <li><a href="/04.html">ゴオグルログイン画面入り口</a></li>
     <li><a href="/05.html">テストだよ</a></li>
    </ul>
   </nav>
  のほうが適切で、はるかに簡単なのですが、それは今回は説明しません。


先のHTML5のHTMLに対して、
nav ul,nav ul li{
list-style:none;
margin:0;padding:0;
display:inline;
}
nav ul li a{
display:block;
margin:5px 10px;
}
nav ul li a[href="/03.html"],
nav ul li a[href="/04.html"]{
display:inline-block;
}
nav ul li a:before{
content:"【";
}
nav ul li a:after{
content:"】";
}
だけでよいですね。これだと煩雑なclassつける必要もないし、リスト項目が増減してもよいし、後で好きにデザイン返られる。だってHTMLには文書構造しか書かれてないから。
HTML/CSSで最も重要なこと!!
 →構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )

【サンプル】
※タブは_に置換してあるので戻す。
※Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
 のDATA入力(右上)で検証済み

<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name="description" content="">
_<meta name="author" content="ORUKA1951">
<style media="screen">
<!--
nav ul,nav ul li{
list-style:none;
margin:0;padding:0;
display:inline;
}
nav ul li a{
display:block;
margin:5px 10px;
}
nav ul li a[href="/03.html"],
nav ul li a[href="/04.html"]{
display:inline-block;
}
nav ul li a:before{
content:"【";
}
nav ul li a:after{
content:"】";
}
-->
</style>
</head>
<body>
_<header>
__<h1 id="title">Your title</h1>
__<nav><!-- HTML側ではナビゲーションリンクとしてマークアップ -->
___<ul><!-- 順不同リスト -->
____<li><a href="/01.html">最初のページ</a></li>
____<li><a href="/02.html">次のページ</a></li>
____<li><a href="/03.html">ゴオグル</a></li>
____<li><a href="/04.html">ゴオグルログイン画面入り口</a></li>
____<li><a href="/05.html">テストだよ</a></li>
___</ul>
__</nav>
_</header>
_<section>
__<aside>
___<h3>Something aside</h3>
__</aside>
__<h2>A smaller heading</h2>
__<p>
__</p>
_</section>
_<section>
__<h2>A smaller heading</h2>
__<p>
__</p>
_</section>
_<footer>
__<h2>A nice footer</h2>
_</footer>
</body>
</html>

class,idなどを利用するのは本来の目的から言うと誤りです。
DIVに限らず、「id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」が基本で、プレゼンテーションのためにidやclassをつけるのは避けましょう。
 先でプレゼンテーション変えるとき、class名も書き換えなければならない!!

 divやspanやidやclassがやたらと増えて煩雑なHTMLになるし、将来プレゼンテーションを変更しよう...続きを読む

Qスタイルシートの外部ファイルでリンク先を指定できますか

外部ファイル読み込みによるスタイルシートを
作成する予定です。
(今まではエディタでHTMLタグを打って
ホームページを作成していました)

セレクタでCLASSを使って、
色などを指定することは分かりますが、
この要領で、リンク先を指定することはできますか?

よく、ホームページのページ構成で、
入り口から、いくつかのコンテンツに行く形のとき、
それぞれのコンテンツのページ上に他のコンテンツへのリンク先を
つけているレイアウトがよく見られますよね。

私もこのレイアウトをとっているのですが、
リンク先のひとつのレンタル掲示板が都合で何度も変わりました。
その都度、掲示板のリンク先を載せているページのソースを
書き換えました。

そこで、CLASSでの色などの指定ができるのなら、
リンク先も指定してしまえば、外部ファイルにして、
リンク先を変更しなければならなくなったときに、
外部ファイルだけにリンク先を変更するだけですむのでは?
と思いました。
しかし、参考書には色や背景などについてなら載っているのですが、
リンク先については書かれていませんでした。
無理でしょうか?

よろしくお願いします。
「最新スタイルシート辞典」(初版)を読んでいます。

外部ファイル読み込みによるスタイルシートを
作成する予定です。
(今まではエディタでHTMLタグを打って
ホームページを作成していました)

セレクタでCLASSを使って、
色などを指定することは分かりますが、
この要領で、リンク先を指定することはできますか?

よく、ホームページのページ構成で、
入り口から、いくつかのコンテンツに行く形のとき、
それぞれのコンテンツのページ上に他のコンテンツへのリンク先を
つけているレイアウトがよく見られますよね。

私もこのレイアウト...続きを読む

Aベストアンサー

こんにちは。

CLASSでの詳しい事は分かりませんが、
それでしたら、
一度ダミーファイルを作ってそこへリンクさせればどうですか?
そして、そのダミーファイルからセコンド0にて掲示板などへ転送させちゃうんですよ。

これでしたら、
ダミーファイルの転送先URLを書き換えるだけで済みますし。

都度、CLASSを書き換えるのと作業的には同じでしょう。

私はこういう方法で今までやってきました。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q背景画像をリンクにする?

タイトルの通りなのですが、よくブログなどにある、headerの部分を画像にしてtopへのリンクを張る方法が分かりません。
例えば森永卓郎さんのブログだと、タイトルの「つながるモリタクBLOG」の部分にリンクが張ってあり
ブログのトップページに移動するようになっていますが、このクリックできる範囲を広げて、
緑色の背景画像の部分をクリックしても同じく移動できるように指定することはできませんでしょうか?
単に画像にリンクを張るだけならできますが、背景にしてみたところ詰まってしまいました…。
よろしくお願いいたします。

Aベストアンサー

背景とタイトルを別に考えないで、背景も含めた大きな1枚の画像にしたらどうですか?
<a href=""><img src="" alt="タイトル" widht="500" height="50"></a>

もしくはスタイルシートで範囲を指定するか
a#header{
display: block;
margin: 0px;
padding:0px;
width: 500px;
height: 50px;
}

<a href="" id="header">タイトル</a>

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

Qスペースを使わず文字位置を揃える方法

素人な者で大変申し訳ありません
以下のように、複数行の文字位置を揃えるタグはどうなるのでしょうか?
(下の例は揃っていませんが・・・)

1.あ        :ABC
2.abc       :ABC
3.あいう      :ABC
4、えお       :ABC

のように、空白部にスペースを使わずに文字位置を揃える方法です
ワードなどの「tabキー」の役割をするタグなんてありますか?

ご教示の程、宜しくお願い致します

以上

Aベストアンサー

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(Li)、原子量6.941、リチウムイオン電池</dd>
</dl>

<h3>元素</h3>
<ol class="periodic table">
<li><span class="element">水素</span>元素記号(H)、原子量1.008、酸素と共に水をくつる。</li>
<li><span class="element">ヘリウム</span>元素記号(He)、原子量4.003、不活性ガス</li>
<li><span class="element">リチウム</span>元素記号(Li)、原子量6.941、リチウムイオン電池</li>
</ol>

これに対して、スタイルシートを次のように書いたりします。
dl.periodic.table{counter-reset: atomicNum 0;padding-left:2em;}
dl.periodic.table dt{float:left;font-weight:bold;}
dl.periodic.table dt:before{
content: counter(atomicNum) ". ";
counter-increment: atomicNum;
}
dl.periodic.table dd{margin-left:7em;}
dl.periodic.table dd:before{content:": ";}

ol.periodic.table span.element{float:left;width:7em;position:relative;font-weight:bold;}
ol.periodic.table span.element:before{content:": ";position:absolute;right:0.5em;}

★他にどのようにマークアップされていても、用語とその説明がが区別できるようにマークアップされていれば、デザインはできます。
★デザインのためにDIVやSAPNを追加しているわけではありません。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ものです。デザインのために書いてしまうと、デザインのためにtableを使ったのと大差ありません。
 HTML5では、
※DIVやSPANは他に適した要素がないときのための最後の手段
※文書構造を示すため
 となります。

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(L...続きを読む

QHTMLタグ⇒リンクした画像を別ウインドウで開く

いつもお世話になります。
HTMLタグで、リンクした画像を別ウインドウで開く方法を教えて欲しいのですが、
1、メイン画像を表示。
2、そのメイン画像に別の画像をリンク付け。
※3、上記2、の”別の画像を新しいウインドで開く”方法が判りません。
過去歴を閲覧させていただきましたが、わたくしの知る限りではサムネイル画像=同じ画像を別ウインドで開く方法しか検索出来ません。
どなたか※印の方法をご存知の方是非アドバイスをお願いいたします。

Aベストアンサー

<a href="main.jpg" target="_blank"><img src="sub.jpg"></a>

target="_blank"
↑この部分が別ウィンドウで開く部分です。

Q訪問済のリンク色を変えない方法

テキストリンクをクリックすると、次から色が変わりますよね?クリック前とクリック後と一緒の色にしたいんです。前に教えてもらったんですが、ページ内の全てのリンクの色が同じ色になってしまったんですが、そういうものなんですか?文字別に色を変えて指定することはできますか?どういうタグを入れたら良いか教えて下さい。

Aベストアンサー

BODYタグをいじります。
<body link="クリック前の色" vlink="クリック後の色">
のようにします。色の部分は#3333FFとか#FFFFFFのように
お好みの色をいれます。

文字別に色を指定するときも
<a href="link_saki.htm"><font color="#FF0066">リンク</font></a>
のように<a>の中に<font color>で指定すれば可能です。

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング