モダン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で実装された100種類のさまざまなアニメーションのボタン -100 Modern CSS Buttons

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

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

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

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

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

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

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でプレゼンテーション ... 続きを読む

デザイン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を求める行列がスタート 続きを読む

デザインの勉強にもなる、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を紹介します。 今回は、グラデーション、角丸のお手軽かつ効果的な使い方について解説します。 （注）このページでは、個々のデザイン要素... 続きを読む

デザイン時に注意したい角丸の使いかた | Design Color

2013/02/12 606 users 最初 Web制作 機会 Design Color うち

私は以前からデザインに角丸を使うのが好きなのですが、「角丸をもう少し小さくして」と言われることがたまにありました。 最初の頃は「角丸が大きいほうがかわいいのに！」と思っていたのですが、Web制作を続けていくうちに、何故そう言われたのかがようやくわかってきました。 また、最近デザインに角丸を使う機会があったので、これを機に角丸の使い方について自分なりに考えてみました。 もくじ 大きな角丸はあまり使わ... 続きを読む

Win/Mac対応、Photoshopで角丸の作成・修正の強力な武器になる機能拡張 -Corner Editor | コリス

2013/02/07 386 users 直線 コリス WIn Photoshop 旧版

Win/Mac対応、Photoshopで角丸の作成・修正の強力な武器になる機能拡張 -Corner Editor Corner Editor Corner Editorの主な特徴 Corner Editorのインストール Corner Editorの使い方 Corner Editorの主な特徴 旧版の全ての機能が使え、更に多くの機能を備えています。 直線で作成された角に角丸作成・修正ができます。 ... 続きを読む

面倒なシャドウもグラデも簡単に作成できるCSS3のボタンを作成するジェネレーター -CSS Button Generator | コリス

2013/01/15 206 users コリス ジェネレーター グラデ Button Shadow

ボタンのカラー、グラデーション、角丸、ブラー、テキストシャドウ、ボックスシャドウなど、さまざまなスタイルを簡単に適用できるCSS3のボタンを作成できるオンラインツールを紹介します。 CSS Button Generator 使い方は簡単です。 ボタンのColor, Size, Shadow(text), Shadow(button)のスライダーを変更すると、リアルタイムにボタンにデザインが反映され... 続きを読む

CSS3を使わなくてもつい使いたくなる、楽しくて実用的なオンラインジェネレーター -Useless CSS3 Generator | コリス

2012/12/13 131 users ジェネレーター コリス スニペット スク 変形

CSS3の角丸、ボックス・テキストシャドウ、不透明度、変形など、リアルタイムに結果を確認しながらスタイルシートを生成してくれる使って楽しいオンラインジェネレーターを紹介します。 Useless CSS3 Generator Useless CSS3 Generatorは、作者曰く「CSS3のスニペットを必要としない人には全く無用のジェネレーター」ですが、実用性もあり、しかも使ってて楽しい（特にスク... 続きを読む

Photoshopで角丸矩形の四つの角丸を個別に編集できるようにする機能拡張 -Rounded Rectangle Radius Resizer | コリス

2012/12/06 142 users コリス Photoshop 矩形 個別 機能拡張

Photoshopで角丸矩形を作成する時、シェイプツールをよく使用すると思いますが、その角丸の矩形の四つの角丸を個別に数値で編集することができる機能拡張（スクリプト）を紹介します。 対応は、CS5, 6みたいです。CS6のWin, Macの日本語環境で動作しました。 Rounded Rectangle Radius Resizer Rounded Rectangle Radius Resizerの... 続きを読む

ゼロからはじめるCSS3を勉強するために参考になるサイトや便利なツール、チュートリアルを一挙にまとめました | HTML5でサイトをつくろう

2012/08/01 918 users チュートリアル ツール CSS3 参考 チュートリアルサイト

今までCSS3を使ったパターンやスタイルの付け方などを紹介してきましたが、一言にCSS3の機能といっても、角丸やグラデーションなどの装飾だけでなく、アニメーション機能などアプリ制作をする上でも便利な機能がたくさんあります。 そこで、今回はアプリ制作をする上でも便利なCSS3のアニメーション機能等を勉強する際に参考になるサイトをまとめました。 デモページからチュートリアルサイト、便利ツールまでこれか... 続きを読む