環境

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

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

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

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

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

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

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

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

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

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

インターネット上のWebサイトをスクレイピングしてSEOに必要な要素をピックアップしてまとめてくれるツールです。 正式名称は「Screaming Frog SEO Spider Tool & Website Cr […]

VSCodeでは各拡張子ごとにスニペットを登録しておくことが可能です。スニペットとは、単語登録のように、何かの文字をキーにコード一式を登録しておいて、簡単に使い回しできる機能のことです。 プログラミングをしていると、「こ […]

サイトで使われている画像を一括でダウンロードする方法です。 運営している無料ブログから自分の画像を取得したいときに重宝するかと思います。 「Screaming Frog SEO Spider」でサイトの全ページ情報を取得 […]

display: block;の15文字をdbの2文字で入力できるようになるのがEmmetです。 1日中コーディングしているわたしにとってこの1回の差は大きく、100回入力したときには1,300文字分の差が生まれているわ […]

「Local by Flywheel」が凄すぎました。 WordPressの開発環境を作るのが地味に面倒で面倒だったのですが、「Local by Flywheel」を使えば、以下の作業をボタンひとつで出来ちゃいます！ ロ […]

WindowsでGulpコマンドを使えるようになるまでの手順です。 順番さえ覚えておけば、数分で終わります！ gulpインストールまでの流れ ざっくりと流れは以下のとおりです。 Node.jsのインストール npmのイン […]

VSCodeにWordPressでの構築が捗るであろう、あれこれを入れていきます。チェック機能が多めです。 個人的には、Sublime Textより使いやすいエディタです。（日本人に優しい気がする） おすすめの拡張機能 […]

WordPressでテーマやプラグインを開発している人なら必須な「WordPress-Coding-Standards」をWindowsに導入する方法について紹介していきます。 いざ実行するとエラー出まくりで、めちゃくち […]