最初に
WEBサイトがどのように作られているか、HTMLとCSSを書いて体験してみましょう。
解説にあたり、ホームページのことは、WEBサイトまたはサイトと表記しています。
今回は、必要なファイルとテキストデータを用意しています。
下記をクリックしてダウンロードして、解凍しておきましょう。
html01.zip
html01フォルダの中に下記のファイルがあるか確認してみましょう。
- index.html
- style.css
- text.txt
- book.jpg
記述する際に、全角と半角入力の切り替えに注意してください。
記号はすべて半角入力です。
正しく表示されない場合は「compフォルダ」に完成データを用意してありますので、どこが間違っていたか間違え合わせをしてみましょう。
HTMLを記述してみる
index.htmlをメモ帳などのテキストエディタで開きます。
ダブルクリックをすると、ブラウザが開いてしまいますので、テキストエディタから「開く」を選んで開きましょう。
次に、text.txt内のテキストをコピーし、index.htmlの下記のなかに貼り付けましょう。
<body>
ここに貼り付け
</body>
貼り付けたら、テキストを挟むようにタグを記述していきます。
<div>
<h1>夏目漱石「私の個人主義」</h1>
<p>彼らは先刻・・・・・・・・・なけれませでだ。</p>
<p>理が向くで・・・・・・・・・で事たませた。</p>
<p>青空文庫</p>
</div>
記述したら、保存して、index.htmlをダブルクリックし、ブラウザで表示してみましょう。
改行をしてみる
pタグ内のテキスト内に下記のbrタグを入れると改行になります。 いくつか記述して、ブラウザで表示して改行されているか確認してみましょう。
<br>
ハイパーリンクを設定する
クリックすると、他のサイトを表示する設定をしていきます。
テキストの「青空文庫」の部分を下記のように変更しましょう。
<p><a href="https://www.aozora.gr.jp/">青空文庫</a></p>
ブラウザで開いて、クリックしたら「青空文庫」に移動するか確認してみましょう。
画像を表示してみる
h1タグの下の行に下記を記述してみましょう。
<p><img src="book.jpg" alt="本の画像"></p>
ブラウザで開いて画像が表示されているか確認しましょう。
CSSで装飾してみる
style.cssをテキストエディタで開きます。@charset “UTF-8”;の下に下記を記述してみましょう。
body{
background-color: #ddd;
}
div{
width: 500px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
}
h1{
margin-bottom: 10px;
background-color: #333;
text-align: center;
font-size: 20px;
color: #fff;
}
p{
padding: 10px;
line-height: 1.5;
font-size: 14px;
color: #333;
}
img{
width: 100%;
height: auto;
}
ブラウザで開いて、装飾がされたか確認してみましょう。
まとめ
- WEBサイトは、HTMLとCSSで作られている。
- WEBサイトは、テキストエディタで作ることができる。
- CSSを使うと装飾ができる。