小テーマのCSSで変更出来た見出しがスマホで見ると反映されていません。

PR 2016/8/8

このトピックには3件の返信、1人の参加者があり、最後にhidekichiにより10年、 1ヶ月前に更新されました。

3件の返信スレッドを表示中

投稿者

投稿
- 2016年8月7日 1:29 PM #44176
  おぅちゃん
  ゲスト
  はじめまして。
  おぅちゃんと申します。
  宜しくお願い致します。
  HTMLなどには詳しくない初心者です。
  
  子テーマのCSSスタイルシートに見出し変更タグを入れて
  見出しデザインを変更をしたのですが・・・
  
  パソコンで見ると変更出来てるのですが
  スマホから見ると変更が反映されておらず
  変更前のままになっております。
  
  どうのようにしたら
  スマホから見てもデザインの変更が反映されるのでしょうか？
  
  ちなみにスタイルシートに貼り付けたのはこちらです。
```
/*———————————
見出しの変更
——————————–*/

/*h2タグの変更*/
h2 {
	padding: .5em .75em;
	background-color: #208DC3;
	border-bottom: 1px solid #ccc;
      
}

/*h3タグの変更*/
.article h3 {
    border-bottom: 10px solid #208DC3;
    padding: 10px 0 0 0;
    margin-bottom: 30px;
}

/*h4タグの変更*/
.article h4 {
border-bottom: 4px dashed #208DC3;
}

パソコンではちゃんと反映されています。
でもスマホで見ると変更前のままになっております。
変更前はこちらを貼り付けておりました。

/*———————————
見出しの変更
——————————–*/

/*h2タグの変更*/

 h2{
	padding: 10px;
	position: relative;
	overflow: hidden;
	background-color: #208DC3;
	color: #29b8ff;
}
h2:before{
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0px;
	display: block;
	width: 200px;
	height: 100px;
	background-color: #29b8ff;
	border-radius: 100px 100px 0 0;
	opacity: 0.6;
      
}

/*h3タグの変更*/
.article h3 {
    border-bottom: 10px solid #208DC3;
    padding: 10px 0 0 0;
    margin-bottom: 30px;
}

/*h4タグの変更*/
.article h4 {
border-bottom: 4px dashed #208DC3;
}
```
  このデザインは可愛いのですが
  透かしの円になる部分が文字の上に来て
  スマホなどで見た場合に
  タイトルが見づらいため変更した次第です。
  
  宜しくアドバイスをお願い致します。
- 2016年8月7日 4:21 PM #44177
  hidekichi
  ゲスト
  完全レスポンシブがoffならmobile.cssがスマホのときに読み込まれてPCの設定が上書きされているのではなかろうかと思います。
  
  使い分けとしては、
  通常のstyle.cssはpc用
  完全レスポンシブOFFの場合は、mobile.cssがモバイル用
  完全レスポンシブがonの時は、style.cssがPC・mobile兼用(本来のレスポンシブはモバイル時に別途cssを必要としません)
  
  というような感じです。
  
  例えば、mobile.cssに見た目の変更するような同セレクタ同プロパティがない場合は、PCで書いたものがモバイルにも適用されます。この時にmobileようにフォントサイズ等を変更したい場合は、
  
  ■style.css
```
.test {
  font-size: 20px;
  background-color: #333;
  color: #fff;
}
```
  ■mobile.css
```
.test {
  font-size: 16px;
}
```
  このように書きます。
  
  .testの背景色とフォンカラーはstyle.cssから継承し、mobile.cssで同じセレクタにfont-sizeが設定してあるので、文字サイズのみ変更されます。なぜこうなるかは、過去のいろんなトピックでも書きましたが、親テーマstyle.cssがまずあって、子テーマstyle.cssでその親テーマで設定されているセレクタの変更したいプロパティを上書きすることで、最終出力が子テーマstyle.cssの変更したものになるという仕組みです。
  mobile.cssは完全レスポンシブoffの場合に端末がモバイル判定された場合にのみ読み込まれ、子テーマstyle.cssを上書きします。
```
親テーマ .test {
  font-size: 20px;
}
子テーマ .test {
  font-size: 22px;
}
mobile.css .test {
  font-size: 16px;
}
```
  このように設定してあれば、PCで見た場合は親・子テーマstyle.cssの内容が表示されます。タブレットより小さい端末の場合はここでmobile.cssの判定があり、モバイルとされた場合はmobile.cssが読み込まれ、子テーマstyle.cssを上書きするということです。
  
  完全レスポンシブがoffの場合は、mobile.cssは読み込まれないはずなので、子テーマstyle.cssにてメディアクエリでスマホのときの設定を書きます。
```
.test {
  font-size: 20px;
}

@media screen and (max-width: 48em){
  .test {
    font-size: 16px;
  }
}
```
  このように書くと、.testは全体的にフォントサイズが20pxですが、画面幅が48em(768px)までの端末では.testはフォントサイズが16pxという感じに指定できます。この書き方はmobile.cssに同じセレクタの指定がない限り、完全レスポンシブがonでもoffでも利用できます。
  
  つまり、cssは後から書いたものが優先され、それは同じファイルだけではなくファイルの読み込み順序も含めて同じセレクタの同じプロパティの場合は後からのものが優先されるということです。
  
  これを理解してもらえれば、mobile.cssに何を書くべきか、あるいはメディアクエリにどう書くべきかはおぼろげながらわかってもらえるかと思います。
- 2016年8月7日 5:32 PM #44178
  
  おぅちゃん
  ゲスト
  
  hidekichiさん
  
  すばやいアドバイスを頂き、ありがとうございました。
  おかげ様で解決できました。
  
  丁寧に説明して頂き分りやすかったです。
  感謝致します。
  
  今後とも宜しくお願い致します。
- 2016年8月7日 9:14 PM #44182
  
  hidekichi
  ゲスト
  
  1点、
  >> 完全レスポンシブがoffの場合は、
  >> mobile.cssは読み込まれないはずなので
  
  ここ間違ってました。完全レスポンシブがonの場合は読み込みません。この箇所以下の内容はそのままで問題ないかと思います。
投稿者

投稿