Webアプリの構造とデザイン：HTML/CSSの役割とレスポンシブデザインの基礎

はじめに

こんにちは。『PythonでつくるWebアプリのつくり方』の学習記録です。前回のポスト　はバックエンド技術の全体像を概観しましたが、今回はWebアプリのフロントエンドを構成するHTMLとCSSの基本的な役割と記法について学びました。どちらの技術も奥深く、特にCSSの表現力の高さに改めて圧倒されています。本記事では、HTMLとCSSの役割を整理し、特に「HTMLを何も変えずにデザインを変える」レスポンシブデザインの仕組みに焦点を当てます。

1. HTMLとCSS：構造とスタイルを分離する役割

HTMLとCSSは、Webサービス開発において互いに必要な部分を補完し合う技術です。

技術	役割	特徴
HTML	Webページの構造と内容を定義するマークアップ言語。見出し、段落、リスト、画像、リンク、フォームなどの基本的な要素を構成します。	DOM (Document Object Model) という木構造で成り立っています。
CSS	HTMLで定義された要素のスタイルを指定する言語。色、フォント、レイアウト、余白などを指定し、視覚的に魅力的なデザインを実現します。	サイト全体のデザインの一貫性を保つために重要です。

CSSの記述方法

CSSは、「セレクタ―」「プロパティ」「値」の書式で記述します。

CSSセレクタ― {
　　プロパティ：値；
　　プロパティ：値；
}

• セレクタ―: スタイルを適用したい要素を指定します（例: body, h1, .card, ul > liなど)。
• プロパティ: 変更したいスタイルの種類（例: background-color, font-family, paddingなど）を指定します。

2. HTML不変の原則：レスポンシブデザインの基礎

学習を進める中で特に驚いたのが、「CSSをうまく指定することで、HTMLを何も変更することなく、PC、タブレット、スマートフォンと閲覧環境に応じたデザインを実現できる」というレスポンシブデザインの概念です。
この現象は、HTMLとCSSの役割分離の原則、そしてCSSが提供する機能によって実現されます。

レスポンシブデザインの仕組み（CSSがすべてを解決する）

レスポンシブデザインが成立する背景には、HTMLとCSSの以下の原則があります。
1. 分離の徹底: HTMLは純粋に「コンテンツの意味」だけを定義し、CSSは「コンテンツの見た目」だけを定義します。HTMLが画面サイズなどの環境情報を持つ必要はありません。
2. メディアクエリ: CSSには、ブラウザの幅や高さ、解像度といった閲覧環境に応じて異なるスタイルを適用するための機能（メディアクエリ）が存在します。
このメディアクエリを使用することで、「画面幅が768px以下の場合は、サイドバーを非表示にし、記事の幅を100%にする」といった指示をCSSファイル内に記述できます。結果として、同じHTML構造に対して、CSSがデバイスに応じて動的にデザインを切り替えることが可能になるのです。

3. 次のステップ：AIを活用したCSSマスターへの道

HTMLの 'canvas' や、CSSの高度なレイアウト表現（Flexbox、Gridなど）は奥深く、マスターには時間がかかります。しかし、CSSはパターン化された表現が多く、AI（ChatGPTやGeminiなど）が最も得意とする分野の一つです。

+「画面の左右中央揃えのカードをCSSで記述してほしい」

• 「レスポンシブ対応のため、〇〇のメディアクエリを追加してほしい」

といった具体的な指示を出すことで、AIは正確なCSSコードを生成してくれます。Webアプリの表現力と使いやすさは、HTML/CSSの習熟度に大きく依存します。AIを強力なアシスタントとして活用し、Pythonでのバックエンド構築と並行して、HTML/CSSのスキルも向上させていきたいと思います。

参考文献

「Pythonでつくる Webアプリのつくり方」　著）クジラ飛行机、 杉山 陽一、遠藤 俊輔
https://www.socym.co.jp/book/1496