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

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

アプリで開く

はてなブックマーク

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

はてなブックマーク

トップへ戻る

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

    Google I/O

『zenn.dev』

  • 人気
  • 新着
  • すべて
  • 【CSS】実は br や img に ::before, ::after 疑似要素が入れられる(場合がある)【置換要素】

    5 users

    zenn.dev/kagan

    この記事で紹介するのはお遊びのようなものであり、実用を目的としていません。 後に説明する通り、ブラウザによって表示が異なるなど、動作が保証されませんのでご注意ください。 はじめに結論から br や img には通常、::before, ::after 疑似要素を追加できません。 しかし、以下の Codepen にサンプルを示した通り、br や img 自体のコンテンツを置き換えることで、疑似要素を適用できます。

    • テクノロジー
    • 2024/05/21 13:25
    • あとで読む
    • 【CSS・Chrome 124】aspect-ratioを使っているページが何もしていないのに壊れた

      13 users

      zenn.dev/kagan

      はじめに結論 CSS の aspect-ratio プロパティを使っている場合、Chrome 124 で崩れる場合があります。 aspect-ratio を設定している要素に min-width: 0; を設定しておくと安全かも。 以下詳細です。 現象 以前は問題なく表示できていたはずのページで、コンテンツがページ外にはみ出してしまう現象が発生していました。 原因を確認すると、以下のような条件で発生していました。 親で display: grid; を設定して横並びにしている おそらく flex でも同様 その中に aspect-ratio プロパティを設定している要素がある 同様の状況を再現したのが、冒頭に掲載した CodePen のサンプルです。 原因 Chrome 123.0.6262.0 で表示を確認したところ、問題なく表示されていました。 Chrome 124.0.6367.92

      • テクノロジー
      • 2024/05/01 17:53
      • css
      • chrome
      • 【JS】「ただの {}(ブロック文)」を使うと嬉しいこと

        55 users

        zenn.dev/kagan

        JavaScript の 「ブロック文」 をご存知でしょうか。 波括弧(ブレース)で囲む、コレです。 if ブロック if () {} や、for ブロック for () {} として目にすることが多いですが、 {} 単体でもブロック文になります。 これだけだとオブジェクトと思ってしまうかもしれませんが、ブロック文になります。 (オブジェクトとブロック文の解釈については javascriptのオブジェクトリテラルは評価されるまでは、あくまでブロック文でしかない - メモを揉め が詳しいです) なんの意味もないように見える「ただの {}(ブロック文)」ですが、意外と便利なことがあるのでこの記事ではそれを紹介します!

        • テクノロジー
        • 2024/04/15 12:25
        • javascript
        • あとで読む
        • プログラミング
        • ネタ
        • 【HTML】dl, dt, ddで組みたくなる表、tableにするのがいいかもね(スクリーンリーダーと検索エンジンのために)

          64 users

          zenn.dev/kagan

          dl や ul で組むべきでないという主張ではありませんので誤解のなきよう! dl で書くんだ!と思える人はそれがいいと思います😉👍 私自身は dl と table が HTML の使い方としてはどちらも正解で差がないように感じられて、どちらを使うべきか判断がつかず悩んだ末、具体的なメリットの部分を見て table にしたという話です。 同じように迷った人の参考になれば幸いです。 詳しくは以降で説明します。 想定する表の内容 この記事の議論では、名前と値の組が複数並んでいる、メタデータの表を想定します。 プログラミング言語でいうところの、連想配列 (Map, Dictionary, JS では Object) の構造に相当します。 具体的には以下のようなものです。 会社概要(「会社名:〇〇、所在地:〇〇、資本金:〇〇、…」) 商品の仕様表(「商品名:〇〇、価格:〇〇、サイズ:〇〇、…」

          • テクノロジー
          • 2024/04/07 09:51
          • html
          • あとで読む
          • Webデザイン
          • それでも私が<wbr>でなくinline-blockで改行調整をする、たった1つの理由

            177 users

            zenn.dev/kagan

            inline-block を使う理由、それは 入れ子構造を作れることにより、改行位置の優先順位をつけられるから! 詳しくは以降で説明します。 (前提)そもそも改行調整ってなんの話? このタイトルを見て記事を開いた方であれば知っていると思いますが、一応説明です。 スペースで単語が区切られる欧文とは違い、日本語は単語の区切りがないので、改行すべき位置を機械的に判断できず、不自然な位置で改行されてしまうことがあります。そこで、見た目を整えるため、改行すべき位置を指定するための手法が必要になります。 他に詳しい記事がいくつもありますので、詳細はそちらを参照してください。 代表的な改行調整の手法 <wbr> 要素 <wbr>要素は、改行してよい位置を表す要素です。 親要素に対して word-break: keep-all; を指定して基本的には改行されないようにすることで、<wbr>要素がある位置で

            • テクノロジー
            • 2024/03/23 11:22
            • css
            • html
            • 改行
            • あとで読む
            • web制作
            • web
            • テキスト
            • *web制作
            • 【初学者向け】具体例で学ぶTypeScript練習問題集

              182 users

              zenn.dev/kagan

              TypeScript を学習中の方に勧められる練習問題集として手頃なものがないなと思い、作ってみました。 TS の問題集としてはtype-challenges がよく話題に上がりますが、実用上あそこまでの型パズルを使うことはあまりないため、最初に取り組むにはハードルが高いです(もちろん知っていたら便利ではありますが、初学者向けではない)。 想定読者 JavaScript を書くことには慣れている TypeScript はこれから・まだ慣れていない TypeScript の基本的な型についてはすでに知っている はじめに JavaScript の機能に関する問題は扱いません。TypeScript の型システムに関する問題のみ扱います。 そもそも TypeScript についてよくわかっていない場合、サバイバル TypeScriptなどで学習から始めてみてください。 「型がつけられると何が嬉しい

              • テクノロジー
              • 2024/02/12 14:19
              • TypeScript
              • あとで読む
              • 学習
              • javascript
              • 型
              • study
              • 勉強
              • プログラミング
              • Tailwind CSS の hover: を、非活性な要素やタッチ操作に適用させない ~ addVariant の活用

                4 users

                zenn.dev/kagan

                背景 以前公開した記事で、単純な :hover セレクタの問題点を書きました。 詳しくは上記の記事に書いていますが、要約すると問題は大きく以下の 2 点です。 スマホなどのタッチデバイスでもホバースタイルが適用されてしまう disabled 状態の button など、クリックしても反応しない要素にもホバースタイルが適用されてしまう これらの問題が次のようなメディアクエリと疑似クラスを組み合わせたスタイル記述によって解決できることを紹介しました。 @media (hover: hover) { .class:where(:any-link, :enabled, summary):hover { /* ホバースタイル */ } } 今回はこれを Tailwind CSS で実現するには? という記事です。 確認した環境 Tailwind CSS v3.4.1 Tailwind CSS におけ

                • テクノロジー
                • 2024/01/30 22:20
                • Tailwind
                • CSS
                • Web制作
                • strong, b, em, i, u, …、違いがわからんHTML要素の仕様を調べて「新しい見た目」を考えてみたら理解が深まった

                  214 users

                  zenn.dev/kagan

                  「strongもbも太字になるのにどう違うんだ…?」 「emもiもイタリック体になるけど、そもそもイタリック体ってなんなんだよ…?」 「strongの重要と、emの強調って何が違うんだ…?」 などなど、使い方がよくわからなくなりがちな HTML 要素(主にテキストレベルセマンティックスに分類される要素)の違いを調べてみました。 長めの記事になっていますので、気になる要素だけつまみ食いしてもらうのもよいかと思います。 今回の調査対象はこちら span strong b em i dfn cite var mark u ins del s strike big small ブラウザのデフォルトの見た目確認用 CodePen 調査する内容 HTML Standard の仕様に書かれている説明 一部、HTML 4.01 から HTML 5 での変更が理解の助けになるものもあり、HTML 4.01

                  • テクノロジー
                  • 2023/08/20 12:02
                  • html
                  • あとで読む
                  • 仕様
                  • Web
                  • 技術
                  • web制作
                  • 【CSS】まだホバー時のスタイルを :hover だけで指定してるの?

                    324 users

                    zenn.dev/kagan

                    はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう! @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス(正確には、ホ

                    • テクノロジー
                    • 2023/08/07 09:03
                    • css
                    • あとで読む
                    • HTML・CSS
                    • デザイン
                    • ボタン
                    • web
                    • web制作
                    • hover
                    • webデザイン
                    • リンク
                    • :is(), :where() を活用してCSSを「後置修飾」で書く

                      40 users

                      zenn.dev/kagan

                      はじめに結論から :is()または:where()を使うと、 これまで「前置修飾」で書かなきゃいけなかったセレクタが 「後置修飾」で書けて嬉しい! /* 通常のスタイル */ .button {} /* 特定の要素と隣接するときのスタイル */ /* こう書いてたものが */ .link + .button {} /* こう書ける */ .button:is(.link + *) {} /* 特定の要素に内包されているときのスタイル */ /* こう書いてたものが */ header .button {} /* こう書ける */ .button:is(header *) {} /* 特に、「特定のクラスの中の要素に対するスタイル」を条件分岐させるときに便利 */ .container p {} .container p:is(h2 + *) {} .container p:is(secti

                      • テクノロジー
                      • 2023/08/06 19:04
                      • css
                      • あとで読む
                      • tips
                      • 【ゆるふわWCAG】中学生でもわかるウェブアクセシビリティガイドライン

                        8 users

                        zenn.dev/kagan

                        ウェブアクセシビリティを実践する際、基準となるのがWCAG(Web Content Accessibility Guidelines、ウェブコンテンツアクセシビリティガイドライン)です。しかし、WCAGの文章は難しい! なので、簡単な言葉に読み替えながら理解しましょう!

                        • テクノロジー
                        • 2023/04/10 10:00
                        • あとで読む
                        • VueやJSXは好きだけどSPAは要らない、そんなあなたに Astro

                          4 users

                          zenn.dev/kagan

                          「EJS, Nunjucks, PugなどでWeb制作をやってたけど、もっとモダンな開発がしたい・・・」 「ReactやVueに手を出してみたけど、別にアプリケーションが作りたいんじゃなくて静的なWebページが作りたいんだ・・・」 「Next, Gatsby, Nuxtみたいな静的サイトビルダーを使ったけど、結局SPAの挙動するやん・・・」 「SPAは別にいらんねん・・・」 いずれかに当てはまる方、いませんか?(全部私が思ってたこと) そんなあなたに Astro です。 Astro ではどんな書き方ができるの? Astroにはいろんな特徴がありますが、この記事では「どんな書き方ができるのか」を中心に紹介します。 Astroでは .astro という独自のファイル形式を使用します。 早速ですが、Astroでどんな書き方ができて、どんな出力が得られるのか見てみましょう。 こういう書き方↓ができ

                          • テクノロジー
                          • 2022/12/26 06:43
                          • 【CSS】gridでできるこんなレイアウト10選(grid関連プロパティ総ざらい)

                            22 users

                            zenn.dev/kagan

                            IEがいなくなり安心して使えるようになった CSS Grid Layout (display: grid;)。 みなさん、使っていますか? これまでに面倒だった記述が楽に書けるようになるのはもちろん、 要素数が増えたり減ったりしてもイイ感じに配置できたり、 ウィンドウ幅が変わってもイイ感じに配置できたりと、 Gridは レイアウトの対応力を高める強力な武器 となります。 Gridの便利さをお伝えするため、Gridの活用例をこれでもかと詰め込んだCodePenのサンプルを作成しました。 (ウィンドウ幅によって変わる仕組みもありますので、ぜひ別タブで開いてご確認ください) この記事では、ここで使用している個別の活用例10個を紹介します。 それぞれの項目の中では、どのようなプロパティで機能を実現しているか説明していきます。 (この記事にはほぼすべてのgrid関連プロパティが登場します!) 1.

                            • テクノロジー
                            • 2022/11/18 21:40
                            • grid
                            • css
                            • レイアウト
                            • Webデザイン
                            • あとで読む
                            • 「HTMLでは環境依存文字(①や©など)を文字参照にしなければいけない」という誤解と、本当に置換すべき文字

                              205 users

                              zenn.dev/kagan

                              HTMLファイルで特殊記号を使う際、① は &#9312;、© は &copy; のように置き換えて書かないといけないものだと思いこんでいないでしょうか。 現代ではそれは誤解です。 UTF-8では特殊記号の文字参照は不要 そもそも環境依存文字とは、データを扱う機種・ソフトウェアなどの違い(文字コードの割り当ての違い)により表示に違いが出てしまう文字のことでした。 例えばShift_JISには © が含まれておらずそもそも保存できなかったり、 ① などの丸数字は含まれているものの、WindowsとMac OS(当時)の割り当ての違いにより正しく表示できなかったりしました。[1] しかし現在ではUnicodeによって文字コードは統一化されており、その問題はほとんど起きなくなっています。 近年では多くの場合 UTF-8 でファイルを記述すると思います。 HTMLファイルの文字エンコーディングが

                              • テクノロジー
                              • 2022/10/21 19:29
                              • html
                              • 文字コード
                              • あとで読む
                              • コーディング
                              • web
                              • 環境
                              • unicode
                              • 文字
                              • プログラミング
                              • web制作
                              • 「mask-image」でSVGアイコンの色をCSSで変えよう! ~mask-imageの便利な使い方紹介を添えて~

                                4 users

                                zenn.dev/kagan

                                「mask-image」でSVGアイコンの色をCSSで変えよう! ~mask-imageの便利な使い方紹介を添えて~ SVGで作成されたアイコン画像に対して、CSSで色を指定したいということありますよね。 そういった場合、SVGをインラインでHTMLに書き出し、fillで色を指定する方法が一般的でした。 しかし、IEのサポートが終了して対応の必要がなくなる今、SVGの色変えは mask-image で簡単に実現できます。 以下にその例を示します(ついでに mask-image のその他の使い方も紹介しています)。 mask-image とは? その名の通り、要素を マスク するCSSプロパティで、指定した画像で要素をくりぬく機能です。 IE以外の主要なブラウザでサポートされています。 ただし、Chromeや、(15.4より前の)Safariでは -webkit-mask-image として

                                • テクノロジー
                                • 2022/08/08 23:52
                                • あとで読む
                                • よりよいCSSを書くための、CSS / Sass (SCSS) 30のルールとその理由

                                  271 users

                                  zenn.dev/kagan

                                  Webエンジニアを始めて丸2年が経ちました。 複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。 はじめに 長くなってしまった細かい説明はところどころ折りたたんでいます。概要だけで理解できたら飛ばしていただき、詳しい話が気になったら開いて読んでください。 これらは「自分がよく取り入れている手法」であって、必ずしもどのプロジェクトにも当てはまるものではないと思います。 各項目について、自分がその判断に至った 「理由」 を説明していますので、 理由を読んだ上で自分のプロジェクトに取り入れるか判断いただくと良いと思います。 この記事は、すでにCSSコーディングをしていてアイデアがほしい人に向けた記事で、 CSSをこれから学び始めるような 初学者向けではない ことご了承ください。 一般的と思われるキ

                                  • テクノロジー
                                  • 2022/04/16 17:04
                                  • css
                                  • sass
                                  • あとで読む
                                  • コーディング
                                  • SCSS
                                  • フロントエンド
                                  • frontend
                                  • CSS設計
                                  • *WEB制作
                                  • programming

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

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

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

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

                                  j次のブックマーク

                                  k前のブックマーク

                                  lあとで読む

                                  eコメント一覧を開く

                                  oページを開く

                                  はてなブックマーク

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

                                  公式Twitter

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

                                  はてなのサービス

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