この記事はこんな人におすすめ！
- HTMLという言葉を聞いたことはあって、どんなものか興味がある人
- 自身でWebサイトを作成できるようになりたい初学者
- WordPressの機能の理解を深めたい人
目次
はじめに
なおちです。
Webサイトを自分で作れるたらなんか楽しくね？
ってことで、Webサイトを作成できるようになるための情報を長期スパンでまとめていこうと思います。
WordPressを使いこなせれば十分？
たしかに便利だし、ほとんどの人にとってはそうなんですけどね、ロマンよ。
HTMLの基本構造と文法
HTMLの基本構造
HTMLコードは大きく以下の２つの構造で構成されている。
- <head>タグで囲まれたブラウザ上には表示されない設定等を記述するブロック
- <body>タグで囲まれたブラウザ上に表示されるコンテンツを記述するブロック
<head>
<!-- head 内に記述された内容はブラウザ上で表示されない. -->
</head>
<body>
<!-- body 内に記述された内容がブラウザ上で表示される. -->
</body>HTMLの基本文法
HTMLはプログラミング初心者にとても優しい言語なんですよね。
アドレスがどうでcpuアクセスがどのタイミングで、条件分岐は…
みたいな賢そうなこと考えなくていいです。
HTMLはタグで挟んだ要素の集まり
HTMLでは、開始タグ<○○>と、対応する終了タグ</○○>で文字列を囲む。
このタグで囲まれた塊を”要素”という。
以下によく使うタグを紹介する。
タグ名は、大文字/小文字の区別はない。
| タグ名 | 役割 |
| html | ファイルがHTMLであることを示すタグ。 |
| head | HTMLのヘッダ部分を示すタグ。 ブラウザに表示されない諸々を記述する。 |
| body | HTMLのコンテンツ部分を示すタグ。 ブラウザに表示されるコンテンツを記述する。 |
| meta | ページの情報を記述するタグ。 |
| title | タブやお気に入り登録したときに表示されるタイトル。 |
| link | 参照する外部ファイルを記述する。 CSSファイルを読みこむときに必須。 |
タグは入れ子構造を取れる
OKな例
<tag1><tag2>hoge_hoge_hoge</tag2><tag1>
NGな例
<tag1><tag2>hoge_hoge_hoge</tag1><tag2>
タグ2が閉じる前にタグ1が閉じてしまうためNG。
タグの属性指定が可能
タグには、属性を指定することができる。
例
<a href="sample_ref.html"> sample link</a>リンクタグ”a” の参照先URLを設定する属性 “href” で “sample_ref.html”を参照先URLとして設定する。
sample link の部分に下線が引かれてクリックできるようになっている。
基本的には、上記例のように「属性=属性値」の記述となるが例外的に属性のみを記述する場合がある。
コメントアウト
テストコードのように一時的にコメントアウトしたい記述は
下記のように「<!–」 「–>」 で囲むことでコメントアウトできる。
<!-- comment description -->基本記述例
編集中
