[CSS設計] ITCSSとは

TL;DR / CSS の問題 / ITCSS / 参考

husky v4 から v6 へ移行する手順の覚書

環境 / 方法 / まとめ

[Next.js] Qiita と Zenn の 記事一覧（フィード）を取得する方法

やりたいこと / 環境 / フィードの仕様 / 実装

[Next.js] Google Adsenseを表示させる方法

環境 / 条件 / 方法

[HTML] meta keywords の記述は SEO として不要

meta keywords とは / meta keywords と SEO との関係性 / meta keywords を記述したままで良いのか / まとめ

竈門炭治郎をCSSだけで再現する

竈門炭治郎とは / 完成品 / 実装方法 / 解説 / 〆

IEからEdgeへの強制転送設定を個人サイトに適応してもらった話

ことの発端 / IE から Edge への転送とは / IE 非互換リストへの追加申請手順 / 申請時の流れ / まとめ

[Twitter Cards] meta name=[twitter:label1]を調べる

背景 / twitter:label1 や twitter:data1 とは何か / 検証 / まとめ

huskyのフックがGit GUIクライアントで有効にならない時の対処方法

背景 / 原因 / 解決方法 / 余談 / 参考

huskyのフックがGit GUIクライアントで有効にならない時の対処方法

背景 / 原因 / 解決方法 / 余談 / 参考

[JavaScript] 表示しているページのURLなど特定の文字列をコピーさせる方法

背景 / 方法

[JavaScript] 表示しているページのURLなど特定の文字列をコピーさせる方法

背景 / 方法

[GitHub Actions] Github Pagesをcron的に定期的に自動デプロイする方法

背景 / 環境 / 方法

[GitHub Actions] Github Pagesをcron的に定期的に自動デプロイする方法

背景 / 環境 / 方法

[BBIQ光インターネット] 台風後に回線が繋がらなくなった時の対処法

環境と状況 / モデムとルーターを確認 / 確認項目 / サポートへ電話 / 業者訪問

[BBIQ] 台風後に回線が繋がらなくなった時の対処法

環境と状況 / モデムとルーターを確認 / 確認項目 / サポートへ電話 / 業者訪問

[GitHub Actions] submoduleを最新の状態にする方法

背景 / 方法

[GitHub Actions] submoduleを最新の状態にする方法

背景 / 方法

[Excel] コロン区切りの時間(12:34)を時間単位に変換する方法

背景 / Excel / スプレッドシートで計算する

[Excel] 労働時間を時間単位に変換する方法

背景 / Excel / スプレッドシートで計算する

[Nuxt.js] asyncDataの値をhead()から取得するとundefinedになる問題

環境 / 状況 / 解決方法

[Nuxt.js] asyncDataの値をhead()から取得するとundefinedになる問題

環境 / 状況 / 解決方法

[HTML] メールアドレス・電話番号などの入力フォームのUXを考える

背景 / 各項目の仕様 / フォームの機能 / 参考

[HTML] メールアドレス・電話番号などの入力フォームのUXを考える

背景 / 各項目の仕様 / フォームの機能 / 参考

[OGP画像] ブログ記事タイトルを含んだ画像を自動生成する方法

概要 / 環境 / 方法

[OGP画像] ブログ記事タイトルを含んだ画像を自動生成する方法

様々な情報をストックするサイバーメモ帳

[JavaScript] 1行でIE11を判定する方法

userAgent を利用して取得する方法 / 1 行で取得する方法

[JavaScript] 1行でIE11を判定する方法

様々な情報をストックするサイバーメモ帳

[JavaScript] 外部HTMLを読み込んでDOM上へ展開する方法

前提 / 方法

[JavaScript] 外部HTMLを読み込んでDOM上へ展開する方法

様々な情報をストックするサイバーメモ帳

[Google Fonts] 読み込みのパフォーマンスを向上させる方法

display=swap / 読み込みスクリプト / 参考

[Google Fonts] 読み込みのパフォーマンスを向上させる方法

様々な情報をストックするサイバーメモ帳

WIP: [CSS設計] YUKICSS - ITCSSベースのCSSアーキテクチャ

主に影響を受けている CSS 設計・思想 / 命名規則 / 構成レイヤー / おわり

WIP: [CSS設計] YUKICSS - ITCSSベースのCSSアーキテクチャ

様々な情報をストックするサイバーメモ帳

[PHP] DOMDocumentでloadHTMLして文字化けする時の対処方法

状況 / 方法

[PHP] DOMDocumentでloadHTMLして文字化けする時の対処方法

状況 下記のコードを実行した際にマルチバイト文字が文字化けする。 // h2 要素のみ取り出し$content = '<h2>見出し</h2><p>文章</p>';$headings = [];$dom =

[JavaScript] 指定ページのみで発火させるスクリプトの構成

使用する想定状況 / 準備 / 使用方法 / 大まかな仕様

[JavaScript] 指定ページのみで発火させるスクリプトの構成

使用する想定状況 EC サイトにおける、商品一覧・商品詳細・カートページでそれぞれ固有の処理を走らせたい。 ただし、商品一覧（item-list.js）・商品詳細（item-detail.js）・カートページ（cart.js）を言ったように各ファイルを用意するのではなく、1

バックエンドから返却される規定画像要素に対してLazyload（遅延読み込み）をフロントエンドだけで実現させる

Lazyload（遅延読み込み）とは / 実施条件（縛り） / 実装 / 参考

バックエンドから返却される規定画像要素に対してLazyload（遅延読み込み）をフロントエンドだけで実現させる

Lazyload（遅延読み込み）とは 例えば、大量の画像の読み込みが必要なページの場合、大量の画像の読み込みはページレンダリングのボトルネックになりやすく、ページの 初期表示の遅延の原因となる ことが多い。こういったページの 初期表示の高速化につなげる手法 として「 Lazy

[HTML] <template>要素について

template 要素とは / template 要素の特徴 / 使い方 / その他

[HTML] <template>要素について

template 要素とは HTML のコンテンツテンプレート ( &lt;template&gt; ) 要素 は、すなわちページの読み込み時にすぐには描画されないものの、後で JavaScript を使用してインスタンスを生成できる HTML を保持するメカニズム

ejsファイルをPrettierでフォーマット実行する際の覚書

前提 ejs は、HTML と &lt;% %&gt; を混在させて使用する。だが、Prettier は ejs のフォーマットに対応していないため、 html フォーマットをかける必要がある。 prettier --parser html --write src/**/

[Git] masterへforce pushしてしまった状態を元に戻す方法

想定状況 git push origin master をした後に master ブランチへ意図しない状態になっている。 方法 $ git reset --hard origin/master@{1}

[Git] リモートブランチや履歴を維持したまま別リポジトリへコピーする方法

背景 既存リポジトリから新規リポジトリへのお引越し案件。リポジトリを複製するようなイメージ。 手順 下記をそれぞれ作成しておくことになる。 git@github.com:サンプル/既存リポジトリ.git git@github.com:サンプル/新規リポジトリ.

[CSS設計] BEMの使い方を知る

CSS 設計のために、改めて BEM について考えてみた。 BEM の基本的な記法に加えて、踏み込んで触ってみて実感した使い方やノウハウなどを記載する。 BEM とは BEM は、検索エンジンの Yandex が使っている CSS の設計方法らしい。（実際、Yandex

[WordPress] REST APIの投稿項目をフィルターする方法

WP REST API は、パラメータによってレスポンスを変えることができる。 以前は filter[key] みたいなパラメータでフィルタリング出来ていたが、現状使えない模様。 環境 確認した環境はこちら WordPress 5.2 実現方法 通常の取得方法

[Vue.js] Vuexの使い方を知る

自分の理解のために再構成しつつ記載している。 Flux のアーキテクチャを知る Vuex は、 Flux （＋ Redux ・ The Elm Architecture ）から影響を受けているため、Flux のアーキテクチャを知れば、Vuex を理解しやすくなるだろう。

[npm] 公開・更新コマンドの覚え書き

準備 ユーザーの作成 WIP package.json の作成 npm init で package.json を作成する。 既に存在している場合でも正しい形に直してくれるので、対話式で進めていく。 通常 npm init スコープモジュール 名前空

Babel 6からBabel 7へアップグレードした際の覚書

概要 ややレガシー気味のプロジェクト内の Babel 6 から Babel 7 へのアップグレードした。 アップグレードの期待としては、処理時間の改善（最適化）や今後のアップデートへの対応が柔軟に行えるようになることである。 プロダジェクト環境の概要 単一リポジトリ内に複

[JavaScript] 不正なセレクタをエスケープする際の対処法

セレクタとして不正な文字 まず数値から始まるセレクタは使用できない。 かつ、下記の文字列は先頭に限らず使用することは出来ない。 ~ ! @ $ % ^ &amp; * ( ) _ + - = , . / &#39; ; : &quot; ? &gt; &lt; [ ] {

[Nuxt.js] アンカーリンクの遷移が動作しない場合の対処方法

状況 ページ内アンカーリンクがある - #foo , #bar … アンカーリンクをクリックするとページ内遷移ではなく、ルートページに移動してしまう 原因 nuxt.config.js に設定されている router.base が原因だった（未設定でも下記の

[html-webpack-plugin] テンプレート内でifを使って出力を制御する方法

背景 webpack の plugin である html-webpack-plugin を使って、html を出力しているが、同テンプレートでも案件によって微妙に出力差が出てきたため、フラグなどで制御したい。 各種モジュールの導入方法などは割愛する。 方法 コード

[JavaScript] 日付のフォーマットをyyyy/mm/ddにする方法

背景 moment.js や date-fns を使っていたが、単純な日付のフォーマット変換に関して、巨大なライブラリを必要としないので自前で実装をする。 結果として、少なくとも 10KB ほどあったサイズが数バイトで済んだ。 実装 仕様 yyyy/mm/dd

[名探偵コナン] 紺青の拳のダジャレクイズ

紺青の拳のダジャレクイズ 出題者 阿笠博士 問題 シンガポールで一番人気のあるイベントは？ 国歌斉唱 旧正月のお祝い 国旗掲揚 マリーナベイ花火大会 答え 国旗掲揚 国旗の支柱は、芯がポール（シンガポール）だから

[Git] リポジトリのユーザを変更する方法

状況 同一マシン内で GitHub アカウントが複数存在している状態。 （社用とプライベートでアカウントを分けている等） コマンド 対象リポジトリへ移動して下記を実行。 git config --local user.name 名前git config --local

Photoshopの文字設定をCSSに落とし込む手順とツール

だいたい Photoshop のままだけれど、行送り・トラッキングはそのままではないので変換が必要になる。 相互関係 Photoshop CSS フォントサイズ font-size 行送り line-height トラッキング

[Nuxt.js] nuxt generateのパフォーマンスを改善させる方法

背景 Netlify でのデプロイ時に nuxt generate でのビルド時間が 10 分かかっていた。（route 数は 475） nuxt generate のパフォーマンスを改善させたい。 nuxt-generate-cluster nuxt-genera