[B! デザイン][css] ikosinのブックマーク

Web制作者は要チェック！ SVGとCSSを使用したUIコンポーネントの実装テクニック

SVGを使用してUIコンポーネントを構築すると、実装がより簡単により分かりやすくなります。SVGとCSSを使用したUIコンポーネントの実装テクニックを紹介します。 SVGなのでカラーやサイズも簡単に変更でき、軽量で、レスポンシブにも完全対応です。 Building UI Components With SVG and CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに 1. SVGで切り抜きを実装 2. SVGでセクションの見出しを実装 3. SVGでリンクの下線を実装 4. SVGでテープを実装終わりにはじめに SVGはアイコンやイラストだけでなく、わたし達デベロッパーが忘れがちなパワーをたくさん持っています。CSSと比較して、SVGを使用することが理にかなっているユースケー

ikosin 2022/02/03

リンク

HTMLとCSSで、デザインと1pxのずれもなく正確に実装する必要はあるのか？ピクセルパーフェクトの現状

デザインと1pxのずれもなく、HTMLとCSSで実装することを「ピクセルパーフェクト」と言います。このピクセルパーフェクトは必要なのか、現在の制作で求められているのは何か、ルックアンドフィールに合わせた実装を紹介します。 The State Of Pixel Perfection by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにピクセルパーフェクトとは 2010年頃のWeb制作ルックアンドフィールコード化された結果がパーフェクトかどうかの判断バリエーションとコンテキスト現在の状況モダンCSS CSSフレームワークの影響好き嫌いではなく、期待通りにデザイナーに役立つアドバイスデベロッパーに役立つアドバイス終わりにはじめに「ピクセルパーフェクト」という言葉を最

ikosin 2020/08/19

リンク

CSSで「余白」を制してデザイナーに好かれよう - Qiita

余白を制する者はデザインを制するらしい。いろいろとデザインの記事を読んでみても、やはり余白は大事と書かれています。「余白デザイン」でググってみても、記事がわんさか出てくるので、やはりデザインにおいて余白は大事みたいですね。 Webデザイナーとフロントエンドが歩み寄るためのPhotoshop豆知識こちらはLIGの記事です。これはデザイナー側が歩み寄ろうねという内容の話ですが、フロントエンド側も歩み寄ってもいいはずです。最近はデザイナーがSketchでデザインし、フロントエンドがZeplinを見ながら実装するというのが主流になりつつあると思いますが、それでも、デザインを学んできていないのにいきなり余白を気にしろと言われてもなかなか難しいですよね。印刷物でしたら、デザイナーが作ったものがそのまま印刷されて配布されたり掲示されたりするので良いのですが、Webやアプリだとなかなかそ

ikosin 2018/01/09

リンク

シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld

画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。

ikosin 2015/11/26

リンク

Material Design Lite

Material Design Lite Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. Get started now. Templates The MDL components are created with CSS, JavaScript, and HTML. You can use the compone