---
title: "Web 前端 - 憂いを忘れる一枚"
canonical_url: "https://www.ikxin.com/ja/category/web"
locale: ja
meta:
  "og:title": "Web 前端"
---

> Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt)

# Web 前端

## [GitHub チームプロジェクトで Vercel の無料サービスを無料で利用する方法](https://www.ikxin.com/ja/article/vercel-team-free)

Vercel は Serverless サービスを提供するプラットフォームで、静的ページのプロキシやシンプルな API の作成に特に適しています。無料プランは個人プロジェクトに非常に適しており、特に中国地域では優れた CDN サポートを利用

[Web 前端](https://www.ikxin.com/ja/category/web) 2024.11.2523601 回閲覧 [0 件のコメント](https://www.ikxin.com/ja/article/vercel-team-free#comments)

[Vercel](https://www.ikxin.com/ja/tag/vercel)

[![Vue.js で HTML Video の muted 属性が消える](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/uploads/2024/03/22/65fd9a4b7d41f.png)](https://www.ikxin.com/ja/article/vue-muted-attribute)

## [Vue.js で HTML Video の muted 属性が消える](https://www.ikxin.com/ja/article/vue-muted-attribute)

会社に新しいプロジェクトがあり、私が独自に技術選定して開発を担当しました。プロジェクトの要件は英語の製品紹介サイトを作ることで、比較的シンプルで開発期間も長くなかったため、最終的に Nuxt フレームワークを使用して開発することにしました。

[Web 前端](https://www.ikxin.com/ja/category/web) 2024.03.234869 回閲覧 [0 件のコメント](https://www.ikxin.com/ja/article/vue-muted-attribute#comments)

[Vue.js](https://www.ikxin.com/ja/tag/vuejs) [ Nuxt](https://www.ikxin.com/ja/tag/nuxt)

[![konva.js の click クリックイベントが親要素にバブリングするのを防止する](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2023/03/29/6423ea1d7d571.png)](https://www.ikxin.com/ja/article/konva-click-bubbling)

## [konva.js の click クリックイベントが親要素にバブリングするのを防止する](https://www.ikxin.com/ja/article/konva-click-bubbling)

KonvaJS では、イベントバブリングがデフォルトで有効になっています。つまり、子要素でイベントが発生すると、そのイベントは親要素へ伝播します。そのため、レイヤーに click イベントを登録し、その上にグループを作成した場合、そのグルー

[Web 前端](https://www.ikxin.com/ja/category/web) 2023.03.295538 回閲覧 [0 件のコメント](https://www.ikxin.com/ja/article/konva-click-bubbling#comments)

[Canvas](https://www.ikxin.com/ja/tag/canvas)

[![Vue.js における v-model と model-value のリアクティブ性の違い](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2023/03/28/64229c4ad0677.png)](https://www.ikxin.com/ja/article/vue-model-reactivity)

## [Vue.js における v-model と model-value のリアクティブ性の違い](https://www.ikxin.com/ja/article/vue-model-reactivity)

Vue.js の v-model と model-value は、どちらもフォームデータの双方向バインディングを実現するために使用されるディレクティブです。 v-model は Vue.js が提供するシンタックスシュガーで、テンプレート内

[Web 前端](https://www.ikxin.com/ja/category/web) 2023.03.285257 回閲覧 [0 件のコメント](https://www.ikxin.com/ja/article/vue-model-reactivity#comments)

[Vue.js](https://www.ikxin.com/ja/tag/vuejs)

[![Git Commit Message コード規約に基づくコミット規約](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2022/05/19/62862f9890969.png)](https://www.ikxin.com/ja/article/git-commit-conventions)

## [Git Commit Message コード規約に基づくコミット規約](https://www.ikxin.com/ja/article/git-commit-conventions)

先月、会社にフロントエンドのすごい方が入社し、私たちのチームに技術面でいくつかの規約を制定してくれました。その中の一つが、Git でコードをコミットする際の Commit Message に関する規約です。最初は余計なことだと思っていました

[Web 前端](https://www.ikxin.com/ja/category/web) 2022.05.195401 回閲覧 [0 件のコメント](https://www.ikxin.com/ja/article/git-commit-conventions#comments)

[Git](https://www.ikxin.com/ja/tag/git)

## [jQuery オンラインで t.cn 新浪ショートURLを生成する単一ページ版ミニツール](https://www.ikxin.com/ja/article/jquery-sina-shorturl-tool)

最近 Ajax 技術を勉強しているので、よく小さな Demo を作っています。例えば、以前作った「jQuery オンラインで QQ の名前とアバターを取得」などです。今回紹介するものも Ajax プロジェクトで、主な機能は t.cn の新浪

[Web 前端](https://www.ikxin.com/ja/category/web) 2017.08.106769 回閲覧 [0 件のコメント](https://www.ikxin.com/ja/article/jquery-sina-shorturl-tool#comments)

[jQuery](https://www.ikxin.com/ja/tag/jquery) [ 短网址](https://www.ikxin.com/ja/tag/short-url) [ AJAX](https://www.ikxin.com/ja/tag/ajax)

[![WordPress の管理画面ログインページを美しくする](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/27/5d14d6a46336d.jpg)](https://www.ikxin.com/ja/article/wordpress-admin-login)

## [WordPress の管理画面ログインページを美しくする](https://www.ikxin.com/ja/article/wordpress-admin-login)

WordPress のデフォルトの管理画面ログインページがあまりにもひどいと感じている人は、私と同じようにたくさんいるのではないでしょうか？ 強迫観念の強い私は当然我慢できず、管理画面のログインページを変更するプラグインをあちこち探しました

[Web 前端](https://www.ikxin.com/ja/category/web) 2017.08.055678 回閲覧 [0 件のコメント](https://www.ikxin.com/ja/article/wordpress-admin-login#comments)

[WordPress](https://www.ikxin.com/ja/tag/wordpress) [ CSS](https://www.ikxin.com/ja/tag/css) [ 美化](https://www.ikxin.com/ja/tag/beautify)

## [jQuery で QQ 名称と QQ アバターのリンクをオンライン取得](https://www.ikxin.com/ja/article/jquery-qq-profile)

昨日、グループ内で Dux テーマのコメント欄に QQ 番号を入力すると名前とアバターを直接取得できる機能がどのように実装されているのか尋ねられました。Dux テーマを確認してみたところ、この機能は統合されていませんでした。一方、Emlog

[Web 前端](https://www.ikxin.com/ja/category/web) 2017.07.265256 回閲覧 [1 件のコメント](https://www.ikxin.com/ja/article/jquery-qq-profile#comments)

[jQuery](https://www.ikxin.com/ja/tag/jquery) [ QQ](https://www.ikxin.com/ja/tag/qq) [ 头像](https://www.ikxin.com/ja/tag/avatar)

[![HTML、JavaScript、CSSなどのソースコードをオンラインで圧縮・解凍](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/25/5d11e3fe93731.png)](https://www.ikxin.com/ja/article/html-js-css-tools)

## [HTML、JavaScript、CSSなどのソースコードをオンラインで圧縮・解凍](https://www.ikxin.com/ja/article/html-js-css-tools)

数日前、本サイトでは皆さんのフロントエンドHTML学習をサポートするため、HTMLをオンラインで実行できるツールを公開しました。今日は引き続き、HTML、JavaScript、CSSの圧縮・解凍ツールという、非常に実用的な3つの小さなツール

[Web 前端](https://www.ikxin.com/ja/category/web) 2017.07.256878 回閲覧 [1 件のコメント](https://www.ikxin.com/ja/article/html-js-css-tools#comments)

[CSS](https://www.ikxin.com/ja/tag/css) [ HTML](https://www.ikxin.com/ja/tag/html) [ JavaScript](https://www.ikxin.com/ja/tag/javascript)

[![jQueryでシンプルなウェブページの背景色グラデーションを実装する](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/25/5d11b0434fb46.jpg)](https://www.ikxin.com/ja/article/jquery-background-gradient)

## [jQueryでシンプルなウェブページの背景色グラデーションを実装する](https://www.ikxin.com/ja/article/jquery-background-gradient)

ウェブページの背景をいじっていたところ、サイト全体を透明にしてしまいました。これで動的な背景を設定できるようになります。最初に思いついたのは CSS + jQuery でしたが、しばらく試行錯誤して、知更鳥テーマとは互換性がないことに気付き

[Web 前端](https://www.ikxin.com/ja/category/web) 2017.07.248448 回閲覧 [0 件のコメント](https://www.ikxin.com/ja/article/jquery-background-gradient#comments)

[jQuery](https://www.ikxin.com/ja/tag/jquery)

[![Webページの特殊文字 HTMLコード大全](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/25/5d11df0350d2e.png)](https://www.ikxin.com/ja/article/html-special-characters)

## [Webページの特殊文字 HTMLコード大全](https://www.ikxin.com/ja/article/html-special-characters)

WebページのHTMLを記述する際、特殊文字が必要になることがよくあります。これらの文字はキーボードから直接入力できない場合が多いため、対応するHTMLエンティティコードを使用する必要があります。これらのコードはHTMLリファレンスにすべて

[Web 前端](https://www.ikxin.com/ja/category/web) 2017.07.195308 回閲覧 [0 件のコメント](https://www.ikxin.com/ja/article/html-special-characters#comments)

[HTML](https://www.ikxin.com/ja/tag/html)

[![【当サイト初公開】静的HTMLツールサイトをオンラインで実行](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/25/5d11de54d7581.png)](https://www.ikxin.com/ja/article/online-html-tools)

## [【当サイト初公開】静的HTMLツールサイトをオンラインで実行](https://www.ikxin.com/ja/article/online-html-tools)

フロントエンドを学んでいると、テストコードを実行する必要がよくあります。当時、私は主にChinazのウェブマスターツールのようなオンラインツールを使っていました。現在はフロントエンド技術をほぼ習得したので、より多くの人が手軽にフロントエンド

[Web 前端](https://www.ikxin.com/ja/category/web) 2017.07.184523 回閲覧 [0 件のコメント](https://www.ikxin.com/ja/article/online-html-tools#comments)

[HTML](https://www.ikxin.com/ja/tag/html)

[![純粋な HTML 5 + CSS 3 で iPhone 6 のモデルを描く](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/25/5d11dac82c0e0.png)](https://www.ikxin.com/ja/article/html-css-iphone6-model)

## [純粋な HTML 5 + CSS 3 で iPhone 6 のモデルを描く](https://www.ikxin.com/ja/article/html-css-iphone6-model)

B站で、純粋なコードを使って iPhone のレンダリング画像を描いた HTML5 作品を見かけました。とても面白いと思ったので、みなさんの参考になればと思い、紹介します。まずは完成イメージをご覧ください： コードは 60 行近くありますが

[Web 前端](https://www.ikxin.com/ja/category/web) 2017.07.114331 回閲覧 [0 件のコメント](https://www.ikxin.com/ja/article/html-css-iphone6-model#comments)

[CSS](https://www.ikxin.com/ja/tag/css) [ HTML](https://www.ikxin.com/ja/tag/html)

## [CSSでカスタムブラウザーのスクロールバーのスタイルを実装する](https://www.ikxin.com/ja/article/css-scrollbar-styling)

本日、憧憬ブログを訪問したところ、彼のサイトのブラウザーのデフォルトのサイドスクロールバーがカスタムスタイルに変更されていることに気付きました。後でネットで調べてみたところ、このスタイルは CSS でデザインできることが分かりました。そこで

[Web 前端](https://www.ikxin.com/ja/category/web) 2017.07.084439 回閲覧 [0 件のコメント](https://www.ikxin.com/ja/article/css-scrollbar-styling#comments)

[CSS](https://www.ikxin.com/ja/tag/css)

## [ウェブページに累計稼働時間を表示するJavaScriptコード](https://www.ikxin.com/ja/article/javascript-uptime-timer)

当サイトを開設してから、およそ20日が経ちました。まだそれほど長い時間ではなく、始まったばかりではありますが、そこでサイトの稼働時間を記録するオンラインタイマーを書いてみようと思いました。前置きはこれくらいにして、さっそく始めましょう。 ま

[Web 前端](https://www.ikxin.com/ja/category/web) 2017.06.077290 回閲覧 [0 件のコメント](https://www.ikxin.com/ja/article/javascript-uptime-timer#comments)

## [「君子は防げても小人は防げない」ブラウザでWebページのHTMLソースコードの表示を禁止する](https://www.ikxin.com/ja/article/disable-view-source-code)

ときどき、簡単なHTMLサイトを構築したものの、他人にWebページのソースコードを見られたくないことがあります。そのようなときは、コードを使って他人がHTMLコードを閲覧できないようにします。まずは、他人がどのようにWebページのソースコー

[Web 前端](https://www.ikxin.com/ja/category/web) 2017.05.265933 回閲覧 [0 件のコメント](https://www.ikxin.com/ja/article/disable-view-source-code#comments)

[HTML](https://www.ikxin.com/ja/tag/html)

## [「追悼」サイト全体を白黒にする](https://www.ikxin.com/ja/article/website-black-white)

昨年、有名歌手の喬任梁さんが亡くなったときのことを覚えていますか。百度画像は異例にも彼のために白黒のウェブページを用意し、すべてのユーザーが百度画像で喬任梁さんを検索すると、サイト全体が白黒で表示されるようにしました。追悼が必要な日には、自

[Web 前端](https://www.ikxin.com/ja/category/web) 2017.05.227434 回閲覧 [0 件のコメント](https://www.ikxin.com/ja/article/website-black-white#comments)

[CSS](https://www.ikxin.com/ja/tag/css) [ HTML](https://www.ikxin.com/ja/tag/html)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/ja#website","@type":"WebSite","description":"「憂いを忘れる一枚」は、技術探究と日々の暮らしをテーマにした個人サイトです。Web 開発、バックエンド、DevOps の実践を記録し、ソフトウェアツールやデジタル体験、コードの外で得た見聞と思索を共有します。","inLanguage":"ja-JP","name":"憂いを忘れる一枚","url":"https://www.ikxin.com/ja","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/ja/category/web#webpage","@type":"WebPage","description":"「憂いを忘れる一枚」は、技術探究と日々の暮らしをテーマにした個人サイトです。Web 開発、バックエンド、DevOps の実践を記録し、ソフトウェアツールやデジタル体験、コードの外で得た見聞と思索を共有します。","name":"Web 前端","url":"https://www.ikxin.com/ja/category/web","isPartOf":{"@id":"https://www.ikxin.com/ja#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ja/category/web"]}]}]}
```

## Sitemap

See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.