WePuri


ログイン

パスワードを忘れた方はこちらから

無料登録

「HTML」と「CSS」の役割と基本的な書き方

HTML,CSSは全てのWEBサイトを構築する上で必ず必要な言語です。

私たちが普段見ているWEBサイトやアプリなどは全てと言っていいほどHTML,CSSで構築されています。

「HTML」と「CSS」は別々の言語ですが、基本的にはセットで使っていきます。

役割分担としては

HTML → 骨組み(文字や文章の構成)
CSS → 装飾(色や形の調整)

HTMLとは

HTML(Hyper Text Markup Language)はウェブページを構築するために開発されたマークアップ言語です。
Markup」とは目印をつけることを目的としている言語のことです。

HTMLの書き方

下記はHTMLの1例です

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMLとは</title>
</head>
<body>
    <h1>HTML,CSSカリキュラムの感想</h1>
    <p>
        3時間、HTML,CSSの勉強をしてきました。<br>
        レッスンの感想を書いていきたいと思います。
    </p>
    <h2>HTMLの体験</h2>
    <p>
        まず、HTMLを詳しいことはよくわかりませんが触れてみました。<br>
        タグとタグの間にサンドイッチのように間に文字を入れると何だか形が変わるみたいです。<br>まだまだ奥が深いとは思いますが、想像したより簡単とうい印象でした。
    </p>
</body>
</html>

タグとは

HTMLの書き方はタグで囲むことが特徴です。

例えば<p>このように</p>タグで文字などを囲むことで、その囲まれた文字などの装飾を変えたり、意味を定義することができます。

タグは基本的には「始まり」と「終わり」があり<p>こちらの場合</p>

<p>が始まりで、</p>が終わりとなります。

※「/」をつける事でタグの終わり処理がされます。

htmlのタグ一覧(一部)

HTMLのタグは現在は100種類以上ありますが、一般的に使われているタグはそれほど多くありません。また、基本的なタグの使い方を知っておけばWEBサイトを作っていくことが可能となります。

<html> </html> 
<head> </head> 
<body></body>
<title></title>
<meta>
<link>
<script></script>
<hr>
<br>
<p></p>
<center></center>
<div> </div> 
<i></i>
<b></b>
<ul> </ul> 
<ol> </ol> 
<li> </li> 
<dl> </dl> 
<dt> </dt> 
<dd></dd>
<table></table>
<tr></tr>
<th></th>
<td></td>
<img>

※終了タグを必要としないタグも存在します。

HTMLの基本構造

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLの使い方</title>
    </head>
    <body>
        文章の内容
    </body>
</html>

上記がHTMLの基本的な構造になります。

まず<!DOCTYPE html>と宣言を行い、その後<html lang="ja"></html>の中にHTMLのタグを記載していきます。

<body>ここに書いた内容</body>の中に書いた内容は、Chromeやサファリなどのブラウザで見ることができます。

※詳しくは動画で解説をしています。

CSSとは

CSSはHTMLを美しく表現するためのHTMLの補助言語のようなものです。

例えばHTMLのみで表現をすると下記のようになります↓

上記のHTMLに少しCSSを加えると下記のようになります↓

さらにレベルアップしていくと、HTMLとCSSを組み合わせることで下記のような表現もできるようになります↓

CSSの書き方

CSSは下記のように入力をおこないます。

h1{
  padding:10px;
  background:#333;
  color:#fff;
}
h2{
  padding:10px 0;
  border-bottom:2px dashed #333;
}
p{
  font-size:14px;
}

まず、HTMLのどのタグの装飾を変えたいのか?と宣言し、次に装飾の内容を{}の中に記載していきます。

※詳しくは動画で解説しています。