「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている Tailwind CSS 1 を一目見た人、特にCSS初学者のうちけっこうな割合が「これエグい負債になりそう」と思う気がする。なぜなら実際にそのような意見をちらほら見るからなんだけども、自分はあんまりそうは思っていないし、微妙に今のCSSについて誤解があるような空気も感じるのでその理由を説明したい2。JSXと同じで嬉しさを理解して使い慣れればなんてことはないのだけど、一方でその背景にある話はJSXより複雑なので単純に使って慣れればいいという話でもなさそう。 なお、この記事は私の以下の2ツイートを膨らませたものです。 Tailwind CSS、剥がすのは大変そうだけどそれをもって重大な負債になると評せるかは微妙に思っている https://x.com/aumy_f/status/18220941478532
FigmaがAIでさらに進化！ Web制作はもはや完全自動化目前？ 「Config APAC 2024」現地レポ | 進化が止まらない！ 最新ツール
Figma（フィグマ）が主催する世界最大級のデザインカンファレンス「Config（コンフィグ）2024」が本拠地・米国のサンフランシスコで6月26〜27日に開催された。その翌週、Figma経営陣はシンガポールへと飛び、7月2日に「Config APAC 2024」を開催。アジアで初開催となったこのConfigには約1,000人以上が参加し、新機能の発表を歓声をもって迎えた。 シンガポールの「Config APAC 2024」を現地取材した筆者が、最新の機能アップデートとAI活用を中心にお伝えする。 マリーナベイサンズ・コンベンションセンター内のConfig APACの会場 アジアには72ものFigmaコミュニティがあり、2万人以上の会員がいます。そんなアジアで初のConfigをシンガポールで開催できたことは最高の気分。アジアには、人類、世界にインパクトを与えるデザイナーが生まれてきた歴史が
Visual Studio Codeで絶対にしておくべき設定ベスト20 はじめに Visual Studio Code（VSCode）は、開発者にとって非常に人気のあるエディタであり、その柔軟性と拡張性から多くのプログラミング言語やフレームワークに対応しています。VSCodeを最大限に活用するためには、適切な設定を行うことが重要です。本記事では、VSCodeで絶対にしておくべき設定ベスト20を紹介し、それぞれの設定がどのように開発体験を向上させるかを詳しく解説します。 1. テーマの選択 1.1 ダークテーマとライトテーマ VSCodeでは、ダークテーマとライトテーマの両方が利用可能です。開発環境の明るさや好みに応じてテーマを選択することで、目の疲れを軽減し、作業効率を向上させることができます。特に、長時間のコーディング作業を行う場合、適切なテーマ設定は重要です。 1.2 テーマの変更方法
2024年のブラウザならCSSの:has()疑似クラスが使えます。この:has()疑似クラスは非常に強力なポテンシャルをもっています。というのも:has()疑似クラスを使えば、どんな関係のセレクターも指定可能になります。これを使えば多彩なセレクターが記述できるようになり、より表現力豊かなCSSを実現できます。この記事では:has()疑似クラスを使ったCSSの表現手法やテクニックを紹介します。 サンプルを別ウインドウで開く コードを確認する :has()疑似クラスの基本的な使い方 :has()疑似クラスの使い方について簡単に説明します。:has()疑似クラスは渡したセレクターを持つ親要素を選択します。たとえば、次のようなHTMLとCSSがあるとします。 <p class="text"> <strong>メロス</strong>は激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。
CSS Gridの便利な無料ツールが登場！ レイアウトを確認しながら、コードを生成できる -CSS Grid Generator
最近のWebサイトやスマホアプリでよく使用されるお弁当箱のようなBento UIやカード型、ヘッダ・サイドバー・メイン・フッタなどのレイアウトを確認しながら、CSS Gridのコードを生成できる無料オンラインツールを紹介します。 使い方は非常にシンプルで簡単、生成されるコードもシンプルでさまざまなプロジェクトで利用できます。 CSS Grid Generator Bento UIの実装については、Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUIをご覧ください。 CSS Grid Generatorは、CSS Gridで実装するレイアウトのコードを簡単に生成できるオンラインツールです。このジェネレーターを使用すると、列数・行数・ギャップサイズを設定し、自由にレイアウトを構築できます。
ユーザーの声を大切にする すべての組織のために。 toitta（トイッタ）は、デザインリサーチ・マーケティングリサーチに携わるチームのために考案された、インタビュー後の発話分析を支援するソリューションです。 リサーチを通してインサイトの発見・仮説の精緻化を実現するまでのプロセスにひそむ課題を、「生成AIを活用した発話の構造データ化」で解決します。 インタビューの録画・音声データをAIで処理し、データを分析しやすい形に整えることで、ハードルの高いインタビュー分析を強力にサポートします。
CSSの@propertyがFirefoxにサポートされ、デスクトップ・スマホのすべてのブラウザでサポートされました。 @propertyは次世代変数と呼ばれるもので、これまでの変数（カスタムプロパティ）の使い勝手が大幅に向上します。@propertyによるカスタムプロパティの記述方法、@propertyを使ったCSSのテクニックを紹介します。 @property: Next-gen CSS variables now with universal browser support by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに @propertyのメリット @propertyによるカスタムプロパティの記述方法 @propertyの使い方: きらめくグ
Webサイトのエクスペリエンスを改善するCSSの便利なテクニックを紹介します。 基本的には一行のCSSですが、より良くするためにCSSを追加して複数行のものもあります。 CSS One-Liners to Improve (Almost) Every Project by Álvaro Montoro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ビューポート内のコンテンツの幅を制限する 2. テキストのサイズを大きくする 3. 行間のスペースを広げる 4. 画像のサイズを制限する 5. コンテンツ内のテキストの幅を制限する 6. 見出しをよりバランスよくする 7. ページスタイルに合わせたフォームのカラー 8. テーブルの表を分かりやすくする 9. テーブルのセルとヘッダのスペース 10. アニメーションと動
本記事は Design Week 2023 1日目の記事です。 🌈 告知記事 ▶▶ 本記事 ▶▶ 2日目 💐 こんにちは、Webデザイナー3年目の馬場です。 突然ですが、 「メンフィス」「グラスモーフィズム」「アイソメトリック」... 皆さんはこれらのワード、いくつ知ってますか？ もしくはデザイナーの方は、 「このデザイン、最近良く見るけど呼び名とかあるのかな…？」 「他人に言葉で『◯◯のデザイン』と説明したいけど名前がわからない...。」 と思ったことはありませんか？ 私は定期的にWebデザインのトレンドや用語などを調べてインプットしているのですが、 今までよく目にしていたデザインスタイルや模様などに「こんな名前があったんだ」と、恥ずかしながら初めて知ることが多々あります。 今回はそういったデザインスタイルの呼び名を集めましたので、参考サイトや使用事例と共にご紹介していきます。 メン
目次[非表示] 1.はじめに 2.なぜPHPバージョンアップが必要なのか？ 3.PHPバージョンアップ手順 3.0.1.PHP 7.4とPHP 8.3の変更差分調査 3.0.2.Laravelのバージョンアップ（7.3から10へ）の調査 3.0.3.Composerライブラリのバージョンアップ 3.0.4.PHP 8のローカル環境設定を更新する 3.0.5.静的解析の実施 3.0.6.テスト仕様書の作成 3.0.7.エラーの修正 3.0.8.テスト環境へのデプロイ 3.0.9.デバッグ 3.0.10.本番環境へのデプロイ 4.静的解析ツールの活用 4.0.1.PHPStanを使用した理由 4.1.ルールレベルの設定 4.1.1.使用した感触 5.まとめ 6.お悩みご相談ください はじめにこんにちは、株式会社DIVXでエンジニアを務めております、本間と申します。 今回は、PHPのバージョンを
Webアプリケーションにおけるレートリミット、サーキットブレーカー、リトライの役割を調べて実装してみた - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに Webアプリケーションにおけるレートリミット、サーキットブレーカー、リトライの役割 リトライ サーキットブレーカー レートリミット レートリミット、サーキットブレーカー、リトライの実装 サンプルアプリケーションの実装 リトライ、サーキットブレーカー、レートリミットを追加 まとめ 年に1度の技術イベント「RAKUS Tech Conference」を開催します！！ はじめに こんにちは！エンジニア２年目のTKDSです。 今回は、レートリミット・サーキットブレーカー・リトライについて調べた内容を紹介し、ライブラリを使ってGoで実装してみます。 Webアプリケーションにおけるレートリミット、サーキットブレーカー、リトライの役割 リトライ リクエストが失敗した場合に再試行します。 リトライは、一時的な障害に対して効果を発揮します。 ネットワークの瞬断やサービスの一時的な過負荷など、やり直
Webのアクセシビリティの確認としてスクリーンリーダーを使った動作確認もしてもらうと 「リンクとかボタンしか読まれず、見出しや説明文がスキップされてしまいました」 という報告をされることが時々あります。 これは大抵、スクリーンリーダーを起動して、Tabキーだけを繰り返し押してしまっていることによって起こります。スクリーンリーダーの操作方法を伝えると、読み飛ばしたと思っていたところもちゃんと読みあげてくれたということがほとんです。 アクセシビリティをかなり意識したページであっても、Tabキーだけでスクリーンリーダーを操作しているかぎり、ページの隅々まで読めることはほとんどありません。スクリーンリーダーにはTabキーを押す以外にもいろいろな操作が存在して、それを憶える必要があるわけです。私はアクセシビリティチェックのやり方を説明するときには、必ずその操作方法のうち最低限のものを紹介しているつも
これはすごい便利！ WebサイトやスマホアプリのUIに今時のアニメーションやインタラクションを簡単に実装できる -Animata
WebサイトやスマホアプリのUIにアニメーション、エフェクト、インタラクションを簡単にコピペで実装できるコードをまとめたAnimataを紹介します。 112種類のアニメーション化されたUIコンポーネントが揃っており、見ているだけでもインスピレーションが刺激されます。 Animata Animata -GitHub Animataの特徴 Animata化されたUIコンポーネント animataの使い方 Animataの特徴 Animataは、WebサイトやスマホアプリのUIに使用されるアニメーション、エフェクト、インタラクションを簡単にコピペで実装できるコードを提供しています。 MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。 AnimataはUIライブラリではありません。UIに動きを与えるためのコード集なので、他のUIライブラリやデザインシステムと一緒に使用できます。カ
株式会社アンドパッドでUIデザイナーをしている、よつくらです。 2024年の7月、おそらく3年ぶりにアンドパッドで運用しているデザインシステムの、網羅的なカラーパレットを作成しなおしました。今回、カラーパレットのコントラスト比を揃えるのにOKLCHカラースペースが便利だったので紹介します。 網羅的なカラーパレットのコントラスト比を揃える前回カラーパレットを作成したとき、1段階目の網羅的なカラーパレットと、2段階目の意味を持ったカラーパレットを作成しました。そのときの学びは下記のnoteにまとまっています。 1段階目の網羅的なカラーパレットについて、色相の異なる色同士で同じコントラスト比を保っておいた方が、UIコンポーネントを作成するときに便利です。 毎回コントラスト比の計算で悩むのは嫌だ例えば上の図のように、いろいろな色で使えるタグコンポーネントを設計するときのことを考えてみましょう。 こ
HTMLで簡単に実装できるアニメーションで動くスピナー、カラー・サイズ・スピードのカスタマイズも簡単 -HTML-SpinnerElem
HTMLで簡単に実装でき、カスタマイズも可能なアニメーションで動くスピナーを紹介します。アニメーションGIFだと、カスタマイズはほぼ不可能ですが、このスピナーだとさまざまなカスタマイズができます。 外部ファイルとしてJavaScriptを記述し、あとはHTMLで簡単に実装でき、カスタマイズもHTMLで簡単にカラー・サイズ・スピードを変更できる優れものです。 HTML-SpinnerElem -GitHub HTML-SpinnerElemの特徴 HTML-SpinnerElemのデモ HTML-SpinnerElemの使い方 HTML-SpinnerElemの特徴 HTML-SpinnerElemは、スピナーにアニメーション画像を使用していることにうんざりして、画像なしでHTMLでカスタマイズ可能なスピナーを実現するために作成されたものです。 HTML-SpinnerElem HTMLでカ
JavaScriptライブラリ キャビネット（Cabinet） ウェブアクセシビリティに対応した スライダー・カルーセルUI スライド、フェード、自動再生、ドラッグ操作、レスポンシブ、キーボード操作・スクリーンリーダーに対応しています。
ありそうでなかったSNSで話題の最新Webデザイン33選
素敵なWebサイトがこんなに公開されているなんて… ウェブに携わる人にとって、新しいWebサイトを発見し、次へのアイデアを貯めておくのは楽しみのひとつ。 しかし、「忙しくて少し目を離したら、数か月でトレンドががらりと変わっていた」なんてこともあるほど、目まぐるしく変化しているのも事実。 このリストでは、ここ2か月ほどSNSなどで話題となった国内外の最新Webデザインをまとめています。 Webデザイン見本リスト モンブラン｜福岡のブランディング会社 愛の詰まったコンテンツやイラスト、下まで続く長ーいフッター、どれもが素敵すぎる九州を代表するWeb制作会社モンブランさんのブランディングサービスサイト。ワクワクが止まりません。 MIXI設立25周年特設サイト | 株式会社MIXI 25周年を迎えたMIXIを振り返る特設LPページ。アイソメトリックなイラストとカラフルな配色で統一。創業者インタビュ
おしゃれな店舗/美容室/観光サイト向けWordPressテーマ LIQUID BLOOM New ブロックテーマ フルサイト編集 スタイル対応 おしゃれな店舗/美容室/観光サイト向け ブロックテーマ デモ ダウンロード 安心継続サポートプラン <$mt:Include module="お知らせ"$> <$mt:Include module="テーマの特長（ブロック）"$> ブロックテーマとは ブロックテーマは、ヘッダー、コンテンツ、フッターなど、サイトのあらゆる要素を編集できる WordPressの最新機能フルサイト編集（FSE）に対応したブロックベースのテーマです。 フルサイト編集機能を利用するためには、ブロックテーマが必須です。 ノーコードで 自由自在に こだわり編集 デザインに迷わない フラットな要素を取り入れた、シンプルで分かりやすいデザイン。 余白を多く設けることで、心地の良い雰
広島県尾道市にあるしまなみブルワリーの公式ブランドサイトです。王道のラガースタイルのど真ん中を突き詰めた「ストライピルスナー」をはじめ、１杯目専用のラガー「ファーストラガー」や季節のフルーツを用いたデザートビール「しまなみキャット」などしまなみ海道をのぞむ尾道から個性豊かな商品を展開しています。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている
VisualStudioCodeで絶対にしておくべき設定ベスト20
has()疑似クラスでコーディングが変わる！ CSS最新スタイリング - ICS MEDIA
toitta（トイッタ） - ユーザーの声に向き合える発話分析ソリューション
CSS変数がもっと便利になる新しい記述方法、CSSの次世代変数@propertyがすべてのブラウザにサポートされました
Webサイトを使いやすく改善する、知っておくと便利なCSSのテクニック
こんな名前があったとは！ デザインスタイルの呼び名まとめ - NRIネットコムBlog
ステップバイステップで学ぶ初めてのPHPアップデート | 株式会社divx（ディブエックス）
スクリーンリーダーの操作にはTab以外のキーも必要です - Qiita
カラーパレットのコントラスト比を揃えるのにOKLCHカラースペースが便利だった｜よつくら
ウェブアクセシビリティツール | 福岡・北九州のウェブアクセシビリティ専門web制作会社
おしゃれな店舗/美容室/観光サイト向けWordPressテーマ | LIQUID PRESS
しまなみブルワリー公式ブランドサイト