E-commerce Fashionサイト構築
アパレルのショッピングサイトです。APIはFakeShopAPIを使用し、疑似的なショッピングサイトを構築しました。React, HTML, CSS, JavasCriptで実装しています。尚、決済機能は実装していません。 https://e-commerce-shop-i...
View ArticleE-commerce Degital gadgets
HeadPhoneやVEゴーグル、macbookなどの販売を目的にしたイーコマースサイトです。アニメーションはAOSを使用しています。LightモードとDarkモードの切り替え可能。デプロイはNetiflyを使用しています。尚、決済機能は未実装です。 https://nis...
View Article【kintone】PDFをダウンロードせずに閲覧する
PDF Viewer を使えば済むことだが、カスタマイズで対応したければ下記のコードでできる。 (() => { 'use strict'; // 一覧画面か詳細画面を表示したときの処理 kintone.events.on(['app.record.ind...
View Article【CSS】最大値や最小値を設定する方法
min() 使い方 min()は()内に記述された値のうち、最小の値を設定します。 width: min(100vw, 100px); 上記の場合には100vwと100pxのうち小さい方の値が設定されます。 max() 使い方 max()は()内に記述された...
View Article【Claude×JavaScript】ポモドーロタイマーのWebアプリをAIと共同開発してみた
はじめに 科学的な時間管理術として広く知られるポモドーロテクニックを実践するためのWebタイマーアプリを開発しました。 ポモドーロテクニックとは：25分間の集中作業→5分休憩を繰り返し、4セット完了後に15-30分の長い休憩を取る時間管理術です。集中力の向上と疲労軽減に効...
View Article【CSS】マウスホバー時に背景をぼかす方法 【backdrop-filter】
CSSでhover時に背景をぼかすテクニック マウスホバー (マウスオーバー?) 時のアニメーションというのは様々ありますが、今回はCSSだけで背景にぼかしを入れられる方法について紹介ます。 最近は backdrop-filter を利用することで、hover時に手軽に背...
View Article【CSS】:has()セレクター
:has()とは ・子要素や兄弟要素などの存在や状態を条件にして、親要素にスタイルを適用できる ・A:has(B) → A が B を含む場合にスタイルを適用 ・:is() など他の疑似クラスと組み合わせて使える 使用例 /* input を含むラベルを太字にする */...
View ArticleCSS セレクター
要素セレクター p { color: red; } クラスセレクター .title { font-size: 20px; } IDセレクター #main { background: lightblue; } 子孫セレクター div p { color: green; } 子...
View Articleテーブルのヘッダーを固定してスクロール、枠を常に固定する方法
高さが決まっているエリア内で、タイトル行2行を固定して縦スクロール 実現したいこと ・テーブルは 縦スクロールのみ ・ヘッダー行は 固定 ・外枠は太め、セルの罫線は細め ・スクロールバーの有無に応じて外枠がずれない ・テーブルが画面より狭い場合は折り返しなく画面幅にフィ...
View Articleじゃんけんゲーム
はじめに アプレンティスの課題として「じゃんけんゲーム with チートモード」を実装しました。 HTML,CSS 今回はJavaScriptの課題なのでHTML、CSSは用意されたものを使います。 <...
View ArticleCanvaのWebサイトを別のURLで完全に動作させる方法
はじめに Canvaで作成されたWebサイトを、独自のドメインや別のサーバーで動作させたい場合の手順をまとめました。FTPアクセス権限のみでも実現可能な方法です。 前提条件 macOS/LinuxまたはWindows（WSL推奨） FTPアクセス権限を持つWebサーバ...
View ArticleAIにおまかせ！煩雑な計算をWEBアプリで実現
自動計算アプリを作りたい こんにちはこんばんは。 わたくしは通信事業の営業全般に携わったりして毎日を暮らしております。 モノを売ることも生業にしており、どうしても在庫消化がままならず、苦渋の決断として値下げ販売を敢行することもあったりします。 そんな時に利益（荒利益）シミ...
View Articleブロック要素も垂直方向に中央寄せできる `align-content`
この記事はなに？ インライン要素の垂直方向の配置には vertical-align プロパティが使えますが、ブロック要素には適用できませんでした。 align-content は、 display: grid または display: flex を指定したコンテナ要素内で...
View Article