今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしくは数行のCSSで簡単に実装できるようになりました。 2024年、Web制作者がチェックしておきたいCSSの新機能を紹介します。 CSS Wrapped 2024 CSS Wrapped 2024 -GitHub 下記は各ポイントを意訳したものです。 ※元サイト様のApache License 2.0に基づいて翻訳しています。 はじめに コンポーネント: field-sizingプロパティ コンポーネント: interpolate-sizeプロパティ コンポーネント: details要素 コンポーネント: details要素のスタイル コンポーネント: Anchor positioning インタラクション: スクロールバーのスタイル インタラクション: @v

ちょっと良いUIおれおれAdvent Calendar 2024 – 18日目 端から全部読み込むと、場合によっては訪問者リソースの負担になるだけでなく早く見せたい部分の読み込み速度にも影響しちゃったりするので、一覧をスクロールして順々に見てくときは画像その他の読み込みを後回しになってると助かります。 いちおう HTML だけでもできて、まあ常に効果的というわけでもないですが、簡単なので選択肢に入れておくと何かのときに役立つかもです。 loading="lazy" で後回し 画像の <img> タグに loading="lazy" を付けるだけで後回しになります。かんたーん。 スクロールや開閉で見えるように ここで「後回し」とは、スクロールとかで見えるようになるまで読み込みを行わないという動作を指します。最初から見えていれば最初から読み込まれます。 スクロール以外に例えば <details

CSSのスゴ技を見つけたので、紹介します。 画像は観葉植物のシルエットだけ、壁、サッシ、そして柔らかな日差しのアニメーションもCSSで実装されています。CSSで複数のぼかしを作り、CSSの回転・拡大縮小を利用してシルエッ...記事の続きを読む

ちょっと良いUIおれおれAdvent Calendar 2024 – 17日目 表が大きくてスクロールするとき、各行列の見出しは常に見えていてほしいなと思っています。かつては JavaScript でごりごりやるしかありませんでしたが、現在は CSS でまあまあ簡単にできるのでやっておいてもらえませんか。 デモ： https://codepen.io/ginpei/pen/azopGjJ position: sticky で固定 文章の見出しと同様、表の見出し（という表現で正しいのか知らんですけど）も position: sticky で固定できます。 縦横を考えるとちょっとややこしいですがまあやれないことはないです。 それより罫線が出てこないという問題があります。これは border-collapse: collapse が指定されているときに発生します。対応策としては、あんまりコードも

こんにちは！ インハウスデザイナーのまっつーです。 2024年も残すところあとわずかですね。 今年のWebデザイン業界は、生成AIの進化で制作方法が大きく変わった一方で、手書き風のイラストやノスタルジックデザインなど、人間らしい温かみのあるWebサイトを多く見かけました。デジタルな表現と人間的な表現が共存した興味深い一年だったように思います。 そんな激動だった2024年のWebデザイントレンドを15個にまとめたので、一気に振り返っていきましょう！ ※今回はこちらの記事を参考にしています。 9 innovative web design trends for 2024 7 emerging web design trends for 2024 and beyond Top Web Design Trends 2024 The biggest, boldest web design trend

布地、織物、格子柄、タイル、唐草模様、フェルト、リネン、紙、糸、アスファルト、レンガ塀、コンクリート、波形、吹雪、ストライプ、カーボン、等高線、ランドルト環、チェックなど、透過で利用できる繊細なテクスチャ素材を紹介します...記事の続きを読む

ちょっと良いUIおれおれAdvent Calendar 2024 – 16日目 マウスカーソル載せたりタップしたりのタイミングでちょっと opacity いじったりするじゃないですか。あんな感じのノリで :disabled のときにボタンで使ってる画像をグレーにしておくと見た目わかりやすくて良いんじゃないかなと思います。 デモ： https://codepen.io/ginpei/pen/LEPxVao filter: grayscale(1) でグレーに なります。

ちょっと良いUIおれおれAdvent Calendar 2024 – 14日目 知ってはいたものの自分は使ってなかったので完全に意識の外でした。最近作ったやつのフィードバックで教えてもらって気付いた。ブラウザー規定の初期色に知らない間に部分的に依存してるとやばい配色になりがち。 デモ： https://codepen.io/ginpei/pen/vEByemo 確認は簡単 デバイスでダークモードを設定してみるだけなんで簡単です。だいたいアクセスしやすい場所に設定ありますよね。いやそれは個人設定次第か。 DevTools からも一時的にエミュレートすることができます。DevTools の “…” のボタンから More tools > Rendering 、チェックボックス群の先までスクロールして “Emulate CSS media feature prefers-color-scheme

2024年もいよいよ年の瀬ですね、今年リリース・アップデートされたひらがな・カタカナ・漢字が使える日本語の新作フリーフォントを紹介します。 ゴシック、明朝、デザインフォント、手書きフォントなど、盛りだくさんです！ これまでの日本語フリーフォント総まとめは、下記をご覧ください。 日本語のフリーフォント総まとめ -商用サイトだけでなく紙や同人誌などの利用も明記 後日、上記に追加します。 まずは、今年個人的に一番気に入ったフォントから。 角丸と墨だまりの処理が施された、柔らかで穏やかな見出し用ゴシック体。 紙モノゴシック 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 印刷物での使用を目的にデザインされた、見出し用ゴシック体フォント。横画の両端と縦画の始筆部が末広がりになっているため、印刷物でもしっかりと存在感を残します。ひらがな・カタカナ・英数記号文字に加え、漢字も収録されています

ちょっと良いUIおれおれAdvent Calendar 2024 – 11日目 普通にフォームをマークアップすれば Enter キーで送信できるようになるんですが、なんかそうなってない場合があります。しときましょう。 デモ： https://codepen.io/ginpei/pen/MYgjgXP <form> で括る Enter キーで送れるようにするには、単に <form> 要素で括るだけです。簡単です。やらない理由がない。 JavaScript からは submit イベントを使う ボタンのクリックではなくフォーム送信 submit のイベントを使います。ボタンはイベント管理する必要ありません。 JS で全部管理する場合は HTML レベルでの送信を event.preventDefault() で止めます。 逆に送信しないボタンは type="button" にする フォーム内の

スマホで高さいっぱいにしたい時に、100vhが高さいっぱいにならず頭を悩ませていたときに、100svh, 100lvhの動的ビューポート単位が登場して、一時は解決したかに思いました。しかし、これらの単位だけではスマホでバーチャルキーボードなどを表示すると期待通りに機能しません。 このバーチャルキーボード表示時に頭を悩ませていた人に朗報です。CSSのinteractive-widgetキーワードを使用すると、この問題がすっきり解決します。 Control the Viewport Resize Behavior on mobile with interactive-widget by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに デフォルトのビューポートのサイズ変更動作 metaタグのinteracti

髪の毛や毛皮、低照度画像、透明・半透明のオブジェクトなど背景とオブジェクトの判別が難しい写真でも完璧に背景の透過ができるというAIソフトウェアが「Aiarty Image Matting」です。32万枚の4K画像でトレーニングしたという4つのAIモデルを駆使して精巧な背景透過を実現しているということだったので、実際に使ってみました。 【公式】Aiarty Image Matting - どんな画像も切り抜き・背景透過・背景変更・高画質化AI https://jp.aiarty.com/aiarty-image-matting/ 「Aiarty Image Matting」でどんな背景透過画像を作成できるかは、以下の事例を見れば一発でわかります。 ・目次 ◆1：Aiarty Image Mattingのインストール手順 ◆2：Aiarty Image Mattingの使い方 ◆3：背景透過事

ウェブサイトやアプリなどでアニメーションするイラストを目にすることがよくあります。クリックしたらアニメーションする「いいね」アイコン、ローディング画面など、最近はインタラクティブでリッチなアニメーションを取り入れたものが多いです。 このようなアニメーションを作るツールとしてLottieが有名ですが、Riveというツールがあるのをご存知でしょうか？ Lottieもとても便利なツールですが、RiveにはLottieにはない魅力があります。今回はこのRiveのメリットやデメリット、実際にRiveで作ったデモをご紹介します！ Riveとは？ Riveはアニメーションを作成できるデザインツールと、それを多様なプラットフォームで実行できるランタイムです。最大の特徴はインタラクションをツール上で作れることです。オンラインエディター、またはダウンロードページからダウンロードしたデスクトップアプリがあります

ちょっと良いUIおれおれAdvent Calendar 2024 – 05日目 フォーム送信を HTML ではなく JavaScript から管理するとき、応答待ちの間はくるくるを出すのと合わせて各種入力を非活性化しておいてほしいなと思います。何か条件を満たすまで利用できないようにしておくとかも。 でも入力欄が 100 個あると全部に disabled 付けるのダルいですよね。<fieldset> を使うとひとつで済みます。あきらめないで！ デモ https://codepen.io/ginpei/pen/ByBjLYR <fieldset> <fieldset>: フィールドセット要素 – HTML: ハイパーテキストマークアップ言語 | MDN <fieldset> はフォームのグループ化を行う要素です。普通は（本来は？） <legend> と組み合わせて使います。 disabled

Googleはインターネット上のあらゆるウェブサイトをクロールして検索インデックスを作成し続けていますが、各ウェブサイトの全ページをクロールしているわけではなく、ウェブサイトに応じてクロールするページの上限数を決めています。このページ上限数は「クロールバジェット」と呼ばれており、Googleの公式ドキュメントには「限りあるクロールバジェットを有効に活用するために確認するべき事項」がまとまっています。 大規模サイトのクロール バジェット管理 | Google 検索セントラル  |  ドキュメント  |  Google for Developers https://developers.google.com/search/docs/crawling-indexing/large-site-managing-crawl-budget?hl=ja Googleのクローラー(Googlebot)は、

JPChainが開発・運営する音声合成AIプロジェクト「Aivis Project」で提供される「AivisSpeech」は、無料で誰でも簡単に使える音声合成ソフトウェアです。人間の声と区別できないほどに感情豊かで高音質＆高品質な音声を合成でき、個人・法人・商用を問わず、基本的にクレジット不要で自由に使うことができるとのことで、実際に使ってみました。 Aivis Project | AivisSpeech でかんたんに感情豊かな音声合成、使ってみませんか？ https://aivis-project.com/ Aivis Projectは、感情豊かな音声合成技術を"誰もが"気軽に使えるというミッションを持ってつくっています。 利用料を完全無料にしているのは、この素晴らしい技術を皆様に知っていただきたいからです。 機能拡充も爆速で行っていきます！ぜひ一度お試しを！— Hayato Omori

こんにちは！ インハウスマーケティング部のりこぴんです。 Webサイトのサイトマップやワイヤーフレームを考えるのって重要でありながら、とても時間がかかりますよね。 今回はプロンプトを入力するだけで一瞬でサイトマップとワイヤーフレームを作成してくれる生成AI「Relume」の使い方をご紹介します。 Webサイトの構成を少しでも効率化したいという方はぜひ試してみてください！ Relumeってなに？ Relumeとは Relumeとは、Webサイトを効率的に作成するために設計された生成AIです。大きな特徴は、Webサイトの概要を簡単に入力するだけで、AIが瞬時にサイトマップやワイヤーフレームを生成してくれること。 さらに、FigmaやWebflowなどのデザインツールと連携して編集することもできます。 サイトマップやワイヤーフレーム作成の効率化のために使用されることが多く、今注目を集めている生成

ちょっと良いUIおれおれAdvent Calendar 2024 – 02日目 よくあるけど配送番号みたいな識別子とか。 デモ： https://codepen.io/ginpei/pen/RNbPxvj 数値入力は <input type="number"> はい。 数字入力は <input type="text" inputmode="numeric"> でお願いします。 現代のスマホだとバーチャルキーボードが数値入力 (numeric input) に変化します。 似たものに inputmode="decimal" というのがあって、こっちは decimal なので小数値入力 fractional numeric input できるようドット “.” 付きのキーボードになったりするようです。デモで試してみてください。 他の値 inputmode は他にも email とか url と