状態:-
閲覧数:6,594
投稿日:2013-02-07
更新日:2013-02-07
親要素の横幅を越えたヘッダー／レスポンシブ対応
・このページに書かれている通りに書けば楽勝
気が付いた点
・下記記述がないと、マージンがはみ出した分、サイトの幅自体が広がってしまう
・具体的には、横スクロールバーが伸びまくるので、必ず記述
・下記記述がないと、縦スクロールバーが表示されなくなるので、必ず記述
今回変更した内容。上記とは直接関係ない内容も含む
▼/bootstrap/css/site.css
▼/bootstrap/css/docs.css
・このページに書かれている通りに書けば楽勝
気が付いた点
・下記記述がないと、マージンがはみ出した分、サイトの幅自体が広がってしまう
・具体的には、横スクロールバーが伸びまくるので、必ず記述
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;*/
}
親要素の幅に収まるようにフォントサイズを変更
・「FitText.js」試すもうまくいかず
・紹介
・上記「親要素の横幅を越えたヘッダー」内h1タグへ適用させようとしたから？
・親div要素作成後、width100%とするも、効果なし
・h1タグ自体を、width100%とするも、効果なし
・h1タグを、「インライン」「ブロック」に切り替えても、全く効果なし
・何れも、複数行に渡り表示されてしまう
・結局、挫折
未検証
・親要素の幅に収まるようにフォントサイズを変更する - Weblog - hail2u.net
・jQuery ページや要素の幅に合わせて文字サイズを変更してくれるプラグイン
・紹介
・上記「親要素の横幅を越えたヘッダー」内h1タグへ適用させようとしたから？
・親div要素作成後、width100%とするも、効果なし
・h1タグ自体を、width100%とするも、効果なし
・h1タグを、「インライン」「ブロック」に切り替えても、全く効果なし
・何れも、複数行に渡り表示されてしまう
・結局、挫折
未検証
・親要素の幅に収まるようにフォントサイズを変更する - Weblog - hail2u.net
・jQuery ページや要素の幅に合わせて文字サイズを変更してくれるプラグイン
フォントファミリー変更
今回変更した内容。上記とは直接関係ない内容も含む
▼/bootstrap/css/bootstrap.min.css
▼/bootstrap/css/bootstrap.min.css
▼/bootstrap/css/docs.css
.jumbotron h1 {
▼/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関連
・広告があると、「引用」が段落ち
▼/css/style.css
・広告の上に、「ソースコード」が表示されてしまう
▼/js/syntaxhighlighter/css/shCore.css
▼/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;*/
}