モダンCSSで実装する、テーブル（<table>）のさまざまなスタイルのまとめ

2024/02/08 128 users table ポパー 四隅 モダンCSS テーブル

モダンCSSでテーブルをゼブラストライプしたり、テーブルの四隅を角丸にしたり（昔はかなり面倒でした）、列や行を分割したり、ホバーでハイライトやアウトラインを表示したりなど、表のデータを読みやすくするテーブル（<table>）のさまざまなスタイルを紹介します。 A Guide to Styling Tables by Mads Stoumann 下記... 続きを読む

CSSで角丸を美しく実装するテクニック、ネストされた外側と内側を相対角丸の美しいバランスで実装

2023/08/28 226 users パネル CSS 外側 実装 バランス

カードやパネルの外側と内側に角丸を使用したときに、なんだかバランスが悪いなと思ったことはありませんか？ 角丸を二重にするときに外側の角丸と内側の角丸の値を同じに設定すると、内側の方がすこし大きく見えて、不格好になってしまいます。 外側の角丸と内側の角丸を美しいバランスで実装する相対角丸のテクニック... 続きを読む

UIのフォントサイズ、マージン、コンポーネントで黄金比や白銀比によるバリエーションを簡単に作成できるツール -Proportio

2023/06/13 154 users フォントサイズ マージン コンポーネント パディング 白銀比

UIデザイン用にフォントやアイコンのサイズ、スペース、角丸、シャドウ、パディング、コンポーネントなどで比例スケールを使用したバリエーションを簡単に作成できるオンラインツール（ローカルも可）を紹介します。 たとえば、黄金比でフォントサイズを設計したり、白銀比でコンポーネントを設計したり、ということがで... 続きを読む

CSSで角丸を美しく実装する方法、相対角丸のテクニック

2023/03/28 76 users CSS 外側 違和感 内側 パネル

角丸を外側と内側のパネルに使用した際、違和感を感じたことはありませんか？ 数値的には同じ値の角丸を使用しても、内側の角丸の方が少し大きく見えて、不格好になってしまいます。 この外と内の角丸をバランスよく美しく、CSSで実装する相対角丸のテクニックを紹介します。 Relative rounded corners by Andy Bell 下... 続きを読む

これは便利で簡単！ モダンCSSで実装された100種類のさまざまなアニメーションのボタン -100 Modern CSS Buttons

2022/05/25 175 users モダンCSS アニメーション ネオン 実装 ボタン

Webサイトやスマホアプリで使用される、モダンCSSで実装された100種類のさまざまなアニメーションのボタンを紹介します。 角丸や矩形ベースのボタンに、背景がスライドしたり、分割したり、プルプルしたり、ボーダーがきらっとしたり、文字がくるっとしたり、変形したり、ネオンに輝いたり、ボタンの実装に困った時にチ... 続きを読む

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

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

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

Windows 11のタスクバーをチャーミングな角丸にできる「RoundedTB」【Windows 11で絶対使いたいアプリ】

2021/11/03 14 users タスクバー アプリ Windows 11

続きを読む

レスポンシブ対応にメディアクエリなしで、CSSの関数で定義！border-radiusの値を変えるテクニック

2021/10/14 36 users border-radius ビューポート 矩形 マージン 関数

border-radiusの値をデスクトップとスマホで変える、例えばビューポートが大きくてマージンがある場合は8pxで角丸にし、ビューポートが小さくてマージンがない場合は0pxで矩形にする。 メディアクエリで簡単に実装できると思うかもしれません。しかし、ビューポートのサイズが小さく、マージンがある場合に8pxの角丸にな... 続きを読む

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

2021/09/06 18 users ボーダー UI要素 Shaper コリス オンラインツール

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

CSSのスゴ技！美しいグラデーションのボーダー、角丸や半円のテクニックを使用したチケットを実装する方法 | コリス

2020/11/10 12 users コリス 半円 グラデーション CSS ボーダー

CSSで実装された美しいグラデーションのボーダー、さらにはそれを角丸し、半円を加えたチケットを実装するスタイルシートのテクニックを紹介します。 グラデーションのボーダーは割と簡単に実装できますが、角丸にするのは目から鱗でした。また、簡単なJavaScriptで3Dも再現されています。 Gradient borders with curves... 続きを読む

6角形でサイコロのような押印ができる3Dはんこ｢ダイス｣。名前が立体的に見えるぞ？ | ギズモード・ジャパン

2020/08/29 19 users さいころ 押印 ギズモード Facebook 立方体

6角形でサイコロのような押印ができる3Dはんこ｢ダイス｣。名前が立体的に見えるぞ？2020.08.29 15:006,298 岡本玄介 Image: はんこ屋｢吉報堂｣（株式会社 吉報堂）/Facebook 平面に押したのに、立体的に見える不思議。 高田馬場にあるハンコ屋さん吉報堂より、角丸の立方体を斜めから見たかのような押印ができる印鑑｢3Dは... 続きを読む

ニューモーフィズムのUIで見かけるさまざまなCSSを簡単に生成できる無料ツール -Neumorphic Generator | コリス

2020/06/23 18 users コリス 矩形 ブラー ニューモーフィズム CSS

ボタンやカードなど、ニューモーフィズムのUIデザインで見かけるさまざまな要素を実装するCSSを簡単に生成できる無料オンラインツールを紹介します。 矩形や丸などの形、カラーや角丸やブラーなども簡単にカスタマイズできます。 ...記事の続きを読む 続きを読む

説明書や難しそうな内容の文章を簡単そうに見せられるデザインのポイント→わかりやすそう！むしろ読みにくい…など様々な感想 - Togetter

2019/07/17 56 users Togetter DTM 暖色 図形 マーカー

説明書など、内容が難しそうな物を デザインする時に簡単そうに見せられるポイント ・フォントは丸ゴシック ・図形は角丸にして親しみ感 ・アイコンを入れる ・文字間は広めにとる ・暖色を使ってみる ・強調箇所は太めのマーカー これだけで、簡単そうに見えて 難しさのハードルが下がるマジック。 pic.twitter.com/DtM... 続きを読む

商用利用無料！自分のデザインに合わせてカスタマイズができるSVGのアイコン素材 -Ikonate | コリス

2019/05/14 48 users コリス SVG ストローク SVGアイコン カスタマイズ

デザインにぴったりなアイコンを探すのは、なかなか大変です。カラーの変更であれば簡単かもしれませんが、ストロークの太さ・角丸などは、普通の無料アイコンでは調整するのはできないでしょう。 アイコンのスタイルをカスタマイズして利用できるSVGアイコンを紹介します。 Ikonateの特徴 カスタマイズが可能な無料アイ... 続きを読む

Chrome、誕生10周年でメジャーアップデート――v69ではタブが角丸になり、検索対象も拡大 | TechCrunch Japan

2018/09/04 29 users タブ Chrome TechCrunch JAPAN 福音

GoogleがChromeをリリースしてから10年経った。当時Googleの新しいブラウザは福音だった。Firefoxは重くなる一方でMicrosoftのIEは、つまりIEだった。マイナーなブラウザは多数出ていたが（おそらくOperaを例外として）どれ一つとして意味あるシェアを獲得することができなかった。そこにGoogleが軽快なモダン・ブラウザ... 続きを読む

今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！ | Webクリエイターボックス

2017/06/08 248 users border-radius プロパティー CSS 四隅 円弧

要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…！今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します！ 無難で王道！正円の円弧を使った角丸 border-radius は... 続きを読む

[CSS]デスクトップ・スマホ対応、浮かんだり光ったりアニメーションするボタンを簡単に実装できるスタイルシート | コリス

2017/03/28 61 users コリス 矩形 鋭角 円形 CSS

外部ファイルを一つ加えるだけで、さまざまなボタンを簡単に実装できるスタイルシートを紹介します。 鋭角や角丸の矩形、楕円形、ハンバーガーメニューに使われる円形、グラデーションやフラット、ゼリーみたいなボタンもあります。 B ...記事の続きを読む 続きを読む

「LG G6」のディスプレイは18：9（2880×1440）で角丸 - ITmedia Mobile

2017/02/17 18 users ディスプレイ ITmedia Mobile LG G 正方形

LG Electronicsが、MWC 2017で披露する「LG G6」のディスプレイが18:9の5.7型だと発表した。2分割して正方形画面でマルチタスキングでき、Instagramなど向けの正方形の写真も撮影できる。ディスプレイの4隅は角丸だ。 韓国LG Electronicsが、26日にバルセロナで発表予定の次期フラッグシップ端末「LG G6」のディスプレイについて事前に説明した。 ディスプレ... 続きを読む

角丸と矩形はどっち？ ベタ塗りとストロークとシャドウは？ やっぱりHelveticaなの？ -2015年Webデザイナーの実情を調査 | コリス

2016/02/10 36 users Helvetica コリス 矩形 シャドウ ストローク

2015年、Webデザイナーが実際に多用したスタイル・エフェクト・フォント・カラーを紹介します。 PhotoshopとSketchは実際どのくらい使われているのか、ファイルを修正した際にどんな名前にするのかなど、ちょっと ...記事の続きを読む 続きを読む

深澤直人が日立のエレベーターをデザイン | インテリアブログ 22web

2015/10/17 26 users 深澤直人 window.adsbygoogle 日立製作所

角丸。 (adsbygoogle = window.adsbygoogle || []).push({}); スポンサーリンク 日立製作所が深澤直人をデザイナーに起用したエレベーターを発表したそうです。 角にRがついた深 [...] 続きを読む

ちょっとした手間で、デザインをちょっとよく見せる小ネタのまとめ | コリス

2015/08/31 240 users コリス Dribbble Illustrator 調和 手間

よいデザインとは、ちょっとしたことを積み重ねていくことが大切。 Webデザイン、カラー、PhotoshopやIllustratorなどのテクニックを磨く、デザインをちょっとよく見せる小ネタをDribbbleから紹介します。 画像: Girly Drop 複数のカラーから調和のとれたカラーパレットを作成 角丸パネルを重ねる時、それぞれの角丸をバランスよくする 円をよりくっきり見せる 滑らかなベジェ曲... 続きを読む

Sketch初心者はマスターしておきたい、Sketchでのデザイン作業がぐっと効率的になるチップス | コリス

2015/06/29 148 users コリス Sketch iOSデバイス 半径 プレゼンテーション

10 Sketch Tricks for Designers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 レイヤー間でスタイルをコピペ レイヤーの移動 カラーピッカー 角丸の半径を個別に設定 再利用できるシンボル ツールバーのカスタマイズ iOSデバイスでデザインレビュー Sketchの便利なプラグイン Sketchでプレゼンテーション ... 続きを読む

[CSS]フォームの各ブラウザ間の相違を整え、好みのデザインで美しく表示させるスタイルシート -FormHack | コリス

2015/06/09 72 users コリス config CSS 相違 Sassベース

デモページ: フィールドセット FormHackの使い方 FormHackはSassベースで、フォームのデザイン（フォント、幅、高さ、カラー、ボーダー、角丸など）を簡単に好みのスタイルに変更できます。 カスタマイズは、Sassファイルの上部にまとめられています。 /* FormHack v1.0.0 (formhack.io) */ // Config ----------------------... 続きを読む

デザインTips: 角丸パネルに角丸パネルを重ねた時、それぞれの角丸をバランスよくデザインする方法 | コリス

2015/01/08 226 users カープ コリス Quick Tip 数値 パネル

角丸のパネルに角丸のパネルを重ねたデザインで、それぞれの角丸はどのくらいにしていますか？ 親と子のカーブを同じにしたり、親のカーブを緩やかにしたり、その時の見た目でデザインすることもあるかもしれません。 こういった時の一つの目安として、バランスが良い角丸のデザイン方法を紹介します。 しっかりとした数値で2つの角丸をデザインすることができます。 Quick Tip: Rounded Corners ... 続きを読む

分かるとWebデザインがもっと楽しくなる！考えてデザインする力が身につくオススメの書 | コリス

2014/10/17 113 users Illustrator グリッド Photoshop コリス

何も考えずにPhotoshopやIllustratorを立ち上げ、デザイン作業に入ってしまうのは悪いクセ。 ユーザーをワクワクさせるデザインとはなにか？　この情報を分かりやすく伝えるデザインとはなにか？　クライアントの要望に応えるデザインとはなにか？　考えてデザインする力が身につくオススメの本を紹介します。 グリッドや角丸を使う時もなんとなくではなく、その目的や効果的な使い方などしっかり身につけて... 続きを読む