環境

FTPツールからテキスト比較(diff)してアップロードする方法(Windows)

コーディングの仕事をしていると修正したファイルをアップロードする機会が多くあります。 自信満々にそのままアップロードしてもいいかもしれませんが、ビビリなわたしはテキスト上の修正箇所を確認してからアップ…

Illustratorのデザインカンプからコーディングに必要な画像や値を取得する方法

WebコーダーはIllustratorを完全に扱える必要はありませんが、コーディングに必要な値やデータを取得できなければなりません。 (Illustrator自体は、わたしはほぼ使えません&#8230…

Windowsの画面上の画像や動画をサクッと撮れるスクリーンキャプチャ2つ

リモートでのWeb系のやりとりって、テキストに加えて画像や動画を入れたほうが分かりやすいことがほとんどだと思います。 テキストでどこどこと説明するよりも、「ここを見て欲しい!」って場所はキャプチャして…

Googleフォームの送信内容をスプレットシートへ書き出し&任意のメールアドレスに通知する方法

Googleフォームが楽すぎることが判明しました。サイトにいつも設置しているお問い合わせフォームもデザインを気にしなければGoogleフォームでも十分かもしれません。 Googleフォームのメリットと…

PerfectPixelを使えばデザインカンプを完全再現したコーディングができる!

コーダーとしての質の高さの指標の1つに、デザインカンプからの再現度の高さが挙げられると思っています。 PCサイトだけ作っていればいい時代に生まれた言葉で「ピクセルパーフェクト」があります。ピクセルパー…

Photoshopのデザインカンプからコーディングに必要な画像や値を取得する方法

WebコーダーはPhotoshopを完全に扱える必要はありませんが、コーディングに必要な値やデータを取得できなければなりません。 この記事ではPhotoshopからコーディングする際に必要な値や画像を…

Sassから完璧なCSSファイルを出力するために通したいGulpのタスク【WordPress編】

Sassから完璧なCSSファイルを出力するためのgulpfile.jsの書き方や、必要なパッケージpackage.json、.stylelintrcへの記述についてです。 最初に言っておくと、完璧なと…

「Noto Sans Japanese」の不要なものは削除して必要なものだけ読み込む方法【Webフォント高速化】

Webフォントとして使える「Noto Sans Japanese」は、無料かついい感じのデザインで使えるので、おそらく多くの方が重宝しているフォントだと思いますが、デメリットが1点。 それは、読み込み…

VSCode内でHTMLとCSSのコードをW3Cチェック(バリデート)させる方法

VSCodeで管理しているHTMLとCSSを、W3Cが提供している「バリデーター」でチェックしてもらう方法です。 W3CのバリデーションサイトにアクセスしてURL入力してとか、ファイルアップロードして…

VSCodeで「WordPress Coding Standards」に準拠してPHPの自動フォーマットする方法

WordPressのPHPの記述にはコーディングルールがあります。「WordPress Coding Standards」というものにまとめれており、「PHP Code Sniffer」を拡張する形で…