AIと戦って、あなたの人生のリスク診断 >>

こんにちは。
cssで
・縦並びのリストに対して、マウスをもっていくと横にどんどん下位階層のリストが表示されるようする
・下位リストにマウスがいっても上位リストの選択の色はそのままにしたい
以上のように作成したいのですが、
そのcssの記述がわかりません。
色々サイトで探しましたが見つからず。。。
どなたか教えてください。
◆HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>多階層</title>
</head>

<body>
<br>
<div id="MainDiv">
<div id="gnav">
<ul>
<li><a href="#">テスト(1)</a>
<ul>
<li><a href="#">てすと(1)-1</a>
<ul>
<li><a href="#">TEST(1)-1-1</a>
<ul>
<li><a href="#">テスト(1)-1-1-1</a>
<ul>
<li><a href="#">TEST(1)-1-1-1-1</a></li>
<li><a href="#">TEST(1)-1-1-1-2</a></li>
<li><a href="#">TEST(1)-1-1-1-3</a></li>
<li><a href="#">TEST(1)-1-1-1-4</a></li>
<li><a href="#">TEST(1)-1-1-1-5</a></li>
</ul>
</li>
<li><a href="#">テスト(1)-1-1-2</a>
<ul>
<li><a href="#">TEST(1)-1-1-2-1</a></li>
<li><a href="#">TEST(1)-1-1-2-2</a></li>
<li><a href="#">TEST(1)-1-1-2-3</a></li>
<li><a href="#">TEST(1)-1-1-2-4</a></li>
<li><a href="#">TEST(1)-1-1-2-5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">TEST(1)-1-2</a>
<ul>
<li><a href="#">テスト(1)-1-2-1</a>
<ul>
<li><a href="#">TEST(1)-1-2-1-1</a></li>
<li><a href="#">TEST(1)-1-2-1-2</a></li>
<li><a href="#">TEST(1)-1-2-1-3</a></li>
<li><a href="#">TEST(1)-1-2-1-4</a></li>
<li><a href="#">TEST(1)-1-2-1-5</a></li>
</ul>
</li>
<li><a href="#">テスト(1)-1-2-2</a>
<ul>
<li><a href="#">TEST(1)-1-2-2-1</a></li>
<li><a href="#">TEST(1)-1-2-2-2</a></li>
<li><a href="#">TEST(1)-1-2-2-3</a></li>
<li><a href="#">TEST(1)-1-2-2-4</a></li>
<li><a href="#">TEST(1)-1-2-2-5</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">てすと(1)-2</a></li>
<li><a href="#">てすと(1)-3</a></li>
<li><a href="#">てすと(1)-4</a></li>
</ul>
</li>
<li><a href="#">テスト(2)</a>
</li>
</ul>
</div>
</div>
</body>
</html>
◆CSS
body {
font-size: 13px;
font-family: "Meiryo UI", "MS Pゴシック", "MS PGothic", "MS UI Gothic", "MS ゴシック", "MS 明朝";
}

#MainDiv {
overflow: hidden;
width: 1000px;
margin: 0;
}

/* 全角カタカナ階層 */
#gnav {
float: left;
width: 150px;
height: 200px;
}

#gnav ul {
margin: 0;
padding: 0;
border-top: 1px #FFFFFF solid;
list-style-type: none;
}

#gnav ul li {
width: 150px;
height: 24px;
text-align: center;
background: #c8d6e8;
border-bottom: 1px #FFFFFF solid;
}

#gnav ul li a {
display: block;
width: 150px;
height: 24px;
color: #000000;
font-size: 100%;
line-height: 1.6;
background: #6495ed;
text-decoration: none;
}

/* ※.子メニュー以下にマウスがあるときも親メニューの色は変わったにしたい */
#gnav ul li:hover > a {
background: #ffa500;
}

/* 全角ひらがな階層 */
#gnav ul li ul {
display: none;
list-style-type: none;
}

#gnav ul li:hover ul {
display: block;
position: relative;
top: -25px;
left: 152px;
width: 150px;
height: 25px;
}

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

A 回答 (4件)

>こんなシンプルにcssを定義するだけだなんてビックリ\(◎o◎)/!です。


ははは・・・
あたこちサイトめぐって、訳も判らずつまみ食いしてもできません。
要点は たったこれだけ

ul{list-style:none;}/* ブロックにして */
ul,li{margin:0;padding:0;width:9em;}/* margin,paddinを消して幅を指定 */
ul li{position:relative;}/* 子孫の位置やサイズの基準になる */
ul li ul{
position:absolute;/* 親要素liの位置を基準に */
left:9em;/* 位置を指定 */
top:0;
}
/* 2階層目*/
ul li ul{display:none;}
ul li:hover ul{display:block;}
/* 3階層目*/
ul li:hover ul li ul{display:none;}
ul li:hover ul li:hover ul{display:block;}
/* 4階層目 */
ul li:hover ul li:hover ul li ul{display:none;}
ul li:hover ul li:hover ul li:hover ul{display:block;}
/* 5階層目 */
ul li:hover ul li:hover ul li:hover ul li ul{display:none;}
ul li:hover ul li:hover ul li:hover ul li:hover ul{display:block;}

とっつき難いですが、とにかく仕様書には目を通しておきましょう。
そうしないと、こんな簡単なことで躓いてしまう。

じゃ横に並べたリストの下に子供メニューを広げる。その項目の右に孫メニューはどうする。
これより、ずっと複雑になります。
    • good
    • 0

リセットされる位置がまずい。


カウンター部分書き換え

div.header div.nav{
counter-reset: part chapter section subsection subsubsection;
}
div.header div.nav>ul>li{
counter-increment: part 1;
counter-reset: chapter section subsection subsubsection;
}
div.header div.nav>ul>li>a:after{
content: "("counter(part)")";
}
div.header div.nav>ul>li>ul>li{
counter-increment: chapter 1;
}
div.header div.nav>ul>li>ul>li>a:after{
content: "("counter(part)")-"counter(chapter);
}
div.header div.nav>ul>li>ul>li>ul>li{
counter-increment: section 1;
counter-reset:subsection;
}
div.header div.nav>ul>li>ul>li>ul>li>a:after{
content: "("counter(part)")-"counter(chapter)"-"counter(section);
}

div.header div.nav>ul>li>ul>li>ul>li>ul>li{
counter-increment: subsection 1;
counter-reset:subsubsection;
}
div.header div.nav>ul>li>ul>li>ul>li>ul>li>a:after{
content: "("counter(part)")-"counter(chapter)"-"counter(section)"-"counter(subsection);
}
div.header div.nav>ul>li>ul>li>ul>li>ul>li>ul>li{
counter-increment: subsubsection 1;
}
div.header div.nav>ul>li>ul>li>ul>li>ul>li>ul>li>a:after{
content: "("counter(part)")-"counter(chapter)"-"counter(section)"-"counter(subsection)"-"counter(subsubsection);
}
    • good
    • 0
この回答へのお礼

ORUKA1951さん
分りやすい回答ありがとうございました。
こんなシンプルにcssを定義するだけだなんてビックリ\(◎o◎)/!です。
いろんなサイトで調べましたが、どんどん頭がパニックになっていました。
本当にありがとうございましたm(__)m

お礼日時:2014/10/03 10:19

いきなり、5階層ものメニューに取り組んでもうまく行きません。


 まず、二階層、三階層と作成していかないと身にはつきません。
>色々サイトで探しましたが見つからず。。。
 他の勉強(特に理系科目)と同じ、回答例をたとえ見つけたとしても応用することは不可能でしょう。
 仕様書をきちんと読んで身につけるほうが見につきますから、応用もできます。

1) HTMLは文書構造しか書かれていませんから、変更も自在にできる。
 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』ためのものです。
 ここでは、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )名とその用途に従っています。(将来HTML5に直しやすい)

2) 下の階層のulはstaticでない親liに対して絶対配置

3) せっかくのカスケーディングスタイルシート、カスケーディングを活用する。
  すなわち詳細度の知識は必須です。

4) :hoverで展開する場合、展開される項目は印刷できませんから、media制限をかけておく
 印刷時には展開されて印刷される。

★タブは_に置換してあるので戻す。

<style type="text/css" media="screen">
<!--
/* 基本的なこと */
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}
div.header div.nav{margin:0 auto;width:45em}

/* ここからメニュー展開・・たったこれだけ・・ */
div.header div.nav ul{list-style:none;line-height:2em;}
div.header div.nav ul,div.header div.nav ul li{margin:0;padding:0;width:9em;}
div.header div.nav ul li{text-align:center;position:relative;}
div.header div.nav ul li ul{position:absolute;left:9em;top:0;display:none;}
div.header div.nav ul li:hover ul{display:block;}
div.header div.nav ul li:hover ul li ul{display:none;}
div.header div.nav ul li:hover ul li:hover ul{display:block;}
div.header div.nav ul li:hover ul li:hover ul li ul{display:none;}
div.header div.nav ul li:hover ul li:hover ul li:hover ul{display:block;}
div.header div.nav ul li:hover ul li:hover ul li:hover ul li ul{display:none;}
div.header div.nav ul li:hover ul li:hover ul li:hover ul li:hover ul{display:block;}

/* ここから選択済みメニュー着色 */
div.header div.nav ul li a{display:block;width:100%;height:100%;}
div.header div.nav ul li a{background-color:aqua;}
div.header div.nav ul li:hover a{background-color:orange;}
div.header div.nav ul li:hover ul li a{background-color:aqua;}
div.header div.nav ul li:hover ul li:hover a{background-color:orange;}
div.header div.nav ul li:hover ul li:hover ul li a{background-color:aqua;}
div.header div.nav ul li:hover ul li:hover ul li:hover a{background-color:orange;}
div.header div.nav ul li:hover ul li:hover ul li:hover ul li a{background-color:aqua;}
div.header div.nav ul li:hover ul li:hover ul li:hover ul li:hover a{background-color:orange;}
div.header div.nav ul li:hover ul li:hover ul li:hover ul li:hover ul li a{background-color:aqua;}
div.header div.nav ul li:hover ul li:hover ul li:hover ul li:hover ul li:hover a{background-color:orange;}

/* ここからカウンター */
div.header div.nav{counter-reset: part chapter section subsection subsubsection;}
div.header div.nav ul li{
_counter-increment: part 1;
_counter-reset: chapter section subsection subsubsection;
}
div.header div.nav ul li a:after{
_content: "("counter(part)")";
}
div.header div.nav ul li ul li{
_counter-increment: chapter 1;
}
div.header div.nav ul li ul li a:after{
_content: "("counter(part)")-"counter(chapter);
}
div.header div.nav ul li ul li ul li{
_counter-increment: section 1;
_counter-reset:subsection;
}
div.header div.nav ul li ul li ul li a:after{
_content: "("counter(part)")-"counter(chapter)"-"counter(section);
}

div.header div.nav ul li ul li ul li ul li{
_counter-increment: subsection 1;
_counter-reset:subsubsection;
}
div.header div.nav ul li ul li ul li ul li a:after{
_content: "("counter(part)")-"counter(chapter)"-"counter(section)"-"counter(subsection);
}
div.header div.nav ul li ul li ul li ul li ul li{
_counter-increment: subsubsection 1;
}
div.header div.nav ul li ul li ul li ul li ul li a:after{
_content: "("counter(part)")-"counter(chapter)"-"counter(section)"-"counter(subsection)"-"counter(subsubsection);
}
div.header div.nav ul li:hover:after{content:"→";position:absolute;top:0;right:0;z-index:10;}
div.header div.nav ul ul ul ul ul li:hover:after{content:none;}
-->
_</style>
    • good
    • 0

きちんと文書構造に従ってスタイル書けば良いです。


・absoluteはstaticでにい直近の抱合ブロックの位置に従う
 10.1 "包含ブロック"の定義( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
・詳細度をきちんと理解して・・
 6.4.3 セレクタの詳細度を計算する( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
 
★簡単なサンプルです。
★タブは_に置換してあるので戻す。
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
 でチェック済み( hrefの内容がない以外はOK)
★ナンバーは書かない。目次が増えるたびに全部書き直さなきゃならない
 contentプロパティとcounterを使いましょう。

★連続投稿できないのでスタイルは明日にでも

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
-->
_</style>
</head>
<body>
_<div class="header">
__<div class="nav">
___<ul>
____<li><a href="#">テスト</a>
_____<ul>
______<li><a href="#">テスト</a>
_______<ul>
________<li><a href="#">テスト</a>
_________<ul>
__________<li><a href="#">テスト</a>
___________<ul>
____________<li><a href="#">テスト</a></li>
____________<li><a href="#">テスト</a></li>
____________<li><a href="#">テスト</a></li>
____________<li><a href="#">テスト</a></li>
___________</ul>
__________</li>
__________<li><a href="#">テスト</a>
___________<ul>
____________<li><a href="#">テスト</a></li>
____________<li><a href="#">テスト</a></li>
____________<li><a href="#">テスト</a></li>
___________</ul>
__________</li>
_________</ul>
________</li>
________<li><a href="#">テスト</a>
_________<ul>
__________<li><a href="#">テスト</a>
___________<ul>
____________<li><a href="#">テスト</a></li>
____________<li><a href="#">テスト</a></li>
___________</ul>
__________</li>
__________<li><a href="#">テスト</a>
___________<ul>
____________<li><a href="#">テスト</a></li>
____________<li><a href="#">テスト</a></li>
____________<li><a href="#">テスト</a></li>
____________<li><a href="#">テスト</a></li>
___________</ul>
__________</li>
_________</ul>
________</li>
_______</ul>
______</li>
_____</ul>
____</li>
____<li><a href="#">テスト</a>
_____<ul>
______<li><a href="#">テスト</a>
_______<ul>
________<li><a href="#">テスト</a>
_________<ul>
__________<li><a href="#">テスト</a>
___________<ul>
____________<li><a href="#">テスト</a></li>
____________<li><a href="#">テスト</a></li>
___________</ul>
__________</li>
__________<li><a href="#">テスト</a>
___________<ul>
____________<li><a href="#">テスト</a></li>
____________<li><a href="#">テスト</a></li>
____________<li><a href="#">テスト</a></li>
____________<li><a href="#">テスト</a></li>
____________<li><a href="#">テスト</a></li>
___________</ul>
__________</li>
_________</ul>
________</li>
_______</ul>
______</li>
_____</ul>
____</li>
____<li><a href="#">テスト</a>
_____<ul>
______<li><a href="#">テスト</a>
_______<ul>
________<li><a href="#">テスト</a>
_________<ul>
__________<li><a href="#">テスト</a>
___________<ul>
____________<li><a href="#">テスト</a></li>
____________<li><a href="#">テスト</a></li>
____________<li><a href="#">テスト</a></li>
____________<li><a href="#">テスト</a></li>
____________<li><a href="#">テスト</a></li>
___________</ul>
__________</li>
__________<li><a href="#">テスト</a>
___________<ul>
____________<li><a href="#">テスト</a></li>
____________<li><a href="#">テスト</a></li>
____________<li><a href="#">テスト</a></li>
____________<li><a href="#">テスト</a></li>
____________<li><a href="#">テスト</a></li>
___________</ul>
__________</li>
_________</ul>
________</li>
_______</ul>
______</li>
______<li><a href="#">テスト</a></li>
______<li><a href="#">テスト</a></li>
_____</ul>
____</li>
____<li><a href="#">テスト</a></li>
___</ul>
__</div>
_</div>
</body>
</html>
    • good
    • 0

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

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

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

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

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テーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Q「CSS」リストの2段組どのように組まれていますか?(同一カテゴリの場合)

リストの2段組ですが、皆さんどのように組まれていますか?

リストの項目が同一カテゴリーだった場合です。
例えば下記のような同一カテゴリー(花)の場合
・チューリップ
・あじさい
・たんぽぽ
・ひまわり
・すみれ
・パンジー

これを
=============
・チューリップ  ・ひまわり
・あじさい     ・すみれ
・たんぽぽ    ・パンジー
=============
のように表示させたい場合です。
投稿した後に表示がズレるかもしれませんが、
・ひまわり ・すみれ ・パンジー の頭は揃えたいです。

苦肉の策で下記のようなマークアップをしています。
<ul class="left">
<li>チューリップ</li>
<li>あじさい</li>
<li>たんぽぽ</li>
</ul>
<ul class="right">
<li>ひまわり</li>
<li>すみれ</li>
<li>パンジー</li>
</ul>
そして左右にfloatさせています。
ただ、これだとリストが途中で分断されてしまって
正しいマークアップとは言えないですよね・・・。

こういうケースって結構あるのでは、と思い、
色んなサイトを巡りましたが見つからず。

皆さんこういったケースの場合どのように組まれてますか?
いっそテーブルの方が良いのでしょうか?
項目は後から追加するものと想定してください。
(縦に可変していきます)

どうぞ宜しくお願いいたします。

リストの2段組ですが、皆さんどのように組まれていますか?

リストの項目が同一カテゴリーだった場合です。
例えば下記のような同一カテゴリー(花)の場合
・チューリップ
・あじさい
・たんぽぽ
・ひまわり
・すみれ
・パンジー

これを
=============
・チューリップ  ・ひまわり
・あじさい     ・すみれ
・たんぽぽ    ・パンジー
=============
のように表示させたい場合です。
投稿した後に表示がズレるかもしれませんが、
・ひまわり ・すみれ...続きを読む

Aベストアンサー

確かに下のソースだとIEで駄目でした・・・
以下の部分を追加してください。


.left {
width:251px;
float:left;
clear:left; /* ←追加する場所 */
}

Qulやol、どの階層に居てもOKなcss記述方法

例えば、こんな場合でも

<ol>
  <li>
    <ul>
      <li></li>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li>
            <ul>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </li>
        </ol>
      </li>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ul>
  </li>
  <li></li>
  <li></li>
</ol>

こんな場合でも

<ul>
  <li>
    <ul>
      <li></li>
      <li></li>
      <li>
        <ul>
          <li></li>
          <li></li>
          <li>
            <ul>
              <li></li>
              <li></li>
              <li>
                <ul>
                  <li></li>
                  <li></li>
                  <li></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ul>
  </li>
  <li></li>
  <li></li>
</ul>

どの階層上のol、ulでも

ulのliには、list-style-typeのdisc(・)が付き、
olのliには、list-style-typeのdecimal(1、2、3…)が付く

cssのシンプルな記述方法を教えて下さい。


何も設定しないと、ulのliが階層によってcircle(○)だったりsquare(■)だったり。

ul liで設定すると、ul内にあるol liが意図しないマークになる。
liのみ設定すると、ulかolのどちらかで意図しないマークになる。

ひょっとしたら、いろんな階層に居る場合を想定した記述方法(ul ol liとか ol ol liとか)
をするしかやり方はないのでしょうか?

例えば、こんな場合でも

<ol>
  <li>
    <ul>
      <li></li>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li>
            <ul>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </li>
        </ol>
      </li>
      <li></li...続きを読む

Aベストアンサー

ul{list-style-type:disc;}
ol{list-style-type:decimal;}
ブラウザの持つスタイルは優先順位最下位です。
1)優先順位
 ユーザーの最重要宣言されたスタイル
  >著者の最重要宣言されたスタイル
   >著者のスタイル
    >ユーザーのスタイル
     >ユーザーエージェントのスタイル
2)継承
 list-style-typeは、liについての指定ですが、継承されるプロパティです。
list-style-type'( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html#propdef-list-style-type )
  ★Inherited: yes

よって、上記の二行で良いです。この場合詳細度はタイプセレクタのみですから、[0 0 0 1]になりますから、必要に応じてセレクタを追加して変更できるでしょう。

 ⇒セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
 ⇒値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )

 は、list-style-typeなどのプロパティより先に、正確にきちんと身につけるべきです。最低でもこれらについて、プロパティより前に詳しく説明していない参考書やサイトは利用したらダメです。

ul{list-style-type:disc;}
ol{list-style-type:decimal;}
ブラウザの持つスタイルは優先順位最下位です。
1)優先順位
 ユーザーの最重要宣言されたスタイル
  >著者の最重要宣言されたスタイル
   >著者のスタイル
    >ユーザーのスタイル
     >ユーザーエージェントのスタイル
2)継承
 list-style-typeは、liについての指定ですが、継承されるプロパティです。
list-style-type'( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html#propdef-list-style-type )
  ★Inheri...続きを読む

QCSSでボックス幅を文字列に合わせたい

ボックス幅を文字列の幅に合わせるにはどうしたらいいのでしょうか。
テーブルではセルにwidth属性を指定しなくても文字列の幅になりますが、ボックスではwidthプロパティを指定しなかったら領域全体の幅になります。white-spaceプロパティでnowrap指定し、widthプロパティで文字列より小さいサイズに指定するとできるのですが、他に指定する方法があれば教えて下さい。

Aベストアンサー

div等のblock要素ではなくspan等のinline要素によって行う。

<span style="border:solid 1px">文字幅に合わせた枠線</span>

QCSSでreadonlyの機能はありますか?

ASPにてCSSを使用しています。
inputタグを読取専用(readonly)にしたいのですが、
スタイルシートでの指定の仕方がわかりません。
よろしくお願いします。

Aベストアンサー

> スタイルシートでも「IME-mode」の設定等、入力に関する制御も可能でしたので

それは某ブラウザが勝手に CSS を拡張して付けた機能で、本来の CSS ではそのようなことはできません。
CSS はあくまでも見た目つまりスタイルをデザインするためのものだと考えるべきです。

Qlocation.hrefの使用条件について

あるんですか?
単独でlocation.href="a.html";
って書いても自動でも飛んでくれないんですけど?

Aベストアンサー

飛び先のページがあればちゃんと表示されるはずですよ。

単独で書かれたという事ですが、どの様に書かれたのでしょう?

テストで以下の物を作り確認してみました。

test.html -----

<html>
<head>
<title>test</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
location.href='test2.html';
//-->
</SCRIPT>
</head>
<BODY>
<H1>ページ1</H1>
</BODY>
</html>

test2.html ------

<html>
<head>
<title>test</title>
</head>
<body>
<H1>ページ2</H1>
<form>
<input type="button" value="押す" onClick="location.href='test.html'">
</form>
</body>
</html>

これで確認した所、test.htmlを表示しようとすると
すぐにtest2.htmlに飛び、test2.htmlでボタンを
押してtest.htmlに飛ぼうとしても、一瞬test.htmlを
表示後、test2.htmlに戻ってきます。

ご確認ください。

飛び先のページがあればちゃんと表示されるはずですよ。

単独で書かれたという事ですが、どの様に書かれたのでしょう?

テストで以下の物を作り確認してみました。

test.html -----

<html>
<head>
<title>test</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
location.href='test2.html';
//-->
</SCRIPT>
</head>
<BODY>
<H1>ページ1</H1>
</BODY>
</html>

test2.html ------

<html>
<head>
<title>test</title>
</head>
<body>
<H1>ページ2</H1>
<form>
<input type="but...続きを読む

Q特定範囲内のCSSの継承を断ち切る(解除する)には?

別ページにてTinyMCEというWeb上のWYSIWYGエディタにて作成したHTMLをDBへ登録し
それをCSSでデザインされたページ中に読み込み、上位のCSSの継承をさせずに表示させたいのですが
親が読み込んでいるCSSの影響ですべてのタグに影響が出ており困っています。
読み込んだデータの範囲だけCSSの継承をさせないようにする方法はないのでしょうか?

考えられる方法として、インラインフレームにして埋め込む方法が一番現実的かもしれないと思いますが
他に簡単な方法があればご教授していただけるとありがたいです。

当方環境は以下の通りです
サーバー:RedHatLinux + Apache + PostgreSQL
     PHP4, Smarty...
対象ブラウザ:IE6,7

よろしくお願いします。

Aベストアンサー

こんにちは

<style type="text/css"><!--
.contents div { background-color:blue; }
#database div { background-color:red; }
--></style>

<div class="contents">
<div>本文</div>
<div id="database">
<div>DB本文</div>
</div>
<div>本文続き</div>
</div>

もしくは

<div class="contents">
<div>本文</div>
</div>
<div id="database">
<div>DB本文</div>
</div>
<div class="contents">
<div>本文続き</div>
</div>

とか?

あとはタグ名指定のCSSではなくclass名指定とかid名指定にするとか?
<style type="text/css"><!--
.d1 { background-color:blue; }
#d2 { background-color:red; }
--></style>

<div id="d2">本文1</div>
<div class="d1">本文2</div>
<div>DB本文</div>
<div class="d1">本文2続き</div>

こんにちは

<style type="text/css"><!--
.contents div { background-color:blue; }
#database div { background-color:red; }
--></style>

<div class="contents">
<div>本文</div>
<div id="database">
<div>DB本文</div>
</div>
<div>本文続き</div>
</div>

もしくは

<div class="contents">
<div>本文</div>
</div>
<div id="database">
<div>DB本文</div>
</div>
<div class="contents">
<div>本文続き</div>
</div>

とか?

あとはタグ名指定のCSSではなくclass名指定と...続きを読む

Qulタグやliタグの中でbrタグは使えない?

完成したサイトなのですが…。
Dreamweaverにて開いて一応チェックすると、
「タグbrはur内では使用できません」との表示がでて驚いています。

<li>~</li>だけで自動的になされる改行だと、詰まって見えるのです。
だから、

<ul style="padding-left: 00px;">
<li>~</li></br>
<li>~</li></br>
</ul>

のようにして処理しております。ただ、これってSEO的にマズい、ということなのでしょうか?
どうか、ご存知の方いましたら教えてください。

Aベストアンサー

SEO(検索エンジン最適化)には無関係ですが、文法的には誤りです。
→10.2 順不同リスト (UL)、序列リスト (OL)、及びリスト項目(LI)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-UL )

<!ELEMENT UL - - (LI)+ -- unordered list -->
ulには、「li要素のみを一個以上もつ。」と書かれています。


<!ELEMENT LI - O (%flow;)* -- list item -->
li要素には、%flowをゼロ個以上もつ、終了タグは省略できる。

読み方は、3.3.3 要素宣言 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/sgmltut.html#h-3.3.1 )を参照すること

したがって
<ul>
 <li>・・・<br>
 <li>・・・<br>
</ul>
とは書けます。(HTMLの場合)
その場合、ブラウザは
<ul>
 <li>・・・<br></li>
 <li>・・・<br></li>
</ul>
と解釈します。(XHTMLはこう書かないとならない)

★もっと、はるかに大事なこと
「<li>~</li>だけで自動的になされる改行だと、詰まって見えるので」<br>を入れるは、HTML的には最大の間違いです。こちらのほうがはるかに重要!!
 構造とプレゼンテーションは区別すること。デザインのためにHTMLを書いてはなりません。
 2.3.2 アクセス性 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.3.2 )

スタイルシートで、
ul li{margin-bottom:1em;}
だけでよい。

SEO(検索エンジン最適化)には無関係ですが、文法的には誤りです。
→10.2 順不同リスト (UL)、序列リスト (OL)、及びリスト項目(LI)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-UL )

<!ELEMENT UL - - (LI)+ -- unordered list -->
ulには、「li要素のみを一個以上もつ。」と書かれています。


<!ELEMENT LI - O (%flow;)* -- list item -->
li要素には、%flowをゼロ個以上もつ、終了タグは省略できる。

読み方は、3.3.3 要素宣言 ( http://www.asahi-net.or.jp...続きを読む

QHTMLからフォルダを開きたい

いつも大変お世話になります<(_ _)>

Webサーバー上にあるWebページ(HTML)の中に、ローカルPCのフォルダを開くリンクを付けたいのですが、
<a href="file://c:\windows">OPEN</a>
としても、何も反応しません。

いろいろ調べたのですが、上記の方法しか見あたりません。

なお、ブラウザのアドレス欄に file://c:\windows と入力すると、フォルダの内容が表示されます。
※Firefoxだと、ファイルの一覧になりますが・・・

何か環境によって挙動が異なるのでしょうか?
それとも、セキュリティ上の観点から最近じゃ出来なくなっているのでしょうか?

是非ともお助け下さい。宜しくお願い致します。

Aベストアンサー

file:///C:/windows/
/は三つでは・・・
 IEの場合はエクスプローラ(ファイルマネージャ)が開くような・・・
 IEはファイルマネージャーと一体のブラウザなので・・・

★実は、ローカルサーバーが必要です。
 apacheでも何でも良いので、WEBデータの入っているフォルダーを
<VIRTUALHOST 127.0.0.1>
C:\Document and settings\my document\web
 とかに指定して、Windowsのhostsファイルで、適当なサーバー名を指定しておきます。
myLocalhost 127.0.0.1
とか・・・

 そうすると
http://myLoclahost/
 で開けます。

 


人気Q&Aランキング