たかもそ／Web Creator.

フリーランスで活動するフロントエンドエンジニアです。ためになるスニペットを書いていきま…

ES2023で追加されたJavaScriptの新機能まとめ

ES2023 で追加された JavaScript の新機能のまとめです。 Array find from lastArray と TypedArray に findLast() とfindLastIndex() が追加されました。実装後 const array = [1, 2, 3, 4]// 配列の後ろから数えて最初の奇数の値array.findLast(n => n % 2 === 1) // 3// 配列の後ろから数えて最初の奇数の値の番目array

CSSのcalc()関数内で無限大infinity値が使えるように

Chrome 99 と Safari 15 から無限大 infinity 値が使えるようになりました。使い道用途としてはこれまで 9999px のように大きな値を指定していた箇所に使えると思います。 .button { border-radius: calc(infinity * 1px);} ボタンの高さいっぱいの角丸ボタンを作るときに便利ですね。 .button { border-radius: calc(1px / 0);} ちなみに、infinity

たかもそ／Web Cr…

1年前

6
CSSのスムーススクロールscroll-behavior:smooth時にページ内検索の移動は除外する

CSS でスムーススクロールができる scroll-behavior というプロパティがあります。たった 1 行指定するだけで簡単に実装できてしまうので便利な反面、ユーザビリティの点で問題があります。ページ内検索の問題スムーススクロールを指定すると、ページ内検索まで滑らかにスクロールされるようになります。これではページ内に検索した単語が複数あるとき、目的の情報までたどりつくのに時間がかかってしまいます。救世主:focus-within擬似クラス :focus-wi

たかもそ／Web Cr…

1年前

16
HTMLとCSSでページ内リンクをクリックでジャンプ先をアニメーション表示させる

ページ内リンクをクリックしたときにジャンプ先の背景色をアニメーションさせて分かりやすくする演出の方法です。 <a href="#jump">ページ内リンク</a>.........<p id="jump">あのイーハトーヴォの...</p> まずは、ページ内リンクをマークアップします。 html { scroll-behavior: smooth;} html 要素に scroll-behavior: smooth; を指定してページ内リンクをクリックしたときにスム

たかもそ／Web Cr…

2年前

15

ES2023で追加されたJavaScriptの新機能まとめ

たかもそ／Web Creator.

1年前

CSSのcalc()関数内で無限大infinity値が使えるように

6

たかもそ／Web Creator.

1年前
CSSのスムーススクロールscroll-behavior:smooth時にページ内検索の移動は除外する

16

たかもそ／Web Creator.

1年前
HTMLとCSSでページ内リンクをクリックでジャンプ先をアニメーション表示させる

15

たかもそ／Web Creator.

2年前

#1 2020年8月のHTML/CSS/JSの小技やTipsまとめ

2020 年 8 月にツイートした Tips をまとめました。良いと思ったら、いいね・リツイート・フォローお願いします。 HTML01. enterkeyhint属性 CSS02. 指定しておくとよいプロパティ 03. 属性セレクタのフラグ 04. スキップリンク 05. Flexboxと文字の省略 06. 背景画像のちらつき 07. インライン要素のまま改行 08. 絵文字をアイコンに 09. 上下左右中央揃えツイート内で display: flex;

たかもそ／Web Cr…

3年前

14
#1 2020年8月のHTML/CSS/JSの小技やTipsまとめ

14

たかもそ／Web Creator.

3年前
CSSのmin()やmax()関数がSassでIncompatible unitsエラーになる

ここ数年の CSS の進化は目覚ましく、それにより新たな問題が起きるようになりました。Sass には与えられた引数のうち最小値を返す min() 関数と与えられた引数のうち最大値を返す max() 関数があります。しかし、CSS にも標準で min() 関数と max() 関数が実装されたことにより、関数名の衝突が起きてしまいます。色々なエラーとはいっても、普通に使う分には問題ありません。 .selector { width: min(1px, 2px);} こ

たかもそ／Web Cr…

3年前

13
CSSのmin()やmax()関数がSassでIncompatible unitsエラーになる

13

たかもそ／Web Creator.

3年前
CSSのメディアクエリを使ってレスポンシブに対応させる書き方

レスポンシブデザインには欠かせないメディアクエリですが、よく使う画面サイズの判定のほかにも、たくさんの機能があります。デバイスの機能やユーザーの設定によって、最適な表示を実装できたりします。意外と深いメディアクエリの書き方について紹介します。 <meta name="viewport" content="width=device-width, initial-scale=1"> 前提として、<head> 要素内にレスポンシブ用の <meta> タグを指定する必要があります

たかもそ／Web Cr…

3年前

23
CSSのメディアクエリを使ってレスポンシブに対応させる書き方

23

たかもそ／Web Creator.

3年前
CSSでiMessageのUIを再現

iMessage の UI といえば、相手の発言の吹き出し部分の背景色にグラデーションがかけられているのが特徴です。これを CSS で実装する方法を解説します。その前にベースとして、ブラウザ間の差異をなくすために、modern-normalize というリセット CSS を使っています。 <link href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/0.6.0/modern-normalize

有料

100

たかもそ／Web Cr…

3年前

1
CSSでiMessageのUIを再現

1

たかもそ／Web Creator.

3年前
🛠JavaScriptでdayjsを使ってカレンダーを作成

生の JavaScript で日付関係の処理をすると、非常に仕様がわかりづらいため、日付の処理を簡単に書ける dayjs ライブラリを使って簡単なカレンダーを作成してみます。今月のカレンダーを作成以下のリンクから完成したデモがみられます。 https://note-demo.netlify.app/dayjs-calendar/basic/ まずは、dayjs をダウンロードします。 $ npm i dayjs そして、JavaScript で生成されたカレンダー

たかもそ／Web Cr…

4年前

11
🛠JavaScriptでdayjsを使ってカレンダーを作成

11

たかもそ／Web Creator.

4年前
📦Node.jsでADM-ZIPを使ってZIPの圧縮と解凍や圧縮後のファイルサイズで分割

Node.js で ZIP ファイルを圧縮したり解凍するときに archiver モジュールを使った方法がよく知られていますが、もっと使いやすい adm-zip モジュールを見つけたので紹介します。サンプルとしてダウンロードする画像は Lorem Picsum というサービスを利用し、ランダムに画像を取得しています。 npmモジュール画像をダウンロードするために axios モジュール、レスポンスヘッダーの content-type からファイルの拡張子を取得するために

たかもそ／Web Cr…

4年前

8
📦Node.jsでADM-ZIPを使ってZIPの圧縮と解凍や圧縮後のファイルサイズで分割

8

たかもそ／Web Creator.

4年前
🛠webpackでビルドするCloud Functions for Firebase入門編

Cloud Functions for Firebase は Node.js 製のバックエンド環境なので、CommonJS 形式で書く必要があります。しかし、普段ブラウザ向けに ECMAScript で書いていると、文法の違いや実装されている関数の違いで混乱することがあります。そこで、webpack を使って ECMAScript を CommonJS 形式に変換すれば、普段と変わらず快適に JavaScript を書けるようになります。 CLI の導入Fireb

たかもそ／Web Cr…

4年前

3
🛠webpackでビルドするCloud Functions for Firebase入門編

3

たかもそ／Web Creator.

4年前
🗣prefers-reduced-motionメディアクエリでアニメーション酔いに配慮する

近年、CSS や JavaScript の進化により、パララックスやスクロールとともにアニメーションしながら登場するエフェクトなど、演出のためのアニメーションがかなり増えました。 Web サイトに独自性を出すことができて重宝される一方で、過度なアニメーションによる画面酔いを訴える人も出てきています。そこで、CSS Media Queries Level 5 では、prefers-reduced-motion 特性が提案されています。過度なアニメーションとはアニメーシ

たかもそ／Web Cr…

4年前

16
🗣prefers-reduced-motionメディアクエリでアニメーション酔いに配慮する

16

たかもそ／Web Creator.

4年前
📝数値という理由だけで input[type="number"] 要素を使わない

フォームに入力する値といえば、電話番号や年齢、クレジットカード番号など様々です。しかし、数字を使っているからといってむやみに <input type="number"> 要素を使うと問題が起きます。数字であって数値でないWHATWG の仕様には次のように書かれています。 The type=number state is not appropriate for input that happens to only consist of numbers but isn't

たかもそ／Web Cr…

4年前

98
📝数値という理由だけで input[type="number"] 要素を使わない

98

たかもそ／Web Creator.

4年前
🐛よくハマったFlexboxのバグまとめ

Flexbox はレイアウトを組むのに非常に便利ですが、バグがとても多いことでも有名です。最新のブラウザでも次々と新しいバグが報告されており、すベてを紹介するのは大変なので、自分がよくハマったバグをまとめます。なお、ベンダープレフィックスは省略しているので注意してください。 flex-flow: column wrap; がはみ出るdisplay プロパティに inline-flex を指定していたり、position プロパティに absolute を指定して絶対配置

たかもそ／Web Cr…

4年前

89
🐛よくハマったFlexboxのバグまとめ

89

たかもそ／Web Creator.

4年前
📝ちゃんと使い分けてる？CSSのpx, em, rem, %, vw単位の違い

HTMLやCSSを学びたての頃はとりあえずpx単位で指定することが多いと思います。その後、emやremなどいろんな単位が出てきて混乱することもあるかもしれません。それぞれの単位にはメリットとデメリットがあり、なぜその単位を使うのかをしっかりと理解して使い分ける必要があります。単位の定義CSSには多くの単位が存在します。ここでは、実際に使うことの多い単位について詳しくみていきます。 px単位デバイスの1ドットを表す絶対的な値です。ただし、プリンターやスマホなどの高

たかもそ／Web Cr…

4年前

247
📝ちゃんと使い分けてる？CSSのpx, em, rem, %, vw単位の違い

247

たかもそ／Web Creator.

4年前
🐛あなたのCSSメディアクエリは間違っているかもしれない

みなさんはCSSのメディアクエリについて本当の意味で理解して使用しているでしょうか。ブラウザがデフォルトの状態なら正常に動くと思います。しかし、ブラウザで拡大率を変更したりするなどブラウザの設定によってはメディアクエリの解釈が大きく変わってきます。また、メディアクエリに使える単位のpxやem、remによっても変わってくるため、適切な単位を用いる必要があります。検証に用いるCSS 以下の6パターンを使って検証します。すべてのバージョンを検証するのは大変なので、過去3年間のバ

有料

200

たかもそ／Web Cr…

4年前

25
🐛あなたのCSSメディアクエリは間違っているかもしれない…

25

たかもそ／Web Creator.

4年前

最近の記事

ES2023で追加されたJavaScriptの新機能まとめ

CSSのcalc()関数内で無限大infinity値が使えるように

CSSのスムーススクロールscroll-behavior:smooth時にページ内検索の移動は除外する

HTMLとCSSでページ内リンクをクリックでジャンプ先をアニメーション表示させる

ES2023で追加されたJavaScriptの新機能まとめ

CSSのcalc()関数内で無限大infinity値が使えるように

CSSのスムーススクロールscroll-behavior:smooth時にページ内検索の移動は除外する

HTMLとCSSでページ内リンクをクリックでジャンプ先をアニメーション表示させる

#1 2020年8月のHTML/CSS/JSの小技やTipsまとめ

#1 2020年8月のHTML/CSS/JSの小技やTipsまとめ

CSSのmin()やmax()関数がSassでIncompatible unitsエラーになる

CSSのmin()やmax()関数がSassでIncompatible unitsエラーになる

CSSのメディアクエリを使ってレスポンシブに対応させる書き方

CSSのメディアクエリを使ってレスポンシブに対応させる書き方

CSSでiMessageのUIを再現

CSSでiMessageのUIを再現

🛠JavaScriptでdayjsを使ってカレンダーを作成

🛠JavaScriptでdayjsを使ってカレンダーを作成

📦Node.jsでADM-ZIPを使ってZIPの圧縮と解凍や圧縮後のファイルサイズで分割

📦Node.jsでADM-ZIPを使ってZIPの圧縮と解凍や圧縮後のファイルサイズで分割

🛠webpackでビルドするCloud Functions for Firebase入門編

🛠webpackでビルドするCloud Functions for Firebase入門編

🗣prefers-reduced-motionメディアクエリでアニメーション酔いに配慮する

🗣prefers-reduced-motionメディアクエリでアニメーション酔いに配慮する

📝数値という理由だけで input[type="number"] 要素を使わない

📝数値という理由だけで input[type="number"] 要素を使わない

🐛よくハマったFlexboxのバグまとめ

🐛よくハマったFlexboxのバグまとめ

📝ちゃんと使い分けてる？CSSのpx, em, rem, %, vw単位の違い

📝ちゃんと使い分けてる？CSSのpx, em, rem, %, vw単位の違い

🐛あなたのCSSメディアクエリは間違っているかもしれない

🐛あなたのCSSメディアクエリは間違っているかもしれない…