モダン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種類のさまざまなアニメーションのボタンを紹介します。 角丸や矩形ベースのボタンに、背景がスライドしたり、分割したり、プルプルしたり、ボーダーがきらっとしたり、文字がくるっとしたり、変形したり、ネオンに輝いたり、ボタンの実装に困った時にチ... 続きを読む

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

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

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

今さら聞けない!? 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 ...記事の続きを読む 続きを読む

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

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

細めで角丸な明朝体の日本語フリーフォント「こころ明朝」商用利用無料 | 男子ハック

2014/09/27 659 users 明朝体 男子ハック 日本語フリーフォント 商用利用無料

ビッグウェーブさんがApple Storeに並びはじめた！日本でもiPhone 6を求める行列がスタート 続きを読む

CSS3を使ってできる画像まわりのエフェクトやスタイリング18 | Webロケッツマガジン

2014/06/26 79 users エフェクト シャドウ CSS Webロケッツマガジン 目次

CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ   2. めくれた風   3. トイカメラ風トンネル効果   4. カラー調整   5. 回転   6. 角丸 ... 続きを読む

デザインの勉強にもなる、CSSで実装するパンくずのまとめ | コリス

2013/10/27 486 users コリス NAV CSS パンくず アイコン

角丸や三角形、アイコンなどを添えたり、CSS3アニメーションを加えたりなど、CSSで実装するパンくずを紹介します。 機能的にはもちろんシンプルなテキストベースのものと同じですが、サイトのUIにあったデザインのパンくずも素敵ですよね。 Breadcrumb Tiny CSS3 Round Breadcrumb Flat CSS3 Breadcrumb Pure CSS3 Breadcrumb Nav... 続きを読む

[CSS]さまざまなデザインのボタンを簡単に実装できるSass/Compassのボタンライブラリ -Buttons | コリス

2013/06/23 267 users Buttons Sass コリス Compass class

フラットをはじめ、定番の角丸、サークル、アイコン添えなど、さまざまなデザインのボタンを簡単に実装できるSass/Compassで作られたボタンライブラリを紹介します。 Buttons Buttons- GitHub Buttonsのデモ Buttonsの使い方 Buttonsのデモ デモでは、リンクのテキストやbutton要素、input要素にclassを付与するだけで、さまざまなデザインのボタン... 続きを読む

[デザイン]グラデーションを使う理由、不自然なグラデーションについて徹底的に分析した - WEBCRE8.jp

2013/06/19 576 users グラデーション ダサ 議論 考察 WEBCRE8.jp

以前書いた角丸に関する考察のグラデーション版です。Webデザインで角丸とともに多用されるグラデーション。それにどんな意味があるのか、やり過ぎると何故ダサいのかを徹底的に考察しました。 iOS 7のデザイン変更に伴う議論 [...] 続きを読む

[CSS]border-radiusを使って、角丸ではなく落書き風にボーダーをデザインするテクニック | コリス

2013/04/18 289 users border-radius コリス 絵筆 div ラッパー

角丸を指定できるborder-radiusで、ボーダーを落書き風にすることもできます。 色によっては、蛍光ペンや絵筆みたいにもできますね。 HTMLはdiv要素が一つだけで、ボーダーも単にborderとborder-radiusを使用しているだけです。 デモページ 実装は、こんな感じです。 HTML 要素はdivだけ、入れ子もラッパーも必要ありません。 [html] This is my para... 続きを読む

[CSS]ページが長くても、ページ全体を角丸のボーダーで囲むスタイルシートのテクニック | コリス

2013/04/09 101 users コリス スクロールバー CSS Step ボーダー

ページ全体を角丸のボーダーで囲み、そのページがスクロールするくらい長くても全体を囲むスタイルシートのテクニックを紹介します。 Body Border, Rounded Inside Step 1: ページ全体を角丸で囲む（スクロール非対応） Step 2: ページ全体を角丸で囲む（スクロール対応） Step 3: ページ全体を角丸で囲む（スクロールバーを変更） Step 1: ページ全体を角丸で囲... 続きを読む

Illustrator Mania - Illustratorの基本的な使い方や、チュートリアルなどを紹介しています

2013/03/26 339 users チュートリアル Illustrator 質感 ツール web

Adobe Illustratorのマニアックな使い方や裏技、実用的なチュートリアルについて紹介していきます。DTP的な使用方法だけではなく、Webやアプリなどの制作にも役立つ情報を発信していきます。人気記事 角丸を扱う際の注意点 : illustratorで角丸を作成する際に利用するツールや、自然な角丸の作成方法についてまとめました。...posted on 2月 19, 2013 革の質感を表... 続きを読む

Photoshopの作業効率をアップする便利すぎるエクステンションのまとめ | コリス

2013/03/25 450 users コリス レイヤースタイル エクステンション CSS 作業効率

最後の一つだけ有料ですが、あとは全部無料の便利すぎるPhotoshopのエクステンションを紹介します。 ガイドや角丸の作成もレイヤー管理・パーツ管理も今まで以上に楽になるはず！ ガイド引きの効率アップ -GuideGuide 角丸の作成も修正も簡単にできる -Corner Editor PhotoshopのレイヤースタイルをCSS3にする -CSS3Ps レイヤー周りの機能を強化する -Trevo... 続きを読む

[デザイン]角丸を使う理由、不自然な角丸について徹底的に分析した - WEBCRE8.jp

2013/02/27 398 users WEBCRE8.jp デザイン 理由 ナナメウエ すずきさん

角丸の話題が盛り上がってましたね 先々週webデザイナーである彩さん(@maritime_color)のブログDesign Colorで、角丸をどういう場合に使うか、という記事がすごい話題になってました！ デザイン時に注意したい角丸の使いかた | Design Color そしてその後、ナナメウエの変態イラレラー(褒めてます)すずきさん(@suzukisan__)もそれに続き角丸に触れる記事を書い... 続きを読む

ズルいデザイン（2）：SassやCompassを使って、ズルいデザインテクニック (1/2) - ＠IT

2013/02/27 272 users Sass Compass グラデーション 個々 ズルいデザイン

SassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介。グラデーション、角丸のお手軽かつ効果的な使い方とは？ シリーズ第2回、前回に続き、今回もSassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介します。 今回は、グラデーション、角丸のお手軽かつ効果的な使い方について解説します。 （注）このページでは、個々のデザイン要素... 続きを読む

IE6～ でもドロップシャドウ、角丸、透過とか書けちゃう『CSS3 PIE』がけっこう素敵でした。 / Maka-Veli .com

2013/02/18 57 users ドロップシャドウ 透過 Maka-Veli .com IE6

超今さらなヤツらしいですけど、でもこれ、楽チンだなー。 ※2013/2月現在、2.0betaも出ていました。 という事で、このサイトにも一部だけ実装してみました。 微妙に見え方が違う・・・ 使い方 DLした「PIE.htc」というデータをサーバにアップ behavior: url("/PIE.htc"); を、指定したいCSSに記述 ※htcファイルをアップした場所を指定して下さいね div { ... 続きを読む