「webデザイン」カテゴリーアーカイブ

[CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス

[CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス

[CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス

<button></button>は最も使用されている要素の一つです。フォームの送信、モーダルを開く時、データを表示する時など、インタラクションのトリガーとして使用されています。button要素の詳細とすべてのブラウザで機能するようにスタイルを完璧に定義する方法について紹介します。 さらに、よく使用されるボタンのスタイ...

はてなブックマーク - [CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス はてなブックマークに追加

[CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス

[CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス

[CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス

<button></button>は最も使用されている要素の一つです。フォームの送信、モーダルを開く時、データを表示する時など、インタラクションのトリガーとして使用されています。button要素の詳細とすべてのブラウザで機能するようにスタイルを完璧に定義する方法について紹介します。 さらに、よく使用されるボタンのスタイ...

はてなブックマーク - [CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス はてなブックマークに追加

2020年に最適なfont-familyの書き方 – ICS MEDIA

2020年に最適なfont-familyの書き方 - ICS MEDIA

2020年に最適なfont-familyの書き方 - ICS MEDIA

ウェブサイトのフォントは何を指定すればよいのでしょうか? CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見か...

はてなブックマーク - 2020年に最適なfont-familyの書き方 - ICS MEDIA はてなブックマークに追加

「動き」のあるWebサイトを支えるCSSアニメーション技術|yui540|note

「動き」のあるWebサイトを支えるCSSアニメーション技術|yui540|note

「動き」のあるWebサイトを支えるCSSアニメーション技術|yui540|note

昨日、PIXIV TECH FESで登壇させていただいたときに発表したスライドの内容になります。 当日、来れなかった方はぜひこちらをご覧ください! そして、当日お越し下さった皆さま本当にありがとうございました! Twitterで「CSSアニメーション」「CSSヤクザ」というワードがたくさん飛び交って、とても嬉しいです。 これか...

はてなブックマーク - 「動き」のあるWebサイトを支えるCSSアニメーション技術|yui540|note はてなブックマークに追加

SVG形式のファビコンを設置しよう | Webクリエイターボックス

SVG形式のファビコンを設置しよう | Webクリエイターボックス

SVG形式のファビコンを設置しよう | Webクリエイターボックス

2020年2月13日 SVG, Webサイト制作 つ・い・に!ファビコンもSVG形式が対応されるようになりました!SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要は...

はてなブックマーク - SVG形式のファビコンを設置しよう | Webクリエイターボックス はてなブックマークに追加

SVG形式のファビコンを設置しよう | Webクリエイターボックス

SVG形式のファビコンを設置しよう | Webクリエイターボックス

SVG形式のファビコンを設置しよう | Webクリエイターボックス

2020年2月13日 SVG, Webサイト制作 つ・い・に!ファビコンもSVG形式が対応されるようになりました!SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要は...

はてなブックマーク - SVG形式のファビコンを設置しよう | Webクリエイターボックス はてなブックマークに追加

「Webデザイナーはコーディングできるべきか」という議論に対する私の考え | Stocker.jp / diary

「Webデザイナーはコーディングできるべきか」という議論に対する私の考え | Stocker.jp / diary

「Webデザイナーはコーディングできるべきか」という議論に対する私の考え | Stocker.jp / diary

Webデザイン 「Webデザイナーはコーディングできるべきか」という議論に対する私の考え Wednesday, January 15th, 2020 【平日夜開催】スマートフォン時代のWebデザインスクール 体験レッスン開催!モダンなWebデザイン制作・Adobe XD・Photoshop・UI/UXなど基礎から学べる講座です。 【日曜開催】WordPress でWebサイト...

はてなブックマーク - 「Webデザイナーはコーディングできるべきか」という議論に対する私の考え | Stocker.jp / diary はてなブックマークに追加

フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと|Pittan|note

フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと|Pittan|note

フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと|Pittan|note

フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか(前置きなので次の章まで飛ばしてOKです) デザイナーさ...

はてなブックマーク - フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと|Pittan|note はてなブックマークに追加

もうデザイナーいらないって言われた話【無料デザインツールCanva】 – Qiita

もうデザイナーいらないって言われた話【無料デザインツールCanva】 - Qiita

もうデザイナーいらないって言われた話【無料デザインツールCanva】 - Qiita

Help us understand the problem. What is going on with this article? みなさま、こんにちは。 プラコレアドベントカレンダー2019も折り返して、8日目。 冒険法人プラコレのデザイナーzukaです。 (投稿が遅れてしまいました。本当に申し訳ございません。) なんだかんだとデザイナー歴3年目。 少しずつ社内で力にな...

はてなブックマーク - もうデザイナーいらないって言われた話【無料デザインツールCanva】 - Qiita はてなブックマークに追加

ひたすらWebサイトを見るのが趣味な私が独断と偏見で選ぶ今年「良い!」と思ったWebサイト16選 – KAYAC engineers’ blog

ひたすらWebサイトを見るのが趣味な私が独断と偏見で選ぶ今年「良い!」と思ったWebサイト16選 - KAYAC engineers' blog

ひたすらWebサイトを見るのが趣味な私が独断と偏見で選ぶ今年「良い!」と思ったWebサイト16選 - KAYAC engineers' blog

どうもみなさまおはようございます。あるいはこんにちは。あるいはこんばんは。 KAYAC Advent Calendar 2019の18日目の記事を担当します、フロントエンドエンジニアのたがみです。普段はwebサイトを作ったり動かしたりぶっ飛んだものにしたりしなかったりしています。 去年は私のその時の推しライブラリだったVuetifyに...

はてなブックマーク - ひたすらWebサイトを見るのが趣味な私が独断と偏見で選ぶ今年「良い!」と思ったWebサイト16選 - KAYAC engineers' blog はてなブックマークに追加

モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出(2019年版) – ICS MEDIA

モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出(2019年版) - ICS MEDIA

モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出(2019年版) - ICS MEDIA

スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか? かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。 その一方、CSSとJav...

はてなブックマーク - モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出(2019年版) - ICS MEDIA はてなブックマークに追加

独学の人にオススメ!CSS Flexboxの基礎を一通り学べるチュートリアル | コリス

独学の人にオススメ!CSS Flexboxの基礎を一通り学べるチュートリアル | コリス

独学の人にオススメ!CSS Flexboxの基礎を一通り学べるチュートリアル | コリス

CSS Flexboxの基礎となる考え方や構造、各プロパティの使い方を一通り学べるチュートリアルを紹介します。チュートリアルはステップ形式で、簡単なものから始まるので独学の人、そして初心者にもオススメです! 30日分のチュートリアルですが、1日分は3分くらいなので、正味1,2時間でCSS Flexboxをマスターできると思い...

はてなブックマーク - 独学の人にオススメ!CSS Flexboxの基礎を一通り学べるチュートリアル | コリス はてなブックマークに追加

僕がおすすめするVSCodeのプラグインまとめ|TAK|note

僕がおすすめするVSCodeのプラグインまとめ|TAK|note

僕がおすすめするVSCodeのプラグインまとめ|TAK|note

Webサービスまとめに続いて。 2019年11月時点で僕が個人的に使っているVSCodeのプラグインのまとめです。 # Japanese Language Pack for Visual Studio Code VSCodeを日本語化してくれるプラグイン。 僕は英語弱者なので真っ先にインストールした。

はてなブックマーク - 僕がおすすめするVSCodeのプラグインまとめ|TAK|note はてなブックマークに追加

僕がおすすめするVSCodeのプラグインまとめ|TAK|note

僕がおすすめするVSCodeのプラグインまとめ|TAK|note

僕がおすすめするVSCodeのプラグインまとめ|TAK|note

Webサービスまとめに続いて。 2019年11月時点で僕が個人的に使っているVSCodeのプラグインのまとめです。 # Japanese Language Pack for Visual Studio Code VSCodeを日本語化してくれるプラグイン。 僕は英語弱者なので真っ先にインストールした。

はてなブックマーク - 僕がおすすめするVSCodeのプラグインまとめ|TAK|note はてなブックマークに追加

UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ | コリス

UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ | コリス

UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ | コリス

WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか? この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visu...

はてなブックマーク - UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ | コリス はてなブックマークに追加

UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ | コリス

UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ | コリス

UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ | コリス

WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか? この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visu...

はてなブックマーク - UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ | コリス はてなブックマークに追加

未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie

未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie

未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie

「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD](59MB)本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおす...

はてなブックマーク - 未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie はてなブックマークに追加

未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie

未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie

未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie

「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD](59MB)本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおす...

はてなブックマーク - 未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie はてなブックマークに追加

Webデザイン100トレース | Hypertext Candy

Webデザイン100トレース | Hypertext Candy

Webデザイン100トレース | Hypertext Candy

こんにちわ!最近はフロント開発も担当させていただいてます、Yamamotoです。 今回はエンジニアがデザインを学ぶべく、100のWebサイトのデザイントレースをして、学んだことをまとめてみました。 エンジニアまたは未経験だけど、Webデザインにも興味があるという方の、何かのきっかけになれば幸いです。 目次 なぜ Webデ...

はてなブックマーク - Webデザイン100トレース | Hypertext Candy はてなブックマークに追加

デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント|Tomoyuki Arasuna|note

デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント|Tomoyuki Arasuna|note

デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント|Tomoyuki Arasuna|note

webやアプリのUIデザイン上達のコツとして、模写(コピー)がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践!となった時に多くの学びを活かせたと記憶しています。 そうした経験から、最近も会社の若いメンバー...

はてなブックマーク - デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント|Tomoyuki Arasuna|note はてなブックマークに追加

無料で読めるITまんが 2019年版 - Publickey

無料で読めるITまんが 2019年版 - Publickey

無料で読めるITまんが 2019年版 - Publickey

ネット上にはたくさんのIT系のコンテンツがあふれています。そのほとんどは文章として書かれていますが、一部にはマンガの形で面白く分かりやすくしたものもあります。 ここでは、マンガ化されたITコンテンツを集めてみました。毎年夏の恒例企画、ITまんがの2019年版です。 今年のトピックは新着マンガの1つ目と2つ目で...

はてなブックマーク - 無料で読めるITまんが 2019年版 - Publickey はてなブックマークに追加

無料で読めるITまんが 2019年版 - Publickey

無料で読めるITまんが 2019年版 - Publickey

無料で読めるITまんが 2019年版 - Publickey

ネット上にはたくさんのIT系のコンテンツがあふれています。そのほとんどは文章として書かれていますが、一部にはマンガの形で面白く分かりやすくしたものもあります。 ここでは、マンガ化されたITコンテンツを集めてみました。毎年夏の恒例企画、ITまんがの2019年版です。 今年のトピックは新着マンガの1つ目と2つ目で...

はてなブックマーク - 無料で読めるITまんが 2019年版 - Publickey はてなブックマークに追加

最高のデザインツール「Drama」が登場!SketchやXDより良いかも。 | Web Design Trends

最高のデザインツール「Drama」が登場!SketchやXDより良いかも。 | Web Design Trends

最高のデザインツール「Drama」が登場!SketchやXDより良いかも。 | Web Design Trends

Dramaとは Dramaは、インタラクティブなプロトタイプやアニメーションが作成可能なUIデザインツールです。 公式サイトでは、Dramaによってできることとして下記の3つが挙げられています。 インタラクティブなプロトタイプやアニメーションが作れるUIデザインツールといえば、Framer XやInVision Studioなどが思いつきま...

はてなブックマーク - 最高のデザインツール「Drama」が登場!SketchやXDより良いかも。 | Web Design Trends はてなブックマークに追加

スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説 | コリス

スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説 | コリス

スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説 | コリス

スマホでボタンをどこに配置するとユーザーは操作がしやすいのか? 上部と下部、水平に並べたボタン、垂直に並べたボタン、3つ以上のボタンなど、ボタン配置について包括的な分析を行い、ボタンをどのように配置するのが最適なのか解説した記事を紹介します。 The Optimal Placement for Mobile Call to Action Buttons ...

はてなブックマーク - スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説 | コリス はてなブックマークに追加

非デザイナーエンジニアが一人でWebサービスを作るときに便利なツール32選 – Qiita

非デザイナーエンジニアが一人でWebサービスを作るときに便利なツール32選 - Qiita

非デザイナーエンジニアが一人でWebサービスを作るときに便利なツール32選 - Qiita

非デザイナーエンジニア(Rubyist)の私が、一人でこんなWebアプリを作ってみました。 まだβ版ですが、Pocketやfeedlyの未読コンテンツの中から、 重要度が高いものだけをリマインドしてくれるサービス「Reminderr」です。 Reminderr:http://www.reminderr.me/ 要するに、私自身のPocketとかRSSがカオスになっているので...

はてなブックマーク - 非デザイナーエンジニアが一人でWebサービスを作るときに便利なツール32選 - Qiita はてなブックマークに追加

実はHTMLだけで多くのことが実現できる!知っておくと便利なHTMLの使い方 | コリス

実はHTMLだけで多くのことが実現できる!知っておくと便利なHTMLの使い方 | コリス

実はHTMLだけで多くのことが実現できる!知っておくと便利なHTMLの使い方 | コリス

HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neog...

はてなブックマーク - 実はHTMLだけで多くのことが実現できる!知っておくと便利なHTMLの使い方 | コリス はてなブックマークに追加

Webサイトのメインビジュアルの構図を集めて分析してみた。|ameko|note

Webサイトのメインビジュアルの構図を集めて分析してみた。|ameko|note

Webサイトのメインビジュアルの構図を集めて分析してみた。|ameko|note

初めまして、ameko(@tk04amedama)と申します。 普段は都内の制作会社でWEBデザイナーをしています。 と言ってもまだまだ新米なので、日々勉強中です。 その勉強の一環で、最近のWebサイトで使われている メインビジュアルの構図を一覧にしてまとめた画像をTwitterに投稿してみたところ、思いがけず多くの方に反応いただ...

はてなブックマーク - Webサイトのメインビジュアルの構図を集めて分析してみた。|ameko|note はてなブックマークに追加