環境

環境

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」を拡張する形で…

はにわまん
環境

VSCodeでPrettierを使ってWordPressのコーディング規約に沿った自動フォーマットする方法

Prettierは、JavaScriptとCSSのコードをフォーマットしてくれるツールのことです。 何がすごいって、ESLintであったりstylelintのようなコード検証ツールの設定を指定すれば、…

はにわまん
環境

静的HTMLサイト制作を楽にするGulpの基本的な使い方【Webコーダー向け】

Gulpは、いろんな作業を自動化してくれるツールです。 CSSやHTMLを保存したらブラウザ側も自動的にリロード Sassが保存されたタイミングで自動コンパイル CSSにベンダープレフィックスを自動で…

はにわまん
環境

WebコーダーがVSCodeで使いたいショートカットと設定、拡張機能

Webコーダーのわたしが普段利用しているVSCodeでの「設定」と「ショートカット」、「拡張機能」についてまとめました。 使ってないものがあれば積極的に取り入れていきましょう! 画面レイアウトの基本 …

はにわまん
1 3 4 5 6