JavaScript 【React】関数コンポーネントの引数（props）は分割代入で渡すとわかりやすい
最近React製の静的サイトジェネレーター「Gatsby」でブログを作っていたら、Reactの関数コンポーネントにオブジェクトで引数（pro...
JavaScript 
JavaScript 【Gatsby】CSS Modulesのdoes not contain a default exportエラーを解決する
GatsbyでCSS Modulesを使おうとしていたらこんなエラーが出ました。
layout.jsにlayout.module.cs...
JavaScript 【Gatsby】Sass + CSS Modulesな環境を作る
今回はGatsbyでSass + CSS Modulesが使える環境構築のやり方解説します。
GatsbyでSass + CSS ...
JavaScript Gatsby + Netlifyでデプロイがエラーになる時
今流行り（？）のGatsby + Contentful + Netlify + GitHubという構成でブログサイトを作っていたところ、ne...
Vim dein.vimを初心者にもわかるようにインストールする
最近暇なのでVimをいじっています。
Vimを本格的に使うとなるとプラグインをガンガン入れるみたいなので、「dein.vim」というプ...
JavaScript Prism.jsの使い方！シンタックスハイライトにおすすめ
今回は軽量シンタックスハイライトライブラリ、Prism.jsの使い方を紹介します。
Prism.jsは数あるWordPressのハイラ...
JavaScript コードハイライトをhighlight.jsからPrism.jsに乗り換える手順
今までコードのハイライトライブラリはhighlight.jsを使っていましたが、使っていくうちに細かいところが気になるようになり、Prism...
ソフト/ツール Firefoxの色が鮮やかで気になる…Chromeみたいな色にする方法
前から気になってたんだけど、FirefoxってやっぱりChromeより色が鮮やかだよね？？
画像で見ると分かりづらいけどFirefox...
サービス 【朗報】Appleオンラインストアで複数のクレジットカードを使う方法がある！
新しいMacBook Proを買おうと思ってAppleオンラインストアで33万のMacをポチったのですが、クレジットカードの利用枠が30万ま...
CSS 【CSS】flexboxで要素やボタンを下端（底辺）に揃えたい時のやり方
カード型のデザインを実装していると、下のボタンをいちを揃えたいみたいな場合が結構あります。
今回はこんな感じで要素やボタンを下...
CSS 【CSS】リストで①や②などの丸数字を使う方法
CSSで<ol>に丸数字（①や②みたいなやつ）を使いたいことがありました。
「これってCSSだけでできるんだっけ？」と思っ...
ソフト/ツール Sublime Textでejsをハイライトするパッケージ
今回はSublime Textでejsをハイライトするプラグインを紹介します。
Sublime Textでejsをハイライトするパ...
CSS CSSでWebフォントを使う方法｜@font-faceの使い方
今回はCSSの@font-faceを使ってローカルにダウンロードしたWebフォントを使う方法を解説します。
@font-faceを...
JavaScript 動画再生ライブラリ、Video.jsの使い方
今回はJavaScriptの動画再生ライブラリ、Video.jsの使い方を解説します。
Video.jsとは？
普通に動画再生す...
CSS 【CSS】flexboxの要素を任意の位置で改行する方法
flexboxの中の要素はflex-wrap: wrap;で改行できますが、これって要素がいっぱいあってこれ以上入らない場合に改行するプロパ...
環境構築 MacでIE表示を確認する方法【VirtualBox使用】
Web制作をやっている人は「IEで崩れているので確認して欲しい」とか言われますよね。
でもMacを使っている人はIE表示が確認できない...
Linux 【画像解説】VirtualBoxを使ってLinux Mintをインストールする手順
今回はVirtualBoxを使ってLinux Mintをインストールする手順を画像付きで解説します。
Linuxのインストールに慣れて...
PHP 【PHP】SQL文で変数を使いたいときの書き方
PHPでSQL文を発行する際に変数を使いたいことがあると思うので、そのやり方を紹介します。
SQL文で変数を使いたいときの書き方
...
CSS 【CSS】bodyタグにoverflow-x:hiddenが効かない原因と対処法
bodyにoverflow-x: hiddenをかけるとブラウザ表示では非表示にできましたが、スマホエミュで見ると全然非表示にされていません...
JavaScript jQueryでHTMLの要素を特定の場所に移動する方法
「HTMLの構造は変えられないけど、この要素を別の場所に移動したい」ということがあったので、jQueryで実装する方法を紹介します。
...