制作事例用にサイトのDesktop/Mobileサイズでスクショを撮る方法 | ddryo
Arkhe公式サイトで使用事例をいくつか公開したんですが、各サイトの様子をデスクトップ風・スマホ風に表示して並べて掲載してみました。 ↑こういう感じ この時に、各サイトのスクリーンショット画像をどうやって撮るか？ってことに少し悩んだので、手順をメモっておきます。 今回のスクショ手順 STEPデベロッパーツールでデスクトップ / モバイル用のレスポンシブサイズを定義 Chromeでのデベロッパーツールを使ってスマホサイズでプレビューしたりするやつありますよね。 あのプレビューサイズ、実は自分で定義できるようにもなっているので、そこでスクショ用サイズを定義しちゃいます。 自分は desktop → 1920 : 1080、mobile → 400 : 720 サイズ で定義しました。 ↓ ↓ 「デバイスのピクセル比」を1にしておくとそのままのサイズでスクショが取れる。 （サイズダウンの処理を後
Postn | バックエンド開発不要のヘッドレスフォーム
Postn（ポストン）はHTMLを貼り付けるだけでお問い合わせ機能などが構築可能。言語やフレームワークに依存することなく、Jamstack構成のサイトにも利用可能です。
チャットルームを作成して友人と競いながらコーディングを学べる・「binarysearch.io」
binarysearch.ioはチャットルームを作成して友人と競いながらコーディングを学べるWebアプリです ルームを作成すると問題がすでに出題されていますので招待した友人とチャットを交えて競い合いながら学べるように設計されています よくあるチャットサービスとコーディングスタディサービスを掛け合わせたような印象です。いいアイデアですね 開発者としては一人で学ぶのは非効率で、他人と助け合ったり時に競い合ったりするほうが上達が早いと考えた上でこうしたサービスを展開したそうです。学校の教材なんかにも良い気がしました。 尚、現在はベータ版で学べる言語は3つしかないのと、不安定な部分もあるかもしれないとの事です。利用にはユーザー登録が必要です binarysearch.io
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSON Crack | More Than A JSON Editor
%26t%3Dseti%26wt%3Dnone%26l%3Dtext%252Fx-php%26ds%3Dtrue%26dsyoff%3D20px%26dsblur%3D68px%26wc%3Dtrue%26wa%3Dtrue%26pv%3D56px%26ph%3D56px%26ln%3Dfalse%26fl%3D1%26fm%3DHack%26fs%3D14px%26lh%3D133%2525%26si%3Dfalse%26es%3D2x%26wm%3Dfalse%26code%3D%25253Cdiv%252520class%25253D%252522jquery%252520theme%252522%25253E%25250A%25253Cp%252520id%25253D%252522slider%252522%252520class%25253D%252522nivoSlider%252522%25253E%25250A%25253C%25253Fphp%252520%252524args%252520%25253D%252520array(%25250A'posts_per_page'%252520%25253D%25253E%25252010%25252C%25250A'category_name'%252520%25253D%25253E%252520'topimg'%25250A)%25253B%252520%25253F%25253E%25250A%25253C%25253Fphp%252520%252524query%252520%25253D%252520new%252520WP_Query(%252520%252524args%252520)%25253B%252520%25253F%25253E%25250A%25253C%25253Fphp%252520while%252520(%252520%252524query-%25253Ehave_posts()%252520)%252520%25253A%252520%252524query-%25253Ethe_post()%25253B%252520%25253F%25253E%25250A%25253C%25253Fphp%252520if(%252520get_field('topimg1')%252520)%25253A%252520%25253F%25253E%25250A%25253Cimg%252520src%25253D%252522%25253C%25253Fphp%252520the_field('topimg1')%25253B%252520%25253F%25253E%252522%252520width%25253D%252522960%252522%252520height%25253D%252522470%252522%252520%25252F%25253E%25250A%25253C%25253Fphp%252520endif%25253B%252520%25253F%25253E%25250A%25253C%25253Fphp%252520endwhile%25253B%252520wp_reset_postdata()%25253B%252520%25253F%25253E%25250A%25253C%25252Fp%25253E%25250A%25253C%25252Fdiv%25253E)
Carbon | Create and share beautiful images of your source code
HTML名刺のサービス終了について
RoomClip ｜ 家具とインテリアの通販サイト・部屋のインテリアコーディネート実例共有サイト
