プログラミング環境の整備を終えた田中一郎は、今日は基礎をさらに固めるために「HTMLとCSSの復習」に取り組むことに決めた。
エンジニアとしての第一歩を確実にするためには、基礎をしっかりと理解し、実践で使えるレベルにまで引き上げることが重要だと感じていた。
朝、一郎はいつものように早起きして、リビングでノートパソコンを開いた。
今日の目標は、HTMLとCSSを使って簡単なウェブページをゼロから作り上げることだ。
「これまで学んだ知識を総動員して、しっかりとしたウェブページを作り上げるぞ」と、一郎は意気込んだ。
HTMLの復習
まずはHTMLの構造を再確認するところから始めた。
HTMLタグの役割や、文書の構成要素(ヘッダー、メインコンテンツ、フッターなど)を整理し、基本に忠実なマークアップを心がけた。
- タイトルや見出しの設定:
<h1>
から<h6>
までの見出しタグを使い、ページのタイトルやセクションの区切りを明確にする。 - パラグラフとリストの使用:
<p>
タグで段落を作り、<ul>
や<ol>
でリストを作成。情報を整理して読みやすくする工夫をした。 - リンクと画像の挿入:
<a>
タグを使ったリンクの作成や、<img>
タグで画像を挿入し、ページに視覚的な要素を追加。
一郎は、「HTMLはウェブページの骨組みだ」と改めて実感し、
シンプルながらも正確なマークアップを心がけた。
CSSの復習
次に、一郎はCSSを使ってページのスタイルを整える作業に取り掛かった。「ページが美しく見えるようにデザインするのはCSSの役割だ」と、色やレイアウトに気を配りながら作業を進めた。
- カラーとフォントの設定:
color
やfont-family
プロパティを使って、ページの文字色やフォントを設定。視認性とデザイン性を両立させることを意識した。 - ボックスモデルの理解:
margin
、padding
、border
を使い、要素同士のスペースを調整。コンテンツが美しく整列するように工夫した。 - レイアウトの構築:
flexbox
やgrid
を使って、ページのレイアウトを整えた。特にレスポンシブデザインを意識し、デバイスに応じたレイアウトの調整を試みた。
一郎は、これらの作業を通じて「デザインには奥深さがあり、細部にこだわることでページ全体の印象が大きく変わる」ことを実感した。
完成と振り返り
数時間の作業の末、一郎は自分が思い描いた通りのウェブページを完成させた。
「基礎をしっかり学び直すことで、確実にスキルが向上していることを感じる」と、
一郎は手応えを感じた。
夜、美咲に今日の成果を見せたところ、「すごいじゃない!これが最初に作ったページ?」と驚かれた。「まだまだ基礎だけど、これからもっと学んでいくよ」と答える一郎に、
美咲は「あなたなら絶対にできるわ!」と笑顔で応援してくれた。
こうして、一郎はHTMLとCSSの基礎をしっかりと固めることができた。
次は、動的なウェブページを作成するために、JavaScriptの学習に取り組む準備を始めることに決めた。
次回予告
次回、田中一郎はJavaScriptの基礎を学び始めます。ページに動きを加えるための初歩的なスクリプトを作成し、さらに高度なスキルを身につける一郎の姿が描かれる次回もお楽しみに!
新しいエンジニアの旅がここから始まる
エンジニアリングの世界へようこそ!田中一郎の挑戦と成長を描いた物語がついに完成しました。
第一部に加え、読者の皆さんからのご要望にお応えして、さらなる深掘りエピソードを含む拡張版第一部をNoteで公開中です。
あなたもこの物語を通じて、技術を身につけ、成功へと向かう過程を一緒に体感してみませんか?
おまけエピソードや読者の皆さんからのリクエストに基づく追加コンテンツも収録。詳細な内容をぜひご覧ください。
コメント