スマホサイトでよく使うjqueryのDrawerで
メニューは出てくるのに押せない時…
cssでz-indexをいろいろ変えて直った時は
ヘッダーメニューのz-indexを2以上にする！！
だった。
(1にしてたらダメで他のとこのz-indexの数値を変えまくってた…)
paddingやborderも含むwidth、height！！
(スマホなんか％多いから結構計算めんどいのを解決)
box-sizing: border-box
(
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
)
と書くべし！！
PCスマホのレスポンシブのために必ず必要な文！！
【スマホPC切り分け】
<script type="text/javascript">
if (screen.width >= 1024) document.write('<meta name="viewport" content="width=1060">');
else document.write('<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.5">');
</script>
【CSS切り分け】
<link rel="stylesheet" type="text/css" href="/style.css" media="screen and (min-width: 1025px),print" />
<link rel="stylesheet" href="/style_sp.css" media="screen and (max-width:1024px)" />
レスポンシブのために必ず書こう！
これはとっても助かったー＞＜
画像タイトルがスマホだと小さかったりいろいろ問題があるのよねん。
data-属性はすべてのHTML要素につけることができ、値も自由につけることができる属性なのだそう。
data-*（*は半角英字の文字列）で指定する。
<h2 data-label="Title"><img src="画像.jpg" width="800" height="40" alt="Title"></h2>
h2::after{
display: inline-block;
content: attr(data-label); /*contentでdata-label属性を指定*/
padding-left: 6px;
border-left: solid 6px #0182c3;
colorその他font-sizeなど
}
h2 img{
display: none;
}
h2{
box-sizing: border-box;
padding: 5px 3px 2px;
border-bottom: solid 2px #0182c3;
}
助かったー！
参考URLです♪
ul li:nth-child(3n) {
border: 2px #000 dotted;
}
でよろしーよん(^^)/
すると3の倍数のみにスタイルがあたるよ～