【CSSレベルをちょっと上げたいコーダーさんへ】

FVのタイトルとか、
要素をど真ん中に置きたい時
これでやってません？？

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

もちろん今でも動く。

でも最近はもっとシンプルで
綺麗な書き方があるんですよね。

それが Grid × place-content！！

.p-fv {
min-height: 500px;
display: grid;
place-content: center;
}

これだけで
上下左右ど真ん中にドンッと置ける。

しかも…

✅️transform 書かなくていい
✅️ 計算いらない
✅️レイアウト崩れにくい
✅️読んだ時に意図が分かりやすい
✅️子要素が増えても柔軟に対応できる

正直、中央寄せしたいだけの場面なら
absoluteよりGridのほうが圧倒的に快適。

「なんか中央寄せで毎回ぐちゃぐちゃになる…」
って人は、これ試してみてほしい😌

画像にplace-contentのいろんな値もまとめてるから
ブクマして何回も見返してみて〜！ December 12, 2025

【コーダーさん、案件始まる時って
どうやって環境構築してる？】

・ゼロからHTMLなどを1つずつ作成？
・前に作った案件フォルダをそのままコピー？
・スクールや教材でもらったセットを毎回複製？

…これ、ぶっちゃけ
まあまあ面倒じゃないですか？😇

僕も最初はずっとこの方式だったけど、
今はGitHubの「テンプレートリポジトリ」を作って
そこから毎回スタートするようにしてます。

これがマジで快適すぎるんですよね。

✅ボタン1つで同じ環境を作れる
✅Vite / SCSS / Handlebars / Lint など全部入り
✅GitHub Actions も最初から入れておける
✅新しい知見が出てもテンプレだけ更新すれば
全案件に反映できる
✅全部 Git 管理されるから履歴も残る

「完成された土台」から始められると、
環境構築という無駄な時間が完全に消えるし、
本当に集中すべき「構築」という部分に
100%のリソースを割ける。

案件が始まるたびに
環境構築で数時間溶けてる人こそ、

一度テンプレ化してしまうと
「もっと早くやっとけばよかった…」
ってなりますよ！ December 12, 2025

CSSアニメーションで作った「楽しいテキストアニメーションアイデア集」をYouTubeに投稿しました。
よければ見ていただけたら嬉しいです。
https://t.co/c78ajTfjZi https://t.co/OmvayYy7yY December 12, 2025

1997年に閉鎖されたWEBサイトって体のHPを確認し、HTMLソースを見る。
画像はPNGだわ、CSSは使ってるわ、しまいにはjquery読み出してるわ。
君さぁ…もうちょっと時代設定に合わせたリアリティーを持たせようよ…
いくら何でもjqueryはないでしょ。script aculo usだってないんだぞ、その時代だと。 December 12, 2025