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

CSS

 状態:-  閲覧数:5,797  投稿日: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;*/
}


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

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

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


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

フォントファミリー変更

 閲覧数:638 投稿日: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関連

 閲覧数:554 投稿日: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



週間人気ページランキング / 1-29 → 2-4
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 49
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 38
3 「bgcolor」「background-color」「background」の違い | CSS 34
4 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 25
5 RGBの種類 / ビットカラー | RGB(色) 20
6 「属性」「プロパティ」「アトリビュート」の違い | CSS 18
6 Design 0 18
7 「東京都」のカラーコード取得は難しい | カラーコード(色) 17
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 16
9 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 15
9 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 15
10 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 14
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 13
11 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 13
11 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 13
11 ICCプロファイル | カラーマネージメント(色) 13
11 HSLとHSVの違い | 色変換(色) 13
11 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 13
12 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 12
13 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 11
2023/2/5 1:01 更新