誤解しているかも！ CSSの詳細度について、よくある誤解を解説
CSSの詳細度とは、(0,0,2)や(1,0,0)など3つの数字でスタイルを適用する際の優先度を決めるブラウザのアルゴリズムです。要素に対して複数のCSS宣言があり、そのプロパティや値が競合している場合、詳細度が高いものが優先されます。 このCSSの詳細度について、よくある誤解を紹介します。 Misconceptions about CSS Specificity by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 詳細度の誤解 1: 詳細度は10進数である 詳細度の誤解 2: style属性で詳細度が高くなる 詳細度の誤解 3:!importantで詳細度が高くなる 終わりに はじめに CSSの詳細度（Specificity）、ひいてはカスケード（Cascade）に関する記事が公開される度に、私はと
CSSはどんどん進化している！ マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning
ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen
Webアクセシビリティことはじめ【おすすめ資料5選】｜akane
こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、Webアクセシビリティの初心者が基礎を学ぶときに助かった資料を紹介します。各資料に対する説明も掲載しているので、どうぞ最後までお楽しみください🌏 ※冒頭、Webアクセシビリティに関する前提知識の紹介が長くなっています。本編を読みたい方は「資料①｜ざっくり知ろう」からご覧ください。 ※今回は、デジタル庁等の引用元にならって「障害」の表記を使用します。 ※noteの内容に誤りがございましたら、お手数ですがコメントやSNS等でご指摘いただけると幸いです。 はじめにまずは、Webアクセシビリティに関する基礎知識の整理からスタートします。最近よく耳にする「合理的配慮」のことも振り返ります。 WebアクセシビリティとはWebアクセシビリティとは、文字通りWebサービスにおけるアクセシビリティのことです。 アクセシビリティは「アク
「もうやめない？」マイナ保険証、利用率6.56％の惨状に批判殺到 …あの手この手で普及目指すも “笛吹けど踊らず” - Smart FLASH/スマフラ[光文社週刊誌]
「もうやめない？」マイナ保険証、利用率6.56％の惨状に批判殺到 …あの手この手で普及目指すも “笛吹けど踊らず” 社会・政治 投稿日：2024.05.15 15:30FLASH編集部 5月14日、厚生労働省は、マイナンバーカードに健康保険証の機能を持たせた「マイナ保険証」の4月の利用率を公表。前月比1.09ポイント増の6.56％で、過去最高となったものの、いまだ低迷しているのは明らかだ。 政府は12月2日から現行の健康保険証の新規発行を停止し、廃止するとすでに決定。マイナ保険証への一体化に向け躍起となってきた。 【関連記事：マイナ保険証「使えない医療機関を通報しろ！」河野大臣の “通達” に業界団体が猛反発「八つ当たりもいいところ」】 「他人の情報が誤ってひも付けされるなどのトラブルが相次ぎ、マイナ保険証の利用率は2023年4月の6.30％をピークに8カ月連続で減少、同年12月には4.
![「もうやめない？」マイナ保険証、利用率6.56％の惨状に批判殺到 …あの手この手で普及目指すも “笛吹けど踊らず” - Smart FLASH/スマフラ[光文社週刊誌]](https://cdn-ak-scissors.b.st-hatena.com/image/square/75d89626f574bca7b53fa80594a4d95f79a5a28f/height=288;version=1;width=512/https%3A%2F%2Fdata.smart-flash.jp%2Fwp-content%2Fuploads%2F2024%2F05%2F15145521%2Fkouno_tarou_1.jpg)
約20万アカウントの情報漏えいか 平文パスワードも ペットベンチャーに不正アクセス
ペットフード事業を手掛けるバイオフィリア（東京都新宿区）は5月13日、自社のクラウドサーバに不正アクセスを受け、最大で約20万アカウント分の情報が漏えいした可能性があると発表した。 漏えいした可能性があるのは、ペットフード出荷時や、ユーザーによるアカウント情報変更時のログ。2022年1月13日から24年5月3日までに、同社のサイトからペットフード「ココグルメ」「ミャオグルメ」を購入した19万8200アカウントの情報が対象という。このうち16万3474アカウントは氏名、住所、電話番号が、3万4726アカウントは氏名、住所、電話番号、メールアドレス、生年月日、性別、パスワードが漏えいした可能性がある。 19万8200アカウントのうち2万8237アカウントは、18年3月5日から24年5月3日にかけて同社のサービスにアップロードした写真も漏えいした可能性がある。このうち1万8149アカウントは会員
美大生がデザイナーにならない方が良い3つの理由｜うすいゆな｜セブンデックス
こんにちは。 多摩美術大学統合デザイン学科卒のうすいです。 私は、美大生×デザイナー長期インターンという二足の草鞋だった大学生活を経て、最終的に総合職（ディレクター）としてセブンデックスに就職しました。 最初から総合職として就職するぞ！と決めていたわけでもなく、総合職とデザイナー職の就活を並行させつつ、終始自分のモヤモヤと闘っていた就活時代。 そこから、ようやく社会人として働き始めてはや一年。 改めて、自分の思考を引っ張り出してみたので、「ほ〜ん、おもしれー新卒じゃん」って思ってもらえたら幸いです。 ※ この記事には主観的な表現がとても多いですが、あくまで個人の感想と見解です。 前提｜「美大生」と「デザイナー」とは本題に入る前に、この話で言及する「美大生」と「デザイナー」像を明確にするために、簡単に私の経歴や現状をお話しします。 私は昨年多摩美術大学を卒業しました。 統合デザイン学科という
数年前の写真が復活する｢iOS 17.5｣のバグの続報 ｰ 初期化し売却したデバイスで以前のユーザーの写真が復活する事例が発生 | 気になる、記になる…
ホームAppleiPad数年前の写真が復活する｢iOS 17.5｣のバグの続報 ｰ 初期化し売却したデバイスで以前のユーザーの写真が復活する事例が発生 先日、「iOS 17.5」にアップデートした一部のユーザーから「写真」アプリで数年前に削除したはずの写真が復活してしまうといったバグが報告されていることをお伝えし、かなり話題になりましたが、MacRumorsがその後の最新情報を報告しており、Redditに投稿された新たな情報によると、初期化して売却した「iPad」でも同様の事例が発生していることが分かりました。 そのことを報告するユーザーによると、「iPad Pro 12.9インチ (第4世代)」を売却前にAppleの指示に従って初期化し、Apple IDとの紐付けも解除されているにも関わらず、その「iPad」を購入したユーザーが「iPadOS 17.5」にアップデートすると前の所有者の写
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG
少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示する そのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
Apple「メモ」が8つの設定変更で化ける！【今日のワークハック】 | ライフハッカー・ジャパン
開始スタイルとして、「タイトル」の代わりに見出しや小見出し、本文も設定できます。フォントを普通のサイズにしたい場合は、「本文」を選んでください。 「見出し」や「小見出し」でも、メモの最初の行がタイトルの書式になりますが、デフォルトと比べるとフォントは小さくなります。 2. チェックリストの並べ替え方法を変えるImage: Pranay Parab「メモ」アプリでは、チェックリストを作成することもでき、ToDoリストや買い物リストをつくって共有するのにとても便利です。 デフォルトでは、リストの項目にチェックをつけると、その項目は同じ場所に残ります。 完了した項目を、リストのいちばん下に移動させたい人もいるでしょう。そういう人は、設定＞メモ＞チェックした項目を並べ替えを選択し、自動を選んでください。 3. 背景の色を変えるImage: Pranay ParabiPhoneがダークモードに設定さ
Apple、iPhoneのタッチ決済を日本で提供開始
iPhoneのタッチ決済により、事業者はiPhoneとパートナーの対応iOSアプリを使うだけで、非接触決済のクレジットカードやデビットカード、Apple Pay、その他のデジタルウォレットにシームレスかつ安全に対応できます。 東京 Appleは本日、ローカルビジネスが、対面での非接触決済にiPhoneだけで対応できる「iPhoneのタッチ決済」の提供を日本で開始しました。これからは中小規模の事業者から大型小売店まで、お持ちのiPhoneを使って、シームレスかつ安全に、非接触決済のクレジットカードやデビットカード1、Apple Pay、その他のデジタルウォレットに対応できるようになります。使用するのはiPhoneとパートナーの対応iOSアプリだけで、その他のハードウェアや決済端末は必要ありません。
【WordPress】フルサイト編集テーマをいくつか作ってみて
WordPress5.9でリリースされたフルサイト編集。 リリース当初はいわゆる「ハイブリッドテーマ」や「ユニバーサルテーマ」といった作り方で進めることが多かったのですが、最近は「ブロックテーマ」での構築を前提に考えるようになりました。 今回書いている内容は私個人的に作ってみての感想とか作業手順なので、ぜひほかの人にも書いてほしい…（知りたい） ブロックテーマになってどう変わった？ 基本的にテーマを構築する上でPHPを触ることがぐっと減りました。毎回書いてるPHPは ブロックスタイルを作る テーマ自体のCSSやJS、ブロックのCSSをエンキューする ブロックパターンを作る これくらいかな？あと場合によって投稿テンプレートをデフォルトでセットするとか細々したものがあったりなかったり。クエリー操作したりするPHPなんかは全然書きません。ヘッダーやフッターも然り。 ヘッダーやフッター、アーカイブ
Adobe Firefly を適切に活用するための著作権との付き合い方 第４回 Firefly の生成物は著作権を侵害するか | Adobe blog
Adobe Firefly を適切に活用するための著作権との付き合い方 第４回 Firefly の生成物は著作権を侵害するか 前回は、著作権により保護されるものと保護されないものを確認しました。今回は、第 1 回で整理した懸念点の中から Adobe Firefly 利用者が、「生成物により、意図せず著作権を侵害してしまう」という心配をする必要があるかどうかを掘り下げます。より詳しくこのトピックの法的な側面について学びたい方は、文化庁が公開している動画「AI と著作権」の視聴をお勧めします。 （今回は、プロンプトで画像全体、または画像の主要な部分を生成する場合を想定しています。画像の背景の一部に生成塗りつぶしを適用するようなケースが著作権侵害の対象になるとは考えにくいためです。） さて、多くの方が既にご存知のように、著作権侵害が成立するには、以下の 2 つの条件が満たされる必要があるとされて
入力欄のプレースホルダーって結局どうなの - Qiita
入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
100マス計算 足し算・引き算
1on1ミーティングガイド (1on1ガイド)
20マス計算 足し算・引き算
約3万円の「VMware Workstation Pro」が無償化 ～個人利用で、Mac向け「Fusion」も／「VMware Workstation/Fusion Player」は販売終了
10マス計算 足し算・引き算
長い 線は どれでしょう
