masterkey1009

##iOS7風 toggleButton あまり実装する機会はないかもしれないけれど、jQueryを使わずにiPhone風のToggle Buttonを実装

masterkey1009

##縦横比を固定したままレスポンシブに対応する 端末の画面サイズに合わせて要素の幅を変更する必要があるので、アスペクト比を固定する。

##擬似要素にpadding-topを指定することで縦横比を固定させる

高さの比率/幅の比率 * 100

• 4:3に固定する場合
  3/4*100 = 75
• 16:9に固定する場合

masterkey1009

<dl class="accordion">
	<dt>question01</dt>
	<dd>answer01</dd>
	<dt>question02</dt>
	<dd>answer02</dd>
	<dt>question03</dt>
	<dd>answer03</dd>
	<dt>question04</dt>
	<dd>answer04</dd>
	<dt>question05</dt>

masterkey1009

##要素からはみ出した文字に３点リーダーをつける 見出しなどの部分に使えるかも

• block要素にしか使えない

masterkey1009

.wrapper
	img(src='background' src='/path/to/image.jpg' alt='背景画像')
	.hoge
		p centering block
		

masterkey1009

<nav>
  <ul class="menu">
    <li><a href="#">link01</a></li>
    <li class="hasChild">
      <a href="#">link02</a>
      <ul class="subMenu">
        <li><a href="link2-1">link2-1</a></li>
        <li><a href="link2-1">link2-1</a></li>
        <li><a href="link2-1">link2-1</a></li>
      </ul>

masterkey1009

/*Only works Chrome and Opera*/
_::content, _:future,
.foo:not(*:root){
  background-color: #000;
}

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
  .foo {
    background-color: ForestGreen;
  }

masterkey1009

#!/bin/bash

function git_diff_archive() {
    local diff=""
    local h="HEAD"
    if [ $# -eq 1 ]; then
        if expr "$1" : '[0-9]*$' > /dev/null ; then
            diff="HEAD~${1} HEAD"
        else
            diff="${1} HEAD"

masterkey1009

input, button, textarea, select {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;