今回はdnd-kitを使ったドラッグアンドドロップ機能の環境構築を紹介します。 ドラッグアンドドロップのライブラリは他にもありますがメンテがされていなかったり、使いづらさがあったりしますよね。 dnd-kitはその中でも使いやすそうということで触ってみることにしました。 私自身はJavaScriptはmapメソッドくらいしか知らないレベルでしたが、dnd-kitを通して色々なメソッドの使い方が非常に勉強になりましたので皆さんにもおすすめします。 <!-- /wp:paragraph -->
【HalfScroll】vscodeの拡張機能で半画面スクロールさせる
今回はvscodeの拡張機能であるHalfScrollについて機能の説明と使用方法について紹介します。 HalfScrollは、エディタ内でのスクロールを効率的にすることができる拡張機能で、コーディングやドキュメントの編集作業をより快適にしてくれる便利なツールです。 vimのエディタを使っていて半画面スクロール機能が便利だと思っていたのですが、どうやらvscodeには半画面スクロールに対応するショートカットキーが無さそうでした。 このHalfScrollを導入すれば半画面スクロールができるようになるので気になる方はぜひ導入してみてください。
【webpack5】webpack インストールから導入まで使い方まとめ【web制作】
今回はモジュールバンドラーであるwebpackについてのまとめを紹介していきます。web制作でwebpackを使う場合の使い方をまとめています。web制作ではコーディング以外にたくさん気を付けないといけないことがあります。webpackを導入すればその面倒な作業を全て自動化させることができるかもしれないので、気になる方はぜひ見てください。
【webpack5】webpackのテンプレートサンプル紹介【web制作】
今回はwebpackのテンプレートサンプルを紹介していきます。web制作でwebpackを使う場合のテンプレートを紹介します。入したけどどういうプラグインを導入すればいいか分からない、webpackを導入したけどどういうプラグインを導入すればいいか分からない、どのように構築していけばいいか分からないといった方に見ていただけるとうれしいです。web制作をしている方はwebpackを使えるようになるとできる幅が広がるのでぜひ参考にしてください。
【webpack5】sassの画像やフォントのアセットファイルの依存関係を解決する【web制作】
今回はwebpackでsassの画像やフォントのアセットファイルの依存関係を解決するやり方ついて紹介します。webpackでsassをコンパイルするときに画像などのパスの指定が合ってなくてエラーになることを経験した方は多いかと思います。sassの画像やフォントのアセットファイルの依存関係を解決するやり方が分からない方は参考にしてください。
【webpack5】sassのコンパイルをする【web制作】
今回はwebpackでsassをコンパイルするやり方ついて紹介します。web制作ではsassのコンパイルは必須ですよね。webpackでももちろんsassのコンパイルは出来るのですが、いろんなローダーやプラグインを使用しないといけないので意外と面倒です。sassのコンパイルのやり方が分からない方は参考にしてください。
【webpack5】html-webpack-pluginで複数のhtmlファイルを動的に出力する【web制作】
今回はhtml-webpack-pluginで複数のhtmlファイルを動的に出力するやり方について紹介します。web制作ではページごとにhtmlファイルを複数作成するかと思います。ですがhtml-webpack-pluginは複数のhtmlファイルを動的に出力するオプションみたいなものはなく、自分で作るしかありません。複数のhtmlファイルを扱っている方は参考にしてください。
【webpack5】html-loaderとAsset Modulesを使って画像やフォントのアセットファイルを使用できるようにする【web制作】
今回はhtml-loaderとAsset Modulesを使って画像やフォントのアセットファイルを使用できるようにするやり方を紹介します。htmlやcssでは画像の読み込みやフォントの設定をするかと思います。ですがそのままではwebpackがこれらの設定をうまく検出してくれなくて、依存関係を解決してくれないままコンパイルされてしまいます。画像やフォントのアセットファイルの扱いに困っている方は参考にしてください。
【webpack5】html-webpack-pluginを使ってhtmlファイルを出力する【web制作】
今回はhtml-webpack-pluginを使ってhtmlファイルを出力する方法について紹介します。webpackはいろんなファイルをバンドルすることができますが、htmlファイルはバンドルさせずに個別に出力させたいですよね。html-webpack-pluginを使えばhtmlファイルを個別に出力させることができるようになります。
【webpack5】clean-webpack-pluginを使ってコンパイル毎に出力先フォルダ内を削除する【web制作】
今回はclean-webpack-pluginを使ってコンパイル毎に出力先フォルダ内を削除するやり方について紹介します。webpackを使っていると出力先のフォルダに無駄なファイルが溜まっていってしまいます。無駄なファイルを手動で削除していくのが面倒に感じている方は参考にしてください。
【webpack5】webpack-watched-glob-entries-pluginを使ってentryオプションをglobで複数指定する【web制作】
今回はwebpack-watched-glob-entries-pluginを使ってentryオプションを動的に複数指定するやり方について紹介します。大規模なプロジェクトになってくるとエントリポイントが複数になる場合があり、その都度entryオプションを変更するのは面倒ですよね。エントリポイントの複数指定を毎回手動で行っている方は参考にしてください。
【webpack5】outputオプションを指定する【web制作】
今回はwebpack-watched-glob-entries-pluginを使ってentryオプションを動的に複数指定するやり方について紹介します。大規模なプロジェクトになってくるとエントリポイントが複数になる場合があり、その都度entryオプションを変更するのは面倒ですよね。エントリポイントの複数指定を毎回手動で行っている方は参考にしてください。
【webpack5】entryオプションを設定する【web制作】
今回はentryオプションを記述してエントリポイントを設定する方法について紹介していきます。entryオプションはいろんな設定の記述方法がありますが、一般的によく使われている記述方法を紹介します。ションの指定方法が分からない方は参考にしてください。
【webpack5】webpack.dev.jsとwebpack.prod.jsを作成して、modeオプションによって実行するファイルを切り替える
今回はwebpack.dev.jsとwebpack.prod.jsを作成して、modeオプションによって実行するファイルを切り替えるやり方を紹介します。実行する環境でファイルを分けることによって非常に見通しが良いプログラムになります。webpack公式も推奨とする方法のため、これから導入する方はぜひこちらのやり方を参考にしてください。
【webpack5】modeオプションを指定してコンパイル方法を切り替える
今回はwebpackのmodeオプションを指定してコンパイル方法を切り替えるやり方を紹介します。modeオプションに開発環境用、本番環境用を指定することで出力されるバンドル後のファイル内容が大きく変わります。オプションを指定するやり方にも複数あるので参考にしてください。
【webpack5】webpackを最小限の構成でコンパイルする
今回はwebpackを最小限の構成でコンパイルするやり方を紹介します。webpackはどういうはたらきをするのかがイメージしにくいといった方がいるかと思います。最小限の構成の時点からwebpackの動きを把握しておくことで、処理や記述が増えたとしても問題の切り分けが素早くできるようになります。
【webpack5】webpackとはなにか? 環境構築してみよう windows10版
web制作にある程度慣れてきた方向けにwebpackとはなにか、メリット・デメリットを説明しています。またwebpackの環境構築についても記載していますのでwebpackに興味のある方はぜひ導入を検討してみてください。
【npm-scripts】package.json内で変数を使用する【windows10】
package.json の"scripts"内で変数を使用する方法を紹介します。windowsとそれ以外では変数の記述方法が異なります。うまくできなくて悩んでいる方は参考にしてください。
今回はvsnotesを使ったときに重くてファイルが表示されない場合の対処法を紹介します。vsnotesはvscodeの拡張機能で非常に軽くて使いやすいmarkdown形式のメモ帳ですよね。ただ、vsnotesがものすごい重くなってファイルが表示されないことがありました。解決するのに2日くらいかかってしまったので同じ原因に苦しんでいる方の参考になればうれしいです。
【AsciiTree】フォルダ構成(ディレクトリ構成)を作成する
フォルダ構成(ディレクトリ構成)をテキストで表現したい場合、自分で1から作成するとなると非常に面倒ですよね。「罫線(けいせん)」で「├」や「└」を使って表現しなければいけません。AsciiTreeを利用すれば簡単にフォルダ構成(ディレクトリ構成)を作成することができます。
【DartJS Sass Compiler and Sass Watcher】sassのパーシャルファイル変更時にコンパイルさせる方法
DartJS Sass Compiler and Sass WatcherプラグインはDart Sassでsassをコンパイルしてくれるプラグインになります。ですがデフォルトの設定ではsassのパーシャルファイル上で変更/保存をしてもコンパイルしてくれません。sassのパーシャルファイルを変更した場合でもコンパイルさせる方法を紹介します。コンパイルが思うようにできなくて困っている方は参考にしてください。
【Word Separator】$を含む変数を一発で単語選択するやり方【VSCode】
今回はVSCodeのWord Separatorという項目を変更して単語の区切り文字を変更するやり方を説明します。sassやphpの変数名には「$」や「-」が使用されています。その場合はダブルクリックで単語選択しようとしても一発では選択できなくなっています。Word Separatorを変更することで変数名を一発で選択できるようになるので参考にしてください。
CodePenを埋め込む場合に簡単に高さを変更するやり方についてメモしておきます。CodePenを何度か使ったことがありますが、最近まで高さの変更が簡単にできることを知らなかったので同じ人がいたら参考にしてください。
Adsenseの収益が消えたもしくは反映されない場合の原因と解決方法をメモとして残しておきます。同じような現象が発生して困っている方は参考にしてください。
【Live Sass Compiler】Watch Sassが表示されない
Live Sass Compilerプラグインを使用した場合の「Watch Sass」が表示されない場合の解決策をメモとして残しておきます。「Watch Sass」が表示されなくて困っている方は参考にしてください。
【Live Sass Compiler】cssの出力先を変更する
Live Sass Compilerプラグインを使用した場合のcssの出力先を変更するやり方をメモとして残しておきます。cssの出力先が変更できないと困っている方は参考にしてください。
【Cocoon】アドセンス(Adsense)の広告部分をカスタマイズしよう【WordPress】
今回はWordPressのアドセンス(Adsense)の広告部分をカスタマイズするやり方について紹介していきます。アドセンスは収益を得るのに不可欠です。ただしCocoonで見出しタグの上などに広告を表示した場合にサイトの記事が見づらくなってしまうことがあります。cssを少し編集するだけで広告を表示した場合でもサイトの記事が見やすくなるため参考にしてください。
【Cocoon】ビジュアルエディタのカスタマイズまとめ【WordPress】
WordPressのCocoonテーマを使った場合のビジュアルエディタをカスタマイズする方法を紹介していきます。ビジュアルエディタのカスタマイズをして記事の作成効率を上げていきましょう。
【Cocoon】ビジュアルエディタのバッジ部分をカスタマイズしよう【WordPress】
今回はWordPressのビジュアルエディタのバッジをカスタマイズするやり方について紹介していきます。バッジは文章を強調するのに便利です。ただしデフォルト状態のビジュアルエディタでは編集中にバッジをアクティブにすると文字が透明になってしまい非常に使い勝手が悪いです。cssを少し編集するだけでビジュアルエディタの バッジ編集中の文字が見えるようになりますので参考にしてください。
【Cocoon】ビジュアルエディタのスペーサーをカスタマイズしよう【WordPress】
今回はWordPressのビジュアルエディタのスペーサーをカスタマイズするやり方について紹介していきます。スペーサーは段落ごとのスペースを空けるのに便利です。ただしデフォルト状態のビジュアルエディタではどこにスペーサーを入れたのか分からなくなって管理できなくなってしまいます。cssを少し編集するだけでビジュアルエディタのスペーサーがどこの部分に入っているか分かりやすくなるので参考にしてください。
【Cocoon】ビジュアルエディタの段落(pタグ)部分をカスタマイズしよう【WordPress】
今回はWordPressのビジュアルエディタの段落(pタグ)部分をカスタマイズするやり方について紹介していきます。cssを少し編集するだけでビジュアルエディタのカーソルがどこの部分に当たっているか分かりやすくなるので参考にしてください。
【Cocoon】サイトとビジュアルエディタの見出し部分をカスタマイズしよう【WordPress】
今回はWordPressのサイトとビジュアルエディタの見出し部分をカスタマイズするやり方について紹介していきます。サイト側とビジュアルエディタ側の見出しのデザインを共通化することで確認工数を大幅に削減することができます。
「ブログリーダー」を活用して、shuu11さんをフォローしませんか？
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。
今回はdnd-kitを使ったドラッグアンドドロップ機能の環境構築を紹介します。 ドラッグアンドドロップのライブラリは他にもありますがメンテがされていなかったり、使いづらさがあったりしますよね。 dnd-kitはその中でも使いやすそうということで触ってみることにしました。 私自身はJavaScriptはmapメソッドくらいしか知らないレベルでしたが、dnd-kitを通して色々なメソッドの使い方が非常に勉強になりましたので皆さんにもおすすめします。 <!-- /wp:paragraph -->
今回はvscodeの拡張機能であるHalfScrollについて機能の説明と使用方法について紹介します。 HalfScrollは、エディタ内でのスクロールを効率的にすることができる拡張機能で、コーディングやドキュメントの編集作業をより快適にしてくれる便利なツールです。 vimのエディタを使っていて半画面スクロール機能が便利だと思っていたのですが、どうやらvscodeには半画面スクロールに対応するショートカットキーが無さそうでした。 このHalfScrollを導入すれば半画面スクロールができるようになるので気になる方はぜひ導入してみてください。
今回はモジュールバンドラーであるwebpackについてのまとめを紹介していきます。web制作でwebpackを使う場合の使い方をまとめています。web制作ではコーディング以外にたくさん気を付けないといけないことがあります。webpackを導入すればその面倒な作業を全て自動化させることができるかもしれないので、気になる方はぜひ見てください。
今回はwebpackのテンプレートサンプルを紹介していきます。web制作でwebpackを使う場合のテンプレートを紹介します。入したけどどういうプラグインを導入すればいいか分からない、webpackを導入したけどどういうプラグインを導入すればいいか分からない、どのように構築していけばいいか分からないといった方に見ていただけるとうれしいです。web制作をしている方はwebpackを使えるようになるとできる幅が広がるのでぜひ参考にしてください。
今回はwebpackでsassの画像やフォントのアセットファイルの依存関係を解決するやり方ついて紹介します。webpackでsassをコンパイルするときに画像などのパスの指定が合ってなくてエラーになることを経験した方は多いかと思います。sassの画像やフォントのアセットファイルの依存関係を解決するやり方が分からない方は参考にしてください。
今回はwebpackでsassをコンパイルするやり方ついて紹介します。web制作ではsassのコンパイルは必須ですよね。webpackでももちろんsassのコンパイルは出来るのですが、いろんなローダーやプラグインを使用しないといけないので意外と面倒です。sassのコンパイルのやり方が分からない方は参考にしてください。
今回はhtml-webpack-pluginで複数のhtmlファイルを動的に出力するやり方について紹介します。web制作ではページごとにhtmlファイルを複数作成するかと思います。ですがhtml-webpack-pluginは複数のhtmlファイルを動的に出力するオプションみたいなものはなく、自分で作るしかありません。複数のhtmlファイルを扱っている方は参考にしてください。
今回はhtml-loaderとAsset Modulesを使って画像やフォントのアセットファイルを使用できるようにするやり方を紹介します。htmlやcssでは画像の読み込みやフォントの設定をするかと思います。ですがそのままではwebpackがこれらの設定をうまく検出してくれなくて、依存関係を解決してくれないままコンパイルされてしまいます。画像やフォントのアセットファイルの扱いに困っている方は参考にしてください。
今回はhtml-webpack-pluginを使ってhtmlファイルを出力する方法について紹介します。webpackはいろんなファイルをバンドルすることができますが、htmlファイルはバンドルさせずに個別に出力させたいですよね。html-webpack-pluginを使えばhtmlファイルを個別に出力させることができるようになります。
今回はclean-webpack-pluginを使ってコンパイル毎に出力先フォルダ内を削除するやり方について紹介します。webpackを使っていると出力先のフォルダに無駄なファイルが溜まっていってしまいます。無駄なファイルを手動で削除していくのが面倒に感じている方は参考にしてください。
今回はwebpack-watched-glob-entries-pluginを使ってentryオプションを動的に複数指定するやり方について紹介します。大規模なプロジェクトになってくるとエントリポイントが複数になる場合があり、その都度entryオプションを変更するのは面倒ですよね。エントリポイントの複数指定を毎回手動で行っている方は参考にしてください。
今回はwebpack-watched-glob-entries-pluginを使ってentryオプションを動的に複数指定するやり方について紹介します。大規模なプロジェクトになってくるとエントリポイントが複数になる場合があり、その都度entryオプションを変更するのは面倒ですよね。エントリポイントの複数指定を毎回手動で行っている方は参考にしてください。
今回はentryオプションを記述してエントリポイントを設定する方法について紹介していきます。entryオプションはいろんな設定の記述方法がありますが、一般的によく使われている記述方法を紹介します。ションの指定方法が分からない方は参考にしてください。
今回はwebpack.dev.jsとwebpack.prod.jsを作成して、modeオプションによって実行するファイルを切り替えるやり方を紹介します。実行する環境でファイルを分けることによって非常に見通しが良いプログラムになります。webpack公式も推奨とする方法のため、これから導入する方はぜひこちらのやり方を参考にしてください。
今回はwebpackのmodeオプションを指定してコンパイル方法を切り替えるやり方を紹介します。modeオプションに開発環境用、本番環境用を指定することで出力されるバンドル後のファイル内容が大きく変わります。オプションを指定するやり方にも複数あるので参考にしてください。
今回はwebpackを最小限の構成でコンパイルするやり方を紹介します。webpackはどういうはたらきをするのかがイメージしにくいといった方がいるかと思います。最小限の構成の時点からwebpackの動きを把握しておくことで、処理や記述が増えたとしても問題の切り分けが素早くできるようになります。
web制作にある程度慣れてきた方向けにwebpackとはなにか、メリット・デメリットを説明しています。またwebpackの環境構築についても記載していますのでwebpackに興味のある方はぜひ導入を検討してみてください。
package.json の"scripts"内で変数を使用する方法を紹介します。windowsとそれ以外では変数の記述方法が異なります。うまくできなくて悩んでいる方は参考にしてください。
今回はvsnotesを使ったときに重くてファイルが表示されない場合の対処法を紹介します。vsnotesはvscodeの拡張機能で非常に軽くて使いやすいmarkdown形式のメモ帳ですよね。ただ、vsnotesがものすごい重くなってファイルが表示されないことがありました。解決するのに2日くらいかかってしまったので同じ原因に苦しんでいる方の参考になればうれしいです。
フォルダ構成(ディレクトリ構成)をテキストで表現したい場合、自分で1から作成するとなると非常に面倒ですよね。「罫線(けいせん)」で「├」や「└」を使って表現しなければいけません。AsciiTreeを利用すれば簡単にフォルダ構成(ディレクトリ構成)を作成することができます。
今回はdnd-kitを使ったドラッグアンドドロップ機能の環境構築を紹介します。 ドラッグアンドドロップのライブラリは他にもありますがメンテがされていなかったり、使いづらさがあったりしますよね。 dnd-kitはその中でも使いやすそうということで触ってみることにしました。 私自身はJavaScriptはmapメソッドくらいしか知らないレベルでしたが、dnd-kitを通して色々なメソッドの使い方が非常に勉強になりましたので皆さんにもおすすめします。 <!-- /wp:paragraph -->
今回はvscodeの拡張機能であるHalfScrollについて機能の説明と使用方法について紹介します。 HalfScrollは、エディタ内でのスクロールを効率的にすることができる拡張機能で、コーディングやドキュメントの編集作業をより快適にしてくれる便利なツールです。 vimのエディタを使っていて半画面スクロール機能が便利だと思っていたのですが、どうやらvscodeには半画面スクロールに対応するショートカットキーが無さそうでした。 このHalfScrollを導入すれば半画面スクロールができるようになるので気になる方はぜひ導入してみてください。
