HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

基礎1. HTMLとCSSを編集してみよう

      2019/04/29   hatano

最初に

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を使うと装飾ができる