【ITニュース解説】Understanding HTML and CSS in a real project
2025年09月23日に「Dev.to」が公開したITニュース「Understanding HTML and CSS in a real project」について初心者にもわかりやすく解説しています。
ITニュース概要
HTMLとCSSで簡単なポートフォリオサイトを作る過程を解説。Webページをヘッダーやセクションに分解し、HTMLで構造を作り、CSSで見た目をデザインする基本を学ぶ。`<ul>`や`<a>`などの要素のデフォルト表示をCSSで変更する方法も紹介し、初心者でも実践的に基礎を理解できる。
ITニュース解説
Webページを作成する際、基本的な要素となるのがHTMLとCSSである。HTMLはページの構造や内容を定義し、CSSはその見た目やスタイルを整える役割を担う。この関係性を理解するための一歩として、HTMLとCSSのみを用いて構築されたシンプルなポートフォリオサイトの例を通じて、その基礎を学ぶことができる。
このポートフォリオサイトは、Webページを小さなブロックに分割して考えるという設計思想に基づいて作られている。これは、それぞれのブロックに個別のスタイルを適用しやすくするための工夫である。具体的には、ヘッダー部分と四つのコンテンツセクションで構成されている。
まず、Webページの基本的な構造は<html>タグで始まり、その中にページのメタ情報や設定を記述する<head>タグと、ブラウザに表示されるコンテンツを記述する<body>タグが含まれる。<head>タグの内部には、ブラウザのタブに表示されるページのタイトルを定義する<title>タグが配置されている。この例では「MANIKANDAN T」というタイトルが設定されている。
次に、<body>タグの中に、実際にユーザーが目にするコンテンツが記述される。
ページの最上部には<header>タグが使用されている。これはページの導入部分やナビゲーションを含む領域であることを示唆する。<header>の中には、<h1>タグで「MANIKANDAN T」という主要な見出しが置かれ、さらに<ul>タグ（順序なしリスト）と<li>タグ（リストアイテム）で構成されたナビゲーションメニューがある。各<li>タグの中には<a>タグ（アンカータグ）があり、「About me」「project」「content」「login page」といったリンクが設定されている。<a>タグのhref属性は、クリックしたときに移動する先のURLを指定するもので、これによって異なるページやコンテンツへのハイパーリンクが作成される。通常、<a>タグで作成されたリンクには下線が表示され、文字色が青くなることが多いが、CSSを使ってこれらのデフォルトのスタイルを変更することが可能である。
ページの主要なコンテンツは<section>タグで区切られている。このポートフォリオサイトでは「About Me」「Project」「Content」「Login page」という四つの<section>が存在する。それぞれの<section>内部にも<h1>タグで見出しが設けられ、<p>タグで具体的な内容が段落として記述されている。例えば、「Project」セクションには「Library management」という見出しと、その説明が<p>タグで書かれている。
ここで使用されている<h1>タグは、Webページにおいて最も重要な見出しを表す。HTMLには<h1>から<h6>までの六つの見出しタグが存在し、数字が大きくなるにつれて文字サイズが小さくなり、見出しの重要度も下がる。なぜh7のようなタグが存在しないのかという疑問に対しては、Webページの構造において六段階の見出しで十分であり、それ以上の細かい見た目の調整はCSSで行うべきという設計思想があるためである。検索エンジンやスクリーンリーダーもこの六段階の見出しを基準としてコンテンツの階層を理解する。
<p>タグは、Webページ上でテキストを独立した段落として表示するために用いられ、文章を読みやすく区切る役割を果たす。
HTMLがWebページの骨格を作るのに対し、CSSはその見た目を装飾する。このプロジェクトでは、<body>タグの最後に<style>タグを配置し、その中にCSSコードを記述する「内部CSS」という方法が使われている。
例えば、<header>要素に対しては、border: 1px solid black;で黒色の1ピクセルの実線ボーダーを、background-color: dimgrey;で濃い灰色の背景色を設定している。
<a>タグに対しては、text-decoration: none;でデフォルトで表示される下線を削除し、color: black;で文字色を黒に変更している。
<ul>タグに関しては、ナビゲーションメニューとして横並びにしたい場合に、list-style-type: none;で通常の箇条書きの点を消している。さらに、display: flex;を設定することでリストアイテムを横並びにし、gap: 40px;でリストアイテム間に40ピクセルの間隔を作り、justify-content: center;でリストアイテム全体を中央に配置している。また、font-size: large;で文字サイズを大きくしている。
<header>内の<h1>タグには、text-align: center;でテキストを中央寄せにし、color: white;で文字色を白色に設定している。
各<section>要素には、width: 60%;でページの幅の60%を占めるように設定し、margin: auto;で左右の余白を自動調整してページの中央に配置している。margin-top: 10px;で上部に10ピクセルの余白を設け、padding-left: 10px;でコンテンツの内側に左から10ピクセルの余白を与えている。background-color: bisque;で薄い茶色の背景色を指定し、border-radius: 10px;で角を10ピクセル丸くしている。
これらのHTMLとCSSの組み合わせにより、単なるテキスト情報が視覚的に整理され、機能的なWebページとしてブラウザに表示される。このシンプルなポートフォリオサイトの構築を通じて、HTMLがコンテンツの意味と構造を定義し、CSSがその表現方法を制御するというWeb開発の基本的な考え方を実践的に学ぶことができる。個々の要素がどのように配置され、どのようなスタイルが適用されるかを知ることは、システムエンジニアとしてWebアプリケーション開発に携わる上で不可欠な第一歩となる。