CSSで角丸を美しく実装するテクニック、ネストされた外側と内側を相対角丸の美しいバランスで実装
カードやパネルの外側と内側に角丸を使用したときに、なんだかバランスが悪いなと思ったことはありませんか？ 角丸を二重にするときに外側の角丸と内側の角丸の値を同じに設定すると、内側の方がすこし大きく見えて、不格好になってしまいます。 外側の角丸と内側の角丸を美しいバランスで実装する相対角丸のテクニックを紹介します。 まずは、ネストされた角丸を美しいバランスで実装したデモをご覧ください。 See the Pen Inner Radius Design Tip with CSS Custom Properties by coliss (@coliss) on CodePen. 外側の角丸と内側の角丸を美しいバランスで実装するポイントは、「外側の半径 = 内側の半径 + パディング」に設定することです。こうすることで、外側の角丸と内側の角丸の中心点が同じになり、美しいバランスになります。 ちなみに、
A new year, a new MDN – Mozilla Hacks - the Web developer blog
If you’ve accessed the MDN website today, you probably noticed that it looks quite different. We hope it’s a good different. Let us explain! MDN has undergone many changes in its sixteen-year history from its early beginning as a wiki to the recent migration of a static site backed by GitHub. During that time MDN grew organically, with over 45,000 contributors and numerous developers and designers
安全でアクセシブルなアイコン・フォント
Translation of: Bulletproof Accessible Icon Fonts by Filament Group アイコン・フォントを利用する場合、あらゆるユーザーに適切にアイコンを提供しようとすると、かなり気をつける必要があります。そのフォントが読み込まれなかった時にどうなりますか？@font-faceがまだサポートされていないブラウザーでは？ どうすれば安全に(bulletproofに)アイコン・フォントを利用できるかをこれから解説したいと思います。 効率的で機能的なウェブサイトを制作するという、この終わることのない探求において、ベクター形式のアイコンを提供する手段として、簡便であるフォントを利用することが何度も提案されてきました。対して私達は通常ベクター形式のアイコンとしてSVGをIan Featherがブログ書いたような理由から選んで(また、薦めて)おり、既に
ウェブデザインにおけるline-heightについて
ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。 ということで、今回はCSSのline-heightについてまとめてみます。 実は調べれば調べるほど奥が深いCSSのline-heightの世界ですが、まずは基礎からまとめていこうと思います。 目次 以下はページ内のセクションへのリンクです。 CSSのline-heightでは文字の上下にスペースができる ウェブで使われるハーフ・レディングとは 印刷とウェブにおけるレディングの違い デザインツールでのline heightの扱いの違い 上下のハーフ・レディングを帳
CSS書きたくなさすぎ問題2017 - DRYな備忘録
css書きたくない。できればjsも書きたくない。js必要なの嫌。軽くやりたい。という個人の日記です。 参考 Best CSS Frameworks of 2017 | Three29 10 Free Lightweight CSS Frameworks for a Fast Start 2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ | コリス ググれ。 lightweight css framework - Google 検索 Gridだけやりたいやつは除外した。 Bootstrap Materialize mui （追記）UIkit （追記）Semantic UI Pure Bulma Skelton Spectre.css Kube Vuetify Fictoan avalanche Beuter Vanilla Milligram InvisCSS Look
S5-Style
ノーコードWeb制作プラットフォーム「STUDIO」 コードを書かずに、高度なデザインを。サイトは1クリックで公開可能。CMS、フォーム、分析ツールもオールインワン。 事業コンセプトの検証から、デザインチーム組成まで。おしゃべりAIアプリ「Cotomo」の立ち上げ支援について 2024年2月にStarley株式会社からリリースされた、音声会話型おしゃべりAIアプリ「Cotomo (コトモ)」。事業立ち上げに関わる、事業コンセプトの設計・初期プロダクトの設計・デザインチーム立ち上げをrootとして伴走しました。音声会話型AIという特殊なドメインにおいて、いかに事業の方向性を固め、プロダクト内の体験を検証したのか。また、素早いデザインチーム立ち上げをどのように支援したのか、事例をまとめます。 STUDIO導入時に知りたい！「STUDIOをおすすめできる/できないパターン」を無料配布します ca
CSS Grid – Table layout is back. Be there and be square | CSS and UI | Chrome for Developers
TL;DR If you are familiar with Flexbox, Grid should feel familiar. Rachel Andrew maintains a great website dedicated to CSS Grid to help you get started. Grid is now available in Google Chrome. Flexbox? Grid? Over the past few years, CSS Flexbox has become widely used and browser support is looking really good (unless you are one of the poor souls that have to support IE9 and below). Flexbox made
Web Design in 4 minutes
by Jeremy Thomas Let's say you have a product, a portfolio, or just an idea you want to share with everyone on your own website. Before you publish it on the internet, you want to make it look attractive, professional, or at least decent to look at. What is the first thing you need to work on? Content The purpose of design is to enhance the presentation of the content it's applied to. It might sou
Calm - Meditation Techniques for Sleep and Stress Reduction
Find Your CalmOur goal is to help you improve your health and happiness.
意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ
作成：2016/02/8 更新：2016/06/29 Web制作 > CSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。トレンドをおさえた最近のものを厳選してピックアップ。ファーストビューなどで、一味違った面白さを出したいときに。 エンジニア速報は Twitter の@commteで配信しています。 セグメンテッド コントロール pocketなどに見られる「リスト・タイルビュー」など表示形式の切り替え。コンテンツを切り替えるセグメンテッド コントロール（SegmentedControl）。少し古い記事ですが、他になさそうだったので。 Blueprint: View Mode Switch もうひとつはcodepenから。 See the Pen DropDown2Segment by ActiveCodex (@Acti
ウェブの UI デザイン・ビジュアルデザインの基礎を学ぶのに役立った本まとめ（2015年・冬） - おいちゃんと呼ばれています
プライベートで新しいサイトを作りたいと思い、ここ最近はデザインに関する本を集中して読んでいた。何冊か是非薦めたいものが見つかったので紹介する。年末年始のお休みのお供にどうだろうか。 今回紹介する本の範囲 デザインといっても範囲が広いが、今回紹介するのは主に UI デザイン、ビジュアルデザインに関するもの。また主にウェブサイトのデザインに関するもの。 なお今回できるだけ新しい本を挙げるようにした。ほとんど今年（2015年）発売されたものばかり。理論的なところはずっと前から変わっていないのかもしれないが、何せウェブデザインの流れがはやいので、説明がしっかりされていることに加えて、取り上げられているサンプルが新しいものか否かが読むときのテンションに大きく影響すると感じたため。 伝えたいことを整理しよう 今回、紹介する本の順番について悩んだが、最初の本だけは迷わなかった。 なるほどデザイン〈目で見
ポータルサイトのデザインリニューアル案件で気をつけたこと＆使える心理学 - Design Color
色を使いすぎない 以前に書いた「ポータルサイトのデザインをする時に意識したこと5つ」という記事でも触れましたが、今回も特に気をつけました。 ポータルサイトは一画面に表示される情報が多いです。文字はもちろん、画像の量が多くなります。サイトによってはバナー広告もあるので、それらの色に加えて、サイト自体の色もカラフルだと、目が疲れてしまいます。 そのため、色数を極力おさえることでサムネイル画像やタイトルに注目が集まるよう心がけました。そうすることで、ユーザーは情報を探しやすくなり、記事を読む事に集中できます。 逆に、色がゴチャゴチャしてどこを見たらいいのかわからない状態になると、ユーザーの離脱を招くことにもなるため注意が必要です。 選択肢は4つ程度にとどめる 今回のリニューアルにあたり、ポータルサイト内の選択肢を極力4つ程度にとどめる工夫をしました。その理由についてはふたつの心理学が関係していま
グロースハックジャパン|Growth Hack Japan
ユーザーが「自分ゴト化する」共感型コミュニケーション ～サッポロビール・ライオンの事例で学ぶ～ 第3部 ＜ライオンの事例で学ぶ＞「ワン・パーパス」×「マルチ・クリエイティブ」〜自分ゴト化・共感を呼ぶ新たな動画コミュニケーション ユーザーが「自分ゴト化する」共感型コミュニケーション ～サッポロビール・ライオンの事例で学ぶ～ 第2部 ＜スペシャルセッション＞ 次世代型動画広告とブランドセーフティ デジタル広告が本来、あるべき姿とは？〜広告主とメディアが理想的な関係を築くために 連載１ Integral Ad Science Japan株式会社 アカウント・エグゼクティブ 山口 武氏 / アウトブレイン ジャパン株式会社 顧問／アビームコンサルティング株式会社 顧問 本間 充氏 / アウトブレインジャパン株式会社 代表取締役社長 嶋瀬 宏氏
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Component Gallery
UI8 | Curated Marketplace for Designers
http://colicious.ga/
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Flipsblog.jp
Bootstrap 5 & Vanilla JavaScript - Free Material Design UI KIT
Geospectrum | Employee Portal