shikakun

.bundle

shikakun

2017: HTML & CSS Odyssey

🚀 2017 年 HTML と CSS の旅

このページは、GMO ペパボ株式会社の 2017 年新卒研修座学の資料（旅のしおり）です。

📕 Chapter 1: プロローグ

📗 Chapter 2: HTML

shikakun

iPhone の解像度はこんな感じ、

デバイス	解像度	ppi	比率	必要な画像ファイル
iPhone 6 Plus	1920x1080	401ppi	16:9	@3x
iPhone 6	1334x750	326ppi	16:9	@2x
iPhone 5/5S/5C	1136×640	326ppi	16:9	@2x
iPhone 4/4S	960×640	326ppi	3:2	@2x

だけど、そもそも解像度ってなんなのか？

shikakun

インタフェースデザインの実践教室

http://booklog.jp/item/1/4873116082

UI やユーザー体験のデザインにあたって大事なことが書いてあるボリュームある本ですが（まだ読み切れてない）、ユーザビリティテストについては 27〜30 章あたりにまとまって書かれていました。今回はここにこういうことが書いてあったよっていうのをお話しします。

shikakun

This is Material Design

1. Material is the metaphor

A material metaphor is the unifying theory of a rationalized space and a system of motion. Our material is grounded in tactile reality, inspired by our study of paper and ink, yet open to imagination and magic.

2. Surfaces are intuitive and natural

Surfaces and edges provide visual cues that are grounded in our experience of reality. The use of familiar tactile attributes speaks to primal parts of our brains and helps us quickly understand affordances.

shikakun

#! /usr/bin/env ruby
# -*- coding: utf-8 -*-
# css ファイルのなかのセレクタを一覧で出力する
# 参考: http://qiita.com/walf443/items/6524a3d042365f7f98dc

require 'sass/css'

def print_uniq_selectors(file)
  css = ""
  File.open(file) do |io|

shikakun

// ==UserScript==
// @name          tatodesignDetailOpenNewTab
// @namespace     http://shikakun.com/
// @description   Tatodesign の部屋の詳細ページを新しいタブで開けるようにします
// @include       http://www.tatodesign.jp/*
// @grant         none
// ==/UserScript==
$(function() {
  $('#room_list').find('.section').each(function () {
    var href = $(this).find('.img').find('a').attr('href');

shikakun

a = [1,2,3,4,5]
words = ['paperboy', 'lolipop', 'muumuu-domain', '30days album', 'sqale', 'osaipo', 'heteml']

# 1. 配列の各要素を二倍した配列を返す
a.collect{|i|i*2}

# 2. 配列の要素をすべて足し算した結果を返す
b = 0
a.each do |i|
  b = b + i