検索フォームなど、button要素とinput要素を並べて配置した際に、それらのテキスト（アイコンも）を垂直方向に美しく揃えて配置するスタイルシートのテクニックを紹介します。 ボタンと入力フォームの高さは自由に変更でき、デザインも普通に変更できるので、スニペットとして登録しておくと便利です。 button要素とinput要素のテキストを揃える インタラクティブな要素のコンテンツを垂直方向に揃えるのに苦労したことはありませんか？ あなたは仲間です、多くの人が経験していると思います。 この記事では、line-height, padding, flexboxを使用して、button要素とinput要素のコンテンツを中央に配置する方法について解説します。 まず、ゴールを明確にしておきましょう。 button要素とinput要素のコンテンツは完璧に揃えます。 button要素とinput要素の高さは
クリックできるボタンを実装するとき、HTMLの何をよく使用しますか？ buttonタグ、もしくはdivタグ？ divを使用してはいけない理由、buttonを使用するときの注意点、場合によってはaがよい理由を紹介します。 Everything you didn’t know you need to know about buttons by Steve Sewell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ボタンの実装にdivを使用したときの問題点 ボタンをbuttonで実装する buttonのスタイルに関する問題点 buttonのスタイルを正しく設定する方法 フォーム内のbuttonの動作を修正する 他のページへのリンクに使用する場合はaタグで ボタンの実装をコンポーネントにする 終わりに はじめに クリックで
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「Componentのディレクトリ構成」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが 株式会社ナレッジワーク というスタートアップで開発・運用しているプロジェクトにおいてうまくいっていると感じているComponentのディレクトリ構成についてご紹介していきます。 ディレクトリ構成 Componentは src/components の中にまとめていて、その下に以下の4種類の分類ディレクトリを切っています。 src/components/page src/components/model src/components/ui src/components/functional 分類ディレクトリを考えるにあたって重視したポイントは以下。 新しくco
フォームのボタン配置は、多くの場合無視されるか、見映えに基づいて優先順位がつけられます。しかし、ボタン配置は非常に重要で、フォームを使いづらくする要因の一つであるため、正しく配置することが不可欠です。 フォームのボタン配置は、対象のボタンとフォームのタイプに依存されます。 さまざまなタイプのフォームを総合的に調査・分析し、それぞれのタイプでどこにボタンを配置するかについて解説します。 Where to put buttons on forms by Adam Silver 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 プライマリボタンは入力欄の左端に揃える 「戻る」ボタンはフォームの上に配置 分岐するアクションはフォームの上に配置 機能に応じて追加のボタンを配置 一部の単一フィールドのフォームでは、入力欄の横にボタンを配置 マ
もっとも注目されたUIデザインのテクニックの総まとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 これまでの中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of the Best by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 細いフォントは暗いカラーにする 2. 長いフォームは常にラベルを上部に配置する 3. ボタンのラベルは一貫性を保つ 4. 不要なテキストでフォームのUIを乱雑にしない 5. フォームはインタラクションの後、すぐにフィードバックを提供 6. 次のステップの情報を提供する 7. CTA用にカラーを1つ確保しておく 8.
これは便利で簡単！ モダンCSSで実装された100種類のさまざまなアニメーションのボタン -100 Modern CSS Buttons
Webサイトやスマホアプリで使用される、モダンCSSで実装された100種類のさまざまなアニメーションのボタンを紹介します。 角丸や矩形ベースのボタンに、背景がスライドしたり、分割したり、プルプルしたり、ボーダーがきらっとしたり、文字がくるっとしたり、変形したり、ネオンに輝いたり、ボタンの実装に困った時にチェックすると便利です。 100 Modern CSS Buttons 100 Modern CSS Buttons -GitHub 100 Modern CSS Buttonsは、モダンCSSで実装されたボタン100種類のコレクションです。角丸や矩形ベースのボタンにさまざまなCSSアニメーションが使用されています。 ライセンスはGPL-3.0 licenseで、商用プロジェクトでも無料で利用できます。制作者様によると、個人的なプロジェクトであろうと商用プロジェクトであろうと、オープンソース
ランディングページがどのようにデザインされ、レイアウトされているのか、そしてコピーライティングがどのようにデザインされているのか、その参考資料となるアイデアをまとめたSaaS Pagesを紹介します。 ランディングページのデザインや実装、ヘッダやフッタやナビゲーション、特徴やボタンの目立たせ方など、デザインの引き出しにストックしておきたいですね。 SaaS Pages SaaS Pagesでは、ランディングページに使用されるUIコンポーネントごとにデザインとコピーライティングがまとめられています。 ナビゲーションバー 目標到達のプロセスから遠ざかる方向にナビゲートしない。 分かりやすいCTAボタンがある。 ユーザーエクスペリエンスを向上させるスティッキーバー。 開発者向けのドキュメントなど、特別なリンクを含めたい場合。 Navbar ヒーローヘッダ 独自のセールスポイントを強調する。 「今
by Jeff Klugiewicz PlayStationのコントローラーにある「×」ボタンの呼び方について公式が回答し、長年にわたって続いてきた呼び方論争がついに決着したと話題になっています。 We've all been calling the DualShock's X button the wrong name and PlayStation's had enough • Eurogamer.net https://www.eurogamer.net/articles/2019-09-08-weve-all-been-calling-the-dualshocks-x-button-the-wrong-name-and-playstations-had-enough No, PlayStation. The 'X' button is not actually the 'Cross
【PS5】 決定ボタンは×、キャンセルは〇に グローバルで統一 1 名前：雷 ★：2020/10/04(日) 21:27:49.40 ID:J+LwOmpB9 今回のメディア向け体験会ではデュアルセンスの機能やデータ読み込みの速さなどを実体験することができた。これらは事前にアナウンスされていた情報ではあるものの、実際に触ってみると、その革新性は鮮烈なものだった。 なお、今回の取材でわかったことだが、いわゆる決定ボタンは〇ではなく、×がデフォルト設定になっていた。SIE広報によると、これは日本を含むアジア地域を含めてグローバルで統一されるもので、×決定のゲームと〇決定のシステムメニューで操作が異なってしまう問題を解消し、誤入力などの発生を防ぐ意図があるという。 たしかに日本人にとって〇決定は操作イメージが湧きやすかった部分もあるのだが、ゲーム内では○ボタン決定で、ゲーム内からシステムメニュー
PREDUCTSは「いい仕事」を生み出す道具のメーカーです。 これは私たちブランドの目指す姿でありつつ、自分たち自身が、道具に求めていることでもあります。日々使う道具も”使いやすく”、”創造性を刺激してくれる” ものであってほしい。そんな道具を探しながら、ものづくりに勤しんでいます。 このシリーズでは、PREDUCTSのメンバーが普段愛用している道具たちをご紹介していきます。 こんにちは、PREDUCTSの宮澤です。 グラフィックや動画、音楽、3DCG、CADなどを扱う職種の方は、データを入力するキーボードはもちろんのこと、高精度なポインティングをおこなうマウスやトラックパッド等のデバイスも多用されると思います。 キーボードやマウスを総じてインプットデバイスと呼ばれ、中でもマウスやトラックパッドのようなポインタ（カーソル）の位置を操作するデバイスは、ポインティングデバイスといいます。キーボ
auから9年ぶりに『新作ガラケー』が出た。一体いまさら何の需要があるんだ？と思ったら一部の職業では必須アイテムらしい。｢厚い手袋でスマホ操作は難しい｣
りく @my_way_smart auから9年ぶりにガラケーが出たそうな。 ☑防水機能 ☑1.8mからの落下耐性 一体いまさら何の需要があるんだ？ と思ったけど、漁業や現場で働く人に需要があるとのこと💡 なるほど、確かに厚い手袋とかしてたらスマホ操作は難しいですよね。 こういった機種は細く長く出続けてほしい。 pic.twitter.com/EtHhpAKynX 2021-12-07 08:53:43
AIでコードを生成！ テキストを入力すると、UI要素やコンポーネントを実装するHTMLとCSSを生成してくれる -AI CODE
AIは、Web制作にもすごい速さで浸透しそうですね。今までも似たツールがいくつかあったのですが、かなり出来がよいので紹介したいと思います。 テキストを入力、たとえば「シンプルでモダンなナビゲーション アイテムは日本語」と入力すると、そのUI要素を実装するHTMLとCSSを生成してくれるAIツールを紹介します。 AI CODE 実際に試してみましたが、ナビゲーション、ボタン、カード、フォームなど、UI要素やUIコンポーネントやレイアウトが数秒で簡単に実装されました。 また、次のバージョンではJavaScriptにも対応して、UIライブラリも追加する予定とのことです。 AI CODEの使い方 AI CODEの使い方は簡単、登録など面倒なことは一切不要です。 サイトにアクセスし、テキストを入力して「Generate」ボタンを押すだけです。 テキストは英語だけでなく、日本語でも大丈夫です。たとえば
とあるWeb制作会社にて ワイ「ハスケル子ちゃん」 ハスケル子「はい」 ワイ「今日ワイは何の仕事するんやったっけ？」 ハスケル子「確か今日からは」 ハスケル子「Nuxt.jsとVuetifyを使って管理画面を作る案件が始まるんじゃなかったでしたっけ？」 ワイ「おお、せやった」 ワイ「とある管理画面のフロントエンド開発をするんやったな」 ハスケル子「もうFigmaのデザイン見ましたか？」 ワイ「ヒグマ？」 ワイ「ヒグマなんて、写真でしか見たことないけど」 ハスケル子「Figmaです」 ハスケル子「ブラウザ上でも使えるデザインツールですよ」 ワイ「ああ、そっちな」 ワイ「Higumaのほうね」 ハスケル子「じゃあ、さっそくデザイン見ながら」 ハスケル子「コーディングしていきましょう」 ワイ「おお、頑張っていこか！」 デザインを見てみる ハスケル子「↑このキャンセルボタンとOKボタン」 ハスケル
なぜCSSでボタンを作るのか？その前に、なぜCSSでボタンを作るのか？について少しだけ考えたいと思います。 簡単に言ってしまえば、 軽い！拡張性がある！解像度の心配がない！簡単！と言った理由ではないでしょうか？ 画像でボタンを作ることも多いと思いますが、「画像じゃないほうがいいなあ」と思うことも多いと思います。 もちろん、デザイナーから上がってきたデザインデータからボタンを切り取って、HTMLに設置して、CSSでホバーはopacity:0.8、とかやれば簡単ではありますが、デザインツールの進化やレスポンシブの一般化に伴い、そういったイケてなくて古臭いやり方はあまり望ましくないです。 特にWebの場合、テストの繰り返しが必要ですが、画像でボタンを作るとなるとテスト用にいくつもの画像を作らなくてはいけません。色やテキストを変えるとなると画像すべてを修正する必要があります。しかし、CSSボタンで
Record, replay, and measure user flows | DevTools | Chrome for Developers
Take a glance at the new Recorder panel (preview feature) with the video below. Complete this tutorial to learn how to use the Recorder panel to record, replay, and measure user flows. For more information on how to share the recorded user flows, edit them and their steps, see the Recorder features reference. Open the Recorder panel Open DevTools. Click on More options > More tools > Recorder.
Dockerコンテナの起動やイメージ管理、KubernetesクラスタへのアプリケーションのデプロイなどをGUIで行えるソフトウェアが「Portainer」です。DockerやKubernetesの管理を簡単に行えそうだったので、無料のコミュニティ版を使ってみました。 Portainer | Open Source Container Management GUI for Kubernetes, Docker, Swarm https://www.portainer.io/ Documentation https://documentation.portainer.io/ ◆Docker編 まずはDockerを利用できる環境で、以下のコマンドを実行しPortainerコンテナを起動します。今回はDocker DesktopをバックエンドとするWSL環境を利用しました。 $ docker v
米Anker、ボタン1つで2台のMac/PCからの映像出力とキーボード＆マウス操作を切り替えられるCPU切替器「Anker 553/554 USB-C Docking Station (KVM Switch)」を発売。
米Ankerがボタン1つで2台のMac/PCからの映像出力とキーボードやマウス操作を切り替えられるCPU切替器「Anker 553/554 USB-C Docking Station (KVM Switch)」を発売しています。詳細は以下から。 米Ankerは現地時間2023年07月10日、ボタン1つで2台のMacやWindows PCからの映像出力と、キーボード＆マウス操作を切り替えられるCPU切替器「Anker 553 USB-C Docking Station (KVM Switch) (A83K2)」と「Anker 554 USB-C Docking Station (KVM Switch) (A83K1)」を新たに発売しています。 Seamless Switching: Enjoy effortless switching between USB-C devices with a
公開日 : 2021年10月14日 (2023年10月11日 更新) カテゴリー : ユーザビリティ / アクセシビリティ ウェブのフォームにおいて、サブミットボタンをデフォルトで無効化しておいて、ユーザーの入力不備がなくなったときにボタンを有効化する UI があります。たとえば、利用規約などの文書を読んで同意する旨のチェックを入れないと、あるいは、入力必須フィールドにすべて正しく情報を入れないと、ボタンがアクティブにならない、というものです。 サブミットボタンがデフォルトで無効化されているフォームの例。 このような UI は、アクセシビリティやユーザビリティの観点で、以下の問題があります。 そこに存在しているはずのサブミットボタンが使用できないことに対して、その理由をユーザーが理解できずに、混乱してしまう恐れがある。(ユーザーの側に誤っているという自覚がなくても、ちょっとした見落としや入
ウェブ制作においてボタン風の見た目はよく作成するものの、ネットには新旧さまざまな記法で紹介されているため、参照しづらいケースもあると課題を感じていました。 そこで、2023年において「シンプルで手軽に使いやすいボタン」というテーマで、11種類のHTML・CSSのボタンデザインを紹介します。 この記事で紹介するボタン aタグやbuttonタグのどちらでも利用可能 JavaScriptを用いずHTMLとCSSだけで作成 コピペしやすい 各ボタン設計時に心掛けたポイントを終盤にコラムとしてまとめています。この記事のデモはオリジナルで、GitHubにてMITライセンスとして公開しています。ぜひご活用ください。 ※デモのホバー演出は、ホバーが有効なデバイスでのみ確認可能です。詳しくはコラムで紹介します。 アウトラインのボタン（枠線をグラデーションで再現する） サンプルを別ウインドウで開く ソースコー
Tailwind CSS はすべてをユティリティクラスで書くという特性上、HTML にはクラスがたくさん書かれることになります。1 つの要素に対してクラスがたくさん並んでいると、視覚的にどのようなスタイルが適用されているのかを把握するのが難しくなります。条件によってクラス名を付け替える処理を行っていると更に複雑になります。 <button className={` ${variant === "primary" && "border border-blue-500 bg-blue-500 text-white"} ${ variant === "secondary" && "border border-gray-500 bg-gray-500 text-white" } ${variant === "default" && "border border-gray-500 bg-white
この記事では、普段のホームページ制作で直面しがちな課題を解決するCSSテクニックをまとめて紹介しています。 クライアントからの要望も多いCSSの小技テクから、「これがCSSだけでできるの？」と疑いたくなるような最新の使い方まで、実例やサンプル用ソースコードと一緒に確認できます。 ここで紹介されているCSSテクニックを利用すれば、これまで頭を抱えていた問題や課題も、一発で解決できるかもしれません。 コンテンツ目次 1. 入力フォームをカスタマイズしたい 2. ナビゲーションメニューを使いやすくしたい 3. ボタンを目立たせたい 4. リンク用エフェクトにこだわりたい 5. スクロールバーをサイトの色で統一したい 6. ドロップシャドウの影にもこだわりを 7. グラデーションをビンテージ風にしたい 8. CSSで要素を中央寄せする5つの方法 9. ブラウザごとのデザインのずれを防ぎたい 10.
鈴木たかのり（@takanory）です。今月の「Python Monthly Topics」では、Webブラウザ上でPythonが動作するPyScriptについて、内部構造なども含めて詳しく解説したいと思います。 PyScript公式サイト（https://pyscript.net/） Warning：PyScriptは現在非常に活発に開発が進んでいるプロダクトのため、将来的にこの記事のサンプルコードが動かなくなる可能性があります。記事執筆時点では最新バージョンであるPyScript 2023.03.1で動作確認しています。うまく動かない場合はPyScriptの公式ドキュメントなどを参照してみてください。 PyScript - PyScript documentation PyScriptとは？ PyScriptは公式サイトに「Run Python in Your HTML」と書いてあると
Raspberry Pi Advent Calendar 6日目です。3枠ほど参加してくださる方が現れてありがてえ〜。皆様のご参加はいつでも歓迎です。 adventar.org 告知も打ってるけど……増えないンゴねえ ラズピッピでAdvent Calendar！一ネタ発表してみませんか？今年買って遊んだやつ、遊べず寝かせたままのやつ、何でもどうぞ。（訳: 一人でやってんのつらい） Raspberry Pi Advent Calendar 2021 - Adventarhttps://t.co/aPD82oAjc1 pic.twitter.com/KavNenPtT9— あっきぃ/C99(金)テ23a (@Akkiesoft) 2021年12月5日 PythonとguizeroでGUIアプリを書く？ さて、PythonでGUIアプリケーションを書こうとすると、たぶんPyGTKとかPyQtあた
こもすけ cv. gaecen ueno @gaecen 高齢の親にスマホの使い方を教えたとき、ホームボタン（ホーム画面）をどう説明するか悩んでおりましたら、親から「これ押すと、ふりだしに戻るんだな」という名訳が飛び出しました。わかりやすい！ ホームボタンは日本語で「ふりだしボタン」に決まり！ 2021-09-14 19:10:16
https://dailyportalz.jp/kiji/wanna-be-a-hero DPZだけど、ロボットアニメの真似をしたらタッチパネルになるっていうのは、なんというか衝撃的だ。 そりゃGレコもタッチ操作だけどさ。 言葉もしゃべれんガキがタブレット操作してYouTube見る時代だもんなあ。 もうレバーもボタンもアナクロの象徴なのか。 昔のアニメに出てくるコンピューターに角が生えてたり紙テープで出力してたような。
Mac で Safari Web アプリを使うmacOS Sonoma から、Safari で Web ページを Web アプリとして保存できるようになりました。Web アプリは、Safari とは切り離して使うことができます。Web アプリは、通常のアプリさながらに使い勝手がよく、Dock から簡単にアクセスできます。 Web アプリと Web ページの違い Web ページから Web アプリを作成する方法 Web アプリの設定を変更する方法 Web アプリで通知を使用する方法 Web アプリを削除する方法 Web アプリと Web ページの違い Web ページを Web アプリとして使う場合、見た目と動作は Safari の中で使うときと変わりません。それでも、Web アプリの使い勝手は若干異なります。 Web アプリは、Safari とは別に機能します。閲覧履歴、Cookie、Web
Webサイトやスマホアプリの実装に、ボタンは欠かせない要素の一つです。そんなボタンの実装に設定しておくと便利なCSSのスタイルを紹介します。 スマホでボタンをタップした際にズームなどの誤動作が起きないようにするCSS、ボタンのテキストが選択されてハイライトにならないようにするCSS、フォーカス時のアウトラインをより見やすくするCSS、ボタンの論理サイズを設定するCSSなど、デフォルトのスタイルとして設定しておくと便利です。 CSS Button Styles You Might Not Know by David Bushell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スマホでボタンをタップした際の誤動作を防止 ボタンのテキストの意図しない選択 ファイル選択のボタン ボタンをフォーカス時の視覚的なアウトライン
横並びになったボタンを同じ幅で配置するCSS
複数のボタンを横並びにしつつ、それぞれのボタンが同じ幅になるように合わせたいということがある。ボタンに同じwidthを指定すれば合わせられるが、するとラベルの長さに応じた幅にできなくなる。 縦方向に並んだボタンであれば、いずれか幅の広い方に合わせることは難しくない。次のようにすれば、最も幅の広いボタンに合わせて他のボタンも配置することができる。 <div class="wrapper"> <button type="button">Hi</button> <button type="button">Hello</button> <button type="button">Lorem ipsum dolor</button> </div> .wrapper { display: flex; flex-direction: column; gap: 1em; width: fit-conten
2021 年 1 月に CSS Cascading and Inheritance Level 5 の First Public Working Draft が公開された。 CSS Cascading and Inheritance はその名の通り、CSS の Cascade や継承などについての仕様を定義しているもので、つい先日 Level3 が晴れて W3C Recommendation となった。 CSS Cascading and Inheritance Level 3 is a W3C Recommendation そして、新たに First Public Working Draft が公開された Level5 では、今までの Cascading に、新たにLayerという概念の導入が検討されている。 本記事では CSS の Cascading についておさらいし、新しい概念であ
Chrome DevTools: Record tests with the puppeteer recorder Last updated: 25th November 2020 Introduction The Puppeteer Recorder feature in Chrome DevTools can monitor your webpage interactions and generate the code to automate a browser. For example, if you click on an element and type an email address into an email field, the recorder can generate the following code: await page.click("aria/Login")
フォームの実装で面倒なのがフォーム要素とテキストを揃える、特にチェックボックス・ラジオボタンとテキストをベースラインに揃えることです。 flexboxでalign-item: baseline;を使用すると、チェックボックス・ラジオボタンとテキストを揃えるのは簡単に実装できます。複数行のテキストにも対応します。 <div class="flex-demo --start checkbox-input"> <label for="demo"><b>flex-start</b> 複数行の長いテキストでも大丈夫</label> <input type="checkbox" id="demo"> </div> <div class="flex-demo --center checkbox-input"> <label for="demo2"><b>center</b> 複数行の長いテキストでも大丈
こんにちは。虎の穴ラボのH.Hです。 突然ですが、皆さんは普段使っているブラウザは何でしょうか？ 私は普段からChromeを使っており、このブログもChromeを使って書いています。 先日ある拡張機能をChromeに入れるにため機能の説明を読んでいました。 説明の中にGithubのURLが記載され拡張機能のソースコードが公開されており、JavaScriptなどの知識があれば作成可能とわかりました。 またGoogleから簡単な拡張機能を作成するチュートリアルも公開されていました。 そこで、チュートリアルで公開されている拡張機能の実際に作ってみることにしました。 今回は拡張機能の作成した時の手順とデバッグの方法を説明していきます。 Chromeの拡張機能とは Chrome機能はChromeウェブストアなどからChromeに追加することで、標準には無い機能の追加を行うものです。 chrome.g
See-SS
' sandbox="allow-same-origin" class="iframe__style--small-card" data-v-2fcdfb78> シンプルなフラットボタン
はじめに デジタル庁が公開したデザインシステムがよさそうなデザインでしたので、適当に遊ぼうかと思いました。 html/cssで公開してくれればすぐに使いやすいと思ったんですが、どうやらFigmaでしか配っていない。。 ということでhtml/cssに落とし込んでみました。 注意事項 趣味程度に作ったものを、使いたい人がいればどうぞというものです。 細かい部分は間違っていることもあるかと思います。(ラジオボタン難しかったので、何とか再現した感じです。) 自分用に目的もなくつくっていましたので、命名等のポリシーもめちゃくちゃです。許してください。 大変つかれましたので、厳しいコメントは受け付けません。 気が向いたら、もう少しきれいにするかもしれません。 ソースコード 以下、に載せています。 完成概要 ページとしてはこんな感じ
GPTsという、特定の役割を持った専用のGPTを作る仕組みが最近できた。といっても、従来のGPT-4にあらかじめ特定の指示 (description)と前提知識のファイル (knowledge)を与えられるだけで、今までできなかったことができるわけではない。だけど、特定のタスクをさせる時に、それらをいちいち指定する手間を省けるので、便利な機能と言えよう。 ChatGPTにミニゲームを作らせる試みは前もやったけど、あまりうまくいかなかった。 そこで今回は以下の改良を加えて、専用のGPTを作ってみた。 最初にユーザからゲームのテーマを与えてもらう。 その後、そのテーマに沿ったゲームのアイデアを5つユーザに提示し、適切なものを選んでもらう。 選ばれたアイデアに対して、ルール作成、プレイヤー動作のコード作成、その他の動作作成、スコアリング、難易度、効果音、と順番に少しづつゲームを作らせる。 「小さ
MIDI、Bluetooth、USB、アナログ接続まで何でもあり！究極のフットコントローラー、XSONIC AIRSTEPのスゴさ｜DTMステーション
XSONICというメーカーが開発した、AIRSTEPなるワイヤレス接続のフットコントローラーが先日、国内でも発売されました。300×70×45 mm (W×D×H)というサイズに5つのフットスイッチが並ぶ、見た目にはシンプルな機材で実売価格27,500円（税込）のAIRSTEPと、見た目はほぼ同じながらBluetooth接続のみに絞り19,800円と価格を抑えたAIRSTEP LITEの2種類です。 これを使うことでDAWの操作をフット操作でできるだけでなく、楽譜をiPadなどに表示させてページめくりに使ったり、YouTubeの再生・停止・早送り…という操作を足で行えるほか、ここにMIDIキーボードを接続すると、ワイヤレスでMIDI接続ができるなど、「何だこれ!?」と思うほど、さまざまな機能を持ったフットコントローラーです。しかもAIRESTEPとAIRESTEP LITEを連携させること
Googleが高品質な画像を簡単に生成できるAI「Imagen 2」を発表しました。Imagen 2はチャットAI「Bard」やGoogleのAIプラットフォーム「Vertex AI」などで利用可能。すでに日本からも利用可能だったので実際に使ってみました。 New and better ways to create images with Imagen 2 https://blog.google/technology/ai/google-imagen-2/ Imagen 2はすでにBardに組み込まれており、「○○の画像を生成して」という内容のメッセージを送信するだけで画像を生成することができます。Bardには以下のリンクからアクセスできます。 Bard https://bard.google.com/chat Googleにログインした状態でBardにアクセスすると以下のような画面が表示
詳細度を0にする:where()、iOSのSafariで100vhが高さいっぱいにならないを解決できる新しいビューポート単位など、CSSの便利な新機能の各ブラウザでのサポートも完了し、すでに使用されている人も少なくないと思います。 CSSの新機能を効果的にうまく使った、新時代のCSSリセットを紹介します。 CSSリセットとして使用するだけでなく、CSSの勉強にもなるCSSリセットです。 @acab/reset.css -GitHub :where()とか新しいビューポート単位など、CSSの各新機能については以前の記事をご覧ください。 CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！ CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる CSSの疑似クラス「:focus-within」が素晴らしい
コードジャンプ可能な CSS Modules を実現する happy-css-modules の紹介 - mizdra's blog
弊社では React で CSS を書くための手法として CSS Modules を全面的に採用しています。そこで CSS Modules を使った開発をより快適にするために、「happy-css-modules」というツールを作りました。 happy-css-modules のデモ。 この記事ではこのツールが必要になった背景、導入方法、そしてツールの技術的な仕組みについて紹介します。 CSS Modules の問題点と、typed-css-modules による解決 CSS Modules では、デフォルトでは存在しないクラス名を使用しても、(プロジェクトの設定次第ですが) TypeScript のコンパイルエラーが出ることはありません。 import styles from './Button.module.css'; function Button() { return ( <but
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで、button要素とinput要素のテキストを美しく揃えるスタイルシートのテクニック
divはボタンではない、ボタンの実装について知っておくべきすべてのこと
SPA Componentの推しディレクトリ構成について語る
フォームのボタン配置はどこが最適か、左揃え・横並び・上下など、フォームのタイプごとに詳しく解説
レイアウトやUIコンポーネントなど、最近のランディングページで使用されているアイデアのまとめ -SaaS Pages
プレステの「×ボタン」はバツなのかエックスなのか論争がついに決着
【PS5】 決定ボタンは×、キャンセルは〇に グローバルで統一 : 痛いニュース(ﾉ∀`)
グラフィックデザイナー的キーボード＆マウスの最適化 | PREDUCTS
ワイ「何でそんな小っさいコンポーネント作ってるん？ｗ」 - Qiita
CSSボタンデザイン120個以上！どこよりも詳しく作り方を解説！
DockerコンテナやKubernetesクラスタをGUIで管理できる「Portainer」レビュー
サブミット (送信) ボタンをデフォルトで無効化しない | Accessible & Usable
業界最多の配信ボタン11個も テレビリモコンにみる配信と放送の今【西田宗千佳のイマトミライ】
シンプルで使いやすいHTML・CSSボタンデザイン集11選 - ICS MEDIA
Tailwind CSS を使う時に一緒に入れたいライブラリ
よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめ
WebブラウザでPythonが動作する！PyScriptの詳解 | gihyo.jp
PythonとguizeroでGUIアプリケーションを手軽に作ってみる - あっきぃ日誌
高齢の親にスマホの使い方を教えてたら、「ホームボタン」のわかりやすい表現が爆誕した「ローカライズか」
もうロボットアニメのコックピットにはレバーもボタンもない。
Mac で Safari Web アプリを使う - Apple サポート (日本)
CSSでボタンを実装するときに記述しておくと便利なスタイルのまとめ
CSSのCascadingに追加されようとしているLayerという概念 - araya's reservoir
Automatically record puppeteer tests - Chrome DevTools - Dev Tips
このCSSなら簡単！フォームのチェックボックス・ラジオボタンとテキストをベースラインに揃えて配置
Chromeの拡張機能を自作する - 虎の穴開発室ブログ
デジタル庁公開のデザインをhtml/cssに落とし込んでみた。 - Qiita
ワンボタンミニゲームを自動的に作るためだけのGPTを作ってみた - ABAの日誌
Googleが無料で簡単に使える画像生成AI「Imagen 2」を公開したので使ってみた
CSSの新機能を効果的にうまく使った、新時代のCSSリセット -acab/reset.css
www.mapion.co.jp
akatsukijapan-men-2023-shizuoka.japanbasketball.jp
akatsukijapan-men-2023-tokyo.japanbasketball.jp
www.sunday-webry.com
hiiragi-works.sakura.ne.jp
haniwa.blog.fc2.com