CSS変数がもっと便利になる新しい記述方法、CSSの次世代変数@propertyがすべてのブラウザにサポートされました
CSSの@propertyがFirefoxにサポートされ、デスクトップ・スマホのすべてのブラウザでサポートされました。 @propertyは次世代変数と呼ばれるもので、これまでの変数（カスタムプロパティ）の使い勝手が大幅に向上します。@propertyによるカスタムプロパティの記述方法、@propertyを使ったCSSのテクニックを紹介します。 @property: Next-gen CSS variables now with universal browser support by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに @propertyのメリット @propertyによるカスタムプロパティの記述方法 @propertyの使い方: きらめくグ
音声AI「ElevenLabs」が今後のコンテンツ作りに変革をもたらすかもしれない | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGの「生成AIコンサルティング」チームのかけるです。 ChatGPTやMidjourneyの登場によって、テキスト生成や画像生成に注目が集まっていましたが、最近では、「音声生成」の領域でも実務レベルで使える生成AIサービスが生まれ始めています。 今回は、数ある音声AIサービスのなかでも、実際に使ってよかった音声AI「ElevenLabs」の機能についてまとめてみました。 「ElevenLabs」とは？ 元Googleの機械学習エンジニアと元Palantir（ピーター・ティールが設立したデータ分析企業）のデプロイメントストラテジストの2人が創業。AIを活用した音声合成、音声変換、吹き替えを生成する音声AIプラットフォーム。最大の特徴として、元となるユーザーの声色やトーンの特徴を維持しながら、音声クローンを生成できる。 今後、生成AI時代のコンテンツ作りを模索していく上で、「E
Webサイトでよく使用されるUIコンポーネントをコピペで簡単に実装できる -IndieUI
Webサイトでよく使用されるグリッド、カード、ボタン、ヘッダ、セパレータなどのUIコンポーネントをコピペで簡単に実装できるコードをまとめたIndieUIを紹介します。 たとえばボタンだと、基本となるベースのボタンをはじめ、シンプルなものからトレンドを取り入れたもの、きらめき効果や光沢感やグラデーションをアニメーション化したボタンなどが揃っています。 Indie UI Indie UI -GitHub IndieUIの特徴 IndieUIで実装したUIコンポーネント IndieUIの使い方 IndieUIの特徴 IndieUIはWebサイトでよく使用されるUIコンポーネントを迅速かつ最小限の労力で構築するのに役立つコードをまとめたサイトです。コードをコピペするだけで簡単に実装できます。 IndieUIのUIコンポーネントには、シンプルなものからトレンドを取り入れたものまで揃っており、必要に応
Webサイトを使いやすく改善する、知っておくと便利なCSSのテクニック
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. アニメーションと動
CSS Gridの便利な無料ツールが登場！ レイアウトを確認しながら、コードを生成できる -CSS Grid Generator
最近のWebサイトやスマホアプリでよく使用されるお弁当箱のようなBento UIやカード型、ヘッダ・サイドバー・メイン・フッタなどのレイアウトを確認しながら、CSS Gridのコードを生成できる無料オンラインツールを紹介します。 使い方は非常にシンプルで簡単、生成されるコードもシンプルでさまざまなプロジェクトで利用できます。 CSS Grid Generator Bento UIの実装については、Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUIをご覧ください。 CSS Grid Generatorは、CSS Gridで実装するレイアウトのコードを簡単に生成できるオンラインツールです。このジェネレーターを使用すると、列数・行数・ギャップサイズを設定し、自由にレイアウトを構築できます。
:has()を使ってCSSだけで同意チェックボタンを実装する方法｜BLACKFLAG
CSSの疑似クラス「:has()」がモダンブラウザで使えるようになり、今までJavaScriptを使わないと実装できなかったようなものでも、CSSだけで実現できる幅が広がりました。 そんなCSSの「:has()」を使って、お問い合わせページなどでよく見かける、利用規約など個人情報の同意チェックボックスのチェックの有無で送信ボタンの活性（押せる状態）と非活性（押せない状態）を切り替える動作を、JavaScriptを使わずに実装する実験をしてみたので紹介してみます。 :has()を使ってCSSだけで同意チェックボタンを実装 まずは、JavaScriptを使わずにCSSの疑似要素「:has()」を使って、同意チェックボックスのチェック有無によって、ボタンの活性／非活性を切り替える動作サンプルです。 See the Pen CSS only Agree Check by BLACKFLAG (@B
VSCodeで、html:5と入力した時、lang=”en” を lang=”ja” にする方法
Visual Stadio Code(の言語モードHTML)で、html:5 または ! と入力し、Tabキーを押して、htmlテンプレートを作成するとき、 <html lang=”ja”>にする方法を説明しますね。 デフォルトだと、 <html lang=”en”> になってしまい、 <html lang=”ja”> に修正しなければならないので、ちょっと不便です。 すっごく簡単にできます。 方法 手順は以下のとおりです。 動画でやっていることを説明すると、以下のとおりになります。 メニューバーから[ファイル] → [ユーザー設定] → [設定]を開き、 [設定の検索]に、variables と入力し、 [項目の追加]を、クリックし、 項目 lang 、値 ja にして、[OK]をクリックします。 これで、<html lang=”ja”>で、ひな形を作成してくれます。 ということで、やっ
【最新】Swiperの使い方・カスタマイズを解説！サンプルやオプション15個付き ー基礎から応用までー | 東京のホームページ制作 / WEB制作会社 BRISK
TOPブログ【最新】Swiperの使い方・カスタマイズを解説！サンプルやオプション15個付き ー基礎から応用までー Webサイトのコーディングをするなら必修とも言えるスライダー。 スライダー実装用のJSプラグインはいろいろありますが、本記事ではその中でもSwiperを使用した実用的なカスタマイズ例をご紹介します。 デモページを見る まずはこちらのデモページをご覧ください。 片方だけはみ出しているスライダー、サムネイルと連動するスライダー、SPだけスライダーにする方法などなど、実際によく必要になる機能を網羅できるようなデモを厳選してご用意しました。 初心者さん向けのかなり初歩的な内容から、いろいろカスタマイズを加えた応用編まで解説していきます。 メインビジュアルの作例5つ（#11 ～ #15）については、Swiperのカスタマイズ方法だけでなく、アニメーションやデザインの参考になればと思い様
【jQuery】アコーディオン実装サンプル10選 | 125naroom / デザインするところ（会社）です。
<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 タグ details タグと summary タグを使って以下のような HTML コードを書くと、お手軽にアコーディオン動作する FAQ を作ることができます。 <details> <summary>決められた曜日・時間に毎週通わなくてもよいのですか？</summary> <p>はい。受講される方一人ひとりのご都合に合うように受講日程を相談させていただきます。曜日・時間は週によって違ってもOKですし、通わない週があってもOKです。</p> </details> <details> <summary>最初に4時間の予約が必要ですか？</summary> <p>原則的に事前に4時間分を予約していただきます。事前予約が難しい場合はその都度のご予約も可能ですが、余った時間は翌月に繰り越しできません。</p> </deta
details・summaryタグで開閉アニメーション付きアコーディオンUIを作ろう
記事を読むうえでの注意点 一部おかしな記述があるかもしれません。 そのためもし間違いなどがありましたらご指摘いただけると幸いです。 FAQなんかのUIでよく使われる、クリックしたら関連するコンテンツがニュッと表示されるアレ。 みなさんは普段どのように実装されていますか？ アコーディオンUIを実装するにあたって、マークアップに最適なタグとしてdetailsとsummaryがあると知りまして、このタグを使って実装してみたいと思います。 実装してみた まずは結論から。 実際に今回実装していくアコーディオンUIのソースコードはこちらです。 details・summaryタグは何が良いの？ details summaryタグを使用しない実装では、アクセシビリティな実装をする場合、考慮する事項が多く、網羅しようと思うと工数がかかります。 ですが、details summary要素を使用することでアクセ
Webページ用UIフレームワーク「Svelte」とは？ プレーンで軽量なJavaScript生成を体験しよう！
「Svelte」はWebページ用UIフレームワークで、コンパイル時にプレーンなJavaScriptを生成するといった特徴があります。本連載ではSvelteの活用方法を順を追って説明していきます。初回となる今回は、Svelteの概要と特徴を説明するとともに、実際にプロジェクトを作成して実行させ、Svelteを体験します。 はじめに WebページのUIを構築するためのライブラリやフレームワークは、ReactやVue.js、Angularといったさまざまなものが存在します。本記事で取り上げるSvelteも、そのようなフレームワークの1つです。 図1 Svelteの公式ページ 他のライブラリやフレームワークでは、それ自体のコードがブラウザーに読み込まれて実行されるのに対して、Svelteでは、Svelte自身のコードを含まないプレーンなJavaScriptをコンパイルで生成するため、実行ファイルサ
2024年版最近の実装に合わせた、HTMLでWebページを実装するための必要最小限をまとめたテンプレート一式
Webページを作成する時に役立つ、HTMLをはじめとする必要最小限のファイルをまとめたシンプルな基本テンプレート一式を紹介します。 最新版は、最近の実装に合わせた設計にアップデートされました。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による10年間の分析・研究・実験を元にしています。 ブラウザの見え方を最適化 プログレッシブエンハンスメントを念頭において設計されています。 インクルード 推奨されるmetaタグやその他の利点を備えたH
【Dart/Flutter】Shift-JISでストレージにファイルを出力 - Qiita
何を解決する記事か？ 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設定についてエンジニアのヴィヴェク・ガイト氏が解説しています。 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ページを開く
zsh compinit: insecure directories, run compaudit for list. の対処法 | ポチポチのメモ帳
「Svelte」の活用に不可欠──プロジェクト構成とコンポーネント利用法を解説！
ゴシック体の素晴らしい世界が広がる！ 商用利用無料、可読性に優れたフリーフォント「永代ゴシック」がリリース
PoGoskill - ポケモンGO専用の位置偽装ソフト！iOS/Android対応
GitHub - DE127/NoPeek: noPeek - A most effective way to protect your online content from being copied or grabbed