たかもそ／Web Creator.

フリーランスで活動するフロントエンドエンジニアです。ためになるスニペットを書いていきます。著書『今すぐ始めるCSSレシピブック』

たかもそ／Web Creator.

フリーランスで活動するフロントエンドエンジニアです。ためになるスニペットを書いていきます。著書『今すぐ始めるCSSレシピブック』

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

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

    たかもそ／Web Cr…

      • #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…

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

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

          たかもそ／Web Cr…

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

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

            たかもそ／Web Cr…

            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…

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

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

            たかもそ／Web Cr…

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

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

            たかもそ／Web Cr…

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

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

            たかもそ／Web Cr…

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

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

            たかもそ／Web Cr…

            📝数値という理由だけで 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…

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

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

            たかもそ／Web Cr…

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

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

            たかもそ／Web Cr…

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

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

            200
            たかもそ／Web Cr…

            🛠JavaScriptでブラウザが疑似要素・疑似クラス・メディアクエリ特性・プロパティに対応しているか判定する

            ブラウザが特定のCSSに対応しているかどうかをJavaScriptで判定する方法です。最近ではCSSの@supportsクエリが実装されているのであまり使うことはないかもしれませんが、CSSの対応状況を調べたいときなどに使えます。 疑似要素と疑似クラスの判定document.querySelector()関数に疑似要素や疑似クラスを指定すると、ブラウザが対応していない場合にエラーとなります。そこで、try-catch文を使い、エラーの際は非対応と判定しています。docume

            たかもそ／Web Cr…

            🐛CSSでoverflowプロパティ使用時に右と下のpaddingやmarginが効かないバグ

            overflowプロパティにautoやscrollを指定してスクロール可能な領域を作った際、paddingプロパティを指定するとpadding-rightとpadding-bottomだけ描画されないバグがあります。 padding-rightが描画されないまずは普通に横スクロールを実装してみます。 <div class="scroll"> <div class="scroll_inner">スクロール領域</div></div> .scroll { display

            たかもそ／Web Cr…

            🚧随時更新！IEやEdgeなど特定ブラウザごとに効く最新CSSハックまとめ

            特定のブラウザの特定のバージョンにのみ適用させられるCSSハックのまとめです。少しずつCSSハックの発掘と検証を行なっていきます。できることならCSSハックを使わない方がいいのですが、CSSの上書きだけだと正常なブラウザにまで影響してしまう場合などに重宝します。以下は発掘済みのリストになります。購入する際の参考にしてみてください。 特定のバージョンInternet Explorer 7，8，9，10，11 Edge 12，13，14，15，16，17，18 Fire

            500
            たかもそ／Web Cr…