HTML要素の見本サイトを作成しました。【クリックするだけで要素をコピー】
UIパーツを作っていると、 「このボタンいいな」 「このパネル流用したいな」 と思ったときに、毎回コードを選択してコピーするのが地味に面倒でした。 そこで、 カードをクリックするだけで、そのま...
1
1
Comment0
213 search resultsShowing 1~20 results
Stocked
You need to log-in
【Webデザイン】CSSだけで作る「ガラス風・光沢ボタン」の作り方
CSSだけで、少し高級感のある「ガラス風ボタン」を作ってみました。 最近のUIでは、単純なベタ塗りではなく、 上側だけ白く光らせる 左上に反射っぽいハイライトを入れる 内側に白い線を入れる グラ...
2
1
Comment0
動画内の「真っ黒な区間」を自動検出するHTMLツールを作りました
動画をドラッグ＆ドロップするだけで、動画内の真っ黒な区間を検出し、フレーム単位と時間単位で一覧表示するHTMLツールを作成しました。 公開ページはこちらです。 ブラウザでアクセスするだけで使用で...
0
0
Comment0
【HTML】自分のサイトが完成したら、ChatGPT に CSS 全体を良くしてもらう選択肢
本記事では、自分のサイトが完成したあとに、ChatGPT に CSS だけを修正してもらった版を作り、元の見た目と見比べて良い方を採用するという使い方を紹介します。 既存の機能はそのままに、見た...
1
0
Comment0
楽に自作HTMLを販売するアイデア
ChatGPTでHTMLツールを作れるようになると、 ちょっとした計算ツール 入力補助ツール 文章生成用の補助ツール ファイル名整理ツール CSV整形ツール のような、小さな便利ツールを比較的簡...
0
0
Comment0
個人的に思うバグが出にくい順番「@layer運用」「縛り無し」「優先度禁止」
この記事で言いたい事 修正を繰り返す場合 !importantを禁止するより縛り無しの方がバグは出にくい印象 !important より @layer を優先する指示を行う事で、AI が上書きし...
1
0
Comment0
【覗き見対策】再ログイン時はパスワードの先頭3文字まで省略できる仕組みの紹介
項目 パスワード3文字省略 ID一部マスク 分かりやすさ ◎ 「先頭3文字まで省略できます」と書けば理解しやすい ○ 最初は「なぜ隠れているの？」となる人もいる 入力の手間 ◎ 毎回3文字少なく...
0
0
Comment0
【小ネタ】YYYYMMDDフォルダとHHmmフォルダをbatで自動生成する古の管理方法
日付フォルダを作るbat自体は昔からよくある小技ですが、 今回はそこから一歩進めて、作成した日付フォルダの中に 時間フォルダ作成用のbatファイルも自動配置する形にしました。 この一手間が、利便...
0
0
Comment0
【ポエム】Javaで「インスタンスメソッドをstaticで呼んでしまうコード」をの一部を無理やり救済する思考実験
Javaを書いていると、たまにこんなコードを書いてしまうことがあります。 Sample.doSomething(); でも実際には "doSomething()" はインスタンスメソッドだったり...
0
0
Comment0
【初心者向け】生成AIでWebサイト作成を効率化する目的のサイトを公開してみる
最近は ChatGPT や Gemini などの生成AIを使って、HTMLサイトを簡単に作れるようになりました。 例えば、 「家計簿アプリを作って」 「スマホ対応のToDoリストを作って」 「保...
2
1
Comment0
【ChatGPT】gpt-5.4-nano の「早くて安い」という評価について思う事
最近、SNS などを見ていると、 「gpt-5-nano は安いけど遅い」 「gpt-5.4-nano は安くて速い」 という評価を見かける気がします。 実際、デフォルト設定のまま使うなら、かな...
0
0
Comment0
ChatGPTで動画編集作業を少しだけ楽にする方法
ChatGPTで動画編集作業を自動化できないか、試してみたことがあります。 結論から言うと、専用のAI動画編集ツールと比べると精度や安定性は劣ります。 また、ChatGPTが動画編集ソフトの代わ...
1
0
Comment0
修正指示書作成を効率化するサイト
「この部分をこう直して下さい」という指示書を作るの、地味に面倒ではないでしょうか？ スクリーンショット画像に対して 番号振る 下に説明を書く レイアウト整える この一連の作業を効率化するサイトを...
0
0
Comment0
【HTML】補足ツールチップ（infoボタン）を簡単に実装する
フォームや設定画面を作っていると、 「この項目、説明をちょっとだけ添えたい…」 「でも長く書くとUIがゴチャつく…」 こういう場面、よくありませんか？ そんなときに便利なのが「補足ツールチップ（...
0
0
Comment2
スマホアプリの綺麗な画面遷移の一例
スマホアプリやゲームを作っていると、画面遷移時の演出に悩むことがあります。 単純なフェードイン・フェードアウトも悪くありませんが、もう少し印象に残る演出を入れることで、アプリ全体のクオリティを大...
6
6
Comment0
GitHubPagesで自作HTMLを、自分だけが使える状態で公開する。
実現したい事 自作HTMLを簡易的なパスワード式にする。 アクセス時のURLにパスワードを含めることで、URLだけで使用可能にする。 例えば、下記のURLでアクセスすると使用可能。(セキュリティ...
2
0
Comment0
HTMLの「名前を付けて保存」対策として、CSS・JavaScriptをDOMから消すプラグイン
HTMLだけで配布するツールを公開していると、「名前を付けて保存」でHTML・CSS・JavaScriptがそのまま残ってしまうことがあります。 「名前を付けて保存」でダウンロードしたサイトが動...
1
1
Comment0
【覗き見対策】「第2パスワード」による認証方式
「パスワードを2つも持つなんて危険では？」 そう思われるかもしれません。 しかし、第2パスワードを通常時は利用できず、信頼済みブラウザだけで利用可能に限定すれば、覗き見対策として利用価値があるか...
2
1
Comment0
【HTML】クエリパラメータを開発に活用する方法
Web サイトを開発する際、クエリパラメータを活用するという選択肢があります。 クエリパラメータとは、URL の末尾に ?key=value の形で付与される情報のことです。 例えば次のような ...
2
0
Comment0
ChatGPTでサイト開発初心者でも簡単にWebサイトを作る方法
最近は、ChatGPTを使うことで、サイト開発の初心者でもかなり手軽にWebサイトを作れるようになってきました。 特に、 HTML / CSS / JavaScript で動くシンプルなサイト ...
1
1
Comment0
213 search resultsShowing 1~20 results
Qiita is a knowledge sharing service for engineers.
- You can follow users and tags
- You can stock useful information
- You can make edit suggestions for articles