CSSのコンテナースタイルクエリーstyle()の使い方 - ICS MEDIA
コンテナークエリーは、要素の幅を条件にする機能だけでなく、CSS変数を条件にスタイルを適用する、コンテナースタイルクエリーという機能があります。活用することで、ひとつのクラスに異なるバリエーションのスタイルを定義できます。 前回の記事『要素の幅でレスポンシブ対応を行える！コンテナークエリーの使い方』では、コンテナークエリーの基本的な使い方を紹介しました。本記事では、コンテナースタイルクエリーの使い方を紹介します。 ※本記事のデモは、ChromeまたはEdgeでご覧ください。ブラウザのサポート状況は、後述する「対応ブラウザ」を参照ください。 コンテナースタイルクエリーの使い方 @containerの条件をstyle()関数で定義することで、コンテナースタイルクエリーを利用できます。関数の引数には、条件とするCSS変数と値を設定します。CSS変数は、親要素に定義された値を参照します。 また、前
コピペで時短、Tailwind CSSおすすめUIコンポーネント、UIキット集、便利ツール【まとめ】
開発者にとっていかに早くWeb制作を進められるかは、永遠のテーマと言えます。 この記事ではWebサイト制作を効率化、爆速にするTailwind CSSのUIコンポーネント集、便利ツールをまとめてご紹介します。 表現したいレイアウトをコピペのみで実現でき、これまでかかっていたサイト制作時間を劇的に削減します。 おしゃれなWebサイトを素早く開発できるUIコンポーネント素材、あなたはいくつ知っていますか。 Tailwind CSSの便利UIコンポーネントまとめTailwind UIMagic UIDyna UIAnimataPrelineMamba UIFlowbiteDaisy UISailboat UIMeraki UITail-KitReact AriaWicked BlocksTailwind Starter KitWindstaticMyna UITailwind StampHype
これでもう悩まない！2024年ロゴトレンド最新レポート
「2024年のロゴデザインってどうなるの？」 「どんなスタイルが人気？」 そんな疑問に応える、2024年のロゴトレンド最新レポート2024 Logo Trend Reportが発表されました。 この報告レポートは、数十年にわたってロゴデザインの変遷を見続け、40万個以上のロゴを集めた世界最大級のギャラリーサイトLogoLounge.comの重鎮Bill Gardner氏によるもの。 毎年恒例となっているレポート発表を楽しみにしている、というデザイナーも多いのではないでしょうか。 2024年のロゴデザインの特徴は、ずばり「遊び心と革新」。 ロゴが箱型になったり、角が切り取られたりとユニークなものが多い印象。流れるような流線形や、昔のピクセルアートも復活。 また、ステッカー風のデザインや、中心を強調したバンランスのとれたロゴも流行の兆し。美しい色が混ざり合うグラデーションも使われて、動きを感じ
FigmaのAIによる学習「コンテンツのトレーニング」をオフにする方法、独自性・機密性の高いデザインを扱っている場合は注意が必要です
Figmaは、2024年6月にサンフランシスコで開催されたFigma Config 2024でFigma AIを発表しました。 FigmaのAIが学習に使用する予定のデータには、ユーザーが生成したコンテンツも含まれており、独自性の高いデザインや機密性の高いデザインを扱っている場合は、この学習機能をオフにしておいた方がよいでしょう。 FigmaのAIによる学習機能は、8/16から始まる予定です。 Figma AIは、AIによるテキストプロンプトからのデザイン生成、アセット検索、背景除去、プロトタイプメーカーなど、ユーザーの生産性と創造性を高める機能です。ユーザーとしては便利になるのはよいことですが、このAIが学習に使用する予定のデータには、ユーザーが生成したコンテンツも含まれるので、注意が必要です。また、それに伴いFigma AI Termsも更新されています。 ユーザーが作成したコンテンツ
CSS Gridの便利な無料ツールが登場！ レイアウトを確認しながら、コードを生成できる -CSS Grid Generator
最近のWebサイトやスマホアプリでよく使用されるお弁当箱のようなBento UIやカード型、ヘッダ・サイドバー・メイン・フッタなどのレイアウトを確認しながら、CSS Gridのコードを生成できる無料オンラインツールを紹介します。 使い方は非常にシンプルで簡単、生成されるコードもシンプルでさまざまなプロジェクトで利用できます。 CSS Grid Generator Bento UIの実装については、Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUIをご覧ください。 CSS Grid Generatorは、CSS Gridで実装するレイアウトのコードを簡単に生成できるオンラインツールです。このジェネレーターを使用すると、列数・行数・ギャップサイズを設定し、自由にレイアウトを構築できます。
これ知ってる？Adobe Fireflyで３D文字を自在に生成できる裏技テクニック
画像生成AIサービスAdobe Fireflyがバージョンアップして、「Adobe Firefly Image 3 Foundationモデル（ベータ版）」が発表されたのが2024年4月のこと。 Photoshopで利用できる新機能も十分衝撃だったのですが、あれからツールを利用し続けた結果、Adobe Fireflyがある特定のデザイン作成にとても効果的ということが分かってきました。 それがずばり、文字の加工やテキストエフェクトの作成。 これまでにもフォントの変更のみで加工できるPhotoshopテキストエフェクトを紹介してきましたが、Fireflyを使えばプロのような3D文字加工をほんの数秒で、誰でも簡単に作成することができます。 この記事では、Adobe Fireflyをつかって文字エフェクトを自在に作成する方法を、注意すべき点と一緒にご紹介します。 この記事を読み終わるころには、きっ
使うだけで時短になるWeb、デザイン制作の新ツール・フリー素材50選
「日頃の作業をどうにか楽にしたい、できることならだれかやってほしい」と思ってしまうほど自分にあまい筆者が、制作時間の短縮や効率化アップにつかえる新ツールやデザイン素材をまとめました。 すべて手作業だと時間のかかるCSSスタイリングや、スキルも必要な手描きイラストを用意したり、「このツール、早く知りたかった」と思った素材やツールが揃っています。 日頃のワークフローに活用して、デザイン制作の新ルールを一緒に見つけてみませんか。 コンテンツ目次Web便利ツールデザインツールFigma・アイコンツールユニーク・面白ツール Web便利ツール The good colors – Full spectrum – OKLCH 注目の色「OKLCH色空間」によるカラーパレット作成ができるツール。一般的なLCHとOKLCH色の比較の通り、より「いい感じの色合い」で、明度と彩度のトーンがあった美しい配色を生成し
ゆっくり解説動画を一瞬で作れるAIアプリ「NoLang」の使い方まとめ
「NoLang」は「○○の解説動画を作って」と入力するだけで解説動画を作成できるウェブアプリです。新たに、画面端にキャラクターを2体配置して対話形式で物事を解説する「ゆっくり解説」形式の動画が作成可能になったので、実際に試してみました。 【🔥重大発表】🐬NoLang 2.0をリリースしました！！ ついに、「ゆっくり解説」形式の動画生成や縦型ショート動画の作成が可能に！ 他にも動画の長さ指定、プロンプトによるスタイル制御、画像生成AIなど新機能が目白押し。 圧倒的進化を遂げたNoLangを是非お試しください！https://t.co/WcRBvKLhP1 pic.twitter.com/JOFN8t45KK— マーベリック|生成AI@NoLang (@sayhi2ai_jp) July 7, 2024 ・目次 ◆1：NoLangのアカウント登録 ◆2：「ゆっくり解説」形式の動画を作る設定
CSS のカスケードレイヤー `@layer` を使ってスタイルを階層化して管理する
CSS のカスケードレイヤー `@layer` を使ってスタイルを階層化して管理する 2024.06.30 CSS の `@layer` ルールは、カスケードレイヤーを宣言するために使用されます。カスケードレイヤーとは、スタイルの優先度をレイヤー（階層）に分けて管理する仕組みです。`@layer` ルールを使用することでスタイルの記述順や詳細度に関係なくスタイルを宣言できるため、新しい形式の CSS 設計を実現することができます。 CSS の @layer ルールは、カスケードレイヤーを宣言するために使用されます。カスケードレイヤーとは、スタイルの優先度をレイヤー（階層）に分けて管理する仕組みです。@layer ルールを使用することでスタイルの記述順や詳細度に関係なくスタイルを宣言できるため、新しい形式の CSS 設計を実現できます。 @layer ルールは CSS カスケーディングレベル
【VSCode】オススメの拡張機能と設定 - Qiita
{ "editor.formatOnSave": false, "editor.formatOnPaste": false, "editor.formatOnType": false, } この記事で紹介している拡張機能のIDは、記事の最後にまとめています。また、設定の方法については設定のやり方に記述しています。 以下は、この記事で紹介する拡張機能のカテゴリ一覧です。 設定ファイル関連(Yaml, Json, Toml) Git関連 Markdown関連 カラー系 API関連 コンテナ その他便利な拡張機能 ネタ系 設定ファイル関連(Yaml, Json, Toml) 特にYamlやJsonはどのプロジェクトでも使用する可能性が高いので、必須の拡張機能となってくるかと思います。 Prettier esbenp.prettier-vscode jsonだけの設定では、VSCodeの設定ファイ
CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames
CSSのclass名やJavaScriptの関数名を付けるときに悩んだり、ネタ切れになったことはありませんか？ BEM, OOCSS, SMACSSで命名する場合はそれを使用すればよいのですが、特定のテーマ別にグループ化された単語のリストが必要になるときもあります。そんなときに役立つ単語リストをまとめたClassnamesを紹介します。 Classnames Classnamesは、CSSのclass名やJavaScriptの関数名を付けるときに便利な単語をリスト化したものです。MITライセンスで、商用プロジェクトでも無料で利用できます。
【無料】ずるいけど便利すぎるPhotoshopモックアップ素材50選【2024年版】
「つくったデザインをもっと魅力的にみせたい」 「クライアントやお客様が納得するビジュアルが欲しい」 「最終的なデザイン完成予想がなかなか伝わらない」 商品やブランド、Webサービス、パッケージ制作などのプロモーションやプレゼンテーションを行う時に、あなたもきっと悩んだことがあるでしょう。 しかし日々の業務に追われるクリエイターにとって、あまり時間をかけることができないのも事実。 そんな時に活用したいのがフォトショップの「モックアップ」素材です。 画像を配置するだけで完成のラクラク編集で、作業はほんの数クリックのみ。 まるで本当に撮影したようなリアルな仕上がりを、誰でも簡単に手に入れることができます。 前回のまとめからおよそ1年ぶりとなる今回は、2024年上半期に見つけた無料モックアップを中心にご紹介します。 目次モックアップとはモックアップの使い方すべて無料、だけど英語Adobe Stoc
無料で音声からバックグラウンドノイズを除去してくれるAIツール「Voice Isolator」をElevenLabsが公開
著名人の声を再現したAI音声による読み上げツールなどを開発するElevenLabsが、音声からバックグラウンドノイズをきれいに除去するAIツール「Voice Isolator」をリリースしました。Voice Isolatorはデモページから無料で試してみることも可能とのことで、実際にどれほど効果的にノイズを除去できるのか試してみました。 Free Voice Isolator and Background Noise Remover | ElevenLabs https://elevenlabs.io/voice-isolator ElevenLabs launches free AI voice isolator to take on Adobe | VentureBeat https://venturebeat.com/ai/elevenlabs-launches-free-ai-vo
ChatGPTでSEOを効率化するアイデア9選【プロンプト付き】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
インハウスマーケティング部・SEO担当の井上です。 今年5月、Google検索でAIによる回答を表示する「AI Overview」が正式にリリースされるなど、SEO界隈においても生成AIはさまざまな影響を与えています。僕自身も普段の業務で生成AIを使用することが増えており、今や仕事に欠かせないパートナーとなりつつあります。 そこで今回は僕自身も普段使っている、ChatGPTを活用したSEO業務の効率化アイデアを9個ご紹介します。リサーチ、ライティング、分析・コーディングと用途別に分けてご紹介しますので、ご参考になると幸いです。 SEO関連のリサーチで活用する方法3選 1.キーワードのアイデアを出す SEO記事の制作にあたり、どんなキーワードを対策すればいいのかヒントをもらうのに活用しています。たとえば「Web制作のお問い合わせを伸ばすために必要なSEO記事のキーワードを教えて」のような簡単
Bartenderの代替に！ macOSのメニューバーのアイコンを常に表示・非表示にできるオープンソースのアプリ -Ice
macOSのメニューバーにたくさんのアイコンが表示されて邪魔！ という人に便利な無料アプリを紹介します。 アイコンは常に表示するアイコン、基本非表示でクリックやホバーで表示するアイコンにすることができ、簡単に言うとBartenderのようなことができます。私はBartenderを長く使用していましたが、この記事で紹介するIceに変更しました。 「…」の右が常に表示、左が非表示でクリック・ホバーで表示されます。 Ice -Menu Bar Manager Ice -GitHub Iceの特徴 Iceのダウンロードとインストール Iceの使い方 Iceの特徴 Iceは、macOSのメニューバーを管理するオープンソースの無料アプリです。主な機能は、メニューバーに表示されているアイコンの表示・非表示ですが、ほかにも便利な機能が備わっています。 対応OSは、macOS 14（Sonoma）です。ライ
欧文フォントの王様「Helvetica（ヘルベチカ）」のおすすめ代替フォント20選
世界でもっとも使用されている書体のひとつ「Helvetica（ヘルベチカ）」。 「特徴がないのが特徴。」と言われ、シンプルな見た目でありながらあらゆる用途で利用でき、出版や広告、クリエイティブな業界では超がつくほどの定番書体です。 マイクロソフトや無印良品、パナソニックやBMWといった世界的企業ロゴにも採用されていますが、「ヘルベチカ、使われすぎじゃない？」と利用を避けているデザイナーがいるのも事実。 この記事では、ヘルベチカと似た特徴を持ちながら、それほど使われていないサンセリフ書体20選をご紹介します。 商用ライセンスの有無も記載していますが変更される恐れがあります。利用規約を読んで使うようにしましょう。 日本語フリーフォント（7個） Aktiv Grotesk 9つのウェイト、イタリック体を含む18フォントが揃った書体セット。Adobe Fontsで無料ダウンロードでき、商用利用可。
無料でサクッと予約システムが作れる「SelectType」でメンバー機能をフル活用してメンバーページの提供やサブスク・回数券販売などやってみた
「SelectType」はウェブサイト構築についての専門知識がなくても、手軽に高機能なオンライン予約システムを作成できるツールです。SelectTypeではオンライン予約システムと連携できる「メンバー機能」を使い、以下のようなサービスを提供することができます。 ・顧客に専用のメンバーページを提供する ・顧客の予約時に登録情報を自動入力する ・顧客をランク別にカテゴライズして細かいサービスを提供する ・サブスクリプションサービスや回数券を販売する これらの便利なサービスを予約システムを通じて提供すれば、顧客を囲い込んでリピート率を高めることが期待できるというわけで、実際にSelectTypeのメンバー機能を使ってみました。 予約システムつきホームページ【SelectType】 無料で予約フォーム付き予約システム／イベント・セミナー管理システム／各種フォーム作成 https://select-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ゴシック体の素晴らしい世界が広がる！ 商用利用無料、可読性に優れたフリーフォント「永代ゴシック」がリリース
エンジニアにも知って欲しいChatGPT基本テクニック - Qiita
2024年6月にXに投稿したCSSテクニックのまとめ – TAKLOG
