2025-05

HTML/CSS入門

【初心者向け】CSSのflexbox(フレックスボックス)で要素を自由に並べる方法まとめ

1.flexboxとは?flexbox(フレックスボックス)は、CSSで要素の配置や並び方を簡単にコントロールできるレイアウト方法です。例えばこんな悩み、ありませんか?要素を横に並べたいけど、うまくいかない中央揃えがなかなか決まらない子要素...
HTML/CSS入門

【初心者向け】CSSの@keyframesで簡単アニメーション!フェードインとスライドインを作ってみよう

1.@keyframesとは?@keyframesは、CSSだけでアニメーション(動き)を作るための仕組みです。たとえば、テキストをフェードインさせたいボタンをふわっと浮かせたい画像をスライドさせたいといった「動き」を、JavaScript...
作ってみたシリーズ

CSSとJavaScriptでふわっと湯気を再現してみた

1.はじめに先日、街のカフェでホットコーヒーを飲んでいたとき、「この湯気ってコードで再現できないかな?」と思ったのがきっかけで、CSSとJavaScriptだけで湯気アニメーションを作ってみました。アニメーションって敷居が高そうに感じるかも...
JavaScript基礎

【初心者向け】JavaScriptのfor文の使い方と繰り返し処理の基本を解説!

1.for文とは?JavaScriptの for 文は、「同じ処理を何度も繰り返したいとき」に使う文法です。日常生活でも、こんなことってありますよね?例:「腕立て伏せを10回やる」「3回深呼吸する」このように、「同じことを何回も行う」処理を...