CSSの@propertyがFirefoxにサポートされ、デスクトップ・スマホのすべてのブラウザでサポートされました。 @propertyは次世代変数と呼ばれるもので、これまでの変数(カスタムプロパティ)の使い勝手が大幅に向上します。@propertyによるカスタムプロパティの記述方法、@propertyを使ったCSSのテクニックを紹介します。 @property: Next-gen CSS variables now with universal browser support by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに @propertyのメリット @propertyによるカスタムプロパティの記述方法 @propertyの使い方: きらめくグ
こんにちは、LIGの「生成AIコンサルティング」チームのかけるです。 ChatGPTやMidjourneyの登場によって、テキスト生成や画像生成に注目が集まっていましたが、最近では、「音声生成」の領域でも実務レベルで使える生成AIサービスが生まれ始めています。 今回は、数ある音声AIサービスのなかでも、実際に使ってよかった音声AI「ElevenLabs」の機能についてまとめてみました。 「ElevenLabs」とは? 元Googleの機械学習エンジニアと元Palantir(ピーター・ティールが設立したデータ分析企業)のデプロイメントストラテジストの2人が創業。AIを活用した音声合成、音声変換、吹き替えを生成する音声AIプラットフォーム。最大の特徴として、元となるユーザーの声色やトーンの特徴を維持しながら、音声クローンを生成できる。 今後、生成AI時代のコンテンツ作りを模索していく上で、「E
Webサイトでよく使用されるグリッド、カード、ボタン、ヘッダ、セパレータなどのUIコンポーネントをコピペで簡単に実装できるコードをまとめたIndieUIを紹介します。 たとえばボタンだと、基本となるベースのボタンをはじめ、シンプルなものからトレンドを取り入れたもの、きらめき効果や光沢感やグラデーションをアニメーション化したボタンなどが揃っています。 Indie UI Indie UI -GitHub IndieUIの特徴 IndieUIで実装したUIコンポーネント IndieUIの使い方 IndieUIの特徴 IndieUIはWebサイトでよく使用されるUIコンポーネントを迅速かつ最小限の労力で構築するのに役立つコードをまとめたサイトです。コードをコピペするだけで簡単に実装できます。 IndieUIのUIコンポーネントには、シンプルなものからトレンドを取り入れたものまで揃っており、必要に応
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. アニメーションと動
最近のWebサイトやスマホアプリでよく使用されるお弁当箱のようなBento UIやカード型、ヘッダ・サイドバー・メイン・フッタなどのレイアウトを確認しながら、CSS Gridのコードを生成できる無料オンラインツールを紹介します。 使い方は非常にシンプルで簡単、生成されるコードもシンプルでさまざまなプロジェクトで利用できます。 CSS Grid Generator Bento UIの実装については、Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUIをご覧ください。 CSS Grid Generatorは、CSS Gridで実装するレイアウトのコードを簡単に生成できるオンラインツールです。このジェネレーターを使用すると、列数・行数・ギャップサイズを設定し、自由にレイアウトを構築できます。
CSSの疑似クラス「:has()」がモダンブラウザで使えるようになり、今までJavaScriptを使わないと実装できなかったようなものでも、CSSだけで実現できる幅が広がりました。 そんなCSSの「:has()」を使って、お問い合わせページなどでよく見かける、利用規約など個人情報の同意チェックボックスのチェックの有無で送信ボタンの活性(押せる状態)と非活性(押せない状態)を切り替える動作を、JavaScriptを使わずに実装する実験をしてみたので紹介してみます。 :has()を使ってCSSだけで同意チェックボタンを実装 まずは、JavaScriptを使わずにCSSの疑似要素「:has()」を使って、同意チェックボックスのチェック有無によって、ボタンの活性/非活性を切り替える動作サンプルです。 See the Pen CSS only Agree Check by BLACKFLAG (@B
Visual Stadio Code(の言語モードHTML)で、html:5 または ! と入力し、Tabキーを押して、htmlテンプレートを作成するとき、 <html lang=”ja”>にする方法を説明しますね。 デフォルトだと、 <html lang=”en”> になってしまい、 <html lang=”ja”> に修正しなければならないので、ちょっと不便です。 すっごく簡単にできます。 方法 手順は以下のとおりです。 動画でやっていることを説明すると、以下のとおりになります。 メニューバーから[ファイル] → [ユーザー設定] → [設定]を開き、 [設定の検索]に、variables と入力し、 [項目の追加]を、クリックし、 項目 lang 、値 ja にして、[OK]をクリックします。 これで、<html lang=”ja”>で、ひな形を作成してくれます。 ということで、やっ
TOPブログ【最新】Swiperの使い方・カスタマイズを解説!サンプルやオプション15個付き ー基礎から応用までー Webサイトのコーディングをするなら必修とも言えるスライダー。 スライダー実装用のJSプラグインはいろいろありますが、本記事ではその中でもSwiperを使用した実用的なカスタマイズ例をご紹介します。 デモページを見る まずはこちらのデモページをご覧ください。 片方だけはみ出しているスライダー、サムネイルと連動するスライダー、SPだけスライダーにする方法などなど、実際によく必要になる機能を網羅できるようなデモを厳選してご用意しました。 初心者さん向けのかなり初歩的な内容から、いろいろカスタマイズを加えた応用編まで解説していきます。 メインビジュアルの作例5つ(#11 ~ #15)については、Swiperのカスタマイズ方法だけでなく、アニメーションやデザインの参考になればと思い様
<div class="accordion_one"> <div class="accordion_header">アコーディオン、シンプル版 <div class="i_box"><i class="one_i"></i></div> </div> <div class="accordion_inner"> <div class="box_one"> <p class="txt_a_ac">アコーディオンの中身です。</p> </div> </div> </div> $(function(){ //.accordion_oneの中の.accordion_headerがクリックされたら $('.s_01 .accordion_one .accordion_header').click(function(){ //クリックされた.accordion_oneの中の.accordion_head
お手軽にアコーディオンを作ることができる details / summary タグ details タグと summary タグを使って以下のような HTML コードを書くと、お手軽にアコーディオン動作する FAQ を作ることができます。 <details> <summary>決められた曜日・時間に毎週通わなくてもよいのですか?</summary> <p>はい。受講される方一人ひとりのご都合に合うように受講日程を相談させていただきます。曜日・時間は週によって違ってもOKですし、通わない週があってもOKです。</p> </details> <details> <summary>最初に4時間の予約が必要ですか?</summary> <p>原則的に事前に4時間分を予約していただきます。事前予約が難しい場合はその都度のご予約も可能ですが、余った時間は翌月に繰り越しできません。</p> </deta
記事を読むうえでの注意点 一部おかしな記述があるかもしれません。 そのためもし間違いなどがありましたらご指摘いただけると幸いです。 FAQなんかのUIでよく使われる、クリックしたら関連するコンテンツがニュッと表示されるアレ。 みなさんは普段どのように実装されていますか? アコーディオンUIを実装するにあたって、マークアップに最適なタグとしてdetailsとsummaryがあると知りまして、このタグを使って実装してみたいと思います。 実装してみた まずは結論から。 実際に今回実装していくアコーディオンUIのソースコードはこちらです。 details・summaryタグは何が良いの? details summaryタグを使用しない実装では、アクセシビリティな実装をする場合、考慮する事項が多く、網羅しようと思うと工数がかかります。 ですが、details summary要素を使用することでアクセ
「Svelte」はWebページ用UIフレームワークで、コンパイル時にプレーンなJavaScriptを生成するといった特徴があります。本連載ではSvelteの活用方法を順を追って説明していきます。初回となる今回は、Svelteの概要と特徴を説明するとともに、実際にプロジェクトを作成して実行させ、Svelteを体験します。 はじめに WebページのUIを構築するためのライブラリやフレームワークは、ReactやVue.js、Angularといったさまざまなものが存在します。本記事で取り上げるSvelteも、そのようなフレームワークの1つです。 図1 Svelteの公式ページ 他のライブラリやフレームワークでは、それ自体のコードがブラウザーに読み込まれて実行されるのに対して、Svelteでは、Svelte自身のコードを含まないプレーンなJavaScriptをコンパイルで生成するため、実行ファイルサ
Webページを作成する時に役立つ、HTMLをはじめとする必要最小限のファイルをまとめたシンプルな基本テンプレート一式を紹介します。 最新版は、最近の実装に合わせた設計にアップデートされました。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による10年間の分析・研究・実験を元にしています。 ブラウザの見え方を最適化 プログレッシブエンハンスメントを念頭において設計されています。 インクルード 推奨されるmetaタグやその他の利点を備えたH
何を解決する記事か? Dart/Flutter開発において、日本語文字列をShift-JISでエンコードしてテキストファイルを出力する方法を記載します。 (標準ではおそらく対処できず、一工夫します。) 結論 charset_converterライブラリ を使用して、下記のように処理します。 final encoded = await CharsetConverter.encode("Shift_JIS", contents); //encoding await File(filePath).writeAsBytes(encoded); //save contentsは書き込む本文、filePathは保存するパスです。いずれもString型です。 通常、テキストファイルの出力はFile.writeAsString関数を使用しますが、ここではライブラリを使用してバイト配列にエンコードした上でフ
メールを送る際、「送信元」欄にはどんな内容でも記入することが可能なため、簡単に他人になりすますことができます。誰かが自分の所有しているドメインになりすましてメールを送った時、受信者にそのメールが「なりすましメール」であることを伝えるためのDNS設定についてエンジニアのヴィヴェク・ガイト氏が解説しています。 DNS settings to avoid email spoofing and phishing for unused domain - nixCraft https://www.cyberciti.biz/security/dns-settings-to-avoid-email-spoofing-and-phishing-for-unused-domain/ ガイト氏の解説は「メールを使用していないドメイン」を対象に、「そのドメインがメールを送信しないこと」および「もしそのドメインか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く