デザイン学習日記

12255 ワード
HTML JavaScript CSS HTML テキストリンク

デザイン学習日記

0001

Header, Footer, Contentsのチャットを作り時に出会った問題

  • contentのmax-height: 500pxにしてoverflowをscrollにしたら、モバイルではScrollが動かない...
  • Solution: JSでeventListenerを実装して、作り直す
// with mobile just add listener to 'touchmove' and also
// think about using 'touchstart'

document.getElement.addEventListener('mousewheel', function(e){
    var event = e.originalEvent,
    d = event.wheelDelta || -event.detail;
    // this.scrollTop += -d / 10;
    this.scrollTop += ( d < 0 ? 1 : -1 ) * 30;
    e.preventDefault();
})

モバイルのブラウザーでキーボード操作

  • disable keyboard show up <input readonly='true'></input>
  • Number input only <input pattern='\d*'>

先頭文字の操作

  • ::first-letterのようなプロパティが存在する
  • 綺麗に作ってくれた、サンプルDrop Caps

0002

mediaの使用

@media screen and ( condition ){}

e.g
@media screen and (min-width: 992px){}
widthが992より大きい時に適用できるルール
max-width: 992pxだと逆

PDF.js

使用理由

  • モバイルでもPDFを読み込み、読むことが可能になる、ページ遷移、redirectionなし

  • 問題点

  • ピンチアウトとかで、メモリが足りなくなって落ちる

Canvas使う場合

  • chromeではzoom inできない原因不明、safariだとOK

JS vs CSS

  • 動的に変換するのはCSSの方が強い mediaで制御する
  • JSで生成されたルールが後でCSSで変更できないこともある

0003

JSの中でHTMLをかく

var html = '<div />'

マルチライン

var html = ' <div class... \
        .....  \
        .....  \
        </div> \
    '

Buttonでonclickにeventをbindする

<button onclick = 'func(event)' />

0004

SEO対策

Canonicalタグ

  • 同じコンテンツのページが複数存在すると重要度が分散する
<domain>.com
<domain>.com/index.*
www.<domain>.com
www.<domain>.com/index.*
#どれが重要かわからなくなるためまとめるのがcanonicalタグ

<link rel="canonical" href="http://○○○○○.com/"/>
を加える

#　httpsは.htaccessでなんとかする

UI設計

使いやすそうなライブラリ、プラットフォーム
* Semantic UI
* Slide out

0004

タイプ effect

Typewriter Effect

入力待ちDots

<p class="is-inputting">Saving<span>.</span><span>.</span><span>.</span></p>

@keyframes blink {
  0% {
    opacity: .2;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: .2;
  }
}
.is-inputting{
  font-size: 40px;
  margin-bottom: 10px;
  text-align: center;
  margin: 0px;
}
.is-inputting span {
  animation-name: blink;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.is-inputting span:nth-child(2) {
  animation-delay: .2s;
}

.is-inputting span:nth-child(3) {
  animation-delay: .4s;
}

Pure CSS saving/loading dots animation

0005

アイコンのロードパフォーマンス向上

  • CSS Sprite // 簡単に説明すると、一つの画像に使うイメージを全て集約してpositionを変えながら使う
.class{
    background-url: url();
    background-repeat: no-repeat;
    background-size: 200%; //resize image to value if 800 * 800 -> 1600 * 1600
    background-position: 0px 0px;
}

0006

アニメーション編

0007

Scrollによる、アニメーション

0008

vw, vh, vmin, vmax

viewportに対して、
widthを基準に100vw -> 100%　変換率
heightを基準に100vh -> 100%　変換率


from Developer.IO

HTMLベース
次のjsでswrを使用する