CSSでダークモード対応、メディアクエリ「prefers-color-scheme」の使用方法と注意点
iPhoneやAndroidでもダークテーマが採用され、ダークモードに対応するWebサイトやスマホアプリが増えてきました。 ほんの数行のCSSのみでダークモードに対応する方法と注意点を紹介します。 Dark mode in a website with CSS by Tom Brow 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSのみで対応するWebサイトのダークモード ダークテーマでお勧めのテキストと背景のカラー ダークテーマではカラーの彩度は下げる ダークモードについてさらなる情報 CSSのみで対応するWebサイトのダークモード まずは、私のサイトhttps://tombrow.com/を見てみてください、ダークモードとライトモードがあります。表示されるモードはデバイスの設定に従います。 https://tombro
UXデザイナーから学ぶ、無効状態のボタンをグレーアウトにしない理由
一時的に操作ができない無効状態のボタンを表示する場合、どのようにデザインすると、ユーザーの混乱を少なくすることができるか、UXの観点から解説した記事を紹介します。 無効状態のボタンをグレーアウトにしてしまうと、他のボタンにグレーを使用できなくなったり、操作できない不具合かもとユーザーは思うかもしれません。 Why You Shouldn’t Gray Out Disabled Buttons by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 無効状態のボタンをグレーアウトにしない理由 無効状態のボタンをグレーアウトにしない理由 ページ上でアクティブになっていないボタンがある場合、あなたはどのように実装していますか？ ボタンを本来の場所から一度削除した後に表示すると、ユーザーは突然現れたボタンに驚くかも
Bootstrap ナビゲーションバー（Navbar）のカスタマイズ方法といろいろなデザインの実装例
Bootstrap 4のナビゲーションバーのカラーを変更したり、アイテムを整列させたり、レスポンシブのブレークポイントを変更するなどのカスタマイズ方法、ナビゲーションバーのいろいろなデザインの実装例を紹介します。 Bootstrap Navbar Guide and Free Navigation Examples by Nataly Birch 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ナビゲーションの重要性 Botostrapのナビゲーションバーとは Bootstrapのナビゲーションバーのカラーを変更する方法 Bootstrapのナビゲーションバーのアイテムを整列する方法 Bootstrapのナビゲーションバーのブレークポイントを変更する方法 Bootstrapのナビゲーションバーのいろいろなデザインの実装例 終わり
Web制作者は要チェック！Chromiumを採用したEdgeがリリースされると、CSSやJavaScriptはどう変わるのか
これから先、フロントエンド開発者に一番大きな影響を与えるのは、Chromiumを採用したEdgeがリリースされることだと思います。 IEへの対応が、、、Edgeへの対応が、、、と思っていた人には、かなりの朗報です。 Chromiumを採用したEdgeがリリースされると、CSSやJavaScriptのどんな機能が使用できるようになり、ワークフロー、ブラウザテスト、そして他のブラウザへの影響など、フロントエンド開発者にとって何を意味するのかを紹介します。 Edge Goes Chromium: What Does it Mean for Front-End Developers? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Chromiumを採用したEdgeがリリースされます 使うのが楽しみな機能 将来はさらにもっと有望 ブラウ
もうこれでUI用のアイコンには困らない！商用でも完全無料で利用できる3,000種類のシンプルなアイコン素材
商用でも無料で利用できる1,000種類のアイコンが3つのスタイル、そしてPhotoshoop用・Adobe XD用・Sketch用・Figma用・inVision用、そしてSVGまで完備されたMaterial Icons Libraryを紹介します。 一度にすべてのアイテムがダウンロードできるので、備えておくと便利だと思います。 Material Icons Library ラインセスはApache License Version 2.0で、個人でも商用でも無料で利用できます。 アイコンはMaterial Designを踏襲しており、全部で1,000種類のアイテムが揃っています。スタイルは角丸・アウトライン、ツートーンの3種類。合計すると、3,000種類以上になります。 アイコンの特徴 フォーマットは、Photoshop, Adobe XD, Sketch, Figma, inVision
CSS @supportsの知っていると便利な使い方のまとめ
CSSの@supportsは機能クエリと呼ばれ、CSSの特定のプロパティやプロパティと値の組み合わせがブラウザにサポートされているかチェックするための機能です。言い換えると、条件分岐でスタイルを適用することができます。 そんな便利な@supportsの基礎知識と実践的な使い方、そして古い使い方や実は役に立っていない使い方などを紹介します。 How @supports Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに @supportsの古い活用事例 @supportsにnotがあるけれど、常に使用するべきという意味ではない @supportsのサポートブラウザ @supportsが何の役にも立たない使い方 @supportsで遊ぶための拡張機能 @supportsのより現実的な活用事例 @supportsのロ
CSSリセット、2019年におすすめのカスタマイズ方法
Webサイトを制作する際、CSSリセットを使用されている人が多いと思います。Eric MeyerのCSS Resetをはじめ、Normalize.css、Sanitize.css、そして最近ではReboot.cssが登場しました。 Eric MeyerのCSS Resetをベースに、marginやpaddingなどのスペースを上か下かのどちらかに統一できるようにカスタマイズされたCSSリセットを紹介します。 My CSS Reset/Base 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSリセットについて margin, padding, borderのCSSリセット フォントのCSSリセット レイアウトとbox-sizingのCSSリセット 特定要素のCSSリセット 属性と状態のCSSリセット スクリーンリーダー専用の
Web制作者がチェックしておきたい！2018年、CSSベースのフレームワークのまとめ | コリス
CSSベースの新着のフレームワークをはじめ、もはや定番といっていいフレームワーク、軽量フレームワーク、何かに特化されたフレームワークを紹介します。 CodyHouse CodyHouse's Framework -GitHub CodyHouse's Frameworkは先日ローンチしたばかりですが、当ブログでは開発の過程を記事にして紹介していました。 レスポンシブに対応したスペースをCSSで効率的に定義する方法 カオス化したスタイルシートから卒業！CSSでカラーを管理する効率的な方法 Webサイトやスマホアプリでよく使用されるさまざまなコンポーネントを最適なコードで実装することができます。また、CSSはマージン用・カラー用・タイポグラフィ用・ボタン用などに分かれているので、自分用にカスタマイズして利用することもできます。 Bulma Bulma -GitHub こういったフレームワークで
CSSの「calc()関数」を使うとすごく便利に！レスポンシブ対応のレイアウトで高さを最適化するテクニック | コリス
レスポンシブ対応のレイアウトを実装する際に手間なのは、ブレイクポイントの定義です。ここ1,2年でもたくさんのデバイスがリリースされ、それに伴いスクリーンサイズの種類も増えてきました。 そんな時に便利なのがCSSの「calc()関数」を使ったテクニック。 calc()を使用して、デスクトップやタブレットやスマホのそれぞれに最適なレイアウトを実装するテクニックを紹介します。 Use calc() to Change the Height of a Hero Component 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 calc()を使ったフォントサイズの可変 paddingとline-heightの場合 ヒーローコンポーネントの場合 calc()を使ったヒーローコンポーネントの実装 calc()のサポートブラウザ 最後に ca
Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut | コリス
スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されていますね。 スクロールによる変化を検出し、それに合わせてCSSのさまざまなエフェクトを簡単に与えることができる1KBの超軽量JavaScriptライブラリを紹介します。非常にシンプルなので、他のJavaScriptやCSSアニメーションのライブラリと一緒に使用することも簡単です。 実装が簡単 スクロールの変化を検出し、CSSのさまざまなエフェクトを簡単に与えることができます。 超軽量 1KBの超軽量ライブラリ。 依存は無し スクリプトは単体で動作し、他スクリプトへの依存は一切ありません。 ブラウザのサポート IE11を含む、デスクトップ・スマホ用のすべてのブラウザをサポート。
よい本を見つけた！思い描いたイメージにぴったりなデザインやイラストの配色が必ず見つかる新感覚のデザイン書
Webデザインやイラストで、色の組み合わせが思い通りにならないことはありませんか？ 頭に思い描いたイメージを表現するための色の組み合わせが分かる配色書を紹介します。 言葉、テーマ、写真、イラスト、パターンなど、デザインに関するさまざまなキーワードから思い描いたイメージにぴったりな配色が見つかります。 メインのカラーが決まっていて、それに合う配色の候補をいくつか見てみたい。夏っぽい感じで、そして少し大人の雰囲気な配色を使いたい。なんとなくイメージはあるけど具体的な配色が思いつかない。そんな時にぴったりの一冊です。 デザイナーやイラストレーターの人は配色の本はいくつか持っていると思います。私も配色の本を何冊か持っていますが、あればあるほど色の引き出しが増えます。
[CSS]幅や高さが不明な要素を中心に配置する、IE8対応の古い方法とモダンブラウザ対応の最新の方法
CSSで子要素を親要素の中心に配置するには、水平と垂直の両方の方向に対して中央揃えにする必要があります。特に、子要素の幅や高さが不明な場合はやっかいです。 幅や高さが不明な子要素を親要素の中心に配置するIE8にも対応した古い方法、モダンブラウザ対応の最新の方法を紹介します。 Centering: The Newest Coolest Way vs. The Oldest Coolest Way 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 子要素を親要素の中心に配置するIE8にも対応した古い方法 子要素を親要素の中心に配置するモダンブラウザ対応の最新の方法 画像やテキストごとに適した配置方法は、下記の記事をご覧ください。 高さが分からない要素やテキストを上下中央に揃えるスタイルシートのまとめ 要素を上下左右の中央に配置、最近主
![[CSS]幅や高さが不明な要素を中心に配置する、IE8対応の古い方法とモダンブラウザ対応の最新の方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/db881b28449be2378d2166d55bdc38511b85c7a5/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018062510.png)
最近のUXデザインにおける、スマホアプリのインターフェイスに使用されているアイデアのまとめ
ここ数年の間に、スマホは単なる電話以上に多くの機能を持つようになりました。スマホはさまざまな目的のために使用され、わたし達の日常のアシスタントをこなしています。 そんな便利なスマホアプリのユーザーインターフェイスに注目し、最近のUXデザインにおけるクリエイティブなすごいコンセプトを紹介します。 15 Creative UX Design Concepts for Everyday Needs by Tubik Studio 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 植物の水やりを管理するアプリ 安眠アプリ ハンバーガーショップのアプリ TODOアプリ 料理のレシピアプリ ベジタリアン用のレシピアプリ アラームアプリ 家電操作アプリ 家計簿アプリ 名刺管理アプリ バランスアプリ ファイナンスアプリ フィットネスアプリ カレン
CSSの便利なセレクタ「:placeholder-shown疑似クラス」を使うと、フローティングラベルも簡単に実装できる
フローティングラベルとは、フォームのラベルが入力時にアニメーションで上方向にフローティングするテクニックです。 一昔前までは、完全にJavaScriptの範疇、もしくは強引なCSSでもたつく感じのアニメーションでしか実装できませんでした。しかし、:placeholder-shown疑似クラスを使用すると、シンプルなコードで滑らかなフローティングラベルを実装できます。 下記のデモはJavaScriptは無し、CSSのみで実装されています。
プロのWebデザイナーが使用している人気のツール、フォント、ワークフローなどのまとめ -Web Design Trend Report
プロのWebデザイナー、デベロッパーが実際に作業しているファイルを元に、Webデザインのトレンドをツール、カラー、フォント、エフェクト、ワークフローの観点から調査したレポートを紹介します。 安定して人気のあるトレンド、変化しているトレンドをチェックできます。 2016 Web Design Trend Report デザイナーとデベロッパーのコラボツール「Avocode」で利用された1,127,302のPSDとSketchファイルに基づき、2016年のデータとしてまとめたものです。 レポート公開にあたり、私もほんの少しだけ協力しています。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webデザイナーが使用しているツール デザインのコンポーネント化 ファイルのリビジョン ファイルの容量 Webデザインでもっとも人気が高いフリー
Web制作者がチェックしておきたい、最近のWebサイトで見かけるデザインのアイデア -2018年5,6月
デザインで悩んだ時には、新鮮なアイデアに触れてみると良いインスピレーションに繋がります。最近のWebサイトで見かけるデザインのアイデアを紹介します。 今まで使用されてたデザインのトレンドにも一手間加えられて、より使いやすく、洗練されたものになっています。 3 Essential Design Trends, May 2018 3 Essential Design Trends, June 2018 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 スクリーンいっぱいの写真画像 分割スクリーンの新しい考え方 透明度を抑えたカラーオーバーレイ ナビゲーションの小型化 注意を引き付けるカットアウトとレイヤー 早回しの動画 スクリーンいっぱいの写真画像 ヒーローイメージは、スクリーンいっぱいの写真画像でさらに大きくなっています。新しい重要
[CSS]たった一行でガラス板の美しいエフェクトが実装できる、backdrop-filterプロパティの使い方を解説
ボックスの内部に配置したテキストなどの子要素はそのままで、背景の色相やコントラストやぼかしを変更して、ガラス板のような美しいエフェクトを与えるCSSの新しいプロパティ「backdrop-filter」を紹介します。 今までは非常に長いCSSが必要でしたが、たった一行で簡単に実装できます。 The backdrop-filter CSS property 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 アップデート 2020/6/8: サポートブラウザを現在の状況に変更しました。 「backdrop-filter」だと、一行のコードで実装できる ガラス効果のさまざまなスタイル backdrop-filterののサポートブラウザ 「backdrop-filter」だと、一行のコードで実装できる 私はbackdrop-filterとい
![[CSS]たった一行でガラス板の美しいエフェクトが実装できる、backdrop-filterプロパティの使い方を解説](https://cdn-ak-scissors.b.st-hatena.com/image/square/a7ef7a471fc9cc3dadd100b1fcf89855ae665c80/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018060803-01.jpg)
ざわっ、ドドドッ、マンガや同人誌など商用でも無料で利用できる擬音語・擬態語の日本語フォントのベクター素材
鳥獣戯画のベクター素材「ダ鳥獣ギ画」でも有名なダーヤマ氏による新しい素材サイト「マンガ文字素材dddFont」を紹介します。 マンガや同人誌など、商用でも無料で利用できる擬音語・擬態語の日本語フォントのベクター素材がダウンロードできます。 夏コミに当選した方もそうでない方にも楽しめる無料素材です！ マンガ文字素材dddFont まずは、一番重要なライセンスから。 マンガ文字素材dddFontの素材は漫画や同人誌をはじめとする紙のデザイン、Webデザイン、動画、スライドなどに、合計20個まで無料で利用できます。 20個以上の場合は、下記条件のどちらかをクリアする必要があります。 twitterでこのサイトを紹介する。 ダーヤマのLINEスタンプを、嫌々1つ買う。 ※原文ママ 詳しくは、下記のラインセンスページをご覧ください。 ライセンスページ ダウンロードできる素材は現在、2,000種類以上
スマホアプリのメニューでよく使用されるあのアイコンの名前、ハンバーガーとかケバブとかミートボールとか
先日の記事「Chrome 67でアップデートされたデベロッパーツールの新機能」で、「ケバブって言うんだ」という声が聞こえたので、メニューでよく使用されるアイコンの名称を紹介します。 横3本線のアイコンはほとんどの人が「ハンバーガー」で通じるでしょう。横3つのドット、縦3つのドットは、何て呼んでますか？ 特に名前は使わない、別の呼び方をしているなどありましたら、教えてください。 CSS Menu Icon Animation ちょうど、スマホアプリのメニューで使用されるアイコンのデモにもそれらの名称が使用されていました。これらはクリエイターの遊び心で名付けられたもので、公式な名称ではありません。 私は最初、この呼び方を下記のツイートで見た記憶があります。 Don't ever say you don't have choices on mobile. pic.twitter.com/Atu3
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]ワンランク上に！Webページのレイアウトを美調整するスタイルがまとめられたスタイルシート -fractures![[CSS]ワンランク上に！Webページのレイアウトを美調整するスタイルがまとめられたスタイルシート -fractures](https://cdn-ak-scissors.b.st-hatena.com/image/square/9293bc8da103d5edde6fe1279b79648b55b3521d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017071001.png)
