Tailwind CSS初心者が絶対ハマる落とし穴
ムーザルちゃんねるのzaruです。今回はムーさんと、Tailwind CSS初心者が絶対ハマる落とし穴について話しました。Tailwind CSSを使い始めた人、あるいはまだ使ったことがない人には是非見てほしいです。すでにこの落とし穴から抜け出している人はあるよねーって感じで眺めてください。 すごいサムネイル… ハマるポイント クラス名の動的指定 クラス名のコンフリクト クラス名の動的指定 例えば、通常は背景を青だけど、エラーの時は赤くしたい。そんなときにJavaScriptでクラス名を組み立てると以下のように書きがちです。bg- と -500 は固定なので変化する red blue だけ変数で組み立てるやり方です。 const color = error ? 'red' : 'blue'; <div class={`bg-${color}-500`}></div>
HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA
見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before ＝ 選択した要素の最初の子要素として疑似要素を生成 ::after ＝ 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加
非デザイナーにも知っていて欲しい「色」と「特性」 - Qiita
はじめに 数年前から「デザインの民主化」「非デザイナー向けの〇〇」といったワードをよく見るようになりました。それに伴い、デザイナー不在でも制作ができる便利なツールも増えてきましたね。 ReactなどのUI制作に便利なライブラリが広く使われたり、Canvasを使ってのバナー制作を行う人も増えてきた印象があります。 一方で「たくさんあるテンプレートから何を基準に選べば良いのか分からない」「アレンジしたけど、なんだか上手くいかない」という人もいるのではないでしょうか。 「非デザイナー～」シリーズでは「知っているとちょっと得するデザインTIPS」や「話のネタになるデザイン豆知識」をお伝えしていこうと思います。 今回のテーマ「色」と「特性」 今回は色の見え方、なかでも色覚特性について書いていこうと思います。 色覚特性はさまざまな理由から、多数派とは違う色の見え方・感じ方をする状態のことを言います。色
ChatGPTプラグインを使って、AWSのインフラ構成を作図してもらった話 - Qiita
# 命令 下記の「構成」を満たすAWSのシステム構成図をMermaidで作成して下さい。 作図を行う際、システムの構成要素は「Mermaid記法集」のデザインを元に記述して下さい。 各種システム構成要素には全てその名称も明記して下さい。 ## 構成 - シンプルな三層アーキテクチャ - ALBの前段にCloudFrontを立てている - ALBはパブリックサブネット内のEC2に負荷分散する - EC2はプライベートサブネット内のRDSにアクセスする - 画像ファイルなどのデータはS3に保存しており、CloudFront経由で配信している ## Mermaid記法集 ### 各種グループの記法 #### AWS Cloud fill:none,color:#345,stroke:#345 #### Region fill:none,color:#59d,stroke:#59d,stroke-
CSS見出しデザイン21選 | MxGrain - デザイン制作
CSSで実装できるシンプルな見出しデザインを21パターンご紹介します。汎用性が高くテイストに縛られず現場ですぐ使えるデザインなのでストックしておくと便利に使えます。あなたの現場でぜひご利用ください。 CSSのみで実装するシンプルな見出しデザイン21パターン 蛍光ペンのような線をひいたCSS見出しデザイン ラインを使ったCSS見出し HTML <h2 class="heading01">ラインを使ったCSS見出し</h2> CSS .heading01 { display: inline; font-size: 26px; background-image: linear-gradient(rgba(0,0,0,0) 70%, rgb(252,81,133) 70%); } 蛍光ペンで線を引いたような見出しデザインです。display: inlineで複数行にも対応させています。 2色を重ね
Chart Fuse | Get Started
Embeddable charts for any website Quickly add interactive charts and graphs to a blog post or static web page, 100% free with no user registration. Quickstart Step 1 - Prepare your Data Create a Google Sheet and set the sharing permissions to "anyone with the link can view." Add your data like below, with a header of labels and as many columns and rows as you'd like. (Your data may be single or mu
2023年のトレンドカラーは、よろこびに満ちた鮮やかなレッド「ビバ マゼンタ」、HTMLのコードは「#be3455」
2023年のトレンドカラーがPantoneから発表されました。 トレンドカラーは鮮やかで紫がかったレッドの「ビバ マゼンタ（Viva Magenta）」、世界でもっとも明るい染料の一つコチニールの赤にインスパイアされたカラーです。 この活力に溢れたレッドはよろこびをあらわした新しいカラー、大胆でウィットに富み、すべての人を包み込みます。 Pantone Color of the Year 2023 PANTONE 18-1750 Viva Magenta「ビバ マゼンタ」 トレンドカラー「ビバ マゼンタ」を使用した配色 ビバ マゼンタのカラーデータ PANTONE 18-1750 Viva Magenta「ビバ マゼンタ」 2023年のトレンドカラーは、PANTONE 18-1750 Viva Magenta「ビバ マゼンタ」です。 PANTONEのエグゼクティブ ディレクターであるLea
モダンで早い静的サイトジェネレータ Astro の始め方 - A Memorandum
はじめに プロジェクト作成 プロジェクト構成 コンポーネント レイアウト ページ ビルド Blog テンプレート Portfolio テンプレート Documentation テンプレート まとめ はじめに 先日1.0リリースとなった、静的サイトジェネレータのAstroの紹介です。 JSで作成したページをビルドして、JSを含まない早いサイトを生成し、必要な場合には React や Vue といった好きなフレームワークを簡単に組み込むことができるのが特徴になります。 プロジェクト作成 Node は、v14.18.0 以上、または v16.12.0 以上が必要です。 npm や yarn、pnpm で create astro でプロジェクトを作成します。 # npm $ npm create astro@latest # yarn $ yarn create astro # pnpm $ p
グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法
グラデーションを作成した時に、中央がグレーに濁ってしまうこと（グレーデッドゾーン）があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSグラデーションが算出される仕組み おすすめのカラーモード これらの知識を活用する 美しいグラデーションを生成できるツール 終わりに はじめに さっそくですが、CSSで実装したイエローからブルーの線形グラデーションをご覧ください。
業種や雰囲気による配色の決め方
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 この記事ではWebデザインを制作する際に、業種や雰囲気によってどのように配色を決めていけばいいのか、業種による配色の特徴、配色で変わる雰囲気について説明します。 業種による配色の特徴 業種によってよく使われる色と使われない色があるかを飲食店と金融会社や保険会社などについて見ていきます。 飲食店のWebサイトで使用されている色 まずは飲食店です。 飲食店のWebデザインでは店舗のイメージの色などを
[SharePoint2010]クリックして手軽に更新できる座席表を作成してみました。 - Qiita
作ったわけ 部署単位ではかたまって座っているんですが、席替えが頻繁で、 あの部署どこらへんにいるんだっけ？というのが頻繁に変わるため 更新がパパッとクリックしてできるような座席表があったらいいなあと……。 画面イメージ フロアにぐるりと島があるような感じです。 とりあえず10島、1島の最大座席数は16席。 丸く囲むと真ん中が空いちゃってもったいないので、部署ごとの座席数を表示するようにしてみました。 座席状況はSharePointリストに保存します。 ここの例では、このリストはlistZasekiSampleという名前にしています。 既存のタイトル列に島名を3文字で表記したもの（この例でいうとS01,S02など）が入ります。 za～zpまで16列作成します。全部1行テキストです。 列の名前がza,zb…とかである理由は、なんでかわからないんですがSharePointの列名に数字とかを混ぜる
![[SharePoint2010]クリックして手軽に更新できる座席表を作成してみました。 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/db682cf1ef92ba87d38543a4a5aa11edb6c75fe2/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCU2hhcmVQb2ludDIwMTAlNUQlRTMlODIlQUYlRTMlODMlQUElRTMlODMlODMlRTMlODIlQUYlRTMlODElOTclRTMlODElQTYlRTYlODklOEIlRTglQkIlQkQlRTMlODElQUIlRTYlOUIlQjQlRTYlOTYlQjAlRTMlODElQTclRTMlODElOEQlRTMlODIlOEIlRTUlQkElQTclRTUlQjglQUQlRTglQTElQTglRTMlODIlOTIlRTQlQkQlOUMlRTYlODglOTAlRTMlODElOTclRTMlODElQTYlRTMlODElQkYlRTMlODElQkUlRTMlODElOTclRTMlODElOUYlRTMlODAlODImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTM3MjYxMjcxZGY2NDIxOWExYzBlZjEyMjBkOTdkMGYz%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBTdW1pcmVfTmVrbyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NzY5MTczYzc4ZTk1MjIwNjM2Mjk5OTRmMGVlMDk5YWY%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D0c49cde7bbcf86077e5f41d7089fd84f)
グラフを作ってデータを可視化する時に「見やすい色」を選ぶコツまとめ
ウェブデザインやグラフィックデザインにおいて色の選択は非常に重要かつ難しい作業ですが、デザイナーでなくともグラフを作る際などに色の選択をする必要に迫られることがあります。データを分かりやすく可視化するためには、どのような色の組みあわせを選択すべきなのか、プロでなくともプロのようなグラフを作れるようになるポイントを、ビジュアルコミュニケーションを専門とするLisa Charlotte Rostさんがまとめています。 How to pick more beautiful colors for your data visualizations | Chartable https://blog.datawrapper.de/beautifulcolors/ ◆色相をあれこれピックアップしすぎない カラーホイール上の色を大別すると、赤・オレンジ・黄・緑・青・紫の6つの色相となりますが、データを可視化
【保存版】配色アイデアに迷わない、すごい配色カラーパレットツール107個まとめ
「配色えらびのベストな方法が知りたい」 「イメージにあった色をもっと手軽に選びたい」 「色がなかなか決まらない」 「配色えらびにAIを活用してみたい」 この記事では、配色えらびが苦手なひとに役立つ無料ツールをまとめてご紹介します。 ２０１６年８月の初投稿から９年かけてわたしが見つけた、実践向けの配色ツールをカテゴリ別に揃えました。 リンクの切れたツールは削除し、新しいデザインツールを追加した最新版にアップグレード。 配色の基本ルールを頭に入れておけば、お気に入りの色を効果的に見つけることができますよ。 コンテンツ目次 普段使いできる便利ツール（17個） ワンクリック、人工知能系ツール（20個） マテリアルデザイン系ツール（4個） Webデザイン・UIデザイン関連ツール（21個） 写真から抽出系ツール（2個） インスピレーション系ツール（14個） グラデーション関連ツール（29個） 配色カラ
colorization | 白黒画像をカラーに
これは何？ Let there be Color!: Automatic Colorization of Grayscale Imagesの手法によってグレースケール（モノクロ）画像のカラー画像化を行います。カラー画像を入力すると、一度グレースケール画像に変換した後にこの手法でカラー化します。 このサービスに関するブログ: https://blog.misosi.ru/2016/06/04/siggraph2016_colorization_web_impl/ 作者について 本Webサービスの作者は@mecabです。簡単にcolorizationを試せると便利だなと思い、UIを作ってWebサービス化しましたが、裏側では単純に上記のプログラムにデータを流しているだけで、完全に人の褌で相撲を取っています。 @mecabは元プロジェクトと直接的または間接的な関係はありません。本サービスに対するご
無料のRAW現像・写真管理ソフトDarktableを試してみる。(フォントも変える) - たねやつの木
こんばんは、たねやつです。 今年はもう記事を書かないかと思っていましたが面白そうな物を発見したので実際に使ってみました。 ↑すこし使ってみましたが細かなレビューがまとまらないです(笑)。そんなことをしているうちにPCの機嫌が悪くなり、、、(笑) 修正に時間がかかりそうです^^; とりあえずLightroomとの相違点程度にまとめておきます。 タイトルの通りオープンソースのRAW現像・写真管理ソフトのDarktableについてです。 無料で使えるLightroomっぽいソフトというわけです。OSSという単語は私にとってはヒジョーに魅力的(゜゜) 無料なので誰かにおすすめもし易いですし、とりあえずの手順を書いておきます。 以下、LightroomをLrと省略して書きます。 動機 インストール Lightroomとの相違点。 Lightroomと同じ(似ている)ところ Lightroomと違うと
プロに学ぶ、一生役立つ配色の基本ルール8個まとめ【保存版】
なにかデザインをはじめるとき、無数にある色から配色を決定するのに頭を悩ませることもあるでしょう。この記事では、適切な配色カラーパレットを決めるのに役立つ８つの基本ルールを詳しく紹介します。 コンテンツ目次 1. 色数を制限しよう。 2. 自然からインスピレーションをもらおう。 3. 60−30−10ルールを試してみよう。 4. まずはグレースケールでデザインしよう。 5. 黒色を利用するのは避けよう。 6. 重要性を色のコントラストで表現しよう 7. 色を使ってユーザーの感情を引き出そう。 8. デザインを理解しやすくしよう。 9. ボーナス: デザイナー向け配色ツールまとめ 配色基本ルール１ 色数を制限しよう。 デザインプロジェクトに配色を適用するには、バランスが重要になります。色数が増えるほどバランスを取るのは難しくなります。配色は最高でも3色までに制限することで、よりよい結果となるで
デザインで色の組み合わせを決めるのに役立つ便利なオンラインツールのまとめ
一つのカラーを元にそれにあったカラーパレットやグラデーションを作成したり、トレンドカラーを使った配色サンプル、アクセシビリティガイドラインに沿ったカラーパレットなど、配色設計に役立つオンラインツールを紹介します。 Coolors オススメの組み合わせを次々に表示してくれるオンラインサービス。 スペースキーor右のアイコンでランダムカラー、ロックでカラー固定、さまざまなファイル形式にエクスポートもできます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIデザイン用に、AIで色彩理論に基づいたカラーパレットを生成してくれる無料オンラインツール -AI Color Combination Generator
Flipsblog.jp
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
