仕事のろのろ更新の戒めブログですが、内容を考えすぎたり盛り込みすぎると進まないので、本当に備忘録程度のメモでも載せていこうかなあという所存です。アイキャッチ画像とか...なくてもいいんだい...(いつも無駄に時間かけて探してしまう)とか言いつつも今日はモリモリガリガリです。デザインを提案する際に、PCレイアウトとスマホレイアウトのカンプを作成するかと思います。今までは、スマホ実機で見た時にそれっぽく見えるよう、カンプ画像表示サイズの最大値だけを決めてその値よりブラウザ幅が小さい時は画像が伸縮するようなページを作成して提出していました。実機で見る人もブラウザを縮小する人もいないもよう...ただの大味なスマホ画像がぺろーんとページど真ん中にでている状態で見られることが多いなあと思い、より実際の使用感をイメージしやすそうなページを作成してみました。Blisk風なレイアウトスマホ実機で見た時の表示をしてくれるブラウザ「Blisk」(開発者ツール使えるのでバグ修正の時など超便利)風に、スマホのガワ画像の中で中身がスクロールするように見せられたらええんちゃうん、とこんなの作ってみました。画像を見せたい場合は表示領域を指定した要素内に画像を乗っける。※中身はクマジェネレータです。CodePen.●コーディングしたページを見せたい場合すでに実装済みのページを見せたい場合は、iframeを使用。※中身は以前作成したCSSおばQのページです。CodePen.モックアップページをスマホ実機で見た場合の一手間PCで見た時はBlisk風に表示、スマホで見た時は中身だけ表示をさせるための一手間。PCかスマホかを判定し、スマホの場合はモックアップのガワを取るだけです。codepenでその記述をしたところ、認識してくれなかったので別途記述したいと思います。