PSDファイルでデザインが規定されている場合の、レスポンシブデザインを実装する手順について

See the Pen used レスポンシブ by nakanishi (@nakanishi) on CodePen.

PSDファイルでデザインが規定されている場合、大きく分けて2つの実装パターンがある。

1つは全ての要素の「幅、高さ」をPSDファイルで指定されたpxで固定するパターンで、その場合、ラッパーのマージンがAUTOで変化する。つまり画面幅の変化に対して、「追従して変化するのは」ラッパーのマージンだけ、ということになる。(またラッパーに対してmin-width: –px で、それ以上小さくならないように指定することも多い。) これはユーザーのブラウザ横幅が、ある一定値よりも大きいほうでバリエーションが多いことを想定できる場合、つまりPC版で主に使われる。(900pxとか970pxとか1200pxとか、比較的大きい幅で見る人が多いであろう状況)

このパターンの実装は比較的容易で、各要素の幅をPSDファイルで指定されたpxに設定し、マージンも規定されたpxで設定すればよい。(特に画像パーツの幅、高さは全て指定してよい)

次に2つめのパターンとして、スマートホン版等、どんな横幅でも同じ見た目にするには、全ての要素を%で指定する。

このパターンの場合、width を指定すれば、margin: auto は効く。ただしposition: absolute、relative 等を設定した場合、margin: auto は効かない。しかし、margin-left: –% も left: –% も効く。そのため、中央に配置したい場合は、left: 23%等、マージン幅の全体に占める割合を指定することで配置する。

また画像そのものをレスポンシブにするには次の記事を参照

float position z-index の考察 / 仮説

こんなふうになっているのではないか…仮説…

See the Pen used box float absolute2 by nakanishi (@nakanishi) on CodePen.

See the Pen used box float absolute3 by nakanishi (@nakanishi) on CodePen.

See the Pen used box float absolute4 by nakanishi (@nakanishi) on CodePen.

See the Pen used box float absolute5 by nakanishi (@nakanishi) on CodePen.

See the Pen used box float absolute6 by nakanishi (@nakanishi) on CodePen.

CSSの世界は3層ある

層が上のほうがかならず表示的に上に来る。position層だけはz-indexで表示順を操作できる。

  1. ノーマル層。position: static かつ float: none。 ぶつかり合って、同じ位置は占有できないので、弾かれる。親要素から唯一見える。(position: relativeは例外的にここに存在する。)
  2. float層。ぶつかり合って弾かれるが、1の層の上でおきているので、1の層とは干渉しないし、上に表示される。親要素からは消える。
  3. position層。平面的な世界で、ぶつかりあうことはなく、同じ位置に何個でも置ける。表示順はz-indexで指定する。top,left、z-indexが効く。親要素からは消える。(relativeだけは消えない。例外)
position / float none left / right
static  1層へ  2層へ
relative top,right等効く。1層へ top,right等効く。2層へ
absolue, fixed top,right等効く。3層へ  floatは効かない

標準位置

  • position: static
  • float: none
  • top、left等: auto (0とは違う)

バックグラウンドイメージ背景の画像を画面幅100%にする方法

See the Pen Responsive background-image by nakanishi (@nakanishi) on CodePen.

ポイントは疑似要素にパディングを与えて、親要素の高さを動的に決定することである。疑似要素のパディングが、親要素に対して一定の比率を保つことで、結果として元画像の縦横比をキープしたまま、画像を伸縮することができる。

親要素にmarginがなくても、子要素にmarginがあると、結果的に親要素にmarginがあるような挙動になる

See the Pen used child-margin by nakanishi (@nakanishi) on CodePen.

一生懸命、隣り合った親要素のマージンを調べても、何故隙間が空くのかわからない。マージンは0だ。

その場合は、子要素にマージンがついている可能性がある。いくら親要素を確認しても、子要素のマージンによって生じる親要素同士の隙間の原因はわからない。

子要素のマージンが親要素に影響があることに注意したい。

ES5, CoffeeScript, ES6の記法の違い

ES5, CoffeeScript, ES6の記法の違いが混乱するのでまとめた。

ES5 CoffeeScript ES6
参考資料 詳しい
標準ブラウザで 読める 読めない (要トランスコンパイル) 読めないものも多くある (実務レベルでは要トランスコンパイル/主としてBabelを用いる)
 記法デモ Class構文 JQuery.cssの書き方 Class構文 ES5と6の違い
セミコロン いる いらない いる
function(){内容} function(){内容} ()=> 改行インデント 内容 ()=>{内容}
 function(引数){内容}   function(引数){内容} (引数)=> 改行インデント  内容  (引数)=>{内容}
関数の実行 call(); call()

引数がないときは必ず()が必要

call();
関数の実行(引数あり) call(“start”); call “start”

引数があるときは()を省略可能

call(“start”);

CodePenでEmmetを使う

http://docs.emmet.io/cheat-sheet/

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-14-5-53-44

Emmetとは

Emmet は元々 Zen-coding という名前で開発されていた HTML と CSS のショートカットのようなもので、tag名や()を全て入力しなくても、簡略化した記法の最後に tab を押すことで、HTML や CSS へ展開できるコーディングのためのシステムです。

Emmetを各種エディター、CodePenで使うには

Emmet は Sublime Text や Atom 等、ほとんどのエディターのためにプラグインが用意されており、使用することができます。

CodePenでは最初からEmmetを使うことができます。

Emmetの例

Emmetの一例を以下に記します。全てのEmmetについては本家サイトのショートカット集から確認できます。http://docs.emmet.io/cheat-sheet/

See the Pen used emmet by nakanishi (@nakanishi) on CodePen.