はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

はてなブックマーク

  • はてなブックマークって?
  • アプリ・拡張の紹介
  • ユーザー登録
  • ログイン
  • Hatena

はてなブックマーク

トップへ戻る

  • 総合
    • 人気
    • 新着
    • IT
    • 最新ガジェット
    • 自然科学
    • 経済・金融
    • おもしろ
    • マンガ
    • ゲーム
    • はてなブログ(総合)
  • 一般
    • 人気
    • 新着
    • 社会ニュース
    • 地域
    • 国際
    • 天気
    • グルメ
    • 映画・音楽
    • スポーツ
    • はてな匿名ダイアリー
    • はてなブログ(一般)
  • 世の中
    • 人気
    • 新着
    • 新型コロナウイルス
    • 働き方
    • 生き方
    • 地域
    • 医療・ヘルス
    • 教育
    • はてな匿名ダイアリー
    • はてなブログ(世の中)
  • 政治と経済
    • 人気
    • 新着
    • 政治
    • 経済・金融
    • 企業
    • 仕事・就職
    • マーケット
    • 国際
    • はてなブログ(政治と経済)
  • 暮らし
    • 人気
    • 新着
    • カルチャー・ライフスタイル
    • ファッション
    • 運動・エクササイズ
    • 結婚・子育て
    • 住まい
    • グルメ
    • 相続
    • はてなブログ(暮らし)
    • 掃除・整理整頓
    • 雑貨
    • 買ってよかったもの
    • 旅行
    • アウトドア
    • 趣味
  • 学び
    • 人気
    • 新着
    • 人文科学
    • 社会科学
    • 自然科学
    • 語学
    • ビジネス・経営学
    • デザイン
    • 法律
    • 本・書評
    • 将棋・囲碁
    • はてなブログ(学び)
  • テクノロジー
    • 人気
    • 新着
    • IT
    • セキュリティ技術
    • はてなブログ(テクノロジー)
    • AI・機械学習
    • プログラミング
    • エンジニア
  • おもしろ
    • 人気
    • 新着
    • まとめ
    • ネタ
    • おもしろ
    • これはすごい
    • かわいい
    • 雑学
    • 癒やし
    • はてなブログ(おもしろ)
  • エンタメ
    • 人気
    • 新着
    • スポーツ
    • 映画
    • 音楽
    • アイドル
    • 芸能
    • お笑い
    • サッカー
    • 話題の動画
    • はてなブログ(エンタメ)
  • アニメとゲーム
    • 人気
    • 新着
    • マンガ
    • Webマンガ
    • ゲーム
    • 任天堂
    • PlayStation
    • アニメ
    • バーチャルYouTuber
    • オタクカルチャー
    • はてなブログ(アニメとゲーム)
    • はてなブログ(ゲーム)
  • おすすめ

    iPhone 17

『zenn.dev』

  • 人気
  • 新着
  • すべて
  • こういうデザイン (Augmented UI? 拡張 UI?) を CSS で実装する方法

    44 users

    zenn.dev/ixkaito

    はじめに 言葉では説明しにくいので、以下の画像を見ていただいたほうが早いです。 このように、画像の一部が切り抜かれたようなデザイン。 このようなデザインを指す特定な名称は見つかりませんでしたが、個人的には Augmented UI (拡張 UI) がもっとも近いような気がします。 Augmented UI Augmented UI とは、サイバーパンクなどでよく見る以下のような形を CSS で再現するライブラリの名称です。 augmented-ui - Integrate your apps with technology https://augmented-ui.com/ このライブラリ以外でこの名称を使用している例はまったく見当たりませんでしたが、共通認識を持つためにも、この名称がもっと広まることを願います。 なんでこのような形が Augmented UI なのかについて個人的に考えて

    • テクノロジー
    • 2024/09/17 10:46
    • css
    • フロントエンド
    • webデザイン
    • あとで読む
    • UI
    • デザイン
    • リンクの入れ子は subgrid が最適解かもしれない

      125 users

      zenn.dev/ixkaito

      はじめに リンクの入れ子とは何かというと、以下のようなデザインです。 カード全体がリンクでクリッカブルになっていて、中のタグやカテゴリーもそれぞれがリンクになっています。ニュースやブログの投稿などでよく見るデザインだと思います。 しかし、以下のようにマークアップすることはできません。 <a href="https://example.com/posts/hello-world/"> <h2>Hello, World!</h2> <p>...</p> <a href="https://example.com/tag/hello/">#hello</a> <a href="https://example.com/tag/world/">#world</a> </a> HTML のルール的に <a> の入れ子はダメだからです。 Subgrid を使った方法 Subgrid がまだない時代からいろ

      • テクノロジー
      • 2024/03/28 03:06
      • css
      • html
      • あとで読む
      • grid
      • リンク
      • デザイン
      • UI
      • world
      • decoding="async" について詳しく調べてみる

        166 users

        zenn.dev/ixkaito

        この記事は2023年7月19日時点の Chrome の最新版 115.0.5790.98 を使って検証しました。今後 Chrome の実装によって挙動が変わる可能性はございます。 はじめに 画像表示のパフォーマンス改善において、「decoding="async" をつけましょう」というのをよく見かけますが、おそらくほとんどの人がその実際の挙動を理解していない、あるいは誤った認識をしていると思います。今回詳しく調べる前の僕も含めて。 loading と decoding の違い 画像のパフォーマンス改善で decoding="async" のほかに、もう一つよく言及されるのが loading="lazy" です。decoding 属性について詳しく見る前に、まずは loading 属性との違いについて理解したほうがいいと思います。 loading とは、ブラウザがどのように画像を読み込むかを

        • テクノロジー
        • 2023/07/19 20:54
        • html
        • あとで読む
        • performance
        • web制作
        • 画像
        • img
        • 高速化
        • 技術
        • Chrome
        • Astro でリンクや参照などを相対パスでビルドする

          8 users

          zenn.dev/ixkaito

          はじめに まず、Astro では、相対パスでの生成は公式的には対応しておりません。 上記の issue と提案は上がったことはあるものの、現在は close されており、やり取りの中身を見ても、公式がサポートすることはあまり期待できなそうです。 個人的にも、こういった汎用的なフレームワークはやはり絶対パスのほうが何かと無難です。それは開発する側でも使う側でも。ですので、特殊な事情がないかぎりは絶対パスか絶対 URL を推奨します。 ただ、静的書き出しができるフレームワークにおいて、相対パスの需要も理解できます。 まず結論 プロジェクト内のリンクや参照を全部相対パスにして問題ないということであれば、astro-relative-links という Astro integration (Astro のプラグインみたいなもの) を作りましたので、こちらを使えば実現できます。使い方は後述。 要件

          • テクノロジー
          • 2023/03/07 21:00
          • Astro
          • CSS の element() 関数をご存知?

            28 users

            zenn.dev/ixkaito

            発端 きっかけは調べ物でこちらのブログを閲覧したときです。ぜひアクセスしてみてください。9 割以上の方は何も気づかないでしょう。 Chrome でのスクリーンショット なぜなら Firefox 以外のブラウザでは表示されないからです。 Firefox でのスクリーンショット Firefox でアクセスすると、“Woah! What's this?” と書いてある右側のミニマップに気づくはずです。 Firefox でのスクリーンショット これの驚くところは、なんと要素の状態がリアルタイムでミニマップにも反映されます。上記スクリーンショットはテキストを選択した状態ですが、ミニマップにもテキストが選択された状態で表示されていることが確認できます。 実装 どのように実装されているかというと、なんと CSS の element() 関数のみの 1 行で実装できます。そして、Firefox は ele

            • テクノロジー
            • 2022/11/14 19:48
            • css
            • Firefox
            • ブラウザ
            • Figma プラグインの作り方

              7 users

              zenn.dev/ixkaito

              リアルタイムコラボレーションデザインツール Figma のプラグインの作り方について解説します。なお、公式ドキュメント (英語) は https://www.figma.com/plugin-docs/ にあります。とても体系的に整備されていてわかりやすいが、やはり英語ということもあり、二の足を踏んでいる方も多いかも知れません。本記事はなるべく 簡潔に、汎用的に、手順どおりに 解説していきます。少しでも日本人開発者が増えればと思います。 Figma とは デザインツールとして XD や Sketch とよく比較されますが、両者と違い Figma はウェブベース (ブラウザ上で使えること) 、リアルタイムコラボレーションに重点を置いて開発されています。ウェブベースですが、デスクトップアプリもあります。プラグインの開発にはデスクトップアプリが必須です。ウェブベースなので、プラグインは基本的に

              • テクノロジー
              • 2022/10/10 08:28
              • figma
              • プラグイン
              • plugin
              • WEB制作
              • Intersection Observer API のパフォーマンス:複数インスタンス vs 共有インスタンス

                9 users

                zenn.dev/ixkaito

                はじめに きっかけは以下のかまぼこさんのツイートです。 僕からの回答は以下です。 この記事ではこちらについてもう少し詳しく解説いたします。なお、Intersection Observer API の解説は割愛しますので、詳しくはこちらをご確認ください。 検証 コンポーネントごとにオブザーバー スクロールに応じて要素をアニメーションさせる場合、React で素直に実装すると、おそらくコンポーネントごとに Intersection Observer のインスタンスを生成して、それぞれの要素を監視して状態を変化させることになるかと思います。具体的なコードを見たほうがわかりやすいと思いますのでサンプルコードを示します。

                • テクノロジー
                • 2022/05/30 12:46
                • あとで読む
                • Tailwind CSS の一歩進んだ書き方

                  103 users

                  zenn.dev/ixkaito

                  -## Just-in-Time 改め arbitrary values +## Just-in-Time 改め arbitrary values (任意の値) -上記例にある `text-3xl` などのスタイルは予め Tailwind CSS が用意しているものですが、`tailwind.config.js` を編集することで簡単に変更・追加できます。ただし、1 回しか使わないスタイルでもいちいち `tailwind.config.js` に登録しないといけないので、その不便さを解消する機能として v2.1 から Just-in-Time (JIT) モードが導入されました。 +上記例にある `text-3xl` などのスタイルは予め Tailwind CSS が用意しているものですが、v3.4 までは `tailwind.config.js`、v4.0 からは CSS ファイルで `

                  • テクノロジー
                  • 2022/05/23 10:02
                  • Tailwind
                  • css
                  • TailwindCSS
                  • あとで読む
                  • web制作
                  • Tailwind CSS
                  • techfeed
                  • CSS カスタムプロパティによる流動的フォントサイズ

                    93 users

                    zenn.dev/ixkaito

                    はじめに 画面幅に対して流動的にフォントサイズを変化させたい場合、vw などの単位を用いると実現できます。たとえば font-size: 5vw; を指定すると、幅 960px ではフォントサイズは 48px、幅 320px では 16px になります。しかし、320px で 16px は小さすぎるので 32px にしたいとなると、計算が必要になってきます。 この計算方法や流動的フォントサイズのさらなる詳細については、以前登壇したときの資料をご覧いただきたい 👇 資料にもございますが、計算して CSS を出力してくれるアプリも作っています 👇 Sass の mixin もあります 👇 今回は、calc() clamp() min() max() と CSS カスタムプロパティを駆使して、自分で計算する必要がなく、Sass なども不要で CSS のみでの実装を紹介いたします。 使い方と

                    • テクノロジー
                    • 2022/01/21 20:03
                    • css
                    • フォント
                    • font
                    • あとで読む
                    • zenn
                    • HTML・CSS
                    • Typography
                    • techfeed
                    • HTML
                    • 開発
                    • 加工なし CSS のみで画像にグリッチと RGB ずらし効果をかける

                      306 users

                      zenn.dev/ixkaito

                      はじめに 以下のツイートが500いいねを超えましたので解説記事を書きます。 デモ&ソースコード CodePen に完成品のデモとソースコードを置いてあります。 グリッチとは 元々は「一過性の障害」という意味ですが、映像の世界ではしばしば「映像の乱れ」という意味で用いられます。ホラーやサイバーなどでよく見られる演出の一つ。 https://www.google.com/search?q=glitch&tbm=isch RGB ずらしとは 色収差、RGB シフト、RGB split (RGB 分割) など、さまざまな言い方がありますが、要するに本来光の三原色である Red、Green、Blue がズレることなく重なって映像を映し出すところ、それがズレた状態で表示されることです。 グリッチエフェクトと一緒に用いたり、場合によっては色ズレも含めてグリッチと言ったりしますので、今回も合わせて実装する

                      • テクノロジー
                      • 2021/10/08 18:23
                      • css
                      • あとで読む
                      • web制作
                      • glitch
                      • 画像
                      • tutorial
                      • design
                      • color
                      • アニメーション
                      • animation
                      • Tailwind CSS に流動的 Spacing を導入

                        14 users

                        zenn.dev/ixkaito

                        はじめに まず、Tailwind CSS の spacing とは何かについては、公式の Spacing ページ をご覧ください。Tailwind CSS はユーティリティファーストの CSS フレームワークですので、提供する padding や margin などのサイズは予め決められています。その基となるのが Spacing ページ下部にある Default spacing scale という表です。 Tailwind CSS default spacing scale Name がサイズ名で、size が実際の値で、pixels がピクセルに換算したときの数値です。この spacing は、padding、margin、width、height、top、left などなど、さまざまなプロパティに利用されます。Tailwind CSS を使用したことがある方はご存知だと思いますが、使い

                        • テクノロジー
                        • 2021/07/13 19:24
                        • Tailwind
                        • css
                        • あとで読む
                        • 読書アシストの実装方法について考えてみる

                          6 users

                          zenn.dev/ixkaito

                          はじめに まず、読書アシストについては、こちらを参照してください。 この読書アシストの「4. 冒頭文字を階段状に字下げする表示方式」をどのように実装するのかについて考えてみました。 画像は読書アシストより レギュレーション こちらのサンプルを確認するとわかるように、 段落 (HTML でいうと p タグ) ごとに字下げはクリアされ 1行ずつ字下げが増えていき 7行ぐらい (作品によっては9行のものもある) で字下げが2文字ぐらいに戻り 以降5行ごとぐらいに字下げが2文字ぐらいに戻る。 図にすると以下のような感じ。 実装 現時点で以下の値が設定できると良さそうな気がします。 最大字下げ 最初の字下げ行数 続きの字下げ行数 これらを CSS カスタムプロパティとして以下のように設定しておきます。 :root { --assist-indent-max: 7em; /* 最大字下げ */ --a

                          • テクノロジー
                          • 2021/03/29 14:06
                          • CSS
                          • 生 WebGL と TypeScript で Vercel のロゴを作る

                            42 users

                            zenn.dev/ixkaito

                            はじめに 完全に釣りタイトルです。Three.js などを使わずに生の WebGL で ▲ を描くというだけの話です。いわゆる WebGL の「Hello World」です。Vercel や Next.js とは一切関係ありません。 WebGL を詳細に解説しているサイトはいくつかあって、内容に関してはどれもすばらしいものです。ただ、何年も前のものなのでソースコードにまだ var が使われているものも多く、また独自関数で処理をまとめていることで、個人的には全体の流れが少しわかりにくくなっている気がします。さらに TypeScript を使っている日本語記事は見当たりませんでしたので、それらを補う形でまとめてみたいと思います。 なお、本記事では全体的な流れに焦点を当てているので、詳細な解説は下記サイトなどをご参考ください。 WebGLの基本 (日本語) wgld.org | WebGL (日

                            • テクノロジー
                            • 2021/02/08 10:00
                            • WebGL
                            • TypeScript
                            • 3Dプログラミング
                            • あとで読む
                            • techfeed
                            • 3D
                            • js
                            • 個人からチームまで、Notion での情報・タスク管理一元化完全解説

                              466 users

                              zenn.dev/ixkaito

                              2020/11/27 (金) の WP ZoomUP #53 にて弊社 KITERETZ inc. (キテレツ) での Notion の活用法についてお話させていただきました。以下はそのときの資料ですが、こちらの記事はその内容を記事化したうえで、資料には入れられなかった動画での操作解説や、時間的にセミナーで話せなかったことを書き加えたものです。 💡 Notion 採用のきっかけ Product Hunt などで話題になったタイミングで、個人的に Notion を触ってみましたが、「Evernote と何が違うんだろ?」と思ったぐらいで、イマイチ良さがわかりませんでした。 しかし、キテレツは2年ほど前からメンバーが増え、情報を一覧できるシステムを導入してほしいという提案がありました。僕も、プロジェクトごとのタスク・進捗管理に加え、全プロジェクトのタスクを横断的に確認する方法を模索していまし

                              • テクノロジー
                              • 2020/12/25 14:55
                              • notion
                              • あとで読む
                              • タスク管理
                              • ツール
                              • プロジェクト管理
                              • webサービス
                              • task
                              • dropbox
                              • ドキュメント
                              • チーム

                              このページはまだ
                              ブックマークされていません

                              このページを最初にブックマークしてみませんか?

                              『zenn.dev』の新着エントリーを見る

                              キーボードショートカット一覧

                              j次のブックマーク

                              k前のブックマーク

                              lあとで読む

                              eコメント一覧を開く

                              oページを開く

                              はてなブックマーク

                              • 総合
                              • 一般
                              • 世の中
                              • 政治と経済
                              • 暮らし
                              • 学び
                              • テクノロジー
                              • エンタメ
                              • アニメとゲーム
                              • おもしろ
                              • アプリ・拡張機能
                              • 開発ブログ
                              • ヘルプ
                              • お問い合わせ
                              • ガイドライン
                              • 利用規約
                              • プライバシーポリシー
                              • 利用者情報の外部送信について
                              • ガイドライン
                              • 利用規約
                              • プライバシーポリシー
                              • 利用者情報の外部送信について

                              公式Twitter

                              • 公式アカウント
                              • ホットエントリー

                              はてなのサービス

                              • はてなブログ
                              • はてなブログPro
                              • 人力検索はてな
                              • はてなブログ タグ
                              • はてなニュース
                              • ソレドコ
                              • App Storeからダウンロード
                              • Google Playで手に入れよう
                              Copyright © 2005-2025 Hatena. All Rights Reserved.
                              設定を変更しましたx