制作サンプル HTML/CSSで自己紹介ページを作る：スマホ対応の最小サンプル
最初の制作では、内容と完成条件を小さく絞ると進めやすくなります。この例では「主題、興味の一覧、次に読むリンク」を置き、狭い画面で横にはみ出さないページを作ります。サンプルの人物設定は説明用です。僕の経歴を紹介するページとは分けて、気軽に書き換えて試してください。
制作サンプル 
個人開発・公開 公開を終了したランチアプリの制作記録：AIと小さな機能を作った話
ランチ選びのアプリ「サクメシ！」は、現在公開を終了しています。ここからは、僕が2025年に取り組んだ開発を振り返ります。
HTML・CSS CSSの基本プロパティ12個：カードを作って使い分ける
プロパティ名だけを覚えるより、一枚のカードを作って値を変えると役割を区別できます。以下の12個を、文字・大きさ・余白・配置に分けて試します。
HTML・CSS CSSボックスモデル：幅・余白・枠とbox-sizingを確かめる
widthを200pxにしたのに、画面ではそれより大きい。この原因を確かめるために、content・padding・border・marginの四つを分けて考えます。widthとheightは独立した層ではなく、大きさを指定するプロパティです。
HTML・CSS CSSの始め方：HTMLに色と余白を付けて仕組みを確かめる
HTMLで文章は表示できたものの、余白も色も思うようにならない。そんなときは、CSSを別ファイルに分けて小さく試しましょう。ここでは一つのページを装飾し、CSSが読み込まれない場合の確認まで扱います。
HTML・CSS HTMLの基本構造とタグの書き方：最初の1ページを作る
HTMLのタグを暗記する前に、短いページを一つ作りましょう。この記事では見出し、段落、リンク、画像を配置し、ブラウザで確認するところまで進めます。装飾は別のCSSで行います。
Web制作の基本 HTMLとは？CSS・JavaScriptとの役割を小さな例で理解する
Webページを作り始めると、HTML・CSS・JavaScriptが同時に登場します。最初から三つを同じ深さで学ぶ必要はありません。まず「構造・見た目・動作」の役割を区別すると、どこを直すべきか判断しやすくなります。