CSSでチェックボックスやラジオボタンをカスタマイズする 2024年版: Days on the Moon
HTMLのチェックボックス（<input type="checkbox">）やラジオボタン（<input type="radio">）をCSSで装飾したいというのはよく聞く話です。2024年現在は、HTMLの記述は簡単なまま、CSSで自由度の高い装飾も実現できるようになっています。 結論 従来の手法 appearanceプロパティを使う手法 外枠の配置 未チェックとチェック済みの切り替え 強制カラーモードへの対応 透明なボーダーやアウトライン 内向きの影や背景グラデーション 画像やテキスト ブラウザ組み込みの外観 状態に応じたスタイルの指定 参考文献 結論 単に色調を整えられればよいという場合は、accent-colorプロパティを使います。 input[type="checkbox"], input[type="radio"] { accent-color: #d31; } くだもの や
判決文を読んでみよう！ ─エムブレムサーガ編─｜初心カイ
0．はじめに 2001年7月、任天堂が裁判所に対してとある訴訟を起こしました。 相手先はファミ通の発売元であるエンターブレインと、有限会社ティルナノーグ。目的はとある一本のゲームの販売差し止めと、賠償金支払い。そのゲームソフトの名前は「ティアリングサーガ ユトナ英雄戦記」。 これが有名なエムブレムサーガ裁判の発端です。これは一部任天堂が勝訴しつつもかつ、「クリエイターが別会社で似たような作風の作品をつくっても問題がない」という判例が下ったことで有名です。ある種、ゲームの歴史のターニングポイントともいえる裁判であります。 そんな裁判でありますが、実際に判決文を読んだことがある人はどれだけいるでしょうか？ あんまりいないと思います。私もようやく読みました。必死になって。大変でした。 この記事はエムブレムサーガ裁判の流れを追いつつ、どのようなやりとりがあり、具体的にどこが認められ、どこが認められ
iOS とAndroid の違い クロスプラットフォームのアプリデザインで特に気をつけるべき点｜marin
私が一番最初にAndroid アプリをデザインしたのが2016年の初夏頃で、その頃はまだiOS・Android とデザインが違うのが主流でしたが、2021年現在のアプリはiOS もAndroid もプラットフォームごとの細かな違いはあれどほぼ同じデザインが主流となっています。 これは2016年の10月にAndroid APIがBottomNavigationView に対応してからじわじわ浸透していった変化だと考えているのですが、その辺の歴史の話は省略します。プラットフォームは違えどスマートフォンアプリである以上デザインは同じ方が楽なので、共通化されていったのは自然な流れだと思います。実際両者が全然違うUI・デザインだと大変ですしね……。 とはいえ、プラットフォームが違うので全て同じというわけにもいきません。iOS にはHuman Interface Guidelines、Android
人生を豊かにする文字列diff入門 | フューチャー技術ブログ
春の入門祭りの8日目です。 文字列の新旧の違いを表現する時によくdiffをとるとか言いますよね。そこで実行されるのが差分アルゴリズムです。差分のアルゴリズムって結構知れば知るほど難しいやつです。「より良い差分」という基準が、状況によって変わるからです。ヒューリスティックなやつです。例えば、HTMLの説明の文章を書いていたとします。タイトルをテーブルに書き換えてみたとします。 どちらも間違ってはおらず、この差分を元にパッチを当てたりも可能です。ただ、読んだ時の読みやすさが違います。 これはもちろん前者と答える人の方が多いでしょう。だって、タグという意味の塊が維持されていますからね。 これは究極的にはわかりやすいdiffというのは「意味」を理解しないと作れないということを意味します。これがdiffは簡単なようで難しいと書いた理由です。もちろん、ほどほどの工数で、ほどほどの見た目のdiffも作成
Storyboardとの付き合い方 2018
Aug 12, 2018 少し前に、自分のStoryboardの使い方をツイートしたら割と反応があったので、改めてまとめてみようと思います。これまで何年かiOSアプリの開発をしてきて、Storyboardとの付き合い方は何度も変わりました。なので、今回紹介するものはあくまで2018年現在のもので、来年には変わっているかもしれません。 説明のイメージを掴みやすくするため、画面の例を用意しました。左が編集時のStoryboardで、右が実行時のiOSシミュレーターです。具体的なトピックが出た時に、この例を説明に使うことがあります。 記事の最後にこれが動作するサンプルコードも用意しましたので、興味があればどうぞ。 Storyboardを使う目的 以下の2つを重視して、Storyboardを選択しています。 動作確認に掛かる時間を短縮する 成果物の構造を把握しやすくする ただし、Storyboar
ドメイン駆動設計について DroidKaigi 2017 で登壇しました。
長らく Y.A.Mの雑記帳というブログでAndroidの技術情報を発信しています。最近はなかなか投稿できなくなってしまいましたが、それも仕事としてAndroidに関われているためです。Androidを触り始めたころはまだ学生だったので時間があったんでしょうね。 はじめて Android に関するエントリを投稿したのは 2009 年 5 月 24 日です。当時はJavaFXを触っていたので、NetbeansでAndroidをやろうとしていたようです。 当時のAndroidのバージョンは1.5、Fragment もなく、Support Library もなく、マルチタッチすらなく、ストアは Google Play ではなく Android Market という名前でした。 ここから2、3年くらいは、仕事でAndroid アプリを開発している人はもっぱらメーカーのプリインアプリを作っている方たち
まだMVC,MVP,MVVMで消耗してるの？ iOS Clean Architectureについて - Qiita
＜この記事は「Money Forward Advent Calendar 2015」の22日目の記事です＞ この記事は、iOS Clean Architectureと実際にコードへ適用した内容について紹介します。 コードについては、改善の余地があるため随時修正していくと思います。 → github: https://github.com/koutalou/iOS-CleanArchitecture iOS開発においてよくある問題点 「ビジネスロジックはModelに置くべき」と言うが、開発者によって理解や意見がバラバラで統一的な実装ができない 度重なる仕様変更や複雑な仕様に対応するためにViewControllerや特定のModelが肥大化し、ビジネスロジックの本質を見失う MVC,MVP,MVVMだけで考えると、どこかのレイヤが複数の責務を持つことになり依存度の高い複雑なコードが生まれてし
実践 Auto Layout - jarinosuke blog
今こそ frame 思考脱却の時 Xcode 4 / iOS 6 から存在していた Auto Layout でしたが、 当時は Interface Builder の Auto Layout 対応も中々ひどく、使うのが辛かった記憶があります。 そんななか僕は順調に layoutSubviews に傾倒していったわけですが、 iPhone 6/iPhone 6 plus がついに登場し、Size Class という新しい概念も投入され 現状では間違いなく2年前とは比べ物にならないレベルで Universal アプリは作りやすくなりました。（ただし iOS 8 専用アプリのみ） ある程度のデザインパターンを懐に用意していた方が時間が省けます。 ここでは Auto Layout を用いたレイアウトに関するユースケース毎に簡潔に書いていますので、 「それ知ってるわ」みたいなのがあったら適宜読み飛ば
iOS開発におけるウィンドウ「UIWindow」の知られざる活用方法とは？ #iOS｜CodeIQ MAGAZINE
iOSアプリではシングルウィンドウしかないと思われがちですが、実は随所で使われているiOSのウィンドウ「UIWindow」。 このUIWindowの知られざる登場シーンや活用法、注意点などについて、DeNAの@sintarioさんに解説レポートを寄稿していただきました。 by 馬場美由紀 （CodeIQ中の人） iOS開発における「ウィンドウ」とは？ デスクトップOSであれば、一つのアプリが複数のウィンドウを同時に展開するマルチウィンドウアプリであることは、ほぼ当たり前ですよね。画面上にいくつものウィンドウを同時に開いて、並べたり切り替えたりしながら画面の広さを活かしたやり方で作業するものです。 これに対して、iOSの世界観は大きく様相が異なります。高精細なRetinaディスプレイが普及したとはいえ、iPhoneの画面はやはりお世辞にも広くはありません。一般的にiOSでは、一つのアプリが画
iOS7ステータスバー対策まとめ - Qiita
iOS7ではスタースバーは透明、ナビゲーションバー、タブバー、ツールバー、検索バー、スコープバーは半透明。一般的なルールとしてコンテンツの上にこれらのバーを被せることを想定しスタースバーの下に何もバーがないならコンテンツはフルスクリーンコンテンツにすべき。とある。 iOS7 フレームワーク判定 iOS 7 UI Transition Guideにはこんなやり方が書いてある。場合によってはバージョンよりもNSFoundationVersionNumberを使うほうが意図が明確になる。 if (floor(NSFoundationVersionNumber) <= NSFoundationVersionNumber_iOS_6_1) { // Load resources for iOS 6.1 or earlier } else { // Load resources for iOS 7 o
スマホUI考（番外編） なぜ機能追加をし続けるとアプリが破綻するのか？ | fladdict
この写真は、アーミーナイフの名門ウェンガー社のジャイアントナイフという最高級ナイフである。141の機能を持つ、ギネス認定もされた厚さ24cm、重量1.3kgの世界で最も高機能なナイフだ。トップメーカーが自社製品の全機能を１つに集約したこの製品こそが、機能拡張の行き着く先を指し示している。 なぜ適切な機能追加であっても、機能を追加しつづけることで破綻をするのか？本エントリは、「スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する」の続きになる。 本エントリでは以下の４つの側面から、機能を追加するリスクを考える。まず第一に「選択肢の数が必ずしも善ではないこと」。次に「人間の判断力は使うほど消耗すること」。そして「画面スペースが有限のリソースであること」。最後に「どんなに機能を増やしても、一画面で強調できるものは限られていること」。これらの４つは全て、機能追加が最
Activity#runOnUiThread(Runnable)の実装を読む&注意点
ちょいAndroid。Typescriptいいよ。JenkinsとかGradleとか。APTもいいなー。 実はrunOnUiThreadを最近まで知らなくていつもアホみたいにHandler#postしていてなんだか悔しかったのでActivity#runOnUiThread(Runnable)の実装を読んでみました。 Activity#runOnUiThread Activity#runOnUiThreadの実装がこちら。 public final void runOnUiThread(Runnable action) { if (Thread.currentThread() != mUiThread) { mHandler.post(action); } else { action.run(); } } 内部的にHandler#postしていますね。 ここでちょっと気になるのが Threa
3.04. ユーザインタフェース設計
GitHub Pagesへ移行しましたmixi-inc.github.ioへお願いします。 wikiの方はしばらくしたら消していきます この章では、Android における UI の設計の考え方について解説します。 参考：Application Structure | Android Developers 参考：Navigation with Back and Up | Android Developers 参考：Action Bar | Android Developers 参考：Navigation Drawer | Android Developers 参考：Multi-pane Layouts | Android Developers 参考：Swipe Views | Android Developers 参考：Selection | Android Developers 参考：C
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユーザーインターフェイス解剖学（公開版）
Android で 画面の回転や状態の復元まで考えた Fragment の使い方のガイドライン（自分用メモ）
http://blog.f60k.com/drawrect_setneedsdisplay_layer/
http://blog.f60k.com/uiview_drawrect_setneedsdisplay/
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの？〜
ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：後編 // Speaker Deck
ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：前編 // Speaker Deck