なぜその一行を書いたのか？コードの「行間」を書き出すだけで、独学の景色が変わりそうな予感。
【コードの行間を言語化するという試み】
自分が書いた、なんてことない自己紹介ページのコード。 改めて読み返してみると、そこには技術の習得以上に、当時の「迷い」や「背伸び」がびっしりと詰まっていた。
ただのHTML/CSSを、あえて「なぜこう書いたのか？」というドラマとして言語化してみる。 すると、自分の成長やこだわりが、単なるスキルの羅列以上に浮き彫りになってきた。
【題材:前回の記事に載せたコード】
コーディング初心者の私が前回の記事に載せた自己紹介コード(html)をもう一度行間から見直してみる。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>私の自己紹介ページ</title> <style>
/* ダメ出しを受けて追加したデザイン設定 */
body {
background-color: lightblue; /* 背景色を追加 */
text-align: center; /* 中央寄せで整列 */
font-family: sans-serif; /* フォントを見やすく */
padding-top: 50px; /* 上部に余裕を持たせる */
}
ul {
display: inline-block; /* リストを中央に寄せる工夫 */
text-align: left; /* 箇条書きの中身は左揃え */
}
</style>
</head>
<body>
<header>
<h1>ようこそ、私のポートフォリオへ</h1> </header>
<main>
<section>
<h2>自己紹介</h2> <p>こんにちは！現在、PythonとWeb制作を勉強中の初心者です。</p>
<p>趣味は料理と、新しいガジェットを触ることです。[cite: 21]</p>
</section>
<section>
<h2>学習中のスキル</h2> <ul>
<li>HTML / CSS [cite: 26]</li>
<li>Python [cite: 27]</li>
<li>Gitの基本操作 [cite: 31]</li>
</ul>
</section>
</main>
<footer>
<p>© 2026 protofeeds</p> </footer>
</body>
</html>前回の記事はこちら👇
【リベンジ】HTML初心者へのダメ出しを全部直して、自己紹介ページを「進化」させてみた！
【記述の裏側に潜む意志という正体】
1. 「見た目のコンプレックス」との戦い
`<style>` タグの中身に、その苦悩が詰まっている。
「とりあえず真っ白はやめよう」という決意
`background-color: lightblue;` を選んだのは、標準の真っ白な画面が「いかにも作ってます感」が出ていて恥ずかしかったからだ。「少し色をつけるだけで、プロっぽくなるのでは？」という淡い期待が見えてくる。
「中央寄せ」の罠を突破した形跡
初心者が一番最初にぶつかる壁が「箇条書き（ul）を中央に寄せようとすると、中身の文字までガタガタになる」問題ではないだろうか。
`ul { display: inline-block; text-align: left; }`
この一工夫からは、「中央に置きたいけど、リストのポッチ（・）は綺麗に揃えたい！」という、細かいこだわりと検索した努力（あるいはChatGPTへの質問攻め）が伺えてくる。
2. 実務を意識し始めた「背伸び」
ただの自己紹介文だけで終わらせないところに、学習の進捗が見て取れる。
セマンティック（意味のある）構造
単に `<div>`（ただの箱）を並べるのではなく、`<header>`、`<main>`、`<section>`、`<footer>` というタグを使い分けている。これは「Googleなどの検索エンジンに正しく構造を伝えたい」という、SEO（検索エンジン最適化）を意識し始めた中級者への入り口**に立っている証拠ではないだろうか。
Gitへの言及
スキルの中に「Git」を入れている点。これはコードを書くだけでなく「チーム開発」や「バージョン管理」という、現場の概念を知っていることをアピールしたい、という強い就職・副業への意欲の表れだ。
3. 読み手を迷わせないための「おもてなし」
技術的な正解を超えて、コードの構造そのものに「配慮」が宿り始めている。
「箇条書き」という情報の取捨選択
自分の情報をダラダラと文章で書くのではなく、<ul> を使って「学習中のスキル」を箇条書きにしている。これは、「相手が知りたい情報を、最短で伝える」という、ドキュメント作成やUIデザインの基本を無意識に実践している証拠ではないだろうか。
<main> や <section> による情報の境界線
情報をただ並べるのではなく、タグを使って明確に「ここからが自己紹介」「ここからがスキル」と境界を引いている。これは、将来的に複雑なプログラムを組む際に「情報のカプセル化（整理整頓）」のセンスを磨くことが大事だと既にこの段階で気付いている証拠ではないだろうか。
【葛藤と工夫の記録としてのコード】
このコードは、「ただ動けばいい」段階を卒業し、「人に見られること」を意識して、デザインと構造を両立させようともがいている、成長痛の真っ只中の記録だ。
いかがだっただろうか。自分が書いたコードの「行間」に、これだけのドラマが詰まっていた。
【行間を絞り出すというアウトプット】
自分のコードをここまで深掘りして気づいたのは、「行間を絞り出す」作業そのものが、最高のアウトプットになるということだ。
「なんとなく検索して動いたからOK」で終わらせず、なぜその1行が必要だったのか、その時どう感じていたのかを言葉にする。このプロセスを繰り返すことで、コードはただの命令文から、自分の意図を持った「作品」に変わっていく。
自分の書いた拙いコードの中に、当時の葛藤や小さな工夫を見つけ出すのは意外と楽しい。 次からの学習にも行間との対話を取り入れて行こう思う。
ここまでお読み頂きありがとうございました。
今日もproto(試作)をfeeds(糧)に変えて成長していく。
protofeeds
過去記事はこちら👇
コメント