HTML/CSSについて

HTML/<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>について

HTML/CSSのお話

日頃様々なwebページを見かけることがあると思いますが、そのwebページの見た目を構成しているのが、HTMLとCSSという言語です。

HTMLとは

HTMLではwebページに表示する内容を記述することができます。〇〇.htmlという拡張子のファイルに記述します。

CSSとは

CSSではHTMLで記述されたコードの修飾をすることができます。〇〇.cssという拡張子のファイルに記述します。

HTMLを書いてみる

HTMLにはタグと呼ばれる様々な要素が用意されています。

htmlタグ
```
<html></html>
```
htmlはこのタグの中で記述します。

bodyタグ
```
<body></body>
```
ウェブページに表示させたい内容をこの中に記述していきます。bodyタグと同じ階層にheadタグというものもありますがここでは割愛。

divタグ
```
<div></div>
```
表示させたいものを一つのかたまりとして定義できます。

hタグ
```
<h1></h1>
```
見出しに使いたい文字をこのタグに記述します。h1からh6まで用意されており、数字が大きくなるにつれ表示される文字が小さくなります。

imgタグ
```
<img>
```
画像やアイコンを表示させたい時に使用します。

aタグ
```
<a></a>
```
リンク先をURLなどで指定し、ページを遷移させることができます。

pタグ
```
<p></p>
```
段落を表します。

ulタグ
```
<ul></ul>
```
順序がない箇条書きをする際に使用します。この間で箇条書きしますよーみたいな感じ。

liタグ
```
<li></li>
```
リスト、箇条書きで表示させたいものを記述していきます。

この他にも様々なタグが用意されています。

実際このタグを使用してコードを書いていくと・・・

<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>HTML/CSSについて</title>
</head>
<body>
    <div>
      これは一つの塊です。
      <h1>見出し1</h1>
      <h3>見出し2</h3>
      <h5>見出し3</h5>
      <img src="ネコ.jpg" class="neko">
      <a href="#">facebook</a>
      <p>段落になります</p>
      <p>改行されました。</p>
      <ul>
        <li>リスト1</li>
        <li>リスト2</li>
        <li>リスト3</li>
      </ul>
    </div>
</body>
</html>