CSSアニメーションで作った楽しげなUIアニメーションのアイデア集をYouTubeに投稿しました。
よければ見ていただけたら嬉しいです。
https://t.co/nF0WCQXP7G https://t.co/D3tEoVjHZ6 December 12, 2025

実はあなたが書いてるCSS、100倍簡単に書く方法があるの知ってた？

古いCSSだとややこしいが、最新のCSSで綺麗に簡単に書く方法をまとめた「Modern CSS Solutions」

例えば
・レスポンシブに対応した背景画像
・画面下部固定のフッター
・CSSのみのスムーズスクロール
などの方法がまとまってる

僕も便利と思ったtipsが結構あった December 12, 2025

★Webデザイン＆プログラミング
久しぶりのツイートです。私、Webデザイン＆プログラミング（html, css, PHP, Javascript, SQL文, Photoshop, Illustorator等々）の勉強を今年の3月頃に始め、早、9カ月が経とうとしております。
また、現在、Webデザイン＆プログラミングの4カ月におけるオンラインコースを受講しており、早、三か月が経とうとしております。漸く、それぞれの分野において、点が線となり全体が見渡せるようになり、楽しさを感じている今日この頃です。
オンラインコースの残り一か月は、WordPressとPythonを学ぶことになると思います。Pythonはこれまでに学習したことがないので、何を学ぶのか想像できませんが、楽しみにしております。
html, css, PHP, Javascript, SQL文, Photoshop, Illustoratorにおいては、オンラインコースを受講する前に、ほぼ独学で学習を進めておりました。また、今、お世話になっている事業所でも学習の手助けをしていただいておりました。なので、オンラインコースを臨むにあたって、事前知識があったため、とても効率の良い学習が出来ております。
これらのすべての分野はまだ、学ばなければならないことが沢山あります。これから少しずつ、これらの分野の知識を深めていきたいと思っております。
今後も楽しんで、学習していきたいと考えております。
近況報告でした。 December 12, 2025

「-webkit-text-stroke」を使用したローディングアニメーション

#CSS https://t.co/i564AB7O5d December 12, 2025

先日公開した「ハイブランド雑誌風スライド」のプロンプト、
テーマを変えるだけでここまで変わります！

CSSで骨組みを作っているので、
中身が変わってもデザインが維持されます。

個人的にかなり重宝しているプロンプトです。
便利なので、よかったら使ってみてください。

使用プロンプト👇️

# 役割
あなたは世界最高峰のエディトリアルデザイナー兼フロントエンドエンジニアです。
「VOGUE」や「Precious」のようなハイブランド雑誌の誌面構成をスライドデザインに落とし込み、HTML/CSSで完璧に実装してください。

# 制作するスライドのテーマ
{ここにテーマや原稿を入力してください}

# デザインコンセプト： "Timeless & Sophisticated"
* ターゲット：本物を知る大人の女性、または富裕層。
* 世界観：余白を贅沢に使った、品格と知性を感じる「雑誌の特集ページ」のようなデザイン。
* 絶対に避けること：安っぽい原色、窮屈なレイアウト、要素のズレ、崩れ。

# 厳守すべき技術仕様（CSS設計）
レイアウト崩れ（ズレ）を1ミリも許さないため、以下のCSSルールを**絶対厳守**してください。

1. **スライドサイズ固定**:
* 各スライドは `<div class="slide-container">` で囲み、`width: 1280px; height: 720px; overflow: hidden; position: relative;` を設定。
2. **厳格なグリッドレイアウト**:
* 左右のレイアウトには `display: flex` ではなく **`display: grid`** を使用すること。
* カラム幅は％ではなく **`px`単位で固定** すること（例: `grid-template-columns: 680px 600px;`）。これによりコンテンツ量によるレイアウトのガタつきを物理的に阻止する。
3. **画像処理**:
* 画像コンテナは必ずサイズを指定し、中の画像には `width: 100%; height: 100%; object-fit: cover;` を適用する。
4. **フォント設定（Google Fonts）**:
* 見出し・強調：'Shippori Mincho' (明朝体で品格を)
* 本文：'Zen Kaku Gothic New' (細めのゴシックで洗練さを)
* あしらい（英字）：'Monsieur La Doulaise' または 'Italianno' (筆記体でエレガンスを)

# カラーパレット（必ずこのコードを使用）
:root {
--bg-base: #FFFEFC; /* 温かみのある白 */
--bg-sub: #F9F8F6; /* 微細なグレージュ */
--text-main: #4A423E; /* 漆黒ではなく焦げ茶 */
--text-sub: #7A726E; /* グレージュの文字色 */
--accent-coral: #E8A096; /* くすみコーラルピンク（血色感） */
--accent-gold: #C4A874; /* マットなシャンパンゴールド */
--accent-navy: #2D3A45; /* 知的さを出す締め色ネイビー */
}

# 具体的なデザイン装飾の指示
1. **Script Tag（英字あしらい）**:
* スライドの左上やタイトルの上に、筆記体（アクセントカラー）で英語の装飾を入れること。
2. **Gold Line（金の線）**:
* 大見出しの下や、セクションの区切りに、細い（2px〜3px）ゴールドのラインを引くこと。
3. **Background Texture（質感）**:
* 背景がのっぺりしないよう、うっすらとした円形グラデーション（radial-gradient）を配置して奥行きを出すこと。
4. **Circle Badge（円形バッジ）**:
* 重要なキーワードは、写真の上に円形のバッジ（ネイビー背景に白文字など）を重ねて配置し、雑誌のようなリズムを作ること。

# 出力構成
* 全8〜10枚程度
* 必ずHTML/CSS形式で出力（1つのHTMLファイルにまとめる）
* 画像はUnsplash等の高品質な写真URLを使用（placeholderは避ける）

# コンテンツの配置ルール
* 文字が多すぎてはいけない。雑誌のように「読ませる余白」を作ること。
* 長文は箇条書きにし、視認性を高めること。 December 12, 2025

🗒️12/8(月)
・ポートフォリオ構築(静的コーディング終了)
-イラスト自作→仮画像の差し替え
-アニメーション追加
-HTML,cssの品質チェック
→仮画像を置いていたので自作のイラストをイラレで作成し差し替え。アニメーションも追加。Wordpress化前に構文など基礎的なチェックを完了。 December 12, 2025

CSS小技✨
続：font-size vs scale🎶
font-size は文字だけ拡大、
scale は要素ごと見た目だけ拡大。

そのままだと挙動が揃わないので、
外側の要素で囲んで比較すると分かりやすい💻
枠はそのまま、中だけ変えるのがポイント。
これで挙動は一致する👍
#CSS #CSS小技 #Codejump https://t.co/248K1SsJ7a December 12, 2025

https://t.co/X46HFbBB9a

公式ホームページをリニューアルしました。
十数年ぶりに作り直し

しか～し、これもAI様にHTML,CSS,JavaScriptをコーディングしてもらったんで最初の設計とかせずに手直し程度で完成

メチャクチャ楽でした

便利やなぁ

良かったらHP開いてみてください🫡 https://t.co/vLBx9Do6nO December 12, 2025

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

「-webkit-text-stroke」を使用したローディングアニメーション

#CSS https://t.co/xa2iCT6VPc December 12, 2025