Building a theme switch component | Articles | web.dev
Building a theme switch component Stay organized with collections Save and categorize content based on your preferences. A foundational overview of how to build an adaptive and accessible theme switch component. In this post I want to share thinking on a way to build a dark and light theme switch component. Try the demo. Demo button size increased for easy visibility If you prefer video, here's a
フロントエンドの「想定外」に対応する考え方とTipsいくつか
とても個人的な話ですが、ここ最近で自分自身のプライバシー意識の高まりを感じて、ブラウザの設定を見直す機会がありました。見直したのはCookieの設定で、許可したドメインにしかCookieを記憶しないようにしました。設定変更によるある程度の不便は覚悟していました。とはいえ、ま〜せいぜい、初回アクセスの時のモーダルが何度も出るようになるとか、ログインできなくなるとか、そのくらいかなと思っていました。 しかし実際は、悪い意味で期待を裏切られることになりました。 Cookieが無効なだけで、“全く”動かなくなってしまうウェブサイトやウェブアプリが、本当にたくさんあることに気づいたのです。 全く動かなくなってしまう原因は単純（後述）だったのですが、ちょっとした対処で簡単に直せることなのに、サイト全体が一切使い物にならなくなってて、もったいない！！ と思いました。 フロントエンドの想定外 ウェブサイト
質の高いスタイルガイドを作成するために考えておくべきこと ｜ Tips Note by TAM
TAMでは規模の大きな企業さまと仕事をすることが多いので、スタイルガイドを使った案件も比較的多いです。 数百ページ規模のサイトのスタイルガイドを作成してきましたが、考え方が少しずつ固まってきました。そして、この考え方はコードを書く人だけがもっていればいいわけではなく、ディレクターやデザイナー、部分的にはクライアント（発注者）にも共有しておく必要があると感じています。 この記事を読んだあとに、スタイルガイドを作るうえで考えておくべきことを知り、全員のスタート地点を揃えることができればいいなと思っています。 コーディングの知識がないとわからない箇所もありますが、冒頭にコーディング担当者以外に向けた要約を入れているので安心してください。 内容は以下のようになっています。 スタイルガイドを使うメリットとデメリットを共有する コーディング前に情報設計とデザインを固めておく ページの量産までにスタイル
✨ Your best Front-End Tool ✨
Your JavaScript seems to be desactivated. Please enable your JavaScript to use all functionnalities of the Front-End Checklist. The Front-End Checklist 🗂 The Front-End Checklist Application is perfect for modern websites and meticulous developers!
Better CSS Comments: How to Make Comments in CSS Beautiful
Good comments make for good collaboration. Ethan talks about what makes CSS comments beautiful, and how you can up your commenting game to score more birthday cards. Your code isn’t as self-explanatory as you think it is. Every line you write makes more sense to you than it does to anybody else on your team. And given enough time, even you will forget how your stuff works. This is doubly true for
PRECSS - Manage your CSS with prefixes.
Manage your CSS with prefixes. <header class="ly_header">...</header> <!-- layout --> <main class="ly_cont"> <div class="bl_jumbotron"> <!-- block module --> <h2 class="bl_jumbotron_ttl">PRECSS</h2> <p class="bl_jumbotron_txt hp_mb20">CSS with prefixes.</p> <!-- helper --> </div> </main> <aside class="ly_side"> <a href="#" class="el_btn">Try PRECSS</a> <!-- element module --> <a href="#" class
CSSでfloatを使わずに「text-align:justify」で特定のテキストや画像を左端・右端に配置する方法もあった｜今村だけがよくわかるブログ
CSSでfloatを使わずに「text-align:justify」で特定のテキストや画像を左端・右端に配置する方法もあった cssでfloatを使って特定のテキストや画像を左端、右端に配置することってあると思います。例えば「header要素内のサイト名やロゴマークなどは左、ソーシャルボタンは右にそれぞれ配置する」などです。 下のような感じです。 「float」を使って左端・右端に配置 上の方法は私もよく使っているんですが・・・最近、floatを使わずに「text-align:justify」を使って似たようなことができることを知りました。結構前からこのやり方あったみたい。 「text-align:justify」を使って左端・右端に配置 floatを使うと、背景色などを入れたい場合はclearfixなどを使うこともあったんですが、「text-align:justify」を使えばclear
The Accessibility Cheatsheet | bitsofcode
We all know that accessibility is important. The problem is, it is not always clear what exactly we can do to make our sites more accessible. The Web Accessibility Initiative created some Web Content Accessibility Guidelines (WCAG) targeted at us, web content developers, to create more accessible websites. The WCAG contain some very useful information, and so I decided to condense the very extensi
Checkbox Trickery with CSS
Checkboxes are great. Combine them with the right CSS and you can pull off some really neat tricks. This article aims to showcase some of the creative things you can do with checkboxes. Read on and keep in mind that the demos in this article use no JavaScript. The Basic FormulaIt all starts with the HTML. <input id="toggle" type="checkbox"> <label for="toggle">Nothing tricky there. The for attribu
コーディングに最適な日本語対応の等幅フォントSource Han Code JPとは – ICS MEDIA
コーディング向けの日本語対応の等幅フォント「Sourceソース Hanハン Codeコード JPジェイピー（和名：源ノ角ゴシック Code JP）」が、2015年6月4日に公開されました。「源ノ角ゴシック Code JP」は、プログラミングやHTML/CSSのコーディング、ターミナルでのテキスト表示など、和欧表示用フォントとしての利用を想定されたフォントです。 ダウンロードはこちらから Release Fonts (OTF, OTC) · adobe-fonts/source-han-code-jp · GitHub ※このフォントは無償でダウンロード可能です。OTCとTTFの両方のフォーマットで配布されているので、Windows/macOSともに簡単にインストールできます。 ※上記リンクの「Fonts version ［バージョン番号］ (OTF, OTC)」となってい箇所の［Sourc
コードレビューのベストプラクティス | POSTD
Wiredrive では、私たちはかなりの数のコードレビューを行います。しかし、ここで働き始める前には私はコードレビューなどしたことがありませんでした。今回は、私がコードレビューをする時に何に注目するようにしているかや、私の考え出したベストなコードレビューのやり方をお話したいと思います。 コードレビューとは、簡単に言うと2人以上の開発者で問題を引き起こしそうなコードの修正について話し合うことです。コードレビューをすることのメリットについては多くの記事で語られており、知識を共有できること、コードのクオリティが上がること、開発者が成長できることなどが挙げられています。しかし、レビューを行う上で、どのように進めていくかという具体的なことについてはあまり多く語られてないように私は思いました。 レビューで何に注目するか アーキテクチャ/デザイン 単一責任原則 : 1つのクラスは変更する理由が2つ以上
カンプが出来上がるまでにフロントエンド構築としてできること
カンプが出来上がるまでにフロントエンド構築としてできること 1. カンプが出来上がるまでに フロントエンド構築としてできること 2015.05.15 DevLove関西 「クリエイターの技術持ち寄り発表会∼デザインそもそも論∼ 」 T a k e n o r i O k a s h i t a 2. カンプが出来上がるまでにフロントエンド構築としてできること 「僕はこうしてきた」というだけの簡単なお話。 ※これをやったらいい！という話ではない ※デザインやプログラムの具体的な話はしない。 ※当たり障りないことしか言わない。 3. 自己紹介 Webデザイナー／フロントエンドエンジニア 岡下剛典 gouten5010 カンプが出来上がるまでにフロントエンド構築としてできること 親しみをこめて「GOUTEN(ゴウテン)」と呼んでください - フリーランス - クックビズ株式会社 4. 2003
Webアクセシビリティの勉強に役立つツールやWebサイト、書籍いろいろ
2015年4月1日 アクセシビリティ, 便利ツール, 色彩 以前からWebアクセシビリティにはちょこちょこ勉強中の私です。しかしWebアクセシビリティについて書かれたサイトや本ってあまり多くなく、リソースを探すだけで苦労してしまったり…。そんなわけで今回はWebアクセシビリティのチェックに使えるツールや役立つ本、Webサイト、ブログなどを集めてみました。 ↑私が10年以上利用している会計ソフト！ アクセシビリティとは？ 「アクセシビリティ」とは、アクセスのしやすさを意味する言葉で、転じて利用環境や身体の制約に関係なく誰でも使えるという意味で使われます。どのような状況でもWeb上のコンテンツや機能を十分に利用できるWebサイトを「アクセシブルである」と言えます。 「ユーザビリティ」と混同されがちですが、使えないものを使えるようにするのがアクセシビリティの向上、使いにくいものを使いやすくするの
Enhancing Responsiveness with Flexbox (RWD Summit)
This document discusses using flexbox for responsive web design. It begins with an overview of problems with other layout methods like floats and tables. Flexbox solves many of these issues by allowing boxes to automatically grow and shrink, be proportionally sized, and be laid out in any direction. The document demonstrates several uses of flexbox properties like flex-direction, justify-content,
Quantity Queries for CSS
Don’t you just hate documentaries that don’t deliver? They have enticing names like In Search of the Giant Squid, and tease you with shots of murky underwater shapes and excited scientists pointing far out to sea. You settle down to watch, eyes narrowed with suspicion, thinking, “I better see some squid or I’m writing an angry letter to the network.” Sure enough, 90 minutes of interviews with bore
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Apple、Google、Microsoft、Adobeが共同開発したバリアブルフォントって何？ | Webデザイン、これからどうなるの？（全10回）
mdcss/README.md at master · csstools/mdcss
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
http://blog.arbitrary.io/the-arbitrary-logo/
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
