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

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

      2017/07/11

最初に

WEBサイトがどのように作られているか、HTMLとCSSを書いて体験してみましょう。

解説にあたり、ホームページのことは、WEBサイトまたはサイトと表記しています。

今回は、必要なファイルとテキストデータを用意しています。
下記をクリックしてダウンロードして、解凍しておきましょう。
html01.zip
html01フォルダの中に下記のファイルがあるか確認してみましょう。

  • index.html
  • style.css
  • text.txt
  • book.jpg

記述する際に、全角と半角入力の切り替えに注意してください。
記号はすべて半角入力です。
正しく表示されない場合は「compフォルダ」に完成データを用意してありますので、どこが間違っていたか間違え合わせをしてみましょう。

HTMLを記述してみる

index.htmlをメモ帳などのテキストエディタで開きます。
ダブルクリックをすると、ブラウザが開いてしまいますので、テキストエディタから「開く」を選んで開きましょう。

次に、text.txt内のテキストをコピーしindex.htmlの下記のなかに貼り付けましょう。

貼り付けたら、テキストを挟むようにタグを記述していきます。

記述したら、保存してindex.htmlをダブルクリックして、ブラウザで表示してみましょう。

改行をしてみる

pタグ内のテキスト内に下記のbrタグを入れると改行になります。 いくつか記述して、ブラウザで表示して改行されているか確認してみましょう。

ハイパーリンクを設定する

クリックすると、他のサイトを表示する設定をしていきます。
テキストの「青空文庫」の部分を下記のように変更しましょう。

ブラウザで開いて、クリックしたら「青空文庫」に移動するか確認してみましょう。

画像を表示してみる

h1タグの下の行に下記を記述してみましょう。

ブラウザで開いて画像が表示されているか確認しましょう。

CSSで装飾してみる

style.cssをテキストエディタで開きます。@charset "UTF-8";の下に下記を記述してみましょう。

ブラウザで開いて、装飾がされたか確認してみましょう。

まとめ

  • WEBサイトは、HTMLとCSSで作られている
  • WEBサイトは、テキストエディタで作ることができる
  • CSSを使うと装飾ができる

 - HTML・CSS