親要素の横幅を越えたヘッダー/レスポンシブ対応

CSS

 状態:-  閲覧数:5,092  投稿日:2013-02-07  更新日:2013-02-07
親要素の横幅を越えたヘッダー/レスポンシブ対応
このページに書かれている通りに書けば楽勝

気が付いた点
・下記記述がないと、マージンがはみ出した分、サイトの幅自体が広がってしまう
・具体的には、横スクロールバーが伸びまくるので、必ず記述
body {
   overflow: hidden;
}

・下記記述がないと、縦スクロールバーが表示されなくなるので、必ず記述
html {
   overflow: auto;
}



今回変更した内容。上記とは直接関係ない内容も含む
▼/bootstrap/css/site.css
/*ヘッダ親要素越え*/
html {
   overflow: auto;
}
body {
   overflow: hidden;
}
header {
padding-top: 70px;
margin-left: -500%;
margin-right: -500%;
padding-left: 500%;
padding-right: 500%;
border-bottom: 1px solid #f2f2f2;
background-color: #f9f9f9;
}
/*ヘッダ親要素越え*/

▼/bootstrap/css/docs.css
body {
 position: relative;
/*  padding-top: 90px;*/
/*  background-color: #fff;
 background-image: url(../img/grid-18px-masked.png);*/
 background-repeat: repeat-x;
/*  background-position: 0 40px;*/
}


親要素の幅に収まるようにフォントサイズを変更

 閲覧数:775 投稿日:2013-02-07 更新日:2013-02-07 
・「FitText.js」試すもうまくいかず
紹介

・上記「親要素の横幅を越えたヘッダー」内h1タグへ適用させようとしたから?
・親div要素作成後、width100%とするも、効果なし
・h1タグ自体を、width100%とするも、効果なし
・h1タグを、「インライン」「ブロック」に切り替えても、全く効果なし
・何れも、複数行に渡り表示されてしまう
・結局、挫折


未検証
親要素の幅に収まるようにフォントサイズを変更する - Weblog - hail2u.net
jQuery ページや要素の幅に合わせて文字サイズを変更してくれるプラグイン

フォントファミリー変更

 閲覧数:431 投稿日:2013-02-07 更新日:2015-06-08 
今回変更した内容。上記とは直接関係ない内容も含む
▼/bootstrap/css/bootstrap.min.css
body{margin:0;
   font-family: 'Hiragino Kaku Gothic ProN', Meiryo, 'MS PGothic', Sans-serif;
   font-size: 14px;
   line-height: 1.3;
   font-weight: normal;
color:#333333;background-color:#ffffff;}

▼/bootstrap/css/bootstrap.min.css
h1,h2,h3,h4,h5,h6{margin:0;font-family:inherit;font-weight:normal;color:inherit;text-rendering:optimizelegibility;}

▼/bootstrap/css/docs.css
.jumbotron h1 {
  margin-bottom: 9px;
/*  font-size: 81px;*/
 font-size: 3em;
/*  font-weight: bold;*/
/*  letter-spacing: -1px;*/
 line-height: 1;
}

/*.subhead h1 {
 font-size: 54px;
}*/


Adsence関連

 閲覧数:346 投稿日:2013-02-07 更新日:2013-02-07 
・広告があると、「引用」が段落ち
▼/css/style.css
div.bbcode-quote {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 40px;
-webkit-margin-end: 40px;
/* clear: both;*/
padding: 10px;
background: #EEE;
margin: 10px 0;
}

・広告の上に、「ソースコード」が表示されてしまう
▼/js/syntaxhighlighter/css/shCore.css
.syntaxhighlighter
{
width: 99% !important; /* 99% fixes IE8 horizontal scrollbar */
/* margin: 1em 0 1em 0 !important; */
/* margin: 1em 0 0 0 !important; */
margin: 0 !important;
padding: 1px !important; /* adds a little border on top and bottom */
/* position: relative !important;*/
}



CSSのみで交互色 … リスト

invalid property value css background-color



週間人気ページランキング / 7-21 → 7-27
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 47
2 画面キャプチャ | Chrome 拡張機能(ブラウザ) 32
3 血の色 / #b30000 / #360800 / #ff0000 | 色 30
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 26
5 RGBの種類 / ビットカラー | RGB(色) 17
6 「属性」「プロパティ」「アトリビュート」の違い | CSS 16
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 15
7 HSLとHSVの違い | 色変換(色) 15
8 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 14
9 Design 0 12
9 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 12
10 「bgcolor」「background-color」「background」の違い | CSS 10
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 9
12 親要素の背景色を、CSSで打ち消したい | CSS 7
12 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 7
12 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 7
13 Chromeブックマークの不満な点 | Chromeブックマーク(ブラウザ) 6
13 100/7%ではなく100%/7。(100/7)%ではなく(100%/7) | CSS 6
13 ログイン 6
13 グラデーション練習 | Fireworks 8(Fireworks) 6
2021/7/28 1:01 更新