Webプログラミング入門

1.Webページとは

用語	説明
WEBページ	ブラウザ上で閲覧する1枚1枚の写真。
HTML	Hyper Text Markup Language: WEBページの文章構造を定義する言語。
タグ	＜tag＞と＜/tag＞のように要素の始まりと終わりをマークする記述方式

HTMLの基本構造（例と解説）


                        
                        <html>
                        
                        <head>
                        
                        <title>あつきのHP</title>
                        
                        </head>
                        
                        <body>
                        
                        <hr>
                        
                        <center>私の名前は瀬戸あつきです</center>
                        
                        <hr>
                        
                        </body>
                        
                        </html>

実際のページ

タグ	内容・役割
<html>	html文書の開始
<head>	ユーザーの目に見えない情報（タイトルなど）
<title>	ブラウザのタブ表示されるページ名
<body>	ユーザーが目にする本文エリア
<hr>	水平線を表示
<center>	中央揃え
<font>	色やサイズの指定

CSSとは？

項目	内容
CSS	Caccading Style Sheets:HTMLのデザインを定義する仕組み
用途	色・サイズ・背景・余白・配置・線などの設定
分ける理由	デザインと構造の分離→WebマーケにおけるSEO対策などにも有効
適用方法	<head>内に<link rel="stylesheet" href="style.css">で読み込み

HTML vs CSSの役割分担

要素	HTMLで書く内容	CSSで書く内容
本文	タイトル、文章、リンク等
見た目の調整	×（非推奨）	背景色、文字サイズ、位置、色、余白など
構造	<div>でブロック分け	div{border: 1px solid #000;}など

4.CSSの記述例（style.css）

5.用語まとめ

用語	説明
SEO	検索エンジン最適化
div	HTML内でレイアウトを整理するための区切りブロック
style.css	見た目のスタイルを記述するファイル

💡 Tips

HTML/CSSはメモ帳でも簡単に書ける
.htmlと.cssを作り、ローカルでブラウザ表示して学習できる
Web制作ツール（VSCode）を使うとより快適に作業可能