簡単な日記アプリを作ってみた
初めに 今回は簡単な日記アプリを書いていきます。 本記事の内容を利用して発生した損害については、一切の責任を負いません。 ファイルなど： 今回はindex.html一つで書いていきます。 コードのコピペ： 以下のコードをindex.htmlにコピペしてください...
View ArticleSCSSで変数作ったけどなぜかコンパイルでエラーになるときに確認すること
@import は非推奨 @importは現在推奨されていないので、代わりに@useを使う // NG @import 'foundation/variables'; // OK @use 'foundation/variables' as var; @useの注...
View Articleバイブコーディング始めました
私は自力でVBAしか書けませんが、職場でAIを導入する噂があり、最近のAIがどこまで出来るのか知りたかったので、3択クイズを作ることにしました。 以下は、私とCopilotとの壮絶な戦い交信記録を時系列順に並べみました。 私「Github Copilotって何？...
View ArticleCSSの当たり前?
はじめに 「当たり前」は人それぞれです。 そこでCSSについて「知っている人は知っているもの」「間違えやすいもの」を纏めました。 知っている人は知っているCSS 1．溢れた文字を「…」にする 「text-overflow: ellipsis;」を追加します。 文字が改...
View Articleバイブコーディングはじめました2
（デザインやレイアウトを編集していて気づく） 私「このプロジェクト何色使われているの？」 Co「1000色以上使われていますね？」 私「え？」 Co「業界標準は20〜30ですかね。」 （業界標準？また聞いたことない言葉を言い出しやがった。） 私「15色くらいでいける？」...
View Article多言語対応のWebページを JavaScript だけで実装する方法
data-i18nとlocalStorageを使ったシンプル翻訳システム webページを日本語・英語・韓国語・中国語(簡体字/繁体字)・モンゴル語・ロシア語に切り替えられるデモを作りました。 ライブラリ不要、JavaScriptだけで実現可能です。 この記事では、以下のポ...
View Articleviewport幅いっぱいの横スクロールでアイテムの開始位置がコンテンツ幅と揃うやつをCSSで作る
表題通り、viewport幅いっぱいの横スクロールでアイテムの開始位置がコンテンツ幅と揃うやつをCSSで作ります。 JSで作り込まれたライブラリを使うか、ブラウザがもともと備えている機能をベースに実装するか迷いどころですが、ループが不要ならばCsserな自分はできるだけ手作...
View ArticleココフォリアのPC立ち絵をOBS録画上だけ非表示にするカスタムCSS
目次 はじめに できること 実行環境 方法 結果 おわりに はじめに OBSでオンラインセッションを録画しているとき、こんな悩みが出たことはありませんか？ ココフォリアの盤面に置いた立ち絵 Discord Streamkit Overlayで、しゃべった人にあわ...
View ArticleCSSマスターへの道「ボックスモデル」
1人で25日間のCSS特訓アドベントカレンダーに挑戦します！ぜひ暖かく見守っていただけると嬉しいです。 コンテンツの内容は生成AIと壁打ちをしてきました。以下の構成を考えています。 テーマ構成案：CSS完全攻略の旅 大きく4つのフェーズに分けました。 基礎とレイアウ...
View ArticleBEMについて
この記事は、ラクスパートナーズ AdventCalendar 2025の6日目の記事です。 （個人で25日連続投稿にチャレンジ中のカレンダーになります） 本日は、クラス命名規則のBEMについてまとめたいと思います。 BEMとは BEMは、クラス名の衝突を避ける命名規則で...
View Article【CSS】入力内容に合わせて、input要素の幅が変わる!?
はじめに みなさんは、フォームのinputやtextareaで、入力した文字に合わせてサイズを自動で変えたいと思ったことはないでしょうか？ 入力内容に応じて、inputの幅を伸縮させたい textareaを入力量に応じて自動で高さ調整したい そんなときに使えるのが、...
View ArticleCSSマスターへの道「Flexbox(基礎編)」
2日目、お帰りなさい！ 昨日は地味な基礎でしたが、今日からは**「目に見えてレイアウトが変わる」**楽しいパートに入ります。 今日のテーマは 「Flexbox（基礎編）」 です。 かつてWeb制作者たちが頭を抱えていた「横並び」や「上下中央揃え」を一瞬で解決する、現代CSS...
View ArticleCSSマスターへの道「Flexbox(基礎編)」
2日目、お帰りなさい！ 昨日は地味な基礎でしたが、今日からは 「目に見えてレイアウトが変わる」 楽しいパートに入ります。 今日のテーマは 「Flexbox（基礎編）」 です。 かつてWeb制作者たちが頭を抱えていた「横並び」や「上下中央揃え」を一瞬で解決する、現代CSSの必...
View ArticleCSSマスターへの道「Flexbox(応用編)」
3 日目、順調に進んでいますね！ 昨日は「配置（左寄せ・中央寄せ）」をやりましたが、今日は 「伸縮（伸び縮み）」 をマスターします。 これができると、**「画面幅が変わっても、検索バーの入力欄だけがグイーンと伸びて、ボタンのサイズはそのまま」**といった、レスポンシブな U...
View Articleフィードバックは学びの種 〜FBを基にバグ解消&機能改善を実施した話〜
🎄 この記事は デイトラプログラミングコース Advent Calendar 2025 3日目の記事です 🎁 はじめに ポートフォリオとして制作したWebアプリについて、実際に使用してくださった現役エンジニアの方々や学習者の方々からフィードバックをいただくことができました...
View Article[CSS] CSSセレクタについて
概要 CSS には、HTML 要素を選択してスタイルを適用するための セレクタ (selector) が用意されています。 最も基本的なセレクタは以下の 3 種ですが、 要素型セレクタ （div, p など） idセレクタ（#main） クラスセレクタ（.item...
View Article【CSS】CSSグリッドについて
記事概要 CSSグリッドについて、まとめる。 CSSグリッド(タイル型レイアウト)とは 壁にタイルを敷き詰めるように、同じ大きさのボックスを等しい間隔で並べるレイアウト レイアウト設定 grid-template-columnsプロパティ display: gri...
View ArticlemicroCMSを「HTML置き場」にしてAI生成記事をNext.jsで表示してみた
要約: Genspark等のAIツールが生成した完成形HTMLとCSSを、microCMSのテキストエリアにそのまま格納し、Next.js App Routerで表示する実装パターンを紹介します。CSSスコーピングでスタイル衝突を防ぎつつ、記事ごとに異なるデザインを実現で...
View Article雰囲気でCSSを使っている方向け。2025年12月の今、新たに実務で使えるCSSをキャッチアップしよう。
最初に CSSの新機能追加のニュースを見て便利そうだと感じでも、実際に実務で使えるのはいつなんだ？と臆してしまうのが正直なところだと思います。 今回は「Baseline」を前提に、最近使っても大丈夫になったと思われる機能についてまとめています。 Baseline（Web ...
View ArticleCSS positionプロパティ関連
positionプロパティは、HTML要素をどのように配置するかを定義します。 このプロパティには主に以下の5つの値があり、それぞれが要素の振る舞いを大きく変えます。 static (初期値) relative absolute fixed sticky 1.sta...
View Article