style_blueのブックマーク - はてなブックマーク

地味だけど嬉しい新機能！フォームのセレクトボックスで区切り線にhrを使用できるようになりました

先日リリースされたChrome 119に地味だけど嬉しい新機能が実装されていたので、紹介します。フォームのセレクトボックスで区切り線にhrを使用できるようになりました。すでにSafariでもサポートされており、これでChorme, Edgeでも使用できます。 Select element: now with horizontal rules by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 select要素内で区切り線（hr）を使用できるようになりました select要素内の区切り線（hr）の実装方法 select要素内の区切り線（hr）のデモ select要素内で区切り線（hr）を使用できるようになりました 11/1にリリースされたChrome 119では、

style_blue 2023/11/14

を、早速やってみよう！と思ったらoption要素なのかHTMLとCSS両方直さないといけないやつじゃんって後回しになる。

リンク

これでもうUIデザイン用の高品質なSVGアイコンに困らない！商用利用無料、改変も自由な太っ腹ライセンス -blendicons

WebサイトやスマホアプリのさまざまなUIデザインにぴったりな、シンプルなソリッド・ベタ塗りからおしゃれなカラーまで揃ったSVGアイコンが完全無料で利用できるblendiconsを紹介します。アイコンはなんと、200,000個以上！ベーシックなUIをはじめ、ショッピングサイト、タッチジャスチャー、日用品や家具、飲食物、スポーツ、ミュージックなど、多種多様なアイコンが揃っています。 blendicons Blendiconsはデザイナーやデベロッパーが容易に必要なアイコンを手に入れられるように、200,000個以上の高品質なアイコンを作成し、ダウンロードできるようにしたサイトです。アイコンの利用にあたっては個人でも商用でも無料で、Webサイトやスマホアプリをはじめ、プレゼンや印刷物などあらゆる用途に利用できます。アイコンをカスタマイズして利用することもOKです。ただし、アイコン素材をそ

style_blue 2023/10/25

でもねーフリーダイヤルのマークとか無いから結局自分で作らないとなんだよねー

webdesign

リンク

CSSでここまでできるとは驚いた！ CSSを活用した本作りのワークフローを徹底解説した良書 -CSS組版Vivliostyle入門

CSSの解説書というと、通常はWebサイトやスマホアプリを実装するための知識やテクニックですが、今回は﹃CSSによる本作り﹄の解説書を紹介します。原稿の執筆から、本のデザインやレイアウト、データ入稿まで、CSSを活用した本作りのやり方を徹底解説した解説書です。表紙に﹁未知の表現力！﹂とあるように、CSSでこんなこともできるのかと驚きの連続でした。本書は技術書で評判が高いリブロワークスさんの最新刊。当ブログでもVS Codeの解説書やJavaScriptの解説書を紹介しましたが、今回はCSSによる組版、本作りの解説書です。マークダウンで原稿を執筆し、それをCSSでレイアウトし、本に仕上げます。本はWeb上でも書籍にもでき、本書自体もCSSで作成されています。

style_blue 2023/07/14

CSS組版かー興味あるけどすごい大変そうだけど面白そうだけどすごい大変そう。あんまりページ数ないものとか、冊子の共同制作とかにはいいのかな。

css
design

リンク

次世代のCSSグラデーションツールが美しすぎる！すべての新しい色空間を完全にサポート -CSS HD Gradients

すべての新しい色空間を完全にサポートする新しいグラデーションツールを紹介します。UIデザイン向けの美しいグラデーションのプリセットも豊富に用意されており、カスタマイズも簡単です。 CSSの色指定に何を使用していますか？ #FFFFFFのようなHEX値だったり、whiteのようなキーワードだったり、rgb(255, 255, 255)のようなRGB色空間の人も多いと思います。最近では色相・彩度・輝度で指定できるhsl(0, 0%, 100%)もすべてのブラウザにサポートされており、増えてきたと思います。さらに今までよりも広色域のP3カラーに対応したoklch()もChrome 111, Safari 15.4でサポートされ、注目されています。 CSS HD Gradients CSS HD Gradientsは、Google ChromeのデベロッパーであるAdam Argyle氏︵@ar

style_blue 2023/05/11

いつか使うときのためにぶくま。

リンク

注目のWebデザイン用AIツール！テキスト入力でWebサイトやスマホアプリ向けのカラーパレットをすぐに生成 -AI Colors

テキストを入力すると、Webサイトやスマホアプリ向けの美しいカラーパレットをすぐに生成してくれるAIツールを紹介します。「企業サイト向けのクールで信頼感のあるカラーで、ベースはホワイト」「子供向けキャンペーンサイト、海と夏のイメージ」こんな感じにテキストを入力すると、Webサイトやスマホアプリ向けのカラーパレットを生成してくれます。 AI Colors AI Colorsの特徴 AI Colorsの使い方 AI Colorsを使ってみた AI Colorsの特徴 AI ColorsはOpenAIのGPT-3.5を使用して、テキストからAIによりWebサイトやスマホアプリ向けの美しいカラーパレットを生成します。また、他の人が作成したカラーパレットを検索・編集・視覚化することもできます。利用にあたっては無料で、登録なども必要ありません。

style_blue 2023/04/20

配色困った時様にぶくま。

webdesign

リンク

2022年上半期、注目されたUIデザインのテクニックのまとめ

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 2022年上半期に公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI& UXMicro-Tips: Best of 2022 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに 1. ダークにデザインする時はホワイトも和らげる 2. フォームのエラーは色だけに頼らない 3. ユーザーが選択したアイテムを目立たせる 4. 細いフォントは暗いカラーにする 5. 次のステップの情報を提供する 6. 最も重要な要素をより目立たせる 7. 検索ボックスの幅は広くする 8. 素早いアクセスは、ナビゲー

style_blue 2022/09/03

近々UIについて色々検討する機会が来る予定なのでぶくま。

webdesign

リンク

商用利用無料、国内のフリーイラスト素材の総まとめ

商用でも無料、かわいくておしゃれなイラスト素材をまとめました。Webやアプリ、プレゼン、提案書、ポスター、同人誌など、さまざまなメディアで無料で利用できます。ほぼすべてがクレジット表記は必要無しなので、使いやすいと思います。イラストセンター個人・商用プロジェクトで無料で利用できます。現在10,000点以上、分かりやすくて使いやすいイラストが揃っています。カテゴリも豊富で、だいたいのものが揃っています。野菜や果物など、同じテイストでたくさんあるのもいいですね。料理もたくさんの種類があります。一度に利用できるイラストの数は20点までとなっており、詳しくは利用規約をご覧ください。

style_blue 2022/06/23

いつか使うときのためにぶくま。

リンク

こいつ、動くぞ！商用利用無料、シンプルにデザインされたSVGもフォントも揃った高品質なアイコン -Boxicons

1,500種類以上のアイコンが揃った、Webサイトやスマホアプリにぴったりなシンプルにデザインされた無料アイコンを紹介します。オープンソースで個人でも商用でも無料で利用できます。また、SVGアイコンとアイコンフォントで利用できるので、サイズやカラーの変更はCSSでできます。アイコンはリスト、固定幅、アニメーションにも対応しており、かなり便利だと思います。 Boxicons Boxicons -GitHub Boxiconsの特徴 Boxiconsの使い方 Boxiconsを実際に使ってみた Boxiconsの特徴 Boxiconsはオープンソースのプロジェクトで、1,500+種類のSVGアイコン・アイコンフォントが簡単に利用できます。シンプルなデザインは、さまざまなWebサイトやスマホアプリにぴったりです。けっこう前にも紹介しましたが、アップデートされ続け、アイコンの種類や機能がだいぶ

style_blue 2021/11/10

面白そうなので今度試してみよう。

リンク

iPhone 12で、ビューポートのサイズの種類が増えすぎ！デバイスの複雑さがUIの設計にどのように影響するのか

iPhone12シリーズが発表され、iPhone 12/12 Proの予約も始まりましたね。23日配送予定で予約できたので、私も楽しみです。ユーザーとしてはその新しいデザインや機能にワクワクしますが、デザイナー・デベロッパーとしては悩みのタネが増えるかもしれません。ビューポートのサイズの種類が増え、多くの解像度、アスペクト比、断片化が進むデバイスの複雑さがUIの設計にどのように影響するのかを紹介します。 iPhone 12 vs Designers by Michal Malewicz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 iPhone12のリリースだけど、このメタルとガラスの中には象がいる 2020年の現状どのようにデザインすればよいか？重要な要素は折り目の上に終わりに iPhone12のリリース1

style_blue 2020/10/19

ジョブズが生きてた当時はこうならない様にしていたのに、死んだ途端乱立しはじめた印象。せめて縦横比はボタンある/なし/iPadくらいで揃えるべきだよね。

Apple

リンク

知っておくと便利なHTML5の機能、要素や属性のまとめ

今まであまり使用されていなかったけど、現在の環境では有用であるHTML5の便利な機能、要素や属性を紹介します。 10 useful HTML5 features, you may not be using by Tapas Adhikary 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに details要素 contenteditable属性 map要素 mark要素 data属性 output要素 datalist要素値range meter要素 input要素次に学ぶべきことはじめに HTML5は、新しいものではありません。すでにわたし達は最初のリリース（2008年1月）からいくつかの機能を使用してきました。#100DaysOfCodeの取り組みの一環として、HTML5の機能リストを詳しく調べました。私が見つ

style_blue 2020/10/06

そのうち試してみたいのでぶくま。

リンク

CSSで、button要素とinput要素のテキストを美しく揃えるスタイルシートのテクニック

検索フォームなど、button要素とinput要素を並べて配置した際に、それらのテキスト︵アイコンも︶を垂直方向に美しく揃えて配置するスタイルシートのテクニックを紹介します。ボタンと入力フォームの高さは自由に変更でき、デザインも普通に変更できるので、スニペットとして登録しておくと便利です。 button要素とinput要素のテキストを揃えるインタラクティブな要素のコンテンツを垂直方向に揃えるのに苦労したことはありませんか？あなたは仲間です、多くの人が経験していると思います。この記事では、line-height, padding, flexboxを使用して、button要素とinput要素のコンテンツを中央に配置する方法について解説します。まず、ゴールを明確にしておきましょう。 button要素とinput要素のコンテンツは完璧に揃えます。 button要素とinput要素の高さは

style_blue 2020/08/24

そのうち必要になりそうなのでぶくま。

リンク

CSSの比較関数が便利すぎる！ min(), max(), clamp()の使い方を詳しく解説

CSSの数学関数と言えば、calc()が便利ですよね。しかし、便利な数学関数はcalc()だけではありません！先月、Firefoxにサポートされたことにより、すべてのモダンブラウザにサポートされたCSSの比較関数﹁min()﹂﹁max()﹂﹁clamp()﹂の使い方を紹介します。最大幅や最小幅を計算式で定義できる﹁min()﹂﹁max()﹂、フォントサイズの最小値と最大値をコの字のクランプのように計算式で定義できる﹁clamp()﹂、これからのWebページやスマホアプリの実装にかなり役立つと思います。 Everything I Learned About min(), max(), clamp() In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに CSSの比較関数の

style_blue 2020/05/28

サイズに合わせて動的なボーダー枠やギャップ幅が使えるの便利かも。最近メーカーのサイトで小画面表示向けの設定がPCで見るとあらゆる要素が大きくなる時があるんだけどこれで解決していただきたい。

リンク

UXデザイナーから学ぶ、無効状態のボタンをグレーアウトにしない理由

一時的に操作ができない無効状態のボタンを表示する場合、どのようにデザインすると、ユーザーの混乱を少なくすることができるか、UXの観点から解説した記事を紹介します。無効状態のボタンをグレーアウトにしてしまうと、他のボタンにグレーを使用できなくなったり、操作できない不具合かもとユーザーは思うかもしれません。 Why You Shouldn’t Gray Out Disabled Buttons by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。無効状態のボタンをグレーアウトにしない理由無効状態のボタンをグレーアウトにしない理由ページ上でアクティブになっていないボタンがある場合、あなたはどのように実装していますか？ボタンを本来の場所から一度削除した後に表示すると、ユーザーは突然現れたボタンに驚くかも

style_blue 2019/08/22

元々色盲の人もいるんだから色でステータスを表すなとは昔から言われているんですけどねー

webdesign
UI

リンク

便利なのが登場！スマホにもスクロール時に滑らかなアニメーションを適用できる超軽量スクリプト -lax.js

デスクトップでもスマホでもスクロールした際に、非常に滑らかで美しいアニメーションを簡単に実装できるシンプルで2Kbの超軽量JavaScriptを紹介します。他のスクリプトへの依存は無く、ReactやVue.jsもサポートされています。 lax.js -GitHub lax.jsの特徴 lax.jsのデモ lax.jsの使い方 lax.jsの特徴 lax.jsはVanilla Javascriptで書かれた2Kbの超軽量スクリプトです。スクロールをトリガーにあらゆる要素にアニメーションが適用できます。パフォーマンス面でも施策がとられており、デスクトップでもスマホでも非常に滑らかなアニメーションが実現できます。 lax.jsのデモデモでは実際のアニメーションを試すことができます。デスクトップ・スマホ両方の環境でお試しください。デモページ lax.jsではパフォーマンスを向上させるた

style_blue 2019/03/20

まぁ何かに使えるかも。

javascript

リンク

どんどん簡単になっていく！最近見かけるアニメーションを伴ったさまざまなUIが実装できるスクリプト -LayerJS

アイコンをクリック・タップすると横からスライドして表示されるナビゲーション、サムネイルをタップするとズームして次のコンテンツを表示、今までとは異なるうるさくないパララックスエフェクト、ほかにもスライダーやアコーディオンやモーダルなど。最近のWebページやスマホアプリでよく見かけるアニメーションを伴ったさまざまなUIが簡単に実装できる超軽量スクリプトを紹介します。他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。ユニバーサルスライダー、ポップアップ、アコーディオン、メニュー、パララックス、ジャスチャーなど、さまざまなUIパターンを簡単に実装できます。ピュアHTML HTMLのdata属性を使用して、インターフェイスをレイアウトし、インタラクションを定義します。互換性 React、VueJS、Angu

style_blue 2018/05/18

まー面白いかなとは思うけどイイのかどうかはわからない。

リンク

WordPressで個別のページごとに、CSSやJavaScriptが利用できる便利なプラグイン -CSS & JavaScript Toolbox

WordPressの記事ページや固定ページごとに、異なるHTMLやCSSやJavaScriptやPHPを利用でき、一元管理もできるWordPressのプラグインを紹介します。適用できるページは単独でも複数も可能で、適用する場所もヘッダやフッタにと指定できます。前回紹介した際から大きくバージョンがアップし、さらに便利になった新機能も含めて要チェックです。 CSS & JavaScript Toolbox CSS & JavaScript Toolboxの特徴 CSS & JavaScript Toolboxのインストール CSS & JavaScript Toolboxの使い方 CSS & JavaScript Toolboxの特徴 CSS & JavaScript Toolboxの特徴 HTMLやCSSやJavaScriptやPHPのコードを特定のページのみに挿入できます。記事ページ、

style_blue 2018/04/18

HTMLも埋め込めるならスポット的に使えそうかも。あとで試してみよ。

リンク

Web制作者がチェックしておきたい、最近のWebサイトで注目されているデザインのトレンド -2018年3,4月 | コリス

デザインや実装で悩んだ時には、世界のクリエイターの間で注目されている新鮮なトレンドを見てみると良いインスピレーションに出会うことができます。最近のWebサイトで注目されているデザインのトレンドを紹介します。自分にはない発想を見かけると、なんだか楽しくなりますよね。 3 Essential Design Trends, March 2018 3 Essential Design Trends, April 2018 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ナビゲーションを表示しないトップページ -ポスタースタイル 02. Ultra Violetのカラーパレット 03. グラデーションとテキスト 04. 泡のような柔らかい塊 -バブルアンドブロブ 05. 浮遊している矩形 -フローティングレクタングル 06

style_blue 2018/04/10

何かアイディアが欲しくなった時用にぶくま。

webdesign

リンク

これぞプロのデザインテクニック！UIデザインの印象がよくなるデザインの知識とテクニックのまとめ

Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1

style_blue 2018/03/26

何か迷った時はこれを見たらいいのかもしれない。

リンク

Adobe Photoshop CC & Illustrator CCが一番の最安値！デザイナーやイラストレーターは絶好の購入タイミング

Adobe Photoshop CC 2017年版 |12か月版|オンラインコード版 Photoshopは12ヵ月版が41%オフとなっており、先日アップデートされた人工知能も利用できます。参考: Photoshopの選択範囲の作成が驚くほど簡単に！CC 19.1のアップデートで、Adobe Sensei︵人工知能︶が使える Photoshopの単体プランとフォトプランの比較 Photoshop単体プランよりフォトプラン︵Photoshop+Lightroom︶の方が安くておかしい、と思ってる人は違います。 Photoshopが利用できるという点は同じですが、単体プランにはクラウドサービスがついています。フォトプランはひと言で説明すると﹁PhotoshopとLightroomを利用するだけのプラン﹂です。単体プランでは20GBのクラウドストレージに加え、Typekit︵ポートフォリオプラン

style_blue 2018/02/09

んーPhotoshopは別に大したことやらないから今使ってるCS5のままでいいんだけど、Lightroomは新しいの欲しいんだよなー。ただでさえ安いフォトプランはこれ以上安くならないか。LM単品で安くならんかなー

Adobe

リンク

CSSのこのアイデアはすごすぎる！Webページのトラッキング・解析ができるスタイルシート -Crooked Style Sheets

結果ページどのリンクをいつクリックしたのか、いつホバーしたのか、指定エリアでどのくらいマウスを動かしたのか、フォームに特定の文言を入力したのか、チェックボックスをクリックしたのか、ブラウザは何か、解像度はいくつか、ディスプレイの向きはどっちなのか、などの情報が表示されました。 ※出力する際には、PHPが使用されています。 Crooked Style Sheetsの仕組み Crooked Style Sheetsは、外部CSS一つを加えるだけで、Webページのユーザーに関するさまざまな情報を取得できます。基本的な仕組み CSSではurl()関数を使用して、外部リソースを追加できます。url()関数の値は呼び出された時のみロードされるため、これをリンクがクリックされた時に利用します。リンクを記述するHTMLは、要素を特定できるようにidを与えます。

style_blue 2018/01/19

ふむ、JS使わないのか。

リンク

はてなブックマーク

タグ

ブックマーク / coliss.com (54)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス