css 要素を上下左右中央に配置してフッターを下に固定する【CSS】
要素を上下左右中央に配置して、コンテンツ量が少ない時もフッターを画面の下に固定したい！ってことはよくあります。方法は色々ありますが、最近よく使っている手法をメモ。
実装したいレイアウトを確認する
実装したいレイアウトはこち...
css 
JavaScript Reactのパフォーマンスを最適化する方法を調べました【React.memo/React.useCallback/React.useMemo】
Reactはコンポーネントを組み合わせて作っていきます。日頃あまり意識することはありませんが、一部に負荷の高いコンポーネントがあると、レンダリングの最適化を考える必要があります。Reactのレンダリングの仕組みと、パフォーマンスの最適化に...
JavaScript useRefで値を更新したりDOMを参照する方法【React/useRef/useState/useEffect/TypeScript】
useRefは、主にDOMを参照したい時に使用しますが、改めて使い方を調べたのでメモしておきます！
useRefとは
useRefは、useStateと同じく値を保持できるフックです。useStateとの主な違いは、値を更新し...
css gridレイアウトについて調べました【CSS/grid-template/auto-fit/auto-fill】
最近CSSのgridを使う機会がありました。最低限の仕組みを知っておく必要があると思い、基本的な並べ方を実装する方法をまとめました。
gridの基本的な使い方
gridは要素の表示形式を設定するdisplayプロパティの値にな...
WordPress WordPressで記事一覧を固定ページに表示する【ショートコード/ページネーション】
WordPressで、記事一覧を特定の場所に表示したい！ってことがあると思います。そんな時に使えそうなショートコードを作成したのでメモ。
ページネーション付きで表示できるので、デフォルトで出力されるカテゴリーのURLを変えたい！...
WordPress WordPressテーマCocoonでカスタム投稿タイプとカスタム分類を作成して一覧を表示させる【WordPress/PHP】
カスタム投稿タイプやカスタム分類を追加する際、今までプラグインを使っていましたが、コードで実装しました。将来の自分がコピペできるようにメモしておきます。
なお、使用しているテーマは無料で使えるCocoonというテーマです。テーマの機...
JavaScript getRangeメソッドでセルの範囲を取得する【GAS/JavaScript】
Google Apps Script（GAS）は、Googleが提供しているプログラミング言語です。自分は主にGoogleスプレッドシートを操作する為に使いますが、GmailやGoogleカレンダー、Googleフォームなど、Google...
WordPress Cocoonのヘッダーメニューをおしゃれにカスタマイズする【WordPress/Cocoon/PHP/Google Fonts】
WordPressのテーマ「Cocoon」。高機能なのに無料で使えるありがたいテーマです。今回、ヘッダーメニューをカスタマイズしたのでメモ。頑張ってオシャレにしました。
カスタマイズ内容
カスタマイズしたメニューはこんな感じに...
Linux PHPのバージョンをアップする手順をまとめました【WordPress/さくらVPS/CentOS7】
WordPressのサイトヘルスで、PHPのバージョンアップをすすめられました。さくらのVPSを使っているので、バージョンアップは毎回手動で作業しています、、。毎回調べながらやっているので、今後の為に手順をメモしておきます。
Wor...
WordPress WordPressのお引っ越し（データ移行）する手順をまとめました【ワードプレス/プラグイン】
WordPressのお引っ越し（データ移行）の方法を調べてまとめました。
今回試したのは、プラグインを使用して、かつ無料でお引っ越しできる方法です。プラグインでうまく移行できない場合、最終的には手動でやることになると思います、、。
...
JavaScript Reactの開発環境をコマンドで構築する方法【JavaScript/TypeScript】
開発環境の構築方法は忘れやすいのでメモするようにしています。今回はReactの開発環境について調べたのでメモ。
Reactの環境構築はコマンド１つで完了動して、以下コマンドを実
結論から言うと、プロジェクトを作成するディレクト...
JavaScript Reactでページ遷移する方法を調べました【React/React Router/react-router-dom/v5】
Reactでページ遷移する方法を調べました。忘れそうなのでメモしておきます。TypeScriptで記述していますが、設定の方法は普通のJavaScriptとあまり変わらないと思います。
react-router-domとは
R...
JavaScript useStateを理解するためにサンプルを作って確認しました【React/useState】
ReactのuseStateがいまいち理解できなかったので、サンプルをいくつか作成して動きを確認しました。主にリアルタイムの動きに使えそうです。
useStateとは
Reactにはコンポーネントに状態を保管、更新できるuse...
JavaScript 論理演算子「論理積（＆＆）」と「論理和（||）」「論理否定(！)」「Null 合体演算子（??）」について調べました【JavaScript】
JavaScriptの論理演算子について、分かっているようで分からなかったのでメモ。
論理演算子とは
そもそも論理演算子とはなんぞや？ですが、主にif文で使います。下記のように「&&」「||」「!」を使って条件...
JavaScript プラグインを使わずにTODOリストを作成しました【JavaScript】
JavaScriptの練習でTODOリストを作成しました。一応形になったので、作り方をメモしておきます。
TODOリストのサンプル
こちらがサンプルです。完了したタスクはTODOリストから「完了」の領域に移動します。また、一度...
JavaScript reduceを使って文字をアニメーションさせる方法【Javascript】
今回、javascriptのreduceについてまとめたのでメモ。reduceを使って文字のアニメーションを実装するサンプルも作成しました。
reduceはどんなことができるか
reduceは配列の値を順番に処理するメソッ...
css プラグインを使わずにモーダルウィンドウを作成しました【JavaScript/CSS】
JavaScriptの練習で簡単なモーダルウィンドウを作成しました。表示する要素にテキストや画像を指定できますが動画には対応しておりません、、。プラグインを使うほどではない時の実装に使えそうなのでメモ。
完成したモーダルウィンドウを...
css プラグインを使わずにLightbox（ライトボックス）風ギャラリーを作りました【JavaScript】
Javascriptの練習でライトボックス風のギャラリーを作成しました。スマホでスワイプできると思いますが、Androidでは確認しておりません。。プラグインを使うほどではない！CDNを読み込みたくない！jQueryを使いたくない！場...
JavaScript 配列の要素を順番に繰り返し取り出す方法【JavaScript】
ボタンを押すたびに配列の中身が表示されるサンプルを作りました。値をすべて取り出したら最初に戻ります。繰り返し処理させるのがポイントです。配列でこういった処理をすることは多いので、コピペできるようにメモしておきます。
配列の要素を順番...
Linux ファイルやディレクトリのパーミッションについて調べました【Linux】
毎回分からなくなるパーミッションについて調べたのでメモします。
Linuxすべてのファイルとディレクトリには、ユーザーごとに内容を確認したり編集できるアクセス権が決まってます。これをパーミッションといいます。
所有権と実行権に...