ユーザーにヒントを表示するための `popover=hint` 属性
ポップオーバー API は 2024 年の Baseline に組み込まれており、主要なブラウザでサポートされています。 popover 属性を使用すると HTML のみを使用してアクセシブルなポップオーバーを作成できます。ポップオーバーの作成は非常に簡単です。 ポップオーバーを表示する要素に popover 属性を追加する ポップオーバーをトリガーする要素に popovertarget 属性を追加する popovertarget の属性の値には popover 属性を持つ要素の id を指定する また、ポップオーバーをより細かく制御するために popover 属性に値を設定することもできます。現在は auto と manual の 2 つの値がサポートされています。 Chrome Beta 133 では 3 番目の値として hint が追加されました。popover=hint はユーザー
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
BARフロントえんどう #2 「CSS Library / Framework」での登壇資料
Webデザインで「紙っぽさ」を出す方法を考えてみる｜akane
こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webデザインで「紙っぽさ」を出す方法を考えてみました。参考事例も掲載しながら紹介していくので、どうぞ最後までお楽しみください！ はじめに：「紙っぽさ」とは？私が言う「紙っぽさ」とは、おもに「雑誌っぽさ」のことです。Webデザインだけど、雑誌っぽい。ディスプレイに映っているけれど、エディトリアル感がある。 たとえば、以下のようなデザインは私にとって「紙っぽい」例です。 出典：六本木未来会議出典：DMN出典：ぼくのおじさんどうして、私はこれらを雑誌のようだと感じるのでしょう？自分なりに考えたポイントを、ひとつずつ紹介していきます。 その①：文字が「組まれて」いる最初に挙げたWebサイトのひとつをよく見てみると、画像左上にある「NO. 153」の文字のうち、「NO.」だけが縦向きになっています。「NO.」と「153」を
待機状態のUIについて整理してみる(デザイン編)
Introduction 概要 待機状態 UI のデザインについての記事です。 待機状態 UI というのは、ローディングや情報の処理待ち時に用いられる UIのことです。ここで待機状態の UI と読んでいる理由は、各デザインシステムやガイドラインなどで言い方が違うため、今回はこのように言及させてください。 この記事では、既存のデザインガイドラインや既存のデザインシステムから待機状態の UI の概観、デザインにおいて考慮することをまとめます！ ベストプラクティスを提案するわけではなく、作成する際、配慮することを頭に入れて思考できる記事にします。 背景、課題感 WebFront-end における各 UI の実装を行おうと考えているが、実装する際、ビジネス側やデザイン側と実装する UI について話し合って作ることが多いです。 小さなプロジェクトだと、デザイナーがいない事も多く、Front-end
ヘッダにあるブランドロゴの代替テキスト、みなさんならどうする？｜平尾ゆうてん
はい。ロゴが文字として可読かどうかは関係ないかと思います。結局グラフィックとしてのロゴもテキストとしての名称も、ブランドという抽象概念への別メディアにおけるポインタに過ぎないからです。だからこそこれらは代替可能と言えると思います。 — Kotaro Kokubo (@kotarok) March 24, 2020 つまり、それが例えばTwitterのロゴだったとして、そのシェイプ（鳥のカタチ）を見た人は「Twitterという不特定多数の140字以内のつぶやきを読んだり、つぶやいたりできるSNS」のような概念を認識している。それは「Twitter」というテキストを識字したときや、「ついったー」と音で聞いたときと最終的に同じ概念を認識できるので代替可能というわけだ。 で、ここまでは自分も理解できていたのだけど、問題はここからだ。トップページへのリンクが貼られている場合「トップページへ戻る」とい
10分でわかる構造化マークアップ - Qiita
ブラウザのきもち：h1タグ使われてるから見出しで、内容の「株式会社アンティー・ファクトリー」は会社名なんですね、とてもよくわかります😊。 構造化してあると何がうれしいのか Googleなどの検索エンジンでは、通常はmetaデータのtitleやdescriptionのみが検索結果として反映されます。 データが構造化されていると、構造化の内容に応じて検索結果をよりいい感じに表示(リッチリザルト)してくれます。 ただし、検索結果に必ずしもリッチリザルトが保証されるわけでは無いです。 構造化マークアップはあくまでブラウザにWebページの内容がどういうものかを伝えているだけで、それらをどう検索結果に反映させるかはブラウザ側に一任されています。 詳しくは公式をご参照ください。 Google Developers 構造化データに関するガイドラインに準拠する 実装方法 実装方法としては以下の三通りがサポ
SCSSでツールチップを美しく書く - Qiita
HTMLとSCSSでツールチップを作りましょう。 今回作るのは、ハテナマークにホバーをすると説明文が飛び出てくるタイプです。 自己紹介 アプリクリエイターの 猫チーズ です。HTMLとCSS歴は8年になります。 先月デザイン系の大学を卒業し、4月からサイバーブレイン株式会社( メインサービスはAI Academy )でデザイナーを始めました。 今回の前提条件 JavaScriptは使いません。 スタイルシートはSCSS（CSSを拡張した言語）で書いています。SCSSとして使っているのはセレクターのネストのみです。 もくじ 初期状態の確認 マルを書く マルにハテナを入れる 説明文を置く ホバーで表示/非表示を切り替える 吹き出しをフェードイン/アウトさせる 吹き出しの飛び出してる部分をつける 吹き出しの見た目を整える 吹き出しへのホバーを無視する テーマカラーをCSS変数に置き換える 先に完
非デザイナーのためのWebデザイン開発ガイド - デザインはセンスではない、スキルだ - Qiita
デザインできません、だって絵心がないから仕方ないね、などと言い訳をしている人はいませんか？ 鏡の前に一人いたわ。 以下はPatrik Kruparによる記事、A developer’s guide to web design for non-designersの日本語訳です。 A developer’s guide to web design for non-designers 私は14歳のときに初めてWebサイトを、学校の授業として作りました。 それはテキストと画像、テーブルを使った非常に基本的なものでした。 そのころの私の授業への普段の態度は、完全にそれを忘れ去ってしまい、最後に一夜漬けでどうにかするというものでした。 しかしそれを作ったとき、私は興奮で頭がどうかなりそうでした。 初めてWebサイトを作って以来、私はそれの見栄えをよくすることを常に考えてきました。 あなたが認めようが認
WebサービスにおけるCSS再設計で考えたこと
なぜこの記事を書こうと思ったか 配属されてからは、業務でCSSを書くといったら、Bootstrapのclass名を付与したり、機能追加の際にちょっと書くといったことだったのですが、大幅にサービス全体のCSSを見直さなきゃいけない機会があったので、どんなことを考えたのか書いておきます。 CSSのリファクタリングや再設計は工数がかかる上に、そこまで対価がない結構辛いことだと思います。また運用していて数年が経てば大体の場合がCSS設計は崩壊していきます...。 特に途中で気づいた、最初に決めておけばよかったということも多々あったので参考になればと思います。 前提条件 下記のような時に、この記事は役に立つのではと思って書いてます。 すでにあるWebサービスの大幅なデザイン改修がある 新しくCSSを書かなきゃいけないページが5ページ以上ある 既存のCSS設計を見なさなきゃいけない（CSSファイルが6
CSSの作業をもっと楽に！無料で使える便利なWebツール40選
CSSを使って作業をいているときに活用したい、無料で使えるオンラインツールをまとめてご紹介します。これらのツールは、制作時間を節約、短縮できるだけでなく、CSSのちょっとややこしい問題の解決ツールを想定し作成されています。 CSSをベースとしたアニメーション、レスポンシブに対応したナビメニュー作成ツール、パイチャート作成、CSSの圧縮やユニークなサークル型メニューの作成などさまざまなツールが揃っています。制作に困ったときに読み返してみてはいかがでしょう。 超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度 CSSの作業をもっと楽に！無料で使えるオンライン便利ツール40選 Flexbox Parent Attribute Visualizer CSS Flexbox のプロパティを実際に変更しながら確認できるインタクラティブな方法。 Keyframes.app CSSアニ
スタイルが当たらない時に、知っておきたいCSSテクニック - Qiita
今日、仕事仲間にあるテクニックを紹介したら、意外と喜ばれたので、22ヶ月ぶりにQiitaに投稿してます @BYODKM です。 以前に書いたCSS系の記事は、こんな感じでした。（カッコ内の数字は現時点のもの） 破綻しにくいCSS設計の法則 15 （1464いいね） CSSが破綻する4つの理由（785いいね） 二行目の最後を「...」をクロスブラウザで実現（173いいね） スタイルが当たらない！ さて、スタイルが当たらない訳ですが、考えられる原因として大きく二つあると思います。 HTML側にマッチする内容がない 他のスタイルが強くて打ち消されてしまう 1の方は多分凡ミスなので、よくコードを見ましょう。今回扱うのは、2の方です。 スタイルが当たらない単純な例
デザインカンプから学ぶWebデザイン ｜ 枚方のホームページ制作｜和風デザイン専門店ひだちデザイン
Webデザイナーで入社したのにコーダーになってしまったWebデザイナーで採用されたのにコーダーのポディションに配置されることはしばしばあります。 特に未経験だったり、日の浅いデザイナーに多いです。 Webデザインの知識を一日も早く吸収してWebデザイナーとして一人前になりたい！そう思われることだと思います。 しかし！熟練のデザイナーさんのつくるデザインカンプに毎日触れるコーダーからもWEBデザインの知識を得ることは沢山あります。 コーダーだった私がWebデザイナーに転身した経験を踏まえてデザインカンプからWebデザインの知識を蓄える方法を書いていきます。 デザインの意図深く考えるコーディングする際にこのデザインはどういう意図でデザインされているかを深く考える事が重要です。 配色、隙間、配置、大きさ、線の太さなど・・・ これらの全ては、コーディングする際には全て確認していることかと思いますの
サイトクオリティを落とさないためのWEBデザイナーがすべき「思いやり」の話 | 株式会社PLAN-B
デザイナーの方は経験がないでしょうか？ 案件のサイト制作が進むにつれて「あれ、パーツにばらつきがあるな…」「この動きじゃないのに…」「もっと早くエンジニアに伝えていれば…」ページが出揃いだしてから微妙な差異に気付いたり、納期直前で指摘しづらくなってしまったり。かく言う私もそんな経験のあるデザイナーの一人でした。 ほとんどのサイトがデザイナー1人で作られているわけではありません。サイト規模、プロジェクト規模により、チーム体制も変わりますが、エンジニアやデザイナーが複数人でサイトを作り上げることも多いのではないでしょうか。フリーランスのデザイナーであれば外部リソースとのやりとりなどが必要になる場合もあります。 今回はサイト制作時に役立つだけでなく、公開後のデザインを長く保ち、サイト規模が大きくなるほど重要になるデザインルールを共有するための、スタイルガイドに着目したいと思います。 スタイルガイ
2018年のフロントエンドエンジニアならこの程度は知ってて当然だよな？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 可及的速やかにReactが絶滅しますように。 以下はFront-End Developer Handbook 2018の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール 開発者向けドキュメント、APIリファレンス Dash 200以上のAPIリファレンス、100以上のチートシートを一括ダウンロードできる。有料、Mac用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。有料、Windows用。
画面遷移がすごいサイトのまとめ | バシャログ。
TVKで再放送されているあぶデカにハマっているgamiです。あの時代の関内・馬車道あたり物騒すぎるでしょ…。 さて、以前にも紹介しました、気になるデザインを共有するDesignClipという社内のチャットグループより、画面遷移がシームレスでこいつぁすげえや！となったものを幾つか紹介できればと思います。チェケラ！ 佐久間徹設計事務所 デザインはすごくシンプルで動きもいいと印象によく残ります。 仕事一覧から仕事詳細へ 一覧の写真をクリックするとコンテンツの後ろでニュッと大きくなる感じが好き。 下位ページへ グローバルメニューに注目してるといつの間にかコンテンツが変わってる。 Orenda Security セキュリティ会社のサイト。シャッターのような動きからのロゴアニメーションはまさに鍵をかけてるように感じました。 スタジオスプーン株式会社 四方のボタンをクリックすると、その方向から背景がスラ
Atomic DesignからみたBootstrap｜Yoko Nishida
はじめまして。UIデザイナーの@nikoko45です。 最近Webサービスのデザインガイドラインを作っていて、特にコンポーネントをどうまとめたら良いのか模索中です。ユーザーには一貫したUIや世界観を提供でき、開発者にはもっと効率的に作業スピードをあげられる方法はないか考えてみました。 デザインガイドラインで目指したいこと 一貫性のあるデザインを維持するために、デザインファイルのテンプレート作成、コミュニケーションやレビューのコストを少しでも減らすことがゴールなのかなと思っています。（参考：一貫したデザインのためにデザインシステムを運用する方法） 色々記事を読み漁った結果、どうやらデザインガイドラインとしてコンポーネントを整理するにはAtomic Designが役立ちそうということで調べてみました。 Atomic DesignAtomic Designとは インターフェースに含まれる要素を、
2018年のウェブフォントについて
少しの間Noto Sans Japaneseを利用していたが、すぐに止めた。やはりFOITが気になる。かといってFOUT強制も苦肉の策という印象しかない。……このような記事を書いていたら、先にうまくまとまったfont-displayデスクリプターについての記事が広まっていたので、そちらを読むのが良い。 他が高速・即時化しつつある現在、1MBくらいを超えるウェブフォントはどうにもならない。動的なサブセット化はわからなくもないが、労多くして……という印象だ。自前で作るのも難しいし、安心して任せられる速さの提供者は知らない。 回線の状況(種別ではなく)に応じてうまいこと切り替える仕組みを導入しなければならないだろう。そうなるとデバイスから「今、回線あんま速くないです……」といった動的な情報を得たいが、プライバシーにかかわるので難しい。残る可能性はfont-displayデスクリプターのみだ。 @
新人コーダーに伝えたい、きれいなCSSを書くための4つの習慣
この春、CSSコーディングの仕事を始めた新人さんへ、「きれいなCSS」を書くためのガイドラインをお届け。 きれいなCSSを書くためにはいくつかルールがあります。ルールに従うとレイアウトの崩れを最大限防げるだけでなく、軽量で再利用可能なCSSを書けるメリットもあります。ここで紹介するルールは次のとおりです。 グローバルセレクターや要素セレクターを避ける 詳細度が高すぎるセレクターは使わない セマンティックなクラス名を使う マークアップ構造とCSSを密結合しすぎない ルールを1つずつ説明していきます。 グローバルセレクターを避ける グローバルセレクターには全称セレクター（*）、p、button、h1といった要素セレクター、[type=checkbox]といった属性セレクターが含まれます。これらのセレクターに適用されるスタイル宣言は、サイト全体にわたって該当する要素すべてに適用されます。以下に例
ウェブ制作者なら意識してほしいCSS設計の基礎知識 - ICS MEDIA
みなさんは、CSSを書くときに管理のしやすさを意識していますか？ CSSを書くときに命名や構造のルールをシンプルにすることで、他のCSS編集者が理解しやすくなります。 何も意識せずにCSSを書くと、 誰も読めない、理解できない 何に使っているかわからない謎のルールセットがあるが、必要かもしれないので消せない CSSを修正したら意図していないパーツも修正の影響が出てしまった スタイルが上書きされすぎていて、 !important せざるを得ない といった問題が起こりやすくなります。このような問題を解決するアプローチとして、CSSを設計するという考え方があります。ウェブサイトの規模が大きくなり複雑化していく現代では、CSS設計を意識することの重要性が高まってきています。今回は、CSS設計をしたことがなくても意識してほしいCSS設計の基礎になる考え方と、基本の手法についてご紹介します。 CSS設
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
配色パターン見本40選：ベストな色の組み合わせ確認ツール
