ゴシック体の素晴らしい世界が広がる！ 商用利用無料、可読性に優れたフリーフォント「永代ゴシック」がリリース2024年用、日本語のフリーフォントをアップデートした際に好評だった「KTきよすなゴシック」をはじめ、可読性に優れたフリーフォントをリリースされている「こはくのタイプライブラリ」から、新作フリーフォントがリリースされまし...記事の続きを読む
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/ ガイト氏の解説は「メールを使用していないドメイン」を対象に、「そのドメインがメールを送信しないこと」および「もしそのドメインか
CSSでボタンを実装するときに記述しておくと便利なスタイルのまとめ
Webサイトやスマホアプリの実装に、ボタンは欠かせない要素の一つです。そんなボタンの実装に設定しておくと便利なCSSのスタイルを紹介します。 スマホでボタンをタップした際にズームなどの誤動作が起きないようにするCSS、ボタンのテキストが選択されてハイライトにならないようにするCSS、フォーカス時のアウトラインをより見やすくするCSS、ボタンの論理サイズを設定するCSSなど、デフォルトのスタイルとして設定しておくと便利です。 CSS Button Styles You Might Not Know by David Bushell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スマホでボタンをタップした際の誤動作を防止 ボタンのテキストの意図しない選択 ファイル選択のボタン ボタンをフォーカス時の視覚的なアウトライン
無料で600以上のAIアバターや豊富なテンプレートに加えて自分の声を簡単にクローンしてAI化した商用利用可能な動画も作成できる「Vidnoz AI」を使ってみたよレビュー
まるで本物の人間に見えるリアルなAIアバターや動く画像を作成し、英語や日本語など140カ国語以上の言語に対応したAI音声読み上げ機能で自然にしゃべらせ、680種類以上あるテンプレートを使って手軽にニュース映像のような動画を作れるAI動画作成ツールが「Vidnoz AI」です。カメラやマイクなどの専門機材や、出演者やナレーターといった専門のスタッフを用意しなくても手軽かつ低コストで動画作成が可能になるとのことなので、実際にどんな動画が作成できるのか試してみました。 Vidnoz AI：無料AI動画作成ツール｜AIで動画生成は1分でできる https://jp.vidnoz.com/ ・目次 ◆01：Vidnoz AIで作れる動画は？ ◆02：アカウントの作成方法 ◆03：Vidnoz AIを使って無料で動画を作ってみる ◆04：実際に動画を作成してみた ◆05：自分の顔写真をアバターにしてみ
【Cursor】AI搭載の最強コードエディタ！日本語の使い方や料金体系、できることを解説 | WEEL
Cursorの機能を軽く試す程度であれば、Basicプランでも全く問題ないかと思います。しかし、Cursorを本格的に業務に導入したい方や、より多くの機能を活用したい方はPro・Businessプランに加入するのがおすすめです。 CousorでAPIキーを利用する方法 Cursorはそのままでも十分便利なツールですが、OpenAIのAPIキーを活用することによってその利用価値はさらに上がります。APIキーによる拡張利用をすることで、無料のBasicプランでもほとんどの機能を利用することが可能になります。 具体的な手順は以下のとおりです。 Cursorの画面で「Command＋Shift＋P」を押す コマンドパレットから「Cursor：Open Settings」と入力 APIキー入力画面でOpenAIのAPIキーを入力 APIキーを使えば、最新のGPT-4 Turboも利用可能です。API
OpenAIとは | Hakky Handbook
※この記事は AI によって書かれた内容をもとに作成したものになります。Hakky では自社の取り組みの一環として、記事作成に AI を導入しています。 OpenAI の概要 OpenAI は、人工知能の研究・開発・普及を目的とした非営利団体です。2015 年に設立され、AI の研究・開発を通じて、人類が直面する課題を解決するための革新的なソリューションを提供することを目指しています。 具体的には、自然言語処理、コンピュータビジョン、ロボットテクノロジーなどの分野で、最先端の研究を行い、AI の進歩を促進しています。また、AI の開発において重要な要素であるデータやツールを提供することで、より多くの人々が AI を利用することができるようになることを目指しています。 OpenAI のリリース情報 OpenAI の直近のリリース情報には以下のようなものがあります。 DALL-E 2 画像
CSSの知っておくと便利な実装テクニック！ 相対カラー構文を使用して、1つのカラーに対して濃く薄くを簡単に設定できます
異なるカラーを濃くしたり薄くしたりするとき、個別にカラーを設定してもできますが、CSSの相対カラー構文（color: rgb(from green r g b);）を使用すると簡単に実装できます。 下記はそれぞれ元のカラーに対して相対カラー構文1つでそのカラーを濃くしたり薄くしたりしています。1つのカラーに対して複数の濃さが必要な場合に便利です。 CSSの相対カラー構文とは CSSの相対カラー構文のデモ CSSの相対カラー構文とは CSSの相対カラー（CSS Relative colors）構文を使用すると、他のカラーのパラメータを変更してカラーを定義できます。相対カラー構文は設定した色を相対色に変換します。変換には、fromキーワードを使用します。ブラウザはベースのカラーを変換して分解し、新しいカラーの定義で使用する変数として使用できます。
ついにChromeで使えるようになったCSSの便利機能！ light-dark()関数、field-sizingプロパティ、句読点括弧のカーニングができるtext-spacing-trimプロパティ
今回のアップデートでは、かなり便利なCSSのプロパティが追加されました。 ライトモードとダークモードのスタイルを簡単に定義できるlight-dark()カラー関数、垂直方向の中央に配置するalign-contentプロパティ、フォームのサイズを入力された文字量に合わせて自動変更するfield-sizingプロパティ、CSSで句読点括弧のカーニングができるtext-spacing-trimプロパティ、これらがブラウザにサポートされるのを待っていた人も多いと思います。 Chrome 123 beta New in Chrome 123 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSのlight-dark()カラー関数 CSSのdisplay-modeでpicture-in-p
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PoGoskill - ポケモンGO専用の位置偽装ソフト！iOS/Android対応
GitHub - DE127/NoPeek: noPeek - A most effective way to protect your online content from being copied or grabbed