subheadクラス
状態:-
閲覧数:2,867
投稿日:2015-06-10
更新日:2015-06-10
隙間なく埋めるためには、subheadクラスにマイナスmarginを指定する必要がある
・最終的に、下記CSSを適用
・以下、試行履歴
・最終的に、下記CSSを適用
.subhead {
color: white;
background-color: black;
padding-top: 20px;
margin-top: -20px;
}
.subhead a {
color: white;
background-color: black;
}・以下、試行履歴
Bootstrap3で、公式サイトに掲載されている、問題を起こしやすい固定ナビのデフォルトCSS
固定ナビデフォルトCSS
bodyタグに対してpadding設定しているため、subheadクラスを囲ったdivに背景色を適用しても、隙間が生じてしまう
body {
min-height: 2000px;
padding-top: 70px;
}対策1
bodyタグ自体に背景色を設定して、subheadクラス以外の全ての背景色を白色設定
body{
background-color:black;
}
div#main,section#accessranking,footer
{
background-color:white;
}
.subhead,.subhead a{
color:white;
}問題発生1
重いページで画面がチラつく
・「html表示」処理は、bodyタグを読み込んだ後、各タグを読み込んでいく
・bodyタグと各タグが同じ背景色なら全く気にならないが、異なる場合には影響が生じる場合もある
・今回のケースでは、一度、背景色を黒で読み込んだ後、subheadクラス以外の全ての背景色を白色で描画し直す処理が発生
・結果として、重いページでチラツキが目立つ
ページ読み込み時に「フワっ」とした感じのエフェクトでフェードインしながら表示
チラツキ防止
正確にはチラツキ防止ではなく、チラツキ誤魔化し
・「フワっ」と表示させることで、チラツキを表面上見えなくしようというもの
<script>
$('head').append(
'<style>body {display:none;}'
);
$(function() {
$('body').fadeIn(500, function() {});
});
</script>
問題発生
チラツキは解消するも、新たな問題発生
・body {display:none;}の影響で、iframe内容が表示されなくなる
BBCode
・BBCodeエディタを使用する際、iframe箇所での競合が発生
今考えれば
・単にbodyタグにクラスを割り振ればよいだけの気もするが、その時は気が付かなかった
background-colorだけで背景色2色指定は不可能
bodyタグだけを使用して背景色2色指定
案1.グラデーション指定
案2.background-colorを併用
案1.グラデーション指定
背景色2色をグラデーションで表現
・グラデーションに詳しくないので、どうやったら背景色2色指定できるか分からなかった
・もしかして無理？
案2.background-colorを併用
・背景色を２色に ／ 左側300pxを緑に、右側の残り全て（width指定なし）を白にしたい
・背景色を2色にする方法
最終的に
スタートに戻る
そもそも、チラツキが発生していること自体が問題
・チラツキを見えなくする策を練るのではなく、発生しないような抜本的な対策を施すべき
最終的に
冒頭記述したマイナスマージンを適用することで解決
・個人的にネガティブマージンは極力使用しないようにしているが、背に腹は変えられない
・解決するまで2日を要した