HTMLメールにおけるダークモード対応
HTMLメールのダークモード対応を試みて分かったことを共有します。 ダークモードの識別は難しい メールクライアントにおいて通常モードかダークモード対応かを識別することは難しいです。 通常のWebサイ…
View Article電卓を作りながら勉強ー終
お疲れ様です。 今日はお休みですので、久々電卓のエラー改善に立ち向かいました！ 完成 See the Pen Untitled by mtzkmy (@mtzkmy) on CodePen. 早速で…
View ArticleWebP拡張子に変換して画像ファイルを圧縮しよう
WebP（ウェッピー）ってなに まず、これウェッピーって読むらしいです。（私はウェブピーと読んでました笑） 2010 年に Google が開発した画像の形式らしいです。普段利用する画像の形式である、jp…
View ArticleReact を使ってシンプルな TODO 管理アプリを作る
はじめに 今回は、React を使ってシンプルな TODO 管理アプリを作成します。機能としては、以下の3つが含まれています。 タスク追加機能 タスク完了チェック タスク削除機能 さらに、簡単な C…
View Article昔作った自作サイトをリニューアルしたい(part1)
はじめに どうも、豆腐メンタルです。(いつもの挨拶) 最近ブログも学習も止まり気味だったので、そろそろ何か書こうと、学習しようと思い 重い腰を上げて学習を再開しようと思った次第です。 しかし、何かい…
View Articleカーソルの座標取得
備忘録として、カーソルの座標を取得する方法を書いていきたいと思います。 私は現在 Reactの勉強中で、ウェブサイトを作るときにカーソルストーカーを作ってみたかったので調べてみました。 import…
View Article業界完全未経験の30歳が案件参画しました。
新卒から務めた業界大手整体サロンを辞め、完全未経験のIT企業に転職しました。 そんな私が案件参画まで何をしたのか、どんな会社で勤めているのかなどを書いていきます。 私について 学歴：体育学部4年大学…
View ArticleCSSの基本
備忘録的な感じです。初心者ですので間違っている箇所があるかもしれません。 お手柔らかにお願いいたします。 ブロックレベル要素とインライン要素 ブロックレベル要素 親要素の幅全体を占有して前後に改行を…
View ArticleSassを触ってみた
どうも、豆腐メンタルです。 こちらの続きです https://qiita.com/mortyie/items/05a76ec9ca656110c4e3 今回は、過去に作ったオリジナルアプリのRema…
View ArticleChatGPTに作らせたサイトが思ったよりいいテンプレになりそう
初めに ChatGPtを使ったコーディングには負けられないなと思っているので、まずChatGPTが今どれだけのものを記述できるのかReactのポートフォリオサイトを作ってと試しにお願いしてみました …
View Articleチェックボックスをinput要素のみでスライドスイッチにする
チェックボックスをスライドスイッチにするとき、普通は label などを使い対象を指定するかと思います。 「でもやっぱり input のみでシンプルに実現したい！」 できます。 サンプルコード <s…
View Article【UIアイディア】■■■で■■■する
前書き これはただのアイディア もしくは問題提起 本文 よりも のほうが分かりやすくない？ もちろん、データ量とか操作内容にもよってくるけど。
View ArticleCSS Grid Layoutメモ
はじめに CSS Grid Layoutというものができていて、主要ブラウザで対応している。 10年前にはなかった。 参考リンク https://qiita.com/kura07/items/e63…
View Article【CSS】セレクター
セレクター 1. ユニバーサルセレクター 全ての要素に適用されるセレクター。 * { text-align: center; } この例では、ページ内のすべての要素の文字の色が赤になる。 2. …
View Article横並びにボタンと文字が並んでるフレキシブルボックスはalign-items: baseline;がきれいだと思う
よく言われてることかもしれないけど、個人的な考えのメモ align-items: center; の場合 <div w-fit mt-12 mx-auto text-center flex + it…
View ArticleJSXファイル内でのCSS記述 Styled-components
はじめに 時間割アプリの開発にあたってReactでのCSSの適用方法を理解したので、そちらをまとめていきます。 CSSを記述する方法はいくつかありますが、今回はコンポーネントベースで管理しやすいSt…
View Article`box-shadow`プロパティの使い方
駆け出しエンジニアのtaiyoです。今日はbox-shadowプロパティについてまとめたいと思います。 box-shadow は、要素に影をつけるための CSS プロパティです。存在はもちろん知って…
View Article【TypeScript】プロパティ 'style' は型 'Element' に存在しません。ts(2339) を解決する
TypeScriptのエラー解決擦るけど許して！ 動作環境 TypeScript: 5.4.5 VSCode: 1.93.1 起きている問題 以下のようなコードにて、element.style.ho…
View ArticleDjango CSSを変更しているのに反映されない
問題の発生 Djangoを使用して、簡単なアプリを作成しているのだが、CSSを変更しても反映されない。もちろん、VSCodeを再起動しても、反映されなかった。 解決策 ブラウザのキャッシュを削除した…
View ArticleCSS
今回はCSSについて記事にしたいと思います。 CSSの基本的なプロパティ 1 色の指定 CSSでは、要素の文字色や背景色を簡単に指定できます。 文字色: colorプロパティを使います。 p { c…
View Article