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が必要です。
Modernizr（モダナイザー）は、ブラウザーの機能を調べるライブラリーなので、
IE8以降の機能（ここではborderradiusを使用しました)で条件分けをしているだけです。
—————————————————–
【追記2015.02.06】
● background-sizeのIE対策
Windows IE8/7/6では下記の設定がきかない…
その場合、下記のjQueryのプラグインを使えばいけます。
■ jquery.backgroundSize.js（要 jQuery バージョン1.7.0以降 ）
http://louisremi.github.com/jquery.backgroundSize.js/demo/
■ 使い方
・CSS
{ background-size : cover; }
・JavaScript
<script src="jquery.js" type="text/javascript"></script>
<!-- [if lte IE 8]>
<script type="text/javascript" src="jquery.backgroundSize.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('div.hogehoge').css({backgroundSize: "cover"});
});
</script>
<![endif]-->
上記コードをjqueryのリンク先を修正して、ページ内に追加する。
参考サイト
http://logic.moo.jp/data/archives/872.html
—————————————————–
【追記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」を設定するか、
スペース（ ）を入れてあげれば大丈夫です。
参考サイト
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;
