Figmaのデータをローカルファイルとして保存する
案件でFigmaのデザインデータを共有された際、複数人で共有されている状態のデータではなく、自分のみ触れる状態で作業をし...
Googleパブリッシャータグを使ってみる
Googleアドマネージャーを使用する際に「Googleパブリッシャータグ(GPT)」を触る機会があったので、その際に調...
Sassの@debug・@warn・@errorを使ってみる
Sassの実装を行う上で便利な@debugと@warn、@errorについてそれぞれ試してみます。...
Twitterの埋め込みを動的に追加する
Twitterのツイートをサイト上に埋め込む際、静的なページであれば生成されたコードを貼り付けるだけでよいですが、SPA...
Macでフォントをインストールする
デザインデータを支給された際、デザイン上で使用されているフォントがパソコンに入っていないため、実際の表示と若干異なって表...
Sassで三角形を作るmixinを作成する
以前にCSSで三角形を作る記事を投稿しましたが、疑似要素で三角形を作る機会が度々あるので、Sassのmixinで作成でき...
Gulp実行時に「zsh: command not found: gulp」とエラーが出る
普段触っていない案件のGulp環境を使用しようとした際、「zsh: command not found: gulp」とエ...
メガメニューのホバー時に表示するタイミングを遅らせる
ヘッダーにホバーで開閉するメガメニューを設置した際、アドレスバーからページ内コンテンツにカーソルを移動したタイミングなど...
Sassで桁数を揃える関数を作成する
Sassの@forでループ処理を行う際、連番の数値は通常1,2,3のようになりますが、01,02,03や001,002,...
Nuxt.jsでhostsの設定を行う
Nuxt.jsのローカルでの開発時に、本番環境のサブドメインを使用したいということがあったので、hostsを使って設定す...
iOS Safariでダブルタップで拡大しないようにする
iOS Safariでダブルタップした際に拡大表示する機能がありますが、例えばゲーム系のコンテンツで連打することがある場...
input type=”number” の代わりの変換処理を実装する
inputタグのtype=”number”は入力内容を数値のみに制限することができますが、許容しない値だった場合にJav...
for…inとfor…ofを使ってみる
ループ処理を行うfor…inとfor…ofについて、それぞれ簡単に試してみます。...
CSSのtransformの設定を個別に指定する
CSSのtransformで使用していたtranslate()・rotate()・scale()の設定を、個別に指定する...
hoverでbackground-imageを変更した際にちらつくのを防止する
CSSのhoverでbackground-imageの画像を変更した際、変更後の画像読み込みでちらつくのを防止する方法を...
box-shadowをborderの代わりに使用する
デザインで装飾された要素の縁取りをコーディングするということが度々ありますが、borderの実装手段の一つとしてbox-...
VanillaJSでslideDownを実装する
jQueryのslideDown()やslideUp()のような挙動を、VanillaJSで実装してみます。...
Parcelを使ってみる
設定ファイルを用意せずにビルド環境を作成できるツール「Parcel」を使ってみます。...
SSL未対応の環境でClipboard APIが使用できない
Clipboard APIを使った実装を行った際、案件のテスト環境がSSL未対応(http)でうまく動作しないということ...
Safariでホバーが効かない
CSSでホバー時の設定をした際、Safariでのみ効かないということがあったので対応方法をメモ。 確認はSafariのバ...