• ベストアンサー

<div>で、タイトルバーに時間表示

こんにちは。 <div>を使用して、タイトルの右端に時間表示をしたいです。 今は <div> <div> </div> <div> </div> </div> という入れ子構造を行っています。 例は、 |ーーーーーーーーーーーーーーーーーーーーー| |タイトル                     時間 | |ーーーーーーーーーーーーーーーーーーーーー| このようなものです。 ちなみにタイトルは変動します。 よろしくお願いいたします。

  • 1wase
  • お礼率61% (11/18)
  • HTML
  • 回答数3
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
noname#39970
noname#39970
回答No.2

<div style="width:100%;border:solid 1px"> <div style="float:left"> タイトル </div> <div style="float:right"> 時間 </div> <div style="clear:both"><!-- このdivが無いと以降の配置が変な表示に --></div> </div> 内容を動的変化させる場合はidを指定しjavascriptで操作する

1wase
質問者

お礼

回答ありがとうございます!!!!! 理想の画面になりました!!!!泣 本当にありがとうございます。どんな高等技術を使うのかと思っていたら、基礎をしっかりと行うことで解決できたのですね。 ありがとうございます。

その他の回答 (2)

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.3

配置方法がわからないのか、時間を埋め込む方法がわからないのか… とりあえず、両方のサンプルです。 <html> <head> <title></title> <style type="text/css"> #header { position:relative;/*#timeをabsoluteで配置するために。 */ } #time { /*親DIVの右上からの位置を指定*/ position:absolute; right:5px; top:3px; } </style> </head> <body> <div id="header"> <div>タイトル</div> <div id="time"></div> <script type="text/javascript"> // #timeの内容を設定 document.getElementById('time').innerHTML = '時間'; </script> </div> </body> </html>

1wase
質問者

お礼

回答ありがとうございます。 時間は、既に取得した上での表示を行いたかったのですが、 私が書いていたソースの半分以下の量で書けるんですね・・・; 凄い。。参考になりました!! 本当にありがとうございます。 助かりました!!!!!!!!

  • nakayan_4
  • ベストアンサー率55% (649/1171)
回答No.1

フォームに時間表示をするならばJavascriptなどを使いますが、そのまま普通の文字列として表示するならばダイナミックHTMLなどを使うのではどうでしょうか? ●リアルタイムに時間を表示する(DHTML) http://www.red.oit-net.jp/tatsuya/java/realtime3.htm

1wase
質問者

補足

早速の回答ありがとうございます。 だいぶ説明不足でした。すみません。 時間は他の場所でとってあるので、上記で言いますと、ここでは単純にタイトルの横に、テキストを表示したいという内容です。 すみません。 改めて |ーーーーーーーーーーーーーーーーーーーーー| |テキスト                     テキスト | |ーーーーーーーーーーーーーーーーーーーーー| このようなものです。 よろしくお願いいたします。 よろしくお願いいたします。

関連するQ&A

  • divについて。

    <html lang="ja"> <head>省略</head> <body> <div id="header">headerの内容</div> <div id="main"> <div id="left">左側の内容</div> <div id="right">右側の内容</div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <div id="footer">footerの内容</div> </body> </html> といった感じのトップページをCSS+htmlで作りました。見てわかる通り、<br>が無駄にたくさんあります。 でもこの無駄<br>がないと<div id="left">の内容を無視して、<div id="main">の縦の長さが0みたいに表示されてしまいます。 だから<div id="main">の縦の大きさを数値で指定すると上手くいくのですが、可変するようにしたいのでautoにして、結果無駄<br>をたくさん記述するはめになっています。 以前こちらで<div>の入れ子が上手くいかない時に clear: bothを入れると良いと聞いて入れ子構造は出来たのですが、今度は無駄<br>がないと入れ子にした際に(縦をautoにした場合)外側のdivが表示されないという状況です。 わかりづらい説明で申し訳ないのですが、何かが間違ってるせいだと思うのでわかる方宜しくお願いします。

    • ベストアンサー
    • CSS
  • divの入れ子枠の中に収めたい

    左側に記事 右側に写真 それらを大枠で囲った日記風のものをdivの入れ子構造で作成しています。 <div 大枠>  <div 記事(float: leftにしている)></div>  <div 写真></div> </div>       のような感じです。 概ねそれらしく出来たのですが、記事を長く書き込んでいくと文章下部が大枠からはみ出してしまいます。 大枠の高さは写真高さに従っているようです。 記事のほうの高さに従わせるにはどうしたらよいでしょうか。 それと、左に記事 右に写真を並べて表示が、IEのみうまく表示されません。 記事の文末の高さに写真の上端がそろうような感じです。 IEでうまく表示できないのは、何が問題なのでしょうか。 どうしても分りません。教えてください。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • DIVの入れ子で、FireFoxだとレイアウトが崩れる。

    DIVの入れ子で、FireFoxだとレイアウトが崩れる。 http://www.cool-vivi.com/?p=222 このサイトの通りにやったのですが、 FireFoxだとうまく表示されません。 下記のソースから<div id="main">を消して、入れ子じゃない状態にするとうまくいきます。 どうすればいいでしょうか? <div id="main"> <div id="menu"> </div> <div id="contents"> </div> </div>

  • #DIV/0! を表示させない方法

    エクセルを仕事で使用していますが 割り算をする時に片方が0もしくは空白であると 計算式欄に答えが 「#DIV/0!」と表示されてしまい 非常に見ずらい表になってしまっています。 計算式は残してこのようは「#DIV/0」のような時は 表示しないように設定するには どうしたらよいでしょうか? 教えてください。

  • excel エラー値「#DIV/0!」表示について

    excel97を使用してます。 エラー値「#DIV/0!」表示について、非表示にしたいのですが、できるでしょうか。 今はまだ数値が入力されていないので、表示されてしまうことは理解しているのですが、それを非表示にしたいのです。 宜しく願い致します。

  • HTMLに記述がないのに、表示されている?<div class="lgBar">携帯</div>

    gooブログのデザインを変えようとHTMLデータを見ているのですが、右メニューの”携帯”タイトルに対応する記述がありません。 (<div class="lgBar">携帯</div>といったもの) ”携帯”以外の”gooブログ””gooおすすめリンク”などのタイトルはHTML上に<div class="lgBar">gooおすすめリンク</div>といった記述があるので表示されるのは分かるのですが、記述のない”携帯”タイトルがその他のタイトルと同じように表示されているのはなぜなのでしょうか?

  • 3カラムのレイアウト、及びdivの入れ子等

    初めまして。 とても基本的なことでお恥ずかしいのですが、 3カラムのレイアウト、及びdivの入れ子等について、行き詰ってしまいました。 どうぞ宜しくお願い致します。 下記のように、3カラムの段組みレイアウトを行いました。 左・右のナビゲーションに、width:150pxで幅指定し、それぞれleft・rightにfloat、 中心部分(#contents)は、左右ナビゲーション分のマージンを設定して、真ん中に配置させる方法です。 HTMLでは、可変?させたい真ん中部分は、ナビゲーションの後に記述すること、とのことでしたので、そのように致しました。 <CSS> #contents { margin-left:155px; margin-right:155px; } #left { float:left; width:150px; } #right { float:right; width:150px; } <HTML> <div id="left>あああああああ</div> <div id="right">いいいいいいい</div> <div id="contents">ううううううう</div> ここまでは、問題なく配置させられたのですが、 【#contents】の中に、<div>や<ul>などを使用すると、画像(http://blog.goo.ne.jp/ray-chimin)のような現象が起きます。 ちなみに、【#left】のheightを長く伸ばすと、IEではキレイに並びましたが、firefox等では、やはり崩れます。 と言いましても、それは実験的に行った結果で、【#left】のheightを無駄に長く伸ばすことは避けたいです…(;ω;) そもそも、【#contents】の中の、「中身の並べ方」の考え方に問題があるのでしょうか…? 可能な限りシンプルに、 正しいCSSの使い方でレイアウトしたいと考えております…!(>_<) divの不必要な多用? (ひとつひとつの画像をdivの中に入れたり、 横並びのミニバナーを、divの中にdivを入れて…のような入れ子構造) は避けたいと思っておりましたが、 もしかして、それがいちばん正しいのでしょうか…? ご存じの方、どうぞご指南の程宜しくお願い致します! 散文、失礼いたしました!

    • ベストアンサー
    • HTML
  • 任意の<DIV></DIV>の中に計算結果を表示させるには?

    javascriptで計算した結果(数値)を任意の<DIV></DIV>の中に表示させたいのですが、どのようにするのでしょうか? 詳しく申しますと、電卓(これもjavascriptで作りました)で計算した結果を任意の<DIV></DIV>の中に結果を表示させたいのです。ここではフォームは使用しないです。 すみませんが、よろしくお願いいたします。

  • <div>テキスト</div>

    HTMLを記述する際に文書構造を明確に…と考えています。 見出しにはHタグ、本文にはPタグ、リストにはliなどなど。 ある書籍でbody直下にテキストを配置するのはいけない、と書いてありました。テキストに意味付けがなされていないから、というようなことが理由として書いてありました。 そこで思ったのですが、divはもともと意味をなさないブロック要素ですが、この直下にテキストを配置すると、このテキストは文書構造上意味を持たないものになって、文法上間違っているのでしょうか? 今のところ、 <div><p>テキスト</p></div> のように、pで意味付けをするのが正しいのかな、と考えていますが、W3Cのホームページではdiv直下にテキストを配置しているものがありました。 皆さんのご意見を伺いたいです。 div直下のテキストは正しいのか、間違っているのか、どうでもいいのか?

    • ベストアンサー
    • HTML
  • 指定した時間のみ表示されるようにしたいです。

    深夜帯だけに見せたいバナー(divタグで組んだもの)があり、それ以外の時間帯は非表示にしたいのですが、JavaScriptでどのように組めばいいでしょうか? ちなみに表示させたい時間帯は02:00~03:00の1時間だけで毎日繰り返しこの1時間のみ表示したいもの。 その時間帯に表示させたいものはdivでくくったバナーで、<script>タグも入れているので、その1時間だけで画像と<script>タグを表示させたいのです。 是非アドバイスお願いします。

専門家に質問してみよう