はじめに

今回は自分がHTML・CSSを初めて勉強した時の備忘録になっています。

特に目新しいことはありませんが、お付き合い頂ければ幸いです。

見出しの要素

h1などで囲めば見出しになります。数字が大きくなるほど小さくなります。

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>

h1

h2

h3

段落

pタグで囲めば段落になります。

<p>１段落目</p>
<p>２段落目</p>

１段落目

２段落目

通常、hタグやpタグで囲んだ文字列は改行されます。

見出しにはhタグを、それ以外にはpタグを使いましょう。

htmlにもコメントが存在します。以下のように記述してください。

<!-- コメントは表示されない -->

このようにするとhtmlにコメントと認識され、表示されません。

リンクについて

aタグで囲めばリンクになります。リンク先を指定するには、href="リンク先"で指定しましょう。

<a href="https://qiita.com/renesisu727/items/cf86b1d2df7f871f383f">リンク先</a>

リンク先

画像を表示する

画像を表示するにはimgタグにsrc属性を指定し、src="画像のURL"としましょう。

画像を表示する場合は終了タグが必要ないことに注意して下さい。

<img src="https://d1f5hsy4d47upe.cloudfront.net/ac/ac6d5a8d05f5792627a8039a2bddbe79_t.jpeg">

ネット上の画像を貼り付ける場合は、右クリックで画像アドレスをコピーを選べばURLをコピーできます(Chromeの場合)。

リストの作成

ulタグまたはolタグで囲まれたグループの各々をliタグで囲むことでリストになります。

ulタグのグループならば黒丸のリストに、olタグのグループならば数字のリストになります。

<ul>
    <li>これは</li>
    <li>黒丸の</li>
    <li>リストです</li>
</ul>

これは

黒丸の

リストです

<ol>
    <li>これは</li>
    <li>数字の</li>
    <li>リストです</li>
</ol>

これは

数字の

リストです

CSSでliタグのlist-styleプロパティにnoneを指定すると、リストのマークを消すことが可能です。

li {
    list-style: none;
}

また、CSSでliタグのfloatプロパティを変更することで、リストの並びを指定することができます。

leftとすると要素が左から順に横並びに、rightを指定すると要素が右から順に横並びになります。

li {
    list-style: none;
    float: left;
}

htmlのクラスの指定

タグ名の後ろにクラスをつけることで、タグに名前をつけることができます。

この名前はCSSで指定する際に役にたちます。

<h1 class="test">Hello World</h1>

Hello World

html全体の構成について

htmlは全体の構成がある程度決められています。

これについてはあまり覚えていなくても、Emmetなどのツールを使えば何も考えずに!を押した後にTabを押せば一気に補完してくれます。Emmetなどについてはこちらのサイトを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>

</body>
</html>

このコードの意味について解説していきます。

<!DOCTYPE html>の部分は、htmlのバージョンを指定していて、「これはHTML5の形式だよ！」ということを宣言しています。

htmlタグは、「ここからここまでがhtmlだよ！」ということをブラウザに伝えています。

lang属性は必須の項目ではないのですが、ユーザーのためにこのhtmlがどこの言語で記述されているのかを伝えています。今回はlang="ja"なので、日本語を使うという意味です。

headタグの中にはWebページの設定に関する情報を書いていきます。

<meta charset="UTF-8">の部分は文字コードを指定していて、今回は文字コードのUTF-8を利用するというこという意味になります。

UTF-8についてはこちらのサイトによくまとめられているので参考にしてください。

<meta name="viewport" content="width=device-width, initial-scale=1.0">の部分はよく分からなかったのでしらべたところ、こちらの記事に分かりやすくまとめられていたので、参考にしてください。

<meta http-equiv="X-UA-Compatible" content="ie=edge">についてはこちらの記事を参考にしてください。

titleタグにはページのタイトルを入れます。

<link rel="stylesheet" href="stylesheet.css">の部分で、cssファイルを読み込んでいます。

rel="stylesheet"の部分でcssファイルを読みこむ宣言をしていて、href="stylesheet.css"で読みこむcssのファイル名を宣言しています。

htmlのレイアウトについて

Webサイトはヘッダーやメイン、フッターなどの部分に分けられます。

このようにwebサイトの要素をグループ化するときには、divタグを用います。

<div class="header">
</div>

<div class="main">
</div>

<div class="footer">
</div>

htmlのブロック要素とインライン要素について

h1タグやpタグなどの前後に改行が入る要素をブロック要素といい、aタグなどの改行が入らない要素をインライン要素といいます。

inputとtextareaについて

inputタグにより、１行のテキストを受け取ることができます。inputタグに終了タグは不要です。

<p>これはinput要素</p>
<input>

textareaタグにより、複数行のテキスト入力を受け取ることができます。

<p>これはtextarea要素</p>
<textarea cols="30" rows="10"></textarea>

col属性でtextareaの横幅を、rows属性でtextareaの縦幅を決定しています。

type属性について

inputタグにtype属性を指定することで、さまざまなことができます。こちらに様々な例が書いてありますが、例えばtype属性にsubmitを指定すると送信ボタンに変更することができます。

<input type="submit">

CSSについて

CSSは、HTMLの要素に色や大きさ、配置などの情報を付与するものです。書かれている内容(HTML)と体裁(CSS)を別ファイルにすることで、複数のHTMLファイルを同じ体裁にしたり、同じHTMLファイルをPC用とスマホ用の体裁に変更することができます。

CSSの要素の指定方法

CSSはタグやクラスで要素を指定します。タグで指定するときはドットは必要ありませんが、クラスで指定するときはドットが必要になります。

クラスの要素の中のタグを指定するときは「.クラス名タグ名」で指定することができます。

以下の様々な例をみていきましょう。

文字の大きさの変更

以下のようにすることでh1タグの要素の大きさを変更できます。

h1 {
    font-size: 20px;
}

大きさはピクセルという単位で指定します。

文字の色を変更

以下のようにすることでtestクラスの色を赤色にすることができます。

.test {
    color: red;
}

CSSのコメント

以下のようにするとCSSにコメントを記述できます。

h1 {
    /* 文字の色を指定*/
    color: red
}

文字の種類の指定

以下のようにすることで文字のフォントを指定することができます。

h1 {
    font-family: 'Times New Roman', Times, serif;
}

空白が有る場合はダブルクォーテーションで囲む必要があります。font-familyの指定にはこちらの記事を参考にしてください。

背景の色の変更

以下のようにすることで背景の色を変更することができます。

h1 {
    background-color: brown;
}

横幅・高さの変更

以下のようにすることで横幅と高さを指定できます。

h1 {
    width: 400px;
    height: 100px;
}

CSSの空白の調整

paddingについて

paddingを指定することで、上下左右の空白を指定することができます。

値を四つスペース区切りで書いた場合には、それぞれが上　左　下　右　の余白を指定することになります。

値を二つスペース区切り書いた場合には、それぞれが　上下　左右　の余白を指定することになります。

値を一つ書いた場合には、それが上下左右の余白を指定することになります。

h1 {
    padding: 50px 100px;
}

もう一つCSSの空白を調整するものにmarginというものがあるのですが、それを取り扱う前にボーダー（枠線）について取り扱います。

ボーダーについて

borderプロパティを用いることで、枠線の太さ、種類、色を指定できます。

h1 {
    border: 10px solid brown;
}

marginについて

上の部分でpaddingを取り扱いましたが、paddingと似たものにmarginがあります。

paddingとmarginの違いは、paddingはボーダーの内側に余白を作り、marginは余白の外側に余白を作る、ということです。

ボーダーの内側と外側という違いがあるだけで、余白の指定方法はmarginもpaddingも変わりません。

h1 {
    border: 10px solid brown;
    padding: 10px;
    margin: 10px
}

終わりに

今回はここまでになります。まだ必須のものが沢山あるので、次の備忘録でまとめていきます。

お付き合いいただきありがとうございました。

HTML・CSSを0から勉強した時の備忘録