デザイン学習日記

# デザイン学習日記
# 0001 :frowning2:
## Header, Footer, Contentsのチャットを作り時に出会った問題
* contentのmax-height: 500pxにしてoverflowをscrollにしたら、モバイルではScrollが動かない...
* Solution: JSでeventListenerを実装して、作り直す

```js
// 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](https://css-tricks.com/snippets/css/drop-caps/)

# 0002

## mediaの使用
```css
@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をかく

```js
var html = '<div />'
```

マルチライン

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

## Buttonでonclickにeventをbindする

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


# 0004

## SEO対策

### Canonicalタグ

* 同じコンテンツのページが複数存在すると重要度が分散する

```html
<domain>.com
<domain>.com/index.*
www.<domain>.com
www.<domain>.com/index.*
#どれが重要かわからなくなるためまとめるのがcanonicalタグ

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

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

## UI設計
使いやすそうなライブラリ、プラットフォーム
* [Semantic UI](https://semantic-ui.com/)
* [Slide out](https://slideout.js.org/)

# 0004
## タイプ effect
[Typewriter Effect](https://css-tricks.com/snippets/css/typewriter-effect/)

## 入力待ちDots

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

```css
@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](https://martinwolf.org/blog/2015/01/pure-css-savingloading-dots-animation)

# 0005

## アイコンのロードパフォーマンス向上
* CSS Sprite
    // 簡単に説明すると、一つの画像に使うイメージを全て集約してpositionを変えながら使う

```CSS
.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

## アニメーション編

* [実現手法](https://backyard.imjp.co.jp/articles/web_animation3)
* [パフォーマンス](https://ics.media/entry/265)
* [CreateJS](http://www.createjs.com/)


# 0007

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

* [site point](https://www.sitepoint.com/scroll-based-animations-jquery-css3/)


# 0008

## vw, vh, vmin, vmax

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/165810/bf72b876-6615-08aa-967b-401b964a05f4.png) 
from [Developer.IO](http://dev.classmethod.jp/ria/html5/css-length-viewport/)