HTMLとCSS タグ&プロパティ一覧

HTMLについて

HTMLは、Webページの骨組みを作るための言語。
タイトル、見出し、画像、リンクなど、文字情報として「何を表示するのか」を決める。
(ちなみにCSSは、装飾として「どのように表示するか」を決める。)

HTML基本の書き方

HTMLの書き方にはルールがある。基本構造と、ぜひ覚えておきたい指定方法をまとめる。

基本のルール

  • <>コンテンツ内容</> タグで挟む
  • 「入れ子」の書き方=①<html>タグ ②<head>タグ ③<title>タグ ④<body>タグ...の順に挟む
  • ホームページにあたるファイルは「index.html」にする
  • 全角英数字を使うことはできない×
  • <タグ名>の中のタグの後に半角スペース空けて属性を書くこともある (例)<a href>
  • <タグ名>の後に="ファイル名"を書くこともある (例)<a href="about.html">

画像を表示する<img>タグの属性とファイルパスの指定方法

<img>タグは、</>の終了タグがない。
「なんの画像を」「どこのファイルから」「代わりの文字情報で」表示するのか、<img>タグ単独で使う。

属性とファイルパスの書き方例
  • src属性=なんの画像を
  • ファイルパス=どこのファイルから
  • alt属性=代わりの文字情報で
ファイルパスについて

ファイルパスは、htmlファイルに対して、画像ファイルがどこにあるのか「階層」を指定する。

  • 画像ファイル名だけ書く=htmlファイルと同じ階層にある場合
  • フォルダ名/画像ファイル名=htmlファイルと同じ階層にフォルダがあり、そこに画像ファイルが入っている場合
  • ../フォルダ名/画像ファイル名=同じ階層の別々のフォルダにhtmlファイルと画像ファイルが分けて入っている場合
ブラウザ表示例1 フォルダ名/画像ファイル名
lessonフォルダの中に htmlファイルとphotoフォルダが同じ階層に入ってる
photoフォルダの中 黒猫の画像ファイルが入っている
imgタグで、htmlファイルと同じ階層のphotoフォルダに入ってる黒猫画像ファイルを指定します
ブラウザ表示


ブラウザ表示例2 ../フォルダ名/画像ファイル名

先ほどとは変わり、lessonフォルダの中にtopフォルダとotherフォルダが同じ階層で入ってる
topフォルダの中にhtmlファイルとphotoフォルダが同じ階層に入っている
photoフォルダの中 前述の通り、黒猫の画像ファイルが入っている
otherフォルダの中 黄色い鳥の画像ファイルが入っている
imgタグで、htmlファイルと同じ階層のphotoフォルダに入ってる黒猫画像ファイルを指定します。
同時に、1つ上の階層のotherフォルダに入っている黄色い鳥画像ファイルも指定します。
ブラウザ表示2

(続く)