- 締切済み
バーナーヘッダーを固定する方法
http://www.shogidojo.com/ 上記のサイトは、サイトの一番上の見出しバーナー（２４将棋倶楽部の文字があるバーナー）とその横に広告のバーナーが一列に並んでいます。 プラウザのウインドウを小さくして行くと、見出しバーナーは優先的に表示されて、広告バーナーの方が削られていきます。 http://but.mods.jp/mtos/ 上記の私のブログもその様にしたいのですが、プラウザのウインドウを小さくすると、広告バーナーが優先的に表示されて、肝心の見出しバーナーが２列目に表示されます。 (1)プラウザウインドウを小さくしても、２列に表現されず、１列のままである事。 (2)見出しバーナーの方が広告バーナーよりも優先的に表示される事。 この２つを実現する良い方法は無いでしょうか？
- prime2011
- お礼率90% (419/462)
- CSS
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
基本的な考え方は、min-widthを指定して並べればよいです。幅が指定できるのはブロック要素ですからブロック要素内でinline-blockなブロックを二つ並べます。 ★おまけで、columnを使う段組方法を加えておきます。 残念ながら、IE9以前は使えません。他のモダンブラウザはOK 現状では、以前に示したようにふたつのOLにするほうが良いでしょう。 ★<DOCTYPE>をこの様にすると標準モードで起動します。 ★序列リストですから<ol>でマークアップすべきです。 ★(iframe内のURLのQUERY_STRINGSの&は、&と書くべきです。) ★(iframeには必ずtitleを書くようにしましょう) ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )で検証済み HTML4.01transitinal+CSS3 です。 ★とにかくHTMLスタイルシートはシンプルにしましょう。 ★ディスプレイ幅は、スマホの480px～1000px程度まで対応しています。それ以上広い場合は1000pxで固定されて中央 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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"> <!-- html,body{margin:0;padding:0;width:100%;background-color:silver;} h1,h2,h3{margin:0 auto;text-align:center;} div.header,div.section,div.footer{width:95%;max-width:980px;margin:0 auto;background-color:white;min-width:480px;} /* headerブロックの指定 */ div.header{background-color:black;color:red;height:60px;white-space:nowrap;} div.header h1,div.header p{margin:0;line-height:60px;display:inline-block;text-align:center;font-size:20px;vertical-align:top;width:50%;} div.header h1{min-width:18em;height:60px;} div.header p{text-align:right;height:60px;margin:0;} /* 本文ブロックの設定 */ div.section h2{display:none;} div.section div.section h3{margin:0;line-height:25px;font-size:18px;} div.section{position:relative;} div.section div.section{width:100%;} div.section div.section ol{ padding:5px; width:80%;margin:0 auto; list-style-position:inside; border:solid blue 1px; /* columnで段組(IE10以降、およびfiefox,Chrome,Opera,safari */ -moz-column-width: 40%; -webkit-column-width: 40%; -o-column-width: 40%; -ms-column-width: 40%; -moz-column-count: 2; -webkit-column-count: 2; -o-column-count: 2; -ms-column-count: 2; -moz-column-rule: 1px solid gray; -webkit-column-rule: 1px solid gray; -o-column-rule: 1px solid gray; -ms-column-rule: 1px solid gray; } div.section div.section ol li{white-space:pre;} /* はみ出すものを消す */ div.section div.section ol li{ overflow:hidden; } div.section div.section ol li:hover{background-color:yellow;color:red;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>＊＊＊＊＊＊＊＊＊＊＊ブログ</h1> ＿＿<p><iframe src="--略--" width="468" height="60" scrolling="no" marginwidth="0" marginheight="0" border="0" frameborder="0" style="border:none;"></iframe> </p> ＿</div> ＿<div class="section"> ＿＿<h2>本文タイトル</h2> ＿＿<div class="section"> ＿＿＿<h3>他ブログ訪問</h3> ＿＿＿<ol start="10"> ＿＿＿＿<li>あいうえお</li> ＿＿＿＿<li>かきくけこさしすせそたちつてとなにぬねのかきくけこさしすせそたちつてとなにぬねの</li> ＿＿＿＿<li>さいすせそ</li> ＿＿＿＿<li>たちつてと</li> ＿＿＿＿<li>なにぬねの</li> ＿＿＿＿<li>はひふへほ</li> ＿＿＿＿<li>まみむめも</li> ＿＿＿＿<li>やゆよ</li> ＿＿＿＿<li>らりるれろ</li> ＿＿＿＿<li>わゐうゑを</li> ＿＿＿＿<li>あいうえお</li> ＿＿＿＿<li>かきくけこ</li> ＿＿＿＿<li>さいすせそ</li> ＿＿＿＿<li>たちつてと</li> ＿＿＿＿<li>なにぬねの</li> ＿＿＿＿<li>はひふへほ</li> ＿＿＿＿<li>まみむめも</li> ＿＿＿＿<li>やゆよ</li> ＿＿＿＿<li>らりるれろ</li> ＿＿＿＿<li>わゐうゑを</li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h3>他ブログ訪問</h3> ＿＿＿<ol start="5"> ＿＿＿＿<li>あいうえお</li> ＿＿＿＿<li>かきくけこかきくけこさしすせそたちつてとなにぬねのかきくけこさしすせそたちつてとなにぬねの</li> ＿＿＿＿<li>さいすせそ</li> ＿＿＿＿<li>たちつてと</li> ＿＿＿＿<li>なにぬねの</li> ＿＿＿＿<li>はひふへほ</li> ＿＿＿＿<li>まみむめも</li> ＿＿＿＿<li>やゆよ</li> ＿＿＿＿<li>らりるれろ</li> ＿＿＿＿<li>わゐうゑを</li> ＿＿＿＿<li>ん</li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
すぐ思いつく方法は タイトルと広告バナーをそれぞれDIVでくくって、仮にdiv.title、div.adsenseとします。 この2つをさらに親DIVでくくって、仮にdiv.topboxとします。 3つの要素にきちんと横幅を指定しましょう。 ただし、この方法だとウインドウの幅がdiv.topboxより狭くなると、ウインドウに横スクロールが出ることになります。 ----------------------------------- 【html】 <div class="topbox"> <div class="title">タイトル</div> <div class="adsense">広告バナー</div> </div> ----------------------------------- 【css】 .topbox{ width: 800px;/* 幅はtitleとadsenseの合計 */ } /* 親要素.topboxにclearfix*/ .topbox:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .topbox{ display: inline-table; } /* Hides from IE-mac \*/ * html .mainbox { height: 1%; } .mainbox { display: block; } /* End hide from IE-mac */ /* clearfix ここまで */ .title{ float: left; width: 200px; } .adsense{ width: 600px; } -----------------------------------
お礼
色々と試みましたが、現状では解決不可能と思いました。 回答して頂きしまして、有難うございました。
関連するQ&A
- 折り返しをしないで、後の表現をしない方法？
http://but.mods.jp/mtos/ 上記のブログで、左右２列にタイトルリストを並べました。 タイトル名が長い場合には、自動で折り返されて２行の表現になります。 しかし、スペースが足りない時は、折り返さずに、そこで表現を打ち切りたいです。 何か良い方法が有れば教えて下さい。
- 締切済み
- CSS
- ひとつのバーナーに２つの別々のリンク先に飛びたいのですが・・・
ひとつのバーナーに、全く別々の２つのサイトにリンクさせたいのですが、できますか？１つは元のウィンドーに、もう１つは新しいウィンドーに表示したいのですが、htmlで書けばいいのか、ＪＡＶＡで書けばいいのか、それすら分かりません。どなたか教えてもらえませんか？
- 締切済み
- Java
- Excel の見出し行と見出し列を固定するには？
Excel2000 なのですが、例えば見出しがＡ列にあり、かつ、１行目も見出しの場合、スクロールしても見出しを表示するにはどうすればいいでしょうか？ 現在１行目をスクロールしても固定表示する方法として以下の方法を使っています。 1.２行目を選択（反転） 2.メニュー「ウィンドウ」-「ウィンドウ枠の固定」 これですと、１行目は固定表示されるのですが、横スクロールさせるとＡ列が見えなくなってしまいます。 すみませんがよろしくお願いします。
- ベストアンサー
- その他MS Office製品
- ホームページビルダーでの直リンクバーナーの変更方法
ログを検索したのですが、見つからなかったので質問させていただきます。 どうにも出来なくなって困っています。よろしくお願いいたします。 ホームページビルダーを使ってサイトを運営しています。 使用しているレンタルサーバーは忍者ツールです。 忍者ツールは、banner.jpg banner.gif banner.png限定で直リンクか許されているので、今までbanner.jpgの画像を使って直リンクのバーナーを作っていました。 そこで今回そのバーナーの画像を変更しようとしたのですが、どうやってもその画像が前の画像のままだったり、使用不可になってしまったりしてうまくいきません。 私がこれまでしてきたやり方は、 (1)元のバーナー画像をビルダー上で、素材→名前の変更をつかってbanner.jpgから、pre-banner.jpgなどと変更する。→新しく作ったバーナーの名前を新たにbanner.jpgにする。→編集ページから古いバーナーを切り取って代わりに新しいバーナーを張りつける→ページを保存して転送 (2)バーナーはphotoshop elements2.0で製作しているので、WEB用に保存するときにbanner.jpgという名前にする→「同一ファイルがぞんざいします。置き換えますか？」で「はい」を選択して置き換える 名前を変更するときの順番を変えてみたり、みなさんがおっしゃっているようにキャッシュの削除もやってみましたが変わりません。 変わらないだけでなく、変えられたとしても前と同じファイル名でサイズもオーバーしていないはずなのに、プラウザに画像は呼び出されず、プロバティを見ると「形式：使用不可」「サイズ：使用不可」などなってしまいます。 その他にも・ホームページビルダー上では画像が更新されていても、実際は変わっていない・表示不可になっていても他のサイトでは前のバーナーの画像が呼び出されている・・・などというようによくわからない失敗が多すぎて何が何だかわからなくなってしまいした； そこで質問なのですが、ホームページビルダーを使った直リンクバーナーの変更を行う時、みなさんはどのような方法をとっていますか？ photoshopを使った保存方法などと合わせてお教えいただければ幸いです。 一週間ぐらい頑張っているのですが、もうどうしようもなくなってしまいました。 よろしくお願いいたしますm(＿＿)m
- ベストアンサー
- ホームページ作成ソフト
- バーナー広告が全く表示されません、どうして？
IE6.0を利用しています。 最近PCを購入しましたが、私が誤って何か設定してしまったのか、バーナー広告が表示されなくなってしまいました。 表示が出なくて便利な面もありますが、不便を感じるサイトもありますので、表示されるようにする設定の方法を教えてください。よろしくお願いします。 なお、以下の対処方法を試しましたが、直らなかったことを報告しておきます。 ●セキュリティレベルの確認 ・IEメニューバーの「ツール」－「インターネットオプション」をクリック 「プライバシー」タブの設定を「中」に変更 ・メニューバーの「ツール」－「インターネットオプション」ー「詳細設定」、既定の設定に戻すをクリック、「適用」－「OK」をクリックします。 ●キャッシュのクリア
- ベストアンサー
- Windows XP
- HTMLのfloatタグの使い方？
http://but.mods.jp/mtos/ 上記のブログで本文を、左右に分けて表示しました。 出来れば、左右の縦幅を揃えて、左右の間の空白も無くしたいです。 つまり、長方形の真ん中に一本線が引かれて、左右に本文を書けるレイアウトです。 上記のブログは、floatタグを使って、右（width４９％）、左（width５０％）で表現しています。 widthの値を５０％ずつにすると、スペースが足りない為なのか、左右に配置出来ず、上下に配置されます。 何か良い方法は無いでしょうか？
- ベストアンサー
- CSS
- インクルード関数による広告バーナーの取り込み
インクルード関数(<?php echo'－－';?>)を使用してヤフーとグーグルの広告バーナーを自分のサイトに貼り付けましたが、clixGalore社のバーナー・スクリプトを上記『--』部分にはめ込むと、以下のようなエラー・メッセージが表示されました。幾つか試して見ましたが、何れもだめでした。何故、このようなエラーが生じるのでしょうか。 Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING, expecting ',' or ';' in /home/---/public_html/--/--.php on line 2 ちなみにclixGalore社のバーナー・スクリプトは以下のようなものです。 <!-- Begin clixGalore Code--> <A href="http://www.---/Lead.aspx?BID=44658&AfID=172528&AdID=5935&LP=www.---.com" OnMouseOver="javascript:window.status='';return true;"> <img src="http://www.---/cgd.aspx?BID=44658&AfID=172528&AdID=5935" border="0" height="60" width="120" alt="Dynamic Rewards"></A> <!-- End clixGalore Code-->
- ベストアンサー
- PHP
- ウインドウ枠の大きさについて
はじめまして。 ネットサーフィンをしていると、隅に広告があったりしますよね。興味があって、バーナーをクリックすると、見ている画面の上にその広告のサイトが表示されますが、そのウインドウ枠が名刺大の大きさになってしまって大変見づらいのです。 パソコンに詳しい知人に相談したら、危険があるから「そんなのクリックしたらいけない」との事でしたが…。私としては不便でなりません。その都度、ドラッグしてウインドウ枠を大きくしていますが気がつくとまた名刺大の大きさに戻ってしまいます。 どうにか見ているサイトの上に表示される、ウインドウ枠を固定する方法はないのでしょうか。よろしくお願いします。
- ベストアンサー
- Windows XP
- YOUTUBEでの古典将棋動画の広告について
将棋のちゃんねるを運営しています。 動画に広告を貼らないと埋め込みプレイヤーのサイトに貼られそこに広告を貼られて海外にお金を取られてしまいます。 広告を貼ると将棋の面白さが半減してしまいます。また、自分がその動画を見たところ、広告が表示され、いらいらしました。 また、推測ですが、有段者も見ていることが予想され、そのような方々に広告を見せるのも心苦しいし恐れ入ります。 動画配信は損をするのを承知でするものなのでしょうか？それともユーザーが対価として、広告を見てから、将棋動画を見るという姿勢でよいのでしょうか？ どうかご指南ください。
- ベストアンサー
- 囲碁・将棋
- getElementsByTagNameの使い方？
http://archiva.jp/web/javascript/tab-menu.html 上記サイトの「タグで切り替えプログラム」を勉強しました。 pages［2］には、ジャバスクリプトの起動部分プログラムによって、「33333 33333 33333」が代入されていると思います。 <script>document.write(pages[2]);</script> 上記をＨＴＭＬに記入して確認しようと思いましたが、画面には表示出来ませんでした。 http://but.mods.jp/mtos/t/k/ 上記がテストした私のサイトです。 配列の要素を画面に表示するには、document.write(pages[2])、左記ではダメですか？ pages［］の配列に「11111 11111 11111」～「55555 55555 55555」の５つの要素を代入するプログラムになっています。 「id="page1"」～「id="page5"」の要素に全て、class属性の「pepepe」を付けて、 tab.setup = {pages:document.getElementsByTagName('pepepe')}の様に、getElementsByTagNameによって、配列を代入しようとしました。 しかし、出来ませんでした。 どこにミスが有るのでしょうか？
- 締切済み
- JavaScript
お礼
色々と試みましたが、現状では解決不可能と思いました。 回答して頂きしまして、有難うございました。