スマフォじゃなくても viewport は付けましょう。

スマフォじゃなくても viewport は付けましょう。
と言うか、公開前にちょっとはスマホで確認しましょう。

viewportについていつかまとめる(自分用)として、画像をpositionで強制的に中央に持ってきている場合(*sample)スマフォサイトでひろーーーく表示されていた時の対処

sample
css

.center_image {
position: absolute;
left: 50%;
overflow: hidden;
width: 2000px;/*画像サイズ 無くてもいいが後で重要*/
margin-left: -1000px;/*画像サイズの半分*/
}

html

<div class="center_image"><img alt="" src="./momo.jpg" /></div>

追加修正
css

.center_image img {
position: absolute;
overflow: hidden;
}

html

<meta name="viewport" content="width=1000px, user-scalable=yes" />

content の width=1000pxはスマホで見たときの表示領域の幅サイズを指定、user-scalable=yes は、画面ズームの許可です。

rem単位とem(%)、nth-childとnth-of-typeの違いについてについて。便利なCSS3

またCSS3についてです。フロントコーディングをしてると発見が多いですね。 ちなみに、rem単位とem(%)、nth-child,nth-of-typeは関係ないのですが、短いので一緒の記事に書いています。

rem単位とem(%)の違い

CSS3で新しく追加された単位で、em,%に似た文字サイズを相対的に指定する単位です。 こちらで詳しく載っています。 CSS3の新単位remで、文字サイズの指定を分かりやすく 結果的には、<html>に対しての相対指定値になるようです。 %やemが親のサイズは親の値に対しての値なので、把握し辛くなるのに対して管理しやすそうです。

html { font-size: 16px; }
ul, p { font-size: 0.8rem; } /* 12.8px */
h1 { font-size: 1.6rem; } /* 25.6px */

 

</pre>
<ul>
	<li>リスト1</li>
	<li>
<ul>
	<li>リスト2</li>
</ul>
</li>
</ul>
<pre>

リスト1とリスト2は同じフォントサイズになります。 0.8em(%)だと、リスト1よりリスト2の方が小さくなります。

nth-childとnth-of-typeの違い

こちらもCSS3で追加された疑似要、素最近よく使うのでメモ

途中記事:::

http://weboook.blog22.fc2.com/blog-entry-285.html

pointer-events でマウスイベントを無効化する

編集中記事です><

CSS3のpointer-eventsプロパティーでaタグのリンクを無効化できるようなので調べてみたら、マウスイベント自体を無効化出来てしまうようなので、ちょっと実験してみた

<style type="text/css">
a.link {
pointer-events: none;
}
</style>
<a class="link" href="#">リンク1</a>
sample : リンク1
test_button
リンク画像a img タグの時

 
onClick の時

 

jquery onClickの時

最近よく使う overflow について、まとめてみました。

floatの対策に、overflow: auto;(hidden) floatしたときに、要素が浮いて親の高さ小さくなってしまう対策で、親にclearfixの代わりに使えます。

hogehoge

hogehoge
#parent {
    overflow: auto;
}
#child {
    float: left;
}

overflow: hidden でもいいのですが、はみでる要素が消えてしまう場合があるので auto がよさげ 同時に

 #parent {
     overflow: auto;
     height: 100%;
     clear: both;
 }

するとさらにいいのかも? overflow: auto で親の高さが復活する理由として知恵袋に乗っていました。

ボックスの高さは、中身から計算されます。 ところが、浮動化したボックスは、親ボックスの中身とは見なされません。だからその分、親ボックスがつぶれたようになります。 しかしながら、親ボックスの overflow が visible 以外の値であれば、その中にある浮動化ボックスも高さ計算に加える、というルールになっています(これは CSS 2.1 からのルールです)。親ボックスがスクロール領域を持つときに、中にある浮動化ボックスを無視してしまうと、かえって不自然になるからです。その結果、親ボックスは中身に浮動化ボックスがあってもつぶれません。

なぜoverflow:hiddenでfloatのレイアウト崩れが解消できるんですか? やりかたは分…

ブロック要素をはみでる文字をoverflowで省略する。 overflowよりも、

white-space: nowrap;
text-overflow: ellipsis;

の2つがみそです。

width: 450px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;

タイル指定のポイント
・表示領域を指定(width: 450px;)
・改行禁止(white-space: nowrap;)
・表示領域外非表示(overflow: hidden;)
・末尾「…」表示(text-overflow: ellipsis;)
・WebKit対応(-webkit-text-overflow: ellipsis;)
・Opera対応(-o-text-overflow: ellipsis;)

●省略符号「…」を表示しないとき
text-overflow: clip;

文字数制限をしないでCSSだけで「…」を表示する

css3で背景を透過する時の注意

css3で背景を透過する時の注意

白背景の透過を使いたいなーって思ったときに、いつもは透過png画像を使っていました。

ふと、css3で良いかなって思ってやってみたらいい感じだったのでそれはOKなのですが、
途中で調べて気になった記事を見つけたのでメモ

背景色をrgbaとrgbで2重指定するときのIE地雷

ie7,8は、rgbaが使えないので、rgbを念のためつけておきますが、

A:

background: rgb(255, 255, 255);
background: rgba(255, 255, 255, 0.5);

B:

background-color: rgb(255, 255, 255);
 background-color: rgba(255, 255, 255, 0.5);

Bの場合はIE6-8で背景色が設定されていない状態になるそうです。
試していないですが、はまりそうですね・・・

もう一つの透過opacityは、背景だけでなく子要素まで透過してしまいます。
opacity: 0.6;
背景だけのときはrgbaですね。
rgba(0,0,0,0.6);