18
January
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
@font-face {
font-family: フォント名;
src: url('フォントファイル名') format("種類名");
}
@font-face {
font-family: MyWebFont;
src: url('./wf/freefont.otf') format("opentype");
}
h1 {
font-family: MyWebFont;
}
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
文字サイズ自動調整OFFのcssらしい
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-o-text-size-adjust: 100%;
text-size-adjust: 100%;
画像を画面サイズに合わせて縮小するcss
img{
max-width:100%;
height:auto;
}
テキストが変に左によりすぎてる。width指定もmargin・padding指定もしてないのに！
→テキストのbackgroudに画像、もしくはbg-colorを指定すること。そうすると直る。
Android4系？のページの自動調整で勝手に整形されるため。うぜー。
画面サイズごとのcss指定
@media only screen and (max-width:1024px){ }
最近はスマホでも解像度があがっているため、320pxとか640pxとかで見てる人は存在するの？
するだろうけどそんな細かく気にする必要ある？
まとめて小さいサイズはこれだ！ってやったほうが楽じゃない？
つまりレスポンシブデザインを作る時点で、複雑設計をしてはいけない。
私のスマホでなんでちゃんと縮小されないんだろうって悩んでた。
$(window).width()
これで解像度を調べたところ1000いくつとかあって、スマホの見た目のサイズと全然違った。
そりゃ640以下のmediaクエリとかに書き込んでも反映しないはずだよ。
本当の1024サイズと、スマホの画面領域360pxで全然違うじゃん。
なんかもうめんどくせー。
1024以下（タブレット・スマホ）と以上（パソコン）で分けるのが簡単でしょ！
スマホでjsを実行させたくない条件分岐のしかた
http://webpad.felicyle.com/jquery/iphone-js-no/
:nth-of-type(odd) ･･･ 奇数番目の要素に適用 :nth-of-type(2n+1) ･･･ 奇数番目の要素に適用 :nth-of-type(even) ･･･ 偶数番目の要素に適用 :nth-of-type(2n) ･･･ 偶数番目の要素に適用 :nth-of-type(3n) ･･･ 3,6,9,12…番目の要素に適用 :nth-of-type(3n+1) ･･･ 1,4,7,10…番目の要素に適用 :nth-of-type(-n+3) ･･･ 最初の3つの要素に適用 :nth-child(n+3) ･･･ 最初の3つの要素以外に適用http://d.hatena.ne.jp/smartboy/20131229/p1
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">
スマホ用ウェブクリップコード
<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/images/任意のファイル名.png"><link rel="apple-touch-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/任意のファイル名.png">アイコンに光沢あり rel="apple-touch-icon"
アイコンに光沢なし rel="apple-touch-icon-precomposed"
光沢ありだと色合いが薄くなるので、それ前提に作ってないのでナシにしてます
これ見てふと思いました。