UI要素をグリッドではなく、サークル・放射状、曲線状にレイアウトできるCSSのフレームワーク -Orbit

2024/12/05 10 users 線形 Orbit グリッドベース レイアウト 従来

ラジアルUIとは、従来のグリッドベースまたは線形のレイアウトとは異なり、要素がサークル・放射状のパターンでレイアウトされたUIです。 このラジアルUI、あらゆる要素をサークル・放射状、または曲線状のパターンでレイアウトできるCSSのフレームワークを紹介します。 Orbit Orbit -GitHub Orbitの特徴 Orbitのデモ Or... 続きを読む

VSCodeをドキュメント作成に活用――テキストエディタ、Markdownエディタの設定と拡張機能を解説

2024/11/09 8 users vscode コーディング テキストエディタ エディタ上 文章

テキストエディタとして活用（2） 禅モードを使う 禅モード（Zenモード）とは、エディタ上に表示されるUI要素をできるだけ少なくしてフルスクリーン表示とし、文章の入力・編集作業に集中できるようにするモードです。集中したいのは文章に限らずコーディングでも同じだと思いますが、書く、消す、以外の機能をあまり使... 続きを読む

「Tokens Studio for Figma」を使用してデザイントークンを管理する（基本編）

2024/09/17 11 users デザイントークン トークン 基本編 デザイナー プロダクト

デザイントークンとは、UI要素のスタイルに関する値を定義したものです。デザイナー、開発者、プロジェクトマネージャーなど、プロダクトに関わる関係者がトークンを使用することで、コミュニケーションコストを削減し、正確な情報共有を実現できます。また、変化に強いコンポーネントを作成するためにも欠かせない要素... 続きを読む

CSSの変数をインラインで使用した条件付きCSS、コードを減らしながらもバリエーションを作成するCSSのテクニック

2024/08/05 22 users 変数 class CSS コンポーネント トークン

CSS変数を使用して、コードを減らしながらもUI要素やコンポーネントのバリエーションを作成するCSSのテクニックを紹介します。 CSSはclassを使用すると、個別の値のみをターゲットにスタイルを適用できます。CSS変数を使用すると、連続した値の範囲をカバーでき、特定のトークンを使用して特定のスタイルを適用できるよ... 続きを読む

Webデザインの配色に悩んだときの参考になる！ UI要素のさまざまなカラースキームをまとめた配色サイト -Spectrum.Art

2023/09/27 7 users 配色 カラースキーム ヘッダ カラム コピ

WebサイトのUIに使用するヘッダ、ボタン、イラスト、カード、カラム、ラインなど、UI要素のさまざまなカラースキームをまとめた配色サイトを紹介します。 カラースキームはページ全体、コンポーネントごとにまとめられており、それぞれのカラーは16進のHEX値が記載されています。各カラーをクリックするだけで簡単にコピ... 続きを読む

iOSアプリに実装されたUI要素のフレームやマージンを手軽に確認できるツールを作る - クックパッド開発者ブログ

2023/09/14 10 users マージン iOSアプリ フレーム ツール

続きを読む

Webサイトのワイヤーフレームやモックアップに使用するSVGで制作されたUI要素のスケルトン素材 -UI Skeleton Gallery

2023/06/21 8 users モックアップ SVG ワイヤーフレーム figma セクション

Webサイトやスマホアプリで使用される、カード、セクション、ボタン、フォーム、見出し、テキスト、リスト、画像、動画など、UI要素のスケルトン素材を紹介します。 商用利用も無料で、ダークモード・ライトモードに対応しており、素材はSVGのファイルとコードでダウンロードできます。もちろん、Figmaでも利用できます... 続きを読む

CSSのこの新機能、すごく楽しみ！ UI要素にさまざまなアニメーションを簡単に実装できるようになります

2023/04/27 16 users CSS アニメーション Ｔｒａｎｓｉｔｉｏｎ display

朗報です！！！ 今までJavaScriptや複雑なCSSを使用しないと実装できなかったアニメーションが、簡単なCSSだけで実装できるようなります！ たとえば現在のCSSではtransitionでdisplayは機能しませんが、CSSの新機能を使用すると、下記のようなCSSで表示・非表示のアニメーションを実装できるようになります。 このCSSの... 続きを読む

AIでコードを生成！ テキストを入力すると、UI要素やコンポーネントを実装するHTMLとCSSを生成してくれる -AI CODE

2023/04/04 144 users ナビゲーション コンポーネント CSS AIツール 生成

AIは、Web制作にもすごい速さで浸透しそうですね。今までも似たツールがいくつかあったのですが、かなり出来がよいので紹介したいと思います。 テキストを入力、たとえば「シンプルでモダンなナビゲーション　アイテムは日本語」と入力すると、そのUI要素を実装するHTMLとCSSを生成してくれるAIツールを紹介します。 AI ... 続きを読む

Power Automateをフルで活用した、業務プロセス改善フローの作成 ～受注業務プロセスの自動化 | gihyo.jp

2023/02/20 5 users gihyo.jp Power Automate ローコード

デジタル人材への第一歩！「Power Automate」ではじめるローコードでの業務自動化 Power Automateをフルで活用した、業務プロセス改善フローの作成 ～受注業務プロセスの自動化 第3回では、Power Automate for desktopの特徴でもある、UI要素のセレクター編集を使った最適なフロー作成について解説しました。 最終回の第... 続きを読む

知っておくと便利！ CSS Flexboxでナビゲーションのアイテムを左と右の両端揃えにする実装テクニック

2023/02/02 20 users 両端 ナビゲーション 横軸 CSS flexbox アイテム

ナビゲーションの各アイテムをCSS Flexboxで横軸に配置し、アイテムを左と右の両端揃えにするときの実装テクニックを紹介します。 ナビゲーションに限らず、さまざまなUI要素に使用できるテクニックです。デスクトップで表示したときの上のバーみたいなのとか。 Justify Space Between Individual Items in Flexbox by J... 続きを読む

Windows 11のあちこちに過去のWindowsのUI要素が残っている

2023/01/04 9 users Windows Fluent Design 過去 進化 要素

by okubax Windows 11ではデザインの一貫性がWindows 10から大きく改善され、「Fluent Design」という新しいデザイン言語に合わせてUIが大幅に再設計されました。また、WinUI 3の導入によって開発者はこれらの要素を自分のアプリに簡単に統合することもできます。デザインの面で大きく進化を遂げているWindows 11ですが... 続きを読む

フリーのRPAツール「Power Automate for desktop」2022年12月更新、ブラウザー拡張機能が「Manifest V3」に／UI要素を指定するセレクターにはシンタックスハイライトを追加

2022/12/12 13 users シンタックスハイライト セレクター Manifest V

続きを読む

知っておくと役立つ！ CSS fit-contentプロパティの便利な使い方

2022/02/22 8 users 見出し タブ テクニック 配置 テキスト

要素のサイズを要素内のコンテンツのサイズに依存して決めるfit-contentプロパティの便利な使い方を紹介します。 見出しのテキスト、画像の配置、コンテンツのブロック、タブなど、Webサイトやスマホアプリでよく使用されるUI要素を実装するテクニックです。 Use Cases For CSS fit-content by Ahmad Shadeed fit-conten... 続きを読む

プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.11

2022/01/18 12 users UIデザイナー Volum テクニック 印象 知識

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第11弾は角丸やアイコンなどのUI要素、ダークテーマにおける読みやすさに関するデザインのテクニックです。 UI & UX Micro-Tips: Volum... 続きを読む

CSSによる微調整、フォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位などを確認しながら変更できる無料ツール -shaper | コリス

2021/09/06 18 users ボーダー Shaper コリス 角丸 オンラインツール

WebページのUI要素に適用したフォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位、マージン・パディングの量、カラー、ボタンの形、ボーダーのサイズ、ボーダーの角丸など、表示を確認しながらスタイルの値を調整できるオンラインツールを紹介します。 shaper shaper -GitHub shaperの特徴 shaperの使い... 続きを読む

Windows 10が｢Chromebookみたいに｣使えるようになるアプリ | ライフハッカー［日本版］

2021/04/28 18 users Chromebook ライフハッカー 要素 アプリ 設定

Windows 10が悪いというわけではありません。 もしあなたがWindows 10をもう少しシンプルにしたくて、Chromebook的な要素を施したとしても、誰もあなたを責めたりはしません。 例えば、いろんな設定やUI要素をいじって少し扱いやすくしたり、Chromebookの便利な機能をWindows 10に直接組み込んだりしても、あなたのPCは... 続きを読む

アコーディオンのアイコン：どのシグニファイアが最適か – U-Site

2021/04/08 13 users アコーディオン U-Site シグニファイア アイコン リンク

キャレットアイコンは、アコーディオンがその場で開くのであって、新しいページへの直接のリンクではない、ということを最も明確にユーザーに示すことができていた。 Accordion Icons: Which Signifiers Work Best? by Page Laubheimer and Raluca Budiu on August 23, 2020 アコーディオンが、現在、人気のあるUI要素で... 続きを読む

UIデザイナーはダウンロードしておこう！iOS 14のデザインテンプレート・UI要素が揃ったAdobe XD用の素材がApple公式からリリース | コリス

2020/10/26 14 users コリス iPhone UIデザイナー Sketch用 iPad

先週リリースされたばかり、iPhoneやiPadに採用されているiOS 14のデザイン用のテンプレートやUI要素が揃ったAdobe XD用の素材を紹介します。 素材はAdobe XD用だけでなく、Photoshop用やSketch用も揃っており、9月に新しくなったSF Symbols 2もダウンロードできます。 Apple Design Resources UIデザイン素材は、ページ... 続きを読む

よく使用されるWebページのレイアウトやUI要素91種類をシンプルなCSSで実装するコードのまとめ -CSS Layout | コリス

2020/05/27 23 users フレームワーク ナビゲーション コリス CSS Layout

最近のWebサイトで見かける、ページのレイアウトをはじめ、ナビゲーション、フォームのさまざまな入力要素、インタラクション要素、UI要素などのCSSでの実装コードをまとめたCSS Layoutを紹介します。 すべてシンプルなコードで実装されており、外部ファイルやフレームワークは一切必要ないので、簡単に利用できます。 ... 続きを読む

知っておくと役立つ！CSSの疑似要素:beforeと:afterを使用したUI要素を実装するテクニックのまとめ | コリス

2019/12/03 28 users before コリス After 領域 CSS

CSSの疑似要素は非常に便利です。疑似要素:beforeと:afterを使用したUI要素を実装する便利なテクニックを紹介します。 Webページやスマホアプリで使えるUI要素をはじめ、クリック・タップ可能領域を広げたり、:afterと:beforeのどちらを使うべきかなど、知っておくと役立つ疑似要素のテクニックです。 Uncommon Use Case... 続きを読む

HTMLとCSSも進化している！JavaScriptを使用せずに、HTMLとCSSだけで実装できるUI要素のまとめ | コリス

2019/11/21 434 users コリス 古いブラウザ CSS サポート 新しい機能

以前まではJavaScriptでないと実装できないと思われていたものも、最近ではHTMLとCSSのみで実装できるものが増えてきました。HTMLとCSSには新しい機能が追加され、そして古いブラウザのサポートも必要なくなり、より簡単に実装できます。 実はJavaScriptを使用せずに、HTMLとCSSで実装できるUI要素を紹介します。 You ca... 続きを読む

ボタンやアイコンやナビゲーションなど、クリック・タップ可能な領域のサイズを広くする実装方法のまとめ | コリス

2019/10/15 27 users ライセンス サイドバー コリス 翻訳記事 下記

ボタンやアイコン、ナビゲーション、サイドバーなど、さまざまなUI要素に適したクリック・タップ可能な領域のサイズを拡張する実装方法を紹介します。 Enhancing The Clickable Area Size by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています... 続きを読む

div要素の見た目は矩形だけじゃない！UI要素をさまざまな形状のデザインに拡張するスタイルシート -augmented-ui | コリス

2019/09/18 149 users コリス 矩形 ユーザーインターフェイス class div要素

Webページやアプリに、サイバーパンクにインスパイアされたユーザーインターフェイスを簡単に実装できるCSSを紹介します。 下記の要素はdiv要素が一つだけ。角を斜めにカットしたり、辺に窪みを加えたり、ボーダーを美しくしたり、augmented-uiのCSSで用意されているclassを与えると、サイバーパンクにインスパイアされ... 続きを読む

最近のWebサイトでよく見かけるUI要素をデザインするCSSの実装テクニックのまとめ -Design Tips in TailwindCSS | コリス

2019/05/08 448 users アイデア The テクニック コリス 素晴らしいデザイン

デザインは奥が深いですね。 Webサイトでよく見かけるUI要素のデザインに一手間加えるだけでぐっとよくなる、ディテールにこだわった素晴らしいデザインのアイデアをCSSで実装するテクニックを紹介します。 The “ ...記事の続きを読む 続きを読む