自己紹介ページを作る
ひとつのHTMLファイルから、自分のページを始めましょう。
使う仕組み
HTMLで名前や好きなことを配置し、CSSで文字・余白・色を整えます。まずは一枚のページにまとめ、仕組みが分かってきたらCSSを別ファイルに分けましょう。
1
テキストエディターで新しいファイルを作り、下のコードを貼り付けます。
2
index.htmlという名前で、UTF-8で保存します。拡張子が.html.txtにならないように確認してください。
3
保存したファイルをブラウザーで開きます。名前や文章を変えたら保存し、再読み込みします。
完成例
作るためのコード
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>自己紹介</title>
<style>
body { font-family: sans-serif; padding: 20px; }
h1 { color: blue; }
</style>
</head>
<body>
<h1>こんにちは、海です。</h1>
<p>好きなことは読書です。</p>
</body>
</html>少し変えてみよう
名前・好きなこと・背景色を変えて、自分のページにしてみましょう。写真を入れるときはimgのaltも書きます。
確認すること
この手順で作るのは自分のパソコンで開くページです。インターネットで他の人に見せるには、別途ホスティングへの公開が必要です。