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

  1. ホーム
  2. HTML・CSS
  3. 基礎1. HTMLとCSSを編集してみよう

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

  1. 公開日:2016年03月05日
  2. 最終更新日:2022年08月08日

HTML・CSS

この記事をシェアする:

最初に

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