Inclusive ComponentsInclusive Components A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece. Get the book! The Inclusive Components book is now available, with updated and improved content and demos. The components:
埋め込みコード
Adobe Fonts ユーザガイド はじめに システムおよびサブスクリプション要件 ブラウザーと OS のサポート コンピューターへのフォントの追加 Web サイトへのフォントの追加 CC Mobile でのフォントの追加 フォントのライセンス フォントのライセンス アカウントの管理 Creative Cloud エンタープライズ版のお客様へのライセンス供与について アカウントへのフォントライセンスの追加 サブスクリプションライブラリからのフォントの削除 中国で登録された Adobe ID は Adobe Fonts の利用対象外 Creative Cloud サブスクリプションにこれらのフォントが含まれていない理由 2021 年 9 月に Morisawa フォントを一部提供を停止 フォントの入手と使用 Creative Cloud アプリケーションでの Adobe Fonts の使用
日本語フォントのOpenType機能を維持するサブセット化 - Qiita
結論: pyftsubset --layout-features='*' を使え 経緯 はじめ、Noto Sans CJK JPをWebフォントとして使うためにサブセット化したくていろいろやってたのですが、全然うまく行きませんでした。というのも、CSSでfont-feature-settings: 'palt';したいのに、武蔵システムのサブセットフォントメーカーはOpenType機能を削除してしまいますし、かといってFont Squirre Webfont Generatorを初めとするサブセット化Webサービスには、そもそもフォントサイズが大きすぎてだめって言われるか、502 Bad Gatewayか、無かったことにされるかします。 フォントサイズ？ そういえばNoto Sans CJK JPと同じグリフでできているAdobe Source Han Sans JPは、たしか前者よりサイ
Improving Font Performance with Subsetting and Local Storage — SitePoint
A recent technique that seems to be gaining traction recently, is to use a method called subsetting to reduce the size of web fonts, encode them to base64, and store them in local storage. Web fonts if not used carefully can have a huge performance hit, and can block access to your website’s content. This technique will allow you to reduce the size of your font files and store them asynchronously
CSS での OpenType 機能の構文 | Adobe Fonts User Guide
この機能は、一連の字形を「合字」と呼ばれる 1 つの字形に置き換えます。合字は、タイポグラフィの目的で好んで使用されます。この機能を有効にすると、通常の状況ではデザイナーやベンダーの審査に使用するような合字が挿入されます。 この合字機能は、デフォルトで有効です。そのため、通常は CSS を記述しなくても動作します。ただし、Chrome ではデフォルトで有効になりません。また、Safari（Mac または iOS）では無効にできません。Chrome と Firefox の一部のバージョンでは、スペースを含む合字で問題が発生します。 .class { font-variant-ligatures: common-ligatures; -moz-font-feature-settings: "liga", "clig"; -webkit-font-feature-settings: "liga"
CSS カウンターの使用 - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
逆引き！フロントエンドのイマドキパフォーマンス改善 - 青空コメントアウト
WebアプリにしろWebサイトにしろパフォーマンスはとても重要です。どんなに高機能であっても、どんなにデザインが良くても、パフォーマンスが悪ければユーザーは離れてしまいます。 とは言え現場はキツキツのスケジュールで、パフォーマンスにまでこだわる余裕がないよ！パフォーマンスはひとまずできる限りのところまで頑張るよ！となってしまうこともあるかと…。 この問題の解決の糸口はパフォーマンスを良くする手段をどれだけ知っているかです。仕様を決めるとき、デザインを決めるとき、実装するとき、それぞれのフェーズでパフォーマンスを常に意識していると自ずとハイパフォーマンスに近づきます。 というわけで今回はフロントエンドの観点から、イマドキのパフォーマンス改善手法をまとめてみました。イマドキと謳っておきながら2年前くらいの技術が出てきたりして最新の話題でもないのですが。 ちなみに、本題に入る前にWebパフォーマ
CSSの@supportsを使ってCSSのみでスタイルの条件分岐をする方法
2015年10月27日 CSS Webブラウザーによって表示可能なCSSが異なるのは、よく知られていることです。例えばChromeやSafariでは問題なく表示される filter は、Internet Explorerではうまく表示されず、別のスタイルを用意しなければいけません。今回は @supports を使って対応しているプロパティー別にスタイルを変更してみましょう。 ↑私が10年以上利用している会計ソフト！ @supports とは？ 指定した (プロパティー:値) の条件に対応しているブラウザーには {} 内に書かれたスタイルを適用するよ、というもの。新しいスタイルの書き方に対応しているブラウザーにはそれを、対応していないブラウザーには従来の書き方で、かつ見栄えの崩れないようにコンテンツを提供できるよう、CSSを記述していけます。「プログレッシブエンハンスメント」というやつですね
[52] 入力候補のリストを作ろう datalist要素
[52] 入力候補のリストを作ろう datalist要素 最終更新日：2018年03月28日 （初回投稿日：2013年09月25日） <datalist>要素は、<input>要素のテキスト入力部品（ただしtype="password"以外）の、 入力候補をリストで出す ための要素。 単独で使う事は無く、必ず<input>のテキスト入力部品（type="password"以外）とセットです。これは HTML5から新しく加わった要素です。 <datalist>のほうに id属性で名前を付けておいて、<input>でその idを list属性で呼び出して使います。 リスト項目には<option>要素を使用。<datalist> は <option>要素と一緒に使うってことです。 具体的にはこんなかんじ。コレ ↓ は単なるテキストフィールドですが、ダブルクリックで「リスト」が出ます。 <inpu
![[52] 入力候補のリストを作ろう datalist要素](https://cdn-ak-scissors.b.st-hatena.com/image/square/592027f3e8ef20097cc905941f6f4f240992b1ad/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-45.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2Ftsubu_icon2s.jpg)
画像ファイルをメモリへ読み込んだ時どうなってるかのお話 | Tech Storage
プログラマとしても長くなって、後輩や部下に教える事も増えてきましたが、 所々感じるところは、メモリ内でデータがどうなっているか意識してない人が たまに見受けられます。 まぁプログラムを始めるとっかかりが、メモリをあまり意識する事なく、 VM上で動いていたり、スクリプト言語から入ってしまった為、 メモリをこれまで意識せずプログラムを書けてこれたというとこからだと 思われますが。 小規模ならそれでもよいのですが、大規模なサーバープログラムや、 使えるメモリ使用量が少ない昨今流行りのスマートフォンアプリなんかでは、 わりとちゃんとメモリを理解し、自分でどれくらいメモリを使ったか、 把握してプログラムを書かないと、あっというまにメモリを食いつぶして、 開発中のアプリが動かなくなるって事はわりとあるはず。 以下に書く例は、実際に部下がメモリのなんたるかを あまり理解してないせいで
標準準拠・後方互換モード各々の CSS 解釈の違いをまとめたドキュメントを共有
2007-07-27T21:11:11+09:00 最近のブラウザには DOCTYPE 宣言の有無や種類で大きくわけて2種類の表示モードを切り替え、CSS や HTML の解釈を変える機能が備わっています。マイクロソフトは同様の機能を DOCTYPE スイッチとしており、一般的にもそう呼ばれることが多いように感じます (この記事でも DOCTYPE スイッチとします)。 DOCTYPE スイッチはオンの状態で standards mode (標準準拠モード) に、オフの状態で quirks mode (後方 (過去) 互換モード) になります。標準準拠モードは仕様に準拠した厳格な表示モード、後方 (過去) 互換モードは仕様に準拠していない古いブラウザとの互換を目的とした表示モードです。つまり DOCTYPE 宣言の記述が無いようなコンテンツに対しては、仕様に準拠していない古いブラウザの解釈
結構緊急リンクが飛ばない iOS 8.4.1からCSS :hoverも１クリックカウントっぽいSafari
36,087views／投稿 2015-08-16／更新 2019-02-17 ［この問題はiOS9から解消されてます。］ iOSのSafariで、:hoverに事件が起きています。 CSSでaタグに:hoverで何かの変化を施してある場合は、そのマウスオーバー変化が１クリック換算で止まってしまい、リンク先に飛ばない確率が高い感じです。要は２回クリックしないとハイパーリンク先にページ遷移しないです。iOS 8.4.1のiPhoneやiPadなどタッチデバイスでの話です。 １回タップ（a:hover描画処理のみで止まる） ２回タップ（やっとリンク先に飛ぶ） テキストリンク系は大丈夫ですが、「画像の透かし」や「お申込はこちら」的なボタン装飾も該当していそうです。 ［追記］サンプルページを作りました。iOSデバイスで確認してみてください。Chromeもどうやら対象のようです。 :hover事件の
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
2. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 平尾優典（ひらお ゆうてん） === 株式会社ディーゼロ Webエンジニア ## コミュニティ活動 - 福岡フロントエンド友の会 Fukuoka Frontend Frogs - 福岡マークアップ勉強会 - baserCMSユーザー会 Yusuke Hirao @cloud10designs 3. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## コミュニティ紹介 ### 福岡フロントエンド友の会 Fukuoka Frontend Frogs ### 福岡マークアップ勉強会 ### baserCMSユーザー会 「井の中の蛙」にはならないようにと集まった フロントエンドエンジニアのためのコミュニティ。 Webコーディング・アプリ開発の悩める蛙たちが その場で話題を決めて、アンカンファレンス形式で
[CSS] olの数字をCSSでいい感じに装飾する方法 * prasm（プラズム）
あれ？どうやるんだっけな？となるコトが多いので、勉強がてら記事に。 olを使って連番付きのリストを作ろうと思った場合、数字部分が気に入らない事があります。 ブログパーツで言うと、人気記事のマークアップで、ランキングなんかを作るときに、数字部分にアプローチできれば、捗ること請け合いですね。 と思って、さあ、CSSで装飾や！ってなっても、あれolの数字って、どうやって弄ったらいいんだ？list-style？？みたいになります。 じゃあ、本腰入れてolの数字をカスタマイズしてやろう！と、イマココって感じです。 olとは？まずはolってなによ？という話しですが、簡単に言えば「数字付きリスト」をマークアップするためのHTMLですね。 <ol> <li>こんな</li> <li>感じで</li> <li>数字付き！</li> </ol> こんな感じで数字付き！といった具合に。 ブログやサイトのUIを作
![[CSS] olの数字をCSSでいい感じに装飾する方法 * prasm（プラズム）](https://cdn-ak-scissors.b.st-hatena.com/image/square/9ec25bc5d348bff15cecd1f10494d9e4a89909e3/height=288;version=1;width=512/https%3A%2F%2Fprasm.blog%2Fwp-content%2Fuploads%2F2013%2F12%2Fcss-ol-list.jpg)
CSS での OpenType 機能の構文
この機能は、一連の字形を「合字」と呼ばれる 1 つの字形に置き換えます。合字は、タイポグラフィの目的で好んで使用されます。この機能を有効にすると、通常の状況ではデザイナーやベンダーの審査に使用するような合字が挿入されます。 この合字機能は、デフォルトで有効です。そのため、通常は CSS を記述しなくても動作します。ただし、Chrome ではデフォルトで有効になりません。また、Safari（Mac または iOS）では無効にできません。Chrome と Firefox の一部のバージョンでは、スペースを含む合字で問題が発生します。 .class { font-variant-ligatures: common-ligatures; -moz-font-feature-settings: "liga", "clig"; -webkit-font-feature-settings: "liga"
CSS 設計の長い夢 - ペパボのフロントエンドスタンダード
フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 スタイルシートの夢 (1) 予測しやすい (2) 再利用しやすい (3) 保守しやすい (4) 拡張しやすい 代表的な CSS 設計手法 既存プロジェクトの CSS に立ち向かう！ (0) 流れ (1) 既存の CSS ファイルを元に SCSS ファイルに変換する (2) イニシャライズ CSS や共通の箇所のスタイルを分離する (3) CSSLint を使って、修正しやすいところから整理していく (4) コンパイル (5) スタイルのスコープ（あ
リンクかボタンかそれ以外か - Unreviewed
あるアクションを引き起こす「モノ」を「リンク」とするか「ボタン」とするかは、何を基準に判断すればよいのでしょうか。ここでは最近の私の解釈を書きます。 最近の私の解釈 最近の私の解釈は「アクションが、ページの遷移かフォーカスの移動を発生させるものはリンク、そうでなければボタン」というものです。この解釈はWAI-ARIA 1.0のある注記がきっかけになっています。 WAI-ARIA 1.0 WAI-ARIA 1.0 （2011年1月18日勧告候補）にはlinkロールとbuttonロールがそれぞれ用意されています。中でもlinkロールには私の解釈の直接のきっかけとなった注記があります。 Note: If pressing the link triggers an action but does not change browser focus or page location, authors
Schema.org - Schema.org
Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet, on web pages, in email messages, and beyond. Schema.org vocabulary can be used with many different encodings, including RDFa, Microdata and JSON-LD. These vocabularies cover entities, relationships between entities and actions, and can easily be extended th
効果的なフロントエンド開発のための10の原則 - Qiita
僕が好きなWebのデザイナー、デベロッパーの一人である、CSS Wizardlyこと、Harry Roberts氏がdotCSSというヨーロッパのカンファレンスで講演した内容について書きたいとおもいます。 #10CSS 彼は大手のメディア企業などのフロントエンドを経て、現在はコンサルタントとして活動しています。CSS Wizardlyと言ってしまってるくらいに、CSSやその周辺のことについてブログでアイデアや意見を述べていたり、またinuit.cssのようなフレームワークを公開しています。現在は、また新たにITCSSというプロジェクトを進めているようで、公開が楽しいです。 彼がカンファレンスで話す内容は、CSS Architecure関連の話も多いのですが、ワークフローなどについての講演することもあるようです。その中で、今回とりあげたいのは、CSSの具体的なテクニックやコードの解説ではなく
少し細かいBEMい話 - Qiita
BEMってむずかしい？ 2014年はたくさんのサイトでBEM 、もといBEMな命名規則が採用されたのではないかとおもってます。（拙著でも取り上げてます。） しかし、実際に導入されているサイトのコードをみてみると、んー、と感じることがあったり、または周りの開発者が、BEMむずかしい、といってるのを聞くことがある。 「これで合ってるの？」 むずかしい、と感じるのはたぶんBlockとElementとの関係やバランス、あとはクッソ名前が長くなってしまうことの不安にあるのではないかと考えてます。 例えば、ふとこのQiitaの記事ページのサイドバーにある、関連投稿モジュールをみてみましょう。 これをどうマークアップするか、どういうセレクタを書くかっていうのは人やプロジェクトによって全然違うし、このパターンがQiitaの中でどのくらい・どのように存在するかで変わります。 ただBEMを意識しはじめたことだ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
