AKB48の推しメンをセンターにできちゃうかもしれない!? >>

TABLEタグで先に説明させて頂くと
<table style="width:100%;">
<tr>
<td style="background-color:#FFCCCC;">A:指定なしセル</td>
<td style="width:300px;background-color:#FFFFCC;">B:固定幅のセル</td>
<td style="width:300px;background-color:#FFCCFF;">C:固定幅のセル</td>
</tr>
</table>
などとした時「セルA」は600を引いた残り全ての幅になると思います。

これをDIVタグで再現するには、以下の参考URLのようにfloatとmarginなどで行うと思うのですが、
http://14-00.com/archives/18

「セルB」や「セルC」をJavascriptでdisplay:none;などした時に、「セルA」が残り幅全てになるCSSはありますでしょうか。

TABLEタグであればそのままできたのですが、DIVの場合の指定方法が判りませんでした。

Javascriptでmarginを書き直すなどすればもちろんできそうなのですが、CSSだけでも出来る方法があれば教えて頂きたく思います。

よろしくお願いします

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

A 回答 (3件)

<style>


div.layout { display:table; width:100%;}
div.layout > * { display:table-cell; }
div.layout > nav { width:300px; }
</style>

<div class=layout>
<nav>B</nav>
<article>A</article>
<nav>C</nav>
</div>
    • good
    • 0

実際のサンプルです。


★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
でチェック済みのHTML4.01strict+CSS2.1のウェブ標準です。
★タブは_に置換してあるので戻す。

試し方
※文字コードはShift_JIS
※このHTMLと同じ場所に[css]というフォルダーを作成し、下の5つのスタイルシートを入れる。
※代替スタイルシートに対応した(Chrome以外の)ブラウザで、[表示]→[スタイル(シート)]に進み、任意のスタイルを選択し、ウィンドウ幅を変えて確認する。。
※印刷プレビューで印刷時の状態を確認する。
※携帯電話にはデザインは適用されません。
※最低限必要なものは、sample.css、sample1.cssだけです。残りは他のデザインと印刷用

<!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&#64;hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<link rel="stylesheet" type="text/css" media="screen" href="./css/sample.css">
_<link rel="stylesheet" type="text/css" media="screen" href="./css/sample1.css" title="右2コマ">
_<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/sample2.css" title="左右">
_<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/sample3.css" title="補足下">
_<link rel="styleSheet" type="text/css" media="print" href="./css/print2.css">
</head>
<body>
_<div class="header">
___<h1>文書のタイトル</h1>
_</div>
_<div class="section">
__<h2>記事タイトル</h2>
__<p>段落(Paragraph)</p>
__<div class="section">
___<h3>項目タイトル</h3>
___<p>記事</p>
__</div>
__<div class="section">
___<h3>項目タイトル</h3>
___<p>記事</p>
__</div>
__<div class="nav">
___<h3>目次</h3>
__</div>
__<div class="aside">
___<h3>補足</h3>
___<p>本文と直接関係ない記事</p>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
_</div>
</body>
</html>

スタイルシート
[sample.css]
@charset "Shift_JIS";
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p{/* これらのマージンを0にして代わりに行高さを大きくする */
margin:0;line-height:1.6em;
}
p{text-indent:1em;}

[sample1.css]
@charset "Shift_JIS";
div.header,div.section,div.footer{
width:100%;
min-width:640px;/* 最小幅 */
margin:0 auto;
}
div.section{
position:relative;
min-height:400px;/* 最小高さ */
}
div.section div.section{
width:auto;
min-height:150px;
}
div.section div.section p,div.section div.aside p{
margin:0;
}
div.section div.nav,div.section div.aside{
position:absolute;
top:0;
width:200px;
height:100%;
}
div.section div.nav{
right:200px;
}
div.section div.aside{
right:0;
}
div.section h2,div.section p,div.section div.section{
margin-right:400px;
width:auto;
}
/* 背景色 */
div.header{background-color:aqua;}
div.section{background-color:fuchsia;}
div.footer{background-color:green;}
div.section div.section{background-color:silver;}
div.section div.nav{background-color:lime;}
div.section div.aside{background-color:orange;}

[sample2.css]
@charset "Shift_JIS";
div.header,div.section,div.footer{
width:100%;
min-width:640px;/* 最小幅 */
margin:0 auto;
}
div.section{
position:relative;
min-height:500px;/* 最小高さ */
}
div.section div.section{
width:auto;
min-height:150px;
}
div.section div.section p,div.section div.aside p{
margin:0;
}
div.section div.nav,div.section div.aside{
position:absolute;
top:0;
width:200px;
height:100%;
}
div.section div.nav{
width:150px;
}
div.section div.nav{
left:0;
}
div.section div.aside{
right:0;
}
div.section h2,div.section p,div.section div.section{
margin:0 200px 0 150px;
width:auto;
}

[sample3.css]
@charset "Shift_JIS";
div.section{
position:relative;
min-height:300px;/* 最小高さ */
}
div.section div.nav{
position:absolute;
top:0;
width:200px;
height:100%;
left:0;
}
div.section h2,div.section p,div.section div.section,div.section div.aside{
margin-left:200px;
width:auto;
}

[print2.css]
@charset "Shift_JIS";
h1,h2,h3,h4,h5,h6,p{
margin:0;line-height:1.8em;
}
div.header,div.section,div.footer{
margin:0 1em;
}
div.section div.nav{
display:none;
}
div.section div.aside{
border:solid 2px blue;
font-size:0.9em;
width:80%;
margin:1em auto;
padding:5px;
}
    • good
    • 0
この回答へのお礼

想像していた動作とは異なりましたが、HTMLの仕組みについての丁寧なアドバイスありがとうございました。勉強になりました。

お礼日時:2015/04/15 12:57

以下、根拠を示しておきますからそれを必ず読んで理解してから対処を説明します。



質問は、15年前のHTML4.01の勧告以来強く言われてきた
・単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
・ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
 だと思います。実はもうひとつ、見落とされがちですが
「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
 もあわせて・・。HTML5ではDIVは安易に使えなくなりますから・・
「これをDIVタグで再現するには、以下の参考URLのようにfloatとmarginなどで行うと思うのですが」も正しくはありません。発想自体が誤っています。
--divはデザインのためじゃない。
--floatはテキスト中の画像の周囲にテキストを回りこませるためのもの

★重要な事は、『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』なのです。
 それができていれば、まったく難しいものではありません。

 以上を踏まえて本題です。本文<body>内の文書構造が下記のようなものだとします。判りやすいHTML5で示すと下記のようになります。HTML5では、文書構造を示す新しい要素が追加されたため、他に適切な要素がある場合DIVは使えません。
【引用】____________ここから
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/html5/grouping-content.html … )]より
 意訳: 他に適切な要素がないときの最後の最後の手段としてdiv要素を使用することが強く奨励される。div要素に代わるより適切な要素を使用することで、読者にとっては、より良いアクセシビリティを著者にはより容易なメンテナンス性につながる。

<body>
 <header>
   <h1>文書のタイトル</h1>
 </header>
 <section>
  <h2>記事タイトル</h2>
  <p>段落(Paragraph)</p>
  <section>
   <h3>項目タイトル</h3>
   <p>記事</p>
  </section>
  <nav>
   <h3>目次</h3>
  </nav>
  <aside>
   <h3>補足</h3>
   <p>本文と直接関係ない記事</p>
  </aside>
 </section>
 <footer>
  <h2>文書情報</h2>
 </footer>
</body>

★HTMLには文書構造だけが、文書構造が分かるように記述されていますから、メンテナンスも楽ですし、tableなんか使わなくてもデザインが自由にできます。

 これを、HTML4.01で現すと、従来は下記のように書いてこられたはずです。
<body>
 <div class="header">
   <h1>文書のタイトル</h1>
 </div>
 <div class="section">
  <h2>記事タイトル</h2>
  <p>段落(Paragraph)</p>
  <div class="section">
   <h3>項目タイトル</h3>
   <p>記事</p>
  </div>
  <div class="nav">
   <h3>目次</h3>
  </div>
  <div class="aside">
   <h3>補足</h3>
   <p>本文と直接関係ない記事</p>
  </div>
 </div>
 <div class="footer">
  <h2>文書情報</h2>
 </div>
</body>

デザインは好きにできますが、ここでは本文(section)内で、目次(nav)と補足記事(aside)を本文の右横に固定幅で並べて置くとします。
┌──────┐
│・ヘッダー・│
├──┬─┬─┐
│本文│目│補│ 全体は、リキッドで目次と補足は固定幅で
│記事│次│足│ 本文の右横に並べておく。
├──┴─┴─┤
│・フッター・│
└──────┘
/* リキッド */
 div.header,div.section,div.footer{
  width:100%;
 }
/* 以下の要素の基準 */
 div.section{
  position:relative;
 }
/* それ基準に絶対配置 */
 div.section div.nav,div.section div.aside{
  position:absolute;
  top:0;/* 上に */
  width:200px;/* 固定幅 */
  height:100%;/* 高さは100% */
 }
/* 目次は 右から200px */
 div.section div.nav{
  right:200px;/* 右から200px */
 }
/* 補足は右端 */
 div.section div.aside{
  right:0;
 }
/* それ以外は右を空ける */
div.section h2,div.section p,div.section div.section{
 margin-right:400px;
 width:auto;
}
/* 下位要素の再指定 */
div.section div.section{
  width:auto;
}
div.section div.section p,div.section div.aside p{
  margin:0;
}

具体的なサンプルは次にまわしますが、このように文書構造とプレゼンテーションを分離すると、
・HTMLはシンプルで判りやすく。作りやすくなる。
・デザインに文書構造が引きずられることもない
  左右を入替えるためにHTMLを書き直すなんて事はなくなる
・メンテナンスも容易
・検索エンジンにも理解されやすく
・デザインはHTMLに手を加えず随時変更できます。
 気が変わったらHTMLには一切手を加えずデザインだけ変えられる。
 スタイルシートを外部に置くとスタイルシート書き直すだけで全ページが一挙に変更される
・端末--携帯電話や印刷、スマホ--ごとにデザインを変える

 などと、作るのは無論、デザインの自由度もメンテナンスもとても楽になるのです。
    • good
    • 0

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

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

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

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

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

Q左○○px、右は残りの幅(100%-左px)ってできますか?

CSSでレイアウトを組みたいと思ってます。

要は左と右に2つに割って左はpx単位で指定して、右は残りのサイズ、ウインドウのサイズ変更に伴って可変するようにレイアウトを組んでいきたいと考えています。

発想力が足りないのか、基礎的な知識が足りないのか・・・
どちらも足りないとは思いますが、おしえていただければ幸いです。

どうかよろしくお願いいたします。

Aベストアンサー

とりあえずdivでフロートするだけでもよいかと

<style>
#l{
width:200px;
background-Color:blue;
float:left;
}
#r{
width:auto;
background-Color:red;
}
#b{
width:auto;
background-Color:green;
}
</style>
<div id="l">test</div>
<div id="r">test</div>
<div id="b">test</div>

Qスタイルシートで画面を上下に分割,高さを上部はpxで指定,下部は残り全部にする方法

画面を上下に分けて,上部の高さをpx単位で指定して下部は残り全部にするのをスタイルシートで実現したいと思い,次のようにしてみたんですがうまくいきません.

<html>
<body style="margin:0px; padding:0px;">
<div style="width:100%; height:100px; background-color:#ccf;">
画面上部
</div>
<div style="width:100%; height:100%; background-color:#fcc; ">
画面下部
</div>
</body>
</html>


要は下部の「残り全部」のやり方がわかっておらず,全体的な高さが100px+100%になり,表示画面より下に100pxはみ出してしまいます.
次のようにdivを入れ子にするとうまくいくんですが,内部に表示させる内容によっては不具合が出るので,どうしてもdivどうしが独立した形で実現させたいです.

<html>
<body style="margin:0px; padding:0px;">
<div style="width:100%; height:100%; background-color:#fcc; ">
<div style="width:100%; height:100px; background-color:#ccf;">
画面上部
</div>
</div>
</body>
</html>

他の質問サイトでも尋ねてみたのですが,質問の意味を理解してもらえずに別に問題はないという回答を1件頂いたのみで解決できませんでした.また,テーブルではなく必ずスタイルシートで実現したいです.対策をご存知の方,ご教示よろしくお願いします.

画面を上下に分けて,上部の高さをpx単位で指定して下部は残り全部にするのをスタイルシートで実現したいと思い,次のようにしてみたんですがうまくいきません.

<html>
<body style="margin:0px; padding:0px;">
<div style="width:100%; height:100px; background-color:#ccf;">
画面上部
</div>
<div style="width:100%; height:100%; background-color:#fcc; ">
画面下部
</div>
</body>
</html>


要は下部の「残り全部」のやり方がわかっておらず,全体的な高さが100px+100%になり,表示画面...続きを読む

Aベストアンサー

思い出したのでIE対応にするための追記。

前回のサンプルの<head>~</head>に以下を追加。
<!--[if IE]>
<style type="text/css">
#Content {
width:100%;
height:expression(document.body.clientHeight - 100);
}
</style>
<![endif]-->

参考
http://www.keynavi.net/ja/bugh/comments.html
http://useyan.x0.com/s/html/expression/

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

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

Aベストアンサー

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

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

Qの高さ固定。情報増加時、高さ自動変化

<table>で<td>の中に入れる文字の行が
多くなったり少なくなったりする形のもので
少ないときは高さを150pxに固定し、
多くなったときは行数に合わせて
自動的に高さが変化するものを作りたいです。
サンプルを作ってみました。
アドバイスをお願いいたします。

<html>
<head>
<title></title>
<body>
<table style="width:200px; height:150px; background-color:#ccc; vertical-

align:top; display:block; margin:20px;">
<tr>
<td>
<ul>
<li>あいうえお</li>
<li>あいうえお</li>
</ul>
</td>
</tr>
</table>

<table style="width:200px; height:150px; background-color:#ccc; vertical-

align:top; display:block; margin:20px;">
<tr>
<td>
<ul>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
</ul>
</td>
</tr>
</table>
</body>
</html>

<table>で<td>の中に入れる文字の行が
多くなったり少なくなったりする形のもので
少ないときは高さを150pxに固定し、
多くなったときは行数に合わせて
自動的に高さが変化するものを作りたいです。
サンプルを作ってみました。
アドバイスをお願いいたします。

<html>
<head>
<title></title>
<body>
<table style="width:200px; height:150px; background-color:#ccc; vertical-

align:top; display:block; margin:20px;">
<tr>
<td>
<ul>
<li>あいうえお</li>
<li>あいうえお</li>
</ul>
</td>
</tr>
</table...続きを読む

Aベストアンサー

こんばんは。

TABLEのheight:150px;をやめる。
TDにstyle="min-height:150px;"

Qdivのheight指定で画面一杯に表示したい

よろしくお願い致します。

<div>の<height>を100%に指定して、
タブレット等での表示時、縦でも横でも画面一杯に
表示させたいと考えています。

とりあえず css で以下は宣言済みです。
 html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
 }

親子構造としては以下を想定しています(いくらか簡略化しています)
<html>
 <body>
  <div id="H" style="height:60px;">
   (1)ここにヘッダー的なもの
  </div>
  <div id="B" style="height:100%; overflow: auto;">
   (2)この部分を縦一杯にしたい
  </div>
 </body>
</html>

(2)の部分にはjavascriptでサーバから取得した
XMLのデータを埋め込んでおります。

その際、選択行の色付け等を行いたかった為、
大枠を<div>でくくり、その中に<table>で表組みしています。
最終的な構造は以下のようになっているはずです。
 <div id="B" style="height:100%; overflow: auto;">
  <div id="rdiv1"><table id="rtbl1"><tr><td ・・・ /td></tr></table></div>
  <div id="rdiv2"><table id="rtbl2"><tr><td ・・・ /td></tr></table></div>
  <div id="rdiv3"><table id="rtbl3"><tr><td ・・・ /td></tr></table></div>
  ・・・
 </div>

行ごとの<div>や、その中の<table>でも height: 100%; は指定しています。
また、1行あたりの高さは<td style="height: 40px;">と指定しています。
(rowspanを使ってのぶち抜きを行っているため)

html と body に height:100%; を指定しているので、
予想ではヘッダー用のdivが指定の高さで表示され、
次のdivが残りの高さ分一杯に表示。
その中のデータは overflow:auto; でスクロールできる。

と考えていたのですが、実際はjavascriptで埋め込んだdiv、
及びtableの高さまで伸びてしまい画面上を大きくはみ出してしまいます。
(divのoverflowが全く機能しません)

100%ではなく 500px としてみたところ、
そのサイズに収まってスクロールできました。
(縦一杯ではありませんがdivのoverflowは機能しました)

何とか height 100% を実現して、
divのスクロールバーのみでの表示を行いたいのですが、
何か指定が足りないのでしょうか?

よろしくお願い致します。

<div>の<height>を100%に指定して、
タブレット等での表示時、縦でも横でも画面一杯に
表示させたいと考えています。

とりあえず css で以下は宣言済みです。
 html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
 }

親子構造としては以下を想定しています(いくらか簡略化しています)
<html>
 <body>
  <div id="H" style="height:60px;">
   (1)ここにヘッダー的なもの
  </div>
  <div id="B" style="height:100%; overflow: auto;">
   (2)この...続きを読む

Aベストアンサー

>html と body に height:100%; を指定しているので、
予想ではヘッダー用のdivが指定の高さで表示され、
次のdivが残りの高さ分一杯に表示。

まずこの予想の部分が間違っています。質問の通りに作って、高さ500pxの画面で確認した場合、html、bodyの高さは500px、ヘッダー60px、そしてその次のdivの高さも500pxで、60pxはみ出る形になります。height:100%というのは親セレクタに対しての100%です、残りの100%ではありません。

残りの高さいっぱいにしたい場合はcssのみではできません。JSを使うか、似たような見え方で違う組み方をするか…

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Q文字列が入っているtdを削除せず非表示にしたい

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定したため、about列は表示されないはずなのですが、"右が1へのリンクになります"、"右が2への~"と表示されます。
プログラムの動作にかかわるので、about列を削除することなく、CSSなどを設定することでabout列を非表示にしたいのですが、何か上手な方法はあるでしょうか。

よろしくお願いします。

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定し...続きを読む

Aベストアンサー

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="へんてこな表">
<caption>へんてこ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

だとして、
table{
border-collapse:collapse;
border:solid 1px gray;
}
td,th{border:dotted 1px gray;width:20em;
}
table[summary="なんたらの表"] td,table[summary="なんたらの表"] th{display:none;}
table[summary="なんたらの表"] *+td,table[summary="なんたらの表"] *+th{display:table-cell;}

table[summary="ほげほげの表"] td,table[summary="ほげほげの表"] th{visibility:hidden;}
table[summary="ほげほげの表"] *+td,table[summary="ほげほげの表"] *+th{visibility:visible;}

table[summary="むにゃむにゃの表"] td:first-child,table[summary="むにゃむにゃの表"] th:first-child{display:none;}

table[summary="へんてこな"] td:first-child,table[summary="へんてこな表"] th:first-child{visibility:hidden;}


消滅させるならdisplay:none;→display:table-cell;
存在は残すけど表示させないならvisibility:hidden;→visibility:visibble;

セレクタは適当に・・・
隣接セレクタを使うなら +
第一列なら、擬似クラス:first

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>...続きを読む

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

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

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

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

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

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qのイベントについて

<input type="file">でファイルを選択した時点にイベントを追加する方法を教えてもらえませんか?
セキュリティの観点から無理なのでしょうか?

Aベストアンサー

ファイルを選択した時点で、
onchange イベントが起こりますので、
それを利用すればいいです。
例:
<form name="File">
<input type="file" name="UPLOADFILE" onchange="alert(document.File.UPLOADFILE.value)">
</form>


人気Q&Aランキング