CSS・JavaScriptの豆知識

最近コーディングをやっていて、気になったことを忘れにないようにメモ。
上級者からしたら常識的な内容ですが…

● position:abolute
絶対位置指定。
ただし親のdivにposition:relativeを指定していないと、ページ全体を基準に配置される。指定があるとdivで囲った範囲内での位置指定になる。

float
ページのレイアウトがはっきりカラムで分かれている場合は、floatを使用するけど、分かれていない場合はpositionで位置指定する方が便利。

mini-width
スマホやiPadでwidth100%指定の場合、mini-widthを指定しないとスクロールしたときに背景がきれてしまう。

width: 100%;
min-width: 1024px;(最小値)

floatを解除
floatを使って回り込みなどのレイアウトした場合、その後に下記のCSSを追加すれば簡単に解除できます。

<div id=’sample clearfix’>
.clearfix:before, .clearfix:after { content: “”; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

IE8:透過png対応のJS
下記のスクリプトを読み込むだけで自動的に透過PNGを配置している要素に対して
filterが適応されます。

$(function() {
 if(navigator.userAgent.indexOf("MSIE") != -1) {
  $('img').each(function() {
   if($(this).attr('src').indexOf('.png') != -1) {
    $(this).css({'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + $(this).attr('src') + '", sizingMethod="scale");'});
   }
  });
 }
});

※jQueryを事前に読み込む必要あり。

またはIE8だけ演出を切りたい場合は下記。

if(Modernizr.borderradius){//IE8以上
//IE8以外の演出
}else{
//IE8のみの演出
}
※ Modernizrが必要です。

http://modernizr.com/

Modernizr(モダナイザー)は、ブラウザーの機能を調べるライブラリーなので、
IE8以降の機能(ここではborderradiusを使用しました)で条件分けをしているだけです。

—————————————————–
【追記2015.03.12】
階層を指定するz-indexですが、positonにstatic以外のrelative、absolute、fixedを指定しなければいけないようです。
http://no1026.com/archives/104

あと、PNGファイルが重くなってしまう時は下記で圧縮すると便利。
https://tinypng.com/

—————————————————–
【追記2015.03.17】
Android4.1で画像がぼやけるバグ
「position:fixed;」で指定した要素内で、
画像のみしか使っていないと画像がぼやけるそうです。。。知らんがな…
解決策としては、中の画像に「position:relative」を設定するか、
スペース(&nbsp;)を入れてあげれば大丈夫です。
参考サイト
http://www.slideshare.net/tsumagarim/slide-share-42996483

背景画像が透過されない
background-image:url(../img/sample.png);で背景に透過PNGを使えば
背景画像が透過で反映されるはずなのですが…とあるライブラリーでは
どうしてもAndroidだけ透過されませんでした。。。
そこで下記を指定すれば無事透過できました…
background-color:rgba(255,255,255,0);

—————————————————–
【追記2015.07.04】
よく忘れるのでメモ。
■ 画像に並ぶテキストなどの位置を指定する方法
これ忘れると微妙にズレます。
vertical-align: top;

その他の値は下記より確認ください。
http://www.tagindex.com/stylesheet/img/vertical_align.html

■ スマホでフォントが拡大しない方法
body内に下記を入れるだけ。

body {
 -webkit-text-size-adjust: 100%;
}

—————————————————–
【追記2015.11.24】
簡単にカルーセルを実現できるライブラリ「slick.js

http://kenwheeler.github.io/slick/

html

<link rel=”stylesheet” href=”common/css/slick.css” media=”all”> <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script> <script src=”common/js/slick.min.js”></script>

script

$('.slide_selector').slick({
  autoplay: true,//オートスライド設定
  autoplaySpeed: 2600,//オートスライド間隔
  dots: true,//ドット設定
  arrow: true,//左右矢印設定
  slidesToShow: 4,//スライドが見える数
  slidesToScroll: 1,//スライドがスクロールする数
  infinite: true,//無限スクロール
  centerMode: true,//表示設定
  draggable: false //マウスドラッグでのスクロール
 });

<div class=”slide_selector”>
 <div>画像素材1</div>
 <div>画像素材2</div>
</div>

—————————————————–
【追記2015.12.03】
スマホでデフォルトの表示が拡大されることがよくあるのですが、
下記が原因だそうです。。。

・divやimg要素のwidthをpxで指定している
・ウインドウの横幅をはみ出すサイズの画像を表示している

回避策は2つあります。

1.viewportの指定を変える

<meta name=”viewport” content=”width=device-width,initial-scale=0.5,minimum-scale=0.5″ />

あらかじめ初期表示の拡大率を半分にして、縮小時の最小値も半分にする。
これで最初からピンチインで縮小したのと同じ状態で表示される。

2.要素の幅を相対値で指定する
divやimg要素のwidthを%で指定する。この方法だと下記でもウインドウの横幅に合わせて調整されます。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0″>

参考サイト
http://d.hatena.ne.jp/hateka/20121123/1353682616

—————————————————–
【追記2016.08.01】
jQuery1.x系
IE6/7/8もサポート。互換性を保つために2.x系よりコード量が多いのと重い。
jQuery2.x系
IE6/7/8を非サポート。コード量が減り、高速になっている。

参考サイト
http://webstudy.hatenablog.jp/entry/2014/09/07/004516

twitterのタグとウィジェット系は、IE8のサーポート停止してます。。。

—————————————————–
【追記2016.08.09】
jqueryでフェードアウト後に消す時は、
$(this).fadeOut(‘fast’).remove();
ではフェードアウトを待たずに消えてしまいます。
処理を待つキューにremoveが入らないようです。

そんな時はqueue()を使いいます。
$(this).fadeOut(‘fast’).queue(function() {
this.remove();
});

参考サイト
http://qiita.com/Vit-Symty/items/ffd82287e6913ea0e1d7

—————————————————–
【追記2016.09.08】
inputタグ、Firefoxでvalue(初期値)が表示されない。
Firefoxのみ、autocomplete属性でページを再読み込みしても input を動的に無効化した状態にするらしい。。。
なので、offにすれば表示します。

autocomplete=”off”
<input type=”text” name=”name” id=”sample” value=”default” autocomplete=”off”>

参考サイト
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input
https://developer.mozilla.org/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

—————————————————–
【追記2016.09.10】
幅固定でテキスト中にaタグを使うと、自動的に改行してくれないので、
下記を入れると普通のテキストと同様に改行してくれます。

word-break:break-all;

参考サイト
http://www.tagindex.com/stylesheet/text_font/word_break.html

—————————————————–
【追記2016.10.03】
レスポンシブを実装する際によく起こる現象で、右に余白ができる場合があります。。。

大体は、min-widthを指定するか、viewportを設定すれば大丈夫なのですが、
それでも解決できない場合があります。
そんな場合は、全体をclassで囲ってoverflow:hidden;すれば解決できます。

参考サイト
http://bashalog.c-brains.jp/15/06/26-170500.php

—————————————————–
【追記2016.11.01】
スマホでのモーダルメニューを実装する際に、スマホを横にすると、
position:fixed;で指定しているのでメニューの一部が見切れてしまいます。
その際は、下記を追加すればOKです。

overflow-y:auto;
-webkit-overflow-scrolling:touch;

参考サイト
http://ichimaruni-design.com/2015/11/sp-web-matome/