カテゴリー別アーカイブ: CSS

レスポンシブサイトでメニューをまとめる時にナビとかが複数あってどうしような時

あります。

GlovalNaviだけまとめるメニューのプラグインは良く見かけるが、サイト内ではグロナビに加えてSNSのナビだったり、ログインのナビが独立して複数存在することは多々ある。

で、ようやく昔見つけていたサイトを再発見。

Drower Slider MenuってJs
http://jquer.in/javascript-and-jquery-solutions-for-fantastic-mobile-websites/drawer-slide-menu/

使い方は以下を参考にさせていただきました。

http://www.redman-m.com/wp-dr/

jqueryドロワーメニューはDrawer Slide Menuがいいかも。facebookみたいな左スライドインメニューの作り方【デモあり】

 

2015/03/18追記
とても参考になるまとめページが。
http://webdesignmagazine.net/javascript/drawer/

viewportの数値がでかいと無視される?1400とか。

いつもどおり、viewportを設定はい確認。
終わると思いきや終わらず。。

なぜかviewportを無視して、横スクロールが発生。

何故だ・・・

なぜかというと、デフォルトのminimum-scaleってやつは0.25が設定されているらしくこれが縮小の邪魔をする。

ということで、以下のようにwidthとminimun-widthを設定で難を逃れる。

<meta name="viewport" content="width=1400; minimum-scale=0;">

margin相殺とoverflow:hidden;

とある案件で各要素の上下の隙間をmarginで調整することがありました。

モジュール設計なのでh要素には上下○○px、P要素には上下○pxなど指定しつつ、お互いの距離は相殺を利用して大きい数字が採用される想定。

でも、モジュールを構成しているものにfloatなんかを使用していると、
その親要素でoverflow:hidden;で廻り込み回避しておりました。

が、そうなるとそのoverflow:hidden;をした要素の次に来る要素とはmarginの相殺はされずに加算されてしまうようです。

overflow:auto;にすれば大丈夫とあるが、ダメっぽく。。
しょうがないので、上下のマージンを調整するdivにはoverflowをかけずに、overflow用のdivを一枚かませることで回避。
→と思ったけど結局回避できない。
overflowより内側の要素に関しては、相殺から除外されてしまうもよう。

ちなみに、margin相殺の考え方でおもしろいなーとおもったのが、「お互いの心の距離」として考えると分かりやすいと。
Aさんは1m離れたい。Bさんは1.5m離れたい。このときに2.5mは必要ないと。1.5m離れれば事足りるよね、っていう考え方。

参考にしたサイトのURLが分からなくなってしまったので考え方だけお借りしました。

android2.3.x系でposition:fixed;を使いたいとき。

Androidは古いものは無視されるので、なかなかIE6のようにしぶとく古いVerが生き残りますな。

iOSはposition:fixed;に対応したが古いAndroid OSは未対応のままです。

簡単に対応するには
・user-scalable=noをmetaに入れる がいいみたいですがユーザー的には拡大出来ないのは困ります。

なのでもう一つ。
・-webkit-backface-visibility: hidden;
これをfixedした要素に追記するとちゃんとfixedが動くようです。

古い機種対応が一番時間を取られてバカバカしいなー。

スマホサイトで縦持ちと横持ちを判別。

CSSの切り替えなどで縦持ち横持ちを判別して、何かしら動作させるためのjqueryの方法。

 switchOrientation();
 window.onorientationchange = switchOrientation; 
function switchOrientation(){
var orientation = window.orientation;
if(orientation == 0){

}else{

}
//やり直しさせたい関数();
}

参考にさせていただいたサイト。
http://blog.webcreativepark.net/2010/08/17-200704.html
あえて関数名などそのままです。ありがとうございました。

position fiexdした要素がgoogle Chromeでチラつく

ググってもあまり検索結果に出てこないのはgoogleの陰謀なのか。

結局違うことが書いてあったサイトの内容を試してみたら有効だったぽいので備忘録。

fixedした要素に以下を追加

-webkit-transform: translate3d(0,0,0);

これで大丈夫っぽい。

Androidで確認するとテキスト幅が狭くなっている件

こちら、それなりに新しいVersionのAndroidでも起こりうる現象のようで。

基本的にpタグを使用しなければ避けられるようですが、それって本末転倒。
hタグでも起こりました。

簡単な回避法は
・背景色を指定
・背景に透明pngなどを指定

のようです。
無駄な画像を入れたくないけど、背景色入れられないパターンもあるから悩ましい。

背景画像だけを置いているんだけど、レスポンシブに対応したいとき

テキストを飛ばして背景画像を置きたいときは多々ある。
ロゴ周りとか、デザインされたテキスト部分とか。

responsiveに対応するにはどうすればいいんだろーって分からなくて、
今までは諦めて画像を直接配置してwidth:100%,height:auto;でやっておりました。

でも考えてみたら、比率を変えないんだから以下のように対応できますよね。
例)
画像のサイズが600px × 400pxだとしたら

div.logo{
text-indext系;好み分かれるので詳細書かず
background:url(xxx) no-repeat center top;
back-ground:cover;
max-width:600px;
padding-top:66.66666666%;  /* 400px/600px = 0.66666666… */
}

こんな感じでいけちゃうっぽいです。

レスポンシブルデザインで背景の高さ調整できなくない?

レスポンシブルで背景の横幅を100%にしたら高さの調整がうまくいかない事がよくある。

そんなときにもしかしたら役に立つかもしれないCSSがvh vw 。
魔法のCSSではないがうまく行けば役に立つかもしれないので備忘録。

もしくはクロップしちゃって、トリミング的な。
http://designshack.net/tutorialexamples/focalpoint/index.html

デザイナーさんもレスポンシブルを理解しないとこういう苦労が多々発生してしまうね。

参考にさせていただいたサイト。

CSS vw vh vminの単位について

vw, vh, vm(vmin) という単位についての覚え書き