MW211 EXIT

devlog
CSS/CSSハック
2014年02月14日
CSSを特定のブラウザだけに有効にさせる記法を「CSSハック」という。

【IE6】
  先頭に「_」をつける
  ┌─┬──────────────────────────────────┐
  │例│_color  :#FFFFFF;                                                   │
  └─┴──────────────────────────────────┘

【IE7以下】
  先頭に「*」をつける
  ┌─┬──────────────────────────────────┐
  │例│*color  :#FFFFFF;                                                   │
  └─┴──────────────────────────────────┘

【IE8以下】
  末尾に「\9」をつける
  ┌─┬──────────────────────────────────┐
  │例│color   :#FFFFFF\9;                                                 │
  └─┴──────────────────────────────────┘
分類:CSS
CSS/マージン相殺
2014年02月13日
マージン(margin)が隣接していると、長い方が採用され、短い方が無視される。
「マージン相殺」である。

「マージン相殺」は垂直方向(縦方向)でのみ起こり、
水平方向(横方向)では起きない。

以下の二つの種類がある。(以下の図は便宜上90度回転している(本来は縦向き))
┌─────────┬──────────────┐
│                  │┌─────┐  ┌────┐│
│                  ││├→      │  │├→    ││
│(隣接)マージン相殺││          │⇒│        ││
│                  ││    ←─┤│  │ ←─┤ ││
│                *1│└─────┘  └────┘│
├─────────┼──────────────┤
│                  │┌─────┐  ┌────┐│
│                  ││├→      │  │├→    ││
│入れ子マージン相殺││          │⇒│        ││
│                  ││   ├─→ │  │├─→  ││
│                *2│└─────┘  └────┘│
└─────────┴──────────────┘
  *1:float同士の場合は相殺が起こらない
  *2:float同士の場合は相殺が起こらない
      また、親要素に「padding」「border」 が含まれているか
      「overflow:hidden」、「overflow:scroll」か
      「position:absolute」、「position:fixed」かの場合にも
      相殺が起こらない

例えば、以下のような入れ子の場合…
┌──────────────────────────────────────┐
│div#外側 {                                                                  │
│    height              :4em;                                               │
│    width               :4em;                                               │
│}                                                                           │
│div#内側 {                                                                  │
│    height              :2em;                                               │
│    width               :2em;                                               │
│    margin              :1em;                                               │
│}                                                                           │
└──────────────────────────────────────┘
以下のようなイメージになる。
┌──────────────────────────────────────┐
│                                                                            │
│┌─┬─┬─┐                                                              │
││  │  │  │                                                              │
││  └─┘  │                                                              │
││          │                                                              │
│└─────┘                                                              │
└──────────────────────────────────────┘
縦方向は外側「margin:0;」と内側「margin:1em;」が操作されて
「margin:1em;」となる(外側から見た場合「相殺」とイメージではないが相殺だ)。
内側は外側が「margin:0;」のまま、内側が「margin:1em;」のままなので
センタリングされたような形になる。
分類:CSS
CSS/「margin:auto;」の挙動
2014年02月12日
縦方向には「margin:0;」と同じになる。

横方向の場合は、「margin:残り100%;」と同じになる。
よって、左右両方に「margin:auto;」があると、「margin:残り50%;」と同じになる。

なので、「margin:auto;」は縦方向(上)に対しては「0」で
横方向(左右)に対してはセンタリングした形となる。

また、「float」の場合には、横方向に対しても「margin:0;」となる。
分類:CSS
PHP/セッションファイルの生成場所
2014年02月11日
「php.ini」の中身に「session.save_path」で定義されている。
┌──────────────────────────────────────┐
│session.save_path="C:\Windows\Temp"                                         │
└──────────────────────────────────────┘
分類:PHP
JavaScript/幅(3)
2014年02月10日
次に、「top」、「clientTop」、「scrollTop」、「offsetTop」。
「hegiht」とは概念が違うので注意。

┌─────┬───────────────────────────────┐
│      top │本来の領域からずれた縦幅                                      │
│clientTop │=padding(ずれた後の中身までの縦幅)                           │
│scrollTop │見えない領域の先頭からの縦幅                                  │
│offsetTop │bodyからの縦幅(bodyのpaddingは除く、自身のpaddingは含む)      │
└─────┴───────────────────────────────┘

「left」の場合も同様。
┌─────┬───────────────────────────────┐
│      left│本来の領域からずれた横幅                                      │
│clientLeft│=padding(ずれた後の中身までの横幅)                           │
│scrollLeft│見えない領域の先頭からの横幅                                  │
│offsetLeft│bodyからの横幅(bodyのpaddingは除く、自身のpaddingは含む)      │
└─────┴───────────────────────────────┘
分類:JavaScript
JavaScript/幅(2)
2014年02月09日
次に、「height」、「clientHeight」、「scrollHeight」、「offsetHeight」。
┌──────┬───────────────────────────────┐
│      height│=height                                                      │
│clientHeight│=height+padding                                             │
│scrollHeight│=height+padding                               +見えない領域│
│offsetHeight│=height+padding+scrollbar+border                          │
└──────┴───────────────────────────────┘
  ・「clientHeight」と「scrollHeight」は基本的に同じだが、
    スクロールバーが発生して見えない領域がある場合、
    「scrollHeight」はそれも含むという違いがある
  ・昔のIEでは「scrollHeight」の仕様が違う
    スクロールしていない場合は、中身のサイズのみ
    (つまり短いスクロールバーがあるであろうサイズのみ)を返していた
  ・スクロールバーが表示されると、
    paddingの内側が短く(実際に短くなるのはheight)なるが、
    「offsetHeight」以外はその煽りを受けて短くなってしまう
  ・「scrollHeight+scrollbar+border」という全部盛りは用意されていない
    「border」は「.css('border-top-width')」と「.css('border-bottom-width')」で
    算出できるが、「scrollbar」は「約16px」とかが使われたりする
    「=offsetHeight-clientHeight+scrollHeight」でできそうな感じがするが

「width」の場合も同様。
┌──────┬───────────────────────────────┐
│      width │=width                                                       │
│clientWidth │=width+padding                                              │
│scrollWidth │=width+padding                                +見えない領域│
│offsetWidth │=width+padding+scrollbar+border                           │
└──────┴───────────────────────────────┘

但し、情報が錯綜しているので、本当かどうかは今後検証していく。
ブラウザによる違いとかもありそう。
分類:JavaScript
JavaScript/幅(1)
2014年02月08日
まず、「outerHeight」と「innerHeight」。

これらはwindowの要素であり、以下の違いがある。
┌─────────┬────────────────────────────┐
│window.outerHeight│ブラウザ全体の縦幅                                      │
│window.innerHeight│ブラウザ内表示領域の縦幅(枠線やメニューバー等を除く)    │
└─────────┴────────────────────────────┘

widthの場合も同様。
┌─────────┬────────────────────────────┐
│window.outerWidth │ブラウザ全体の横幅                                      │
│window.innerWidth │ブラウザ内表示領域の横幅(枠線やメニューバー等を除く)    │
└─────────┴────────────────────────────┘
分類:JavaScript
JavaScript/px表記の数値化
2014年02月07日
jQueryなどでCSSの値において「■px」と、
「px」単位が付加されて取得されるものがある。

これを数値化するには、以下のように文字列置換してさらに数値変換する方法がある。
┌──────────────────────────────────────┐
│Number($(this).css('top').replace(/px/, ''))                                │
└──────────────────────────────────────┘

もっと簡単な方法(しかもメジャーな方法)として「parseInt()」を使う方法がある。
┌──────────────────────────────────────┐
│parseInt($(this).css('top'))                                                │
└──────────────────────────────────────┘
「parseInt()」は数値じゃない項目の手前までを数値として取り込む関数である。

但し、数値にできるものが一つもなかった場合には「NaN」を返す性質がある。
┌──────────────────────────────────────┐
│parseInt('')                                                           →NaN│
└──────────────────────────────────────┘

よって、以下のような感じで関数化してしまうのが安全化も。
┌──────────────────────────────────────┐
│pxNumber($(this).css('top'))                                                │
├──────────────────────────────────────┤
│function pxNumber(str) {                                                    │
│    return isNaN(parseInt(str)) ? 0 : parseInt(str);                        │
│}                                                                           │
└──────────────────────────────────────┘
分類:JavaScript
CSS/fieldsetにおけるオーバーフローの違い
2014年02月06日
画面の横幅を超える文字が「fieldset」タグ中にあった場合、
IEとそれ以外では挙動が異なる。

IE以外の場合、「fieldset」全体が拡張し、画面全体が横スクロールとなる。
┌──────────────────────────────────────┐
│  ┌タイトル────────────────────────────────│
│  │あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもや│
│  └────────────────────────────────────│
├─┬──┬───────────────────────────────┬─┤
│←│    │                                                              │→│
└─┴──┴───────────────────────────────┴─┘

IEの場合、「fieldset」は拡張せず、文字がはみだし、画面全体が横スクロールとなる。
┌──────────────────────────────────────┐
│  ┌タイトル──────────────────────────────┐  │
│  │あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもや│
│  └──────────────────────────────────┘  │
├─┬──┬───────────────────────────────┬─┤
│←│    │                                                              │→│
└─┴──┴───────────────────────────────┴─┘
ちなみに、「fieldset」の横幅をJavaScriptで調べたら、小さいままだった。

対策としては、「fieldset」自体にスクロールバーを実装してしまうというのがある。
┌──────────────────────────────────────┐
│fieldset {                                                                  │
│    overflow    :auto;                                                      │
│}                                                                           │
└──────────────────────────────────────┘
IEの場合のみ、「fieldset」が横スクロールとなる。
┌──────────────────────────────────────┐
│  ┌タイトル──────────────────────────────┐  │
│  │あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめ│  │
│  ├─┬──┬───────────────────────────┬─┤  │
│  │←│    │                                                      │→│  │
│  └─┴──┴───────────────────────────┴─┘  │
└──────────────────────────────────────┘
IE以外の場合は、「fieldset」が拡張して(「fieldset」内の)オーバーフローが
発生しないので、これまで通り画面全体が横スクロールとなる。
分類:CSS
jQuery/周辺の幅を取得する
2014年02月05日
┌─────┬────────────────────────────────┐
│上padding │$(this).css('padding-top'        ).replace(/px/, '');           │
│上border  │$(this).css('border-top-width'   ).replace(/px/, '');           │
│上margin  │$(this).css('margin-top'         ).replace(/px/, '');           │
├─────┼────────────────────────────────┤
│下padding │$(this).css('padding-bottom'     ).replace(/px/, '');           │
│下border  │$(this).css('border-bottom-width').replace(/px/, '');           │
│下margin  │$(this).css('margin-bottom'      ).replace(/px/, '');           │
├─────┼────────────────────────────────┤
│左padding │$(this).css('padding-left'       ).replace(/px/, '');           │
│左border  │$(this).css('border-left-width'  ).replace(/px/, '');           │
│左margin  │$(this).css('margin-left'        ).replace(/px/, '');           │
├─────┼────────────────────────────────┤
│右padding │$(this).css('padding-right'      ).replace(/px/, '');           │
│右border  │$(this).css('border-right-width' ).replace(/px/, '');           │
│右margin  │$(this).css('margin-right'       ).replace(/px/, '');           │
└─────┴────────────────────────────────┘
「■px」で取得されるので、「px」を取り除いて数値化している。

「border」だけ「-width」が必要なことに注意。
分類:jQuery
前へ 1 2 3 次へ