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

CSS

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


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

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

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


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

フォントファミリー変更

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

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



週間人気ページランキング / 10-5 → 10-11
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 48
2 RGB ⇔ Lab | 色変換(色) 12
3 Design 0 9
4 16進数カラーコード / 2進数 8
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 8
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 6
6 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 5
6 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 5
6 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 5
6 空間的 / 可逆な JPEG ファイルの読み込みは実行されません | Photoshop CS3(Photoshop) 5
7 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 4
7 鉄道会社毎のカラーコード | カラーコード(色) 4
7 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 4
7 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 4
8 画像ライセンスは大きく3種類に分かれる。「All rights reserved」+「クリエイティブ・コモンズ・ライセンス」+「その他」 | 画像著作権(画像) 3
8 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
8 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 3
8 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
8 8ビットカラー / インデックスカラー / パレットカラー 3
8 「bgcolor」「background-color」「background」の違い | CSS 3
2024/10/12 1:01 更新