おそらく多くのWebデザイナーが待ち望んだであろうiPad版のPhotoshopがリリースされました。 私はiPad Pro 9.7インチモデルでさっそく使用してみたのですが、なかなか驚きの完成度だったのでどのようなアプリか紹介したいと思います。 著者は 神速Photoshop [Webデザイン編] をはじめとしたPhotoshopやIllustratorの解説書を書いている @Stocker_jp です。 まずは写真補正から 一眼レフカメラで取り込んだ写真を現像しようとRAWデータを開こうとしても、Photoshopアプリでは開くことができません。 先にLightroomアプリで現像しJPEG形式で書き出す必要があります。 続いてPhotoshopアプリで明るさやコントラストの強さを微調整しようとトーンカーブ補正を探したのですが［調整レイヤー］一覧の中にありませんでした。 さすがに何かの

Spectrum provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive.

Written by Cody Lindley Sponsored by Frontend Masters, advancing your skills with in-depth, modern front-end engineering courses Download: PDF | epub Overview: This is a guide that everyone can use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2019. It is s

ゴシック体 明朝体 丸ゴシック すべて カッコのみ Hiragino Noto 横書き 縦書き w100 w200 w300 w400 w500 w600 w700 w800 w900 0.625rem 0.75rem 0.875rem 1rem 1.125rem 1.25rem 1.5rem 2rem Before 「約物半角専用のWebフォント」を優先的に当てることによって、Webテキストの日本語に含まれる約物を半角にすることができました。例えば「かっこ」や『二重かっこ』、【バッジに使いそうなかっこ】などを半角にできます。ウェイトは9種類。Noto Sans JPに沿っています。 <!-- HTML：CDNリンクを貼り付け --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist

レイアウトが同じで「タイトル」と「メイン画像」が違うHTMLを量産するために使いました。 あまり理解できてないので、理解を深めるためにまとめようと思います。 ながれ ページ生成用JSONファイル（pages.json）をつくる テンプレート用EJSファイル（template.ejs）をつくる EJSの設定をgulpfile.jsに追記する gulpタスクを起動 構想 フォルダ構成 ↓こんなかんじで作ろうと思います。 src ├── __gulpfile.js__ │ ├── json │   └── __pages.json__ └── ejs └── __template.ejs__ dist └── __ejs生成HTML出力先__ JSONデータ 下記３つのデータJSONで管理しようと思います。 出力ファイル名(page) タイトル(title) 画像ファイル名(imageSrc)

REMM（レム）は、フロントエンド開発における「要素命名」と「CSS管理」、 「スタイリングアプローチ」の方法論です。 「Roots（ルーツ）」という考え方でHTML要素の命名を概念的にグルーピングすることによって、 CSS設計の自由さと、CSSプロパティ汚染に対する適度な堅牢性が得られます。

なんとかPayは、誰でも自由にPayを発行できる最新のサービスです。 作成したPayは、QRコードを利用して個人間で送受信に利用できます。 4月1日に誕生しました。 楽しみ方と注意点 をよく読んでご利用ください。

今回のテーマ Webパフォーマンスを改善する上で知っておきたい知識をまとめてみました。 前回の記事では使わなかった（使えなかった）技術や方法なども含めて記載します。 また、ブラウザのレンダリングなどについても書きたいと思います。 (2019年5月23日追記) 過去の記事はこちら How to 速度改善 ー計測・知識編ー How to 速度改善 ー原因調査編ー How to 速度改善 ー実装&技術調査編1ー 1. ブラウザレンダリングの仕組み 推測するな、計測せよ という言葉にあるように、闇雲にチューニングを初めても良い結果は出ません。まずはブラウザレンダリングの仕組みからみていきましょう。 ブラウザレンダリングの流れ レンダリングの大まかな流れは Loading→Scripting→Rendering→Painting（これでページが表示される） となっています。 この処理の内容をフレーム

自身のサイトにマイニングソフト「Coinhive（コインハイブ）」を設置したとして、Webデザイナーのモロさんが不正指令電磁的記録 取得・保管罪（通称：ウイルス罪）に問われている事件で、3月27日、横浜地裁は弁護側の主張を認め、「無罪」（求刑：罰金10万円）を言い渡しました。 モロさんの代理人である平野敬弁護士 モロさんが事件についてまとめた「仮想通貨マイニング（Coinhive）で家宅捜索を受けた話」（モロさんのサイトより） 事件のあらまし サイト訪問者のPCのCPUを使ってWebブラウザ上で仮想通貨をマイニング（採掘）させる「Coinhive」を設置したことを巡り、複数の検挙者が出ている問題（通称：コインハイブ事件）。ねとらぼでは1月30日に「なぜコインハイブ『だけ』が標的に　警察の強引な捜査、受験前に検挙された少年が語る法の未整備への不満」との記事を、2月16日に「『お前やってること

「Understand 5」の画面イメージ 「Understand」は、C／C++、Java、C#などのソースコードを解析し、その構造を可視化する。 今回発売した「Understand 5」では、新たにC／C++（Strict）モードにて関数ポインタによる関数の呼び出しや、ポインタ変数のアドレス操作といった、ポインタ経由の依存関係の解析をサポートしており、これらの依存関係はCallsグラフなどグラフィカルビューでも表示できる。 さらに、修正前と修正後のコードから作成した2つのUnderstandプロジェクトを比較して、追加／削除された関数や変数の参照関係の差分を抽出可能で、差分を色分け表示したグラフと差分のリストを出力する機能が追加されたほか、UML Sequence DiagramやControl Flowといったグラフィカルビュー機能の拡張や、これまでは追加プラグインとして提供されてい

みなさん、こんにちわ！ ジャングルオーシャンのラファエロです！ みなさんはユーザー登録やお問い合わせのページって作ったことありますか？ See the Pen XGgMrB by JOラファエロ (@jo_raffaello) on CodePen. このようなフォームのページを作成するには、inputタグやtextareaタグなどといったフォーム部品タグと呼ばれる専用のHTMLタグを使います。 多分、Webデザイン初心者の方はほどんど触ったことなかったりするんじゃないでしょうか(^^;) 実はフォーム部品タグには、ユーザビリティを向上させるための専用の属性や便利なCSSの設定が色々あるんですよ！ ということで、今回はフォームのHTML・CSS基本テクをご紹介します！

hiroppy is creating OSS | Patreon Become a patron of hiroppy today: Get access to exclusive content and experiences on the world’s lar... 以下、編集前の記事 注意: あくまでもこれは webpack の話です 2 月分の OSS 活動費 2 月分の OSS 活動費が以下の額で支給されます。 $1674(186,620.87 円) Total: $2093(233,331.83 円) 現状の自分について 今年から webpack に復帰しました。(以前活動してた時はまだ openCollective に参加してない) そして、本業の他に個人事業主をやっていますが、今は税理士がいません。 日本では他の会社のお仕事もしているため、毎月ごとに請求書を書いて提出し

この記事ではブラウザの仕組みを図解を用いてわかりやすくご説明します。 最近のブラウザは優秀なので、ブラウザの仕組みを理解していなくても、パフォーマンスの問題が発生することは少ないかもしれません。 しかし、アニメーションを多用するサイトやユーザーインタラクティブなサイトの場合、パフォーマンスの問題はとてもシビアです。 ブラウザの仕組みを知ることで、ブラウザのパフォーマンスを最大限に引き出す実装を行うことができます。 画面がなめらかに表示されないのはなぜ？スクロールをしていてカクつく。またはアニメーションがカクカクしている時というのはブラウザがどういう状態なのでしょうか？ まずは、この状態を定量的に説明するためFPS（フレームレート）から説明します。 FPSとはFrame Per Secondの略で1秒ごとの画面(フレーム)の切り替わる回数を表しています。 ブラウザでサイトを見た際には最高で6

Introduction The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook. While many different technologies and schemas exist and could be combined together, there isn't a single technology which provides enough information to richly represent any

UIデザイナー山本麻美に寄せられたSketch初心者からの質問をみんなに共有するブログ