flexboxで幅を縮小しないようにする
flexboxで横並びの設定をした際、幅を縮小しないようにする方法をメモ。...
Safariでのチェックボックスやラジオボタンのフォーカスの挙動を調べてみる
以前にSafariのtabキーでのフォーカス移動についての記事やCSSの:focus-withinを使ってみる記事で触れ...
:focus-withinを使ってみる
自分自身かその子孫要素にフォーカスがある場合にスタイルを設定できる、CSS擬似クラスの:focus-withinを使って...
2列のリストで要素数が奇数の場合に最後の要素を100%表示にする
2列で並ぶリストで最後に1つ余った際に幅100%に広げたい場合、幅100%用のclassを別途付与するでも実装はできます...
Safariのtabキーでのフォーカス移動時、チェックボックスやボタンがフォーカスされない
Safariでのフォーム入力でtabキーを使ってフォーカス移動した時、チェックボックス・ラジオボタン・リンク・ボタンにフ...
スキップリンクを実装してみる
一般的なサイトだとメインコンテンツの前にはヘッダーがあり、その中にナビゲーションや検索などといった要素が入っていることが...
変数の型や存在するかどうかなどを調べる
JavaScriptで変数の型や存在するかどうかなどを調べるパターンをいくつか試してみます。...
スクリーンリーダーのVoiceOverを使ってみる
サイト構築時にスクリーンリーダーでの読み上げを確認したいということがあったので、macOSに組み込まれているVoiceO...
Instagramの埋め込みを動的に追加する
Instagramの埋め込みを動的に追加する方法を試してみます。...
Sassでのイージング設定を試してみる
CSSのイージングではlinear・ease・ease-in・ease-out・ease-in-outの5つのキーワード...
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を使って設定す...