環境

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

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

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

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

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

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

404ページもサイト構成も「Frog」で一括チェック!質の高いWeb制作を行いましょう!

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

VSCodeにコードスニペットを登録して効率的にコーディング!

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

サイトで使われているすべての画像を一括でダウンロードする方法

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

「はじめて」でも簡単!Emmetの使い方とよく使うパターン集

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

たった1分でWordPress開発環境が作れる!「Local by Flywheel」がノンプログラマーに超絶おすすめ

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

5分で終わる!WindowsでGulpを使えるようになるまでの手順

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

VSCodeでWordPress開発するための拡張機能とおすすめの設定

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