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【初心者向け】何度も忘れるのでまとめたCSSレイアウト3選
CSSを触っていると、よく「これどうやればいいんだっけ？」と調べてしまうCSSレイアウトがあります。 自分用メモとしてまとめたものですが、同じ悩みを持つ人の助けになれば嬉しいです！ 今回はこちらの3つを紹介します！ 1.画像の上に文字を載せる 2.flexで横並びにすると、...
View Article電子レンジのワット数変換ツールを作ってみよう
はじめに 8月も終わりとはいえ、まだまだ暑い日が続きますね！ キッチンに立って料理するとなるとさらに暑くなるので、最近は自炊が面倒くさく、コンビニのお弁当やお惣菜に頼りがちになっています💦 ただそこでいつも困るのが、電子レンジの加熱時間！ パッケージには 「500Wで4分...
View Article仕様書を読もう（CSS編①）継承プロパティの％指定
本シリーズは、エンジニアとしての実力不足を常日頃から感じている私が、仕様書（日本語訳）を読み、得た知識をアウトプットしていくためのものとなっております。 前提知識 : プロパティの継承 要素に指定したプロパティが継承プロパティであった場合、その要素自身に適用したプロ...
View Article💻 HTMLとCSSの苦手を克服：後回しにしてきた人のためのポイント整理
はじめに：この記事を読むことで解決できる問題 PHPを中心に学習してきましたが、HTMLとCSSはいつも後回しにしていました。そのため、使うときもAIの出力したコードをそのまま使ったり、少し微調整を加える程度でした。 こんな悩みを抱えていませんか？ HTMLでdivとs...
View ArticleCSS のセレクター
HTML のタグ名で指定します. p { color: blue; } クラスセレクター クラス名の前に . をつけます。 .red-text { color: red; } クラス名 red-text を持つ文字は赤色になります IDセレクター ID名の前に # をつけま...
View ArticleHTML / CSS / JavaScript メモ
1. HTML Web制作の基本となるHTML、CSS、JavaScriptの個人的な備忘録です。よく使うものを中心にまとめています。 1-1. head
View Article烏でもわかるHTML/CSSシリーズはじめました
はじめに 烏でもわかるHTML/CSSシリーズはじめました。 といっても、Qiitaに書いているわけではなく、CodePen上で連載していく予定です。 読んでいく順番は特に決めていませんが、最初はwidth編、height編あたりから読んでいただければと思います。 どう...
View Article