【Webアプリ】HTMLとCSSの基礎

ページのひな型

ファイル名は何でもよいですが、今回は定番の「index.html」とします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>練習ページ</title>
</head>
<body>
    <!--ここのbodyタグの間に書いていきます-->
</body>
</html>

HTMLタグ

見出し(h1~h6タグ)

<h1>見出し</h1>
    <h2>見出し</h2>
    <h3>見出し</h3>
    <h4>見出し</h4>
    <h5>見出し</h5>
    <h6>見出し</h6>
メモ

以下のような形で書いていきましょう。

段落(pタグ)・改行タグ(brタグ)

<p>段落です。</p>
    <p>メインの本文はpタグで囲います。pタグが終わるか、改行タグ<br />が入ると改行されます。</p>

リンク(aタグ)

<a href="https://google.com" target="_blank">Google(別タブで開きます)</a>
    <br />
    <a href="https://google.com">Google(同じタブで開きます)</a>

リスト(ul・ol・liタグ)

・ulは「unordered list」の略で、順序のないリストに使用します。

・olは「ordered list」の略で、順序のあるリストに使用します。

・liは「list item」の略で、リストの中身に使用します。(ulやolの中で使う)

<ul>
        <li>おはよう</li>
        <li>こんにちは</li>
        <li>今日は</li>
        <li>いい天気</li>
    </ul>
    
    <ol>
        <li>おはよう</li>
        <li>こんにちは</li>
        <li>今日は</li>
        <li>いい天気</li>
    </ol>

画像(imgタグ)

デモ用で以下の画像を使用させていただきました。

犬の無料(フリー)イラスト | かわいい手描きの無料素材「てがきっず」保育園・小学校・介護施設にぴったりのフリー素材イラスト
【切ない動物シリーズ】イヌのイラストです。ちょっと切ない垂れ目に描きました。
<img src="inu.png" alt="犬の画像" />

index.htmlと同じフォルダーの中に画像ファイルを置いてください。

メモ

index.htmlと同じフォルダーの中に画像ファイルを置いてください。

別の場所の画像ファイルを参照する場合は、そのファイルまでの相対パスか絶対パスをしていする必要があります。

表(table・tr・th・tdタグ)

・tableは表を作りたいときに使用し、tr・th・tdとセットです。

・trは「table row」の略で、表の行に使います

・thは「table header」の略で、表の中のカラム名に使います。

・tdは「table data」の略で、票の中でカラム名に対応するデータに使います。

<table>
        <tr>
            <th>id</th>
            <td>0123</td>
        </tr>
        <tr>
            <th>名前</th>
            <td>山田太郎</td>
        </tr>
    </table>

divタグ

ページ内の要素をグループ化するために使います。このタグ自体は意味を持っていないですが、CSSで装飾を効かせる際などに非常によく使用します。

「ブロック要素」として下に積まれていきます。

<div>
        <h1>1日目の記事</h1>
        <p>こんにちは!</p>
        <p>さようなら!</p>
    </div>
    <div>
        <h1>2日目の記事</h1>
        <p>こんにちは!</p>
        <p>さようなら!</p>
    </div>

spanタグ

divと同じくページ内の要素をグループ化するために使用します。

divと違って「インライン要素」となり、下には積まれず横に配置されます。

headerタグ

ページ内のヘッダーに使います。

ページ内の要素をグループ化するためのタグです。

一般的なサイトだと、サイト最上部にあるロゴやメニューなどがこの中に配置されます。

footerタグ

ページ内のフッターに使います。

ページ内の要素をグループ化するためのタグです。

一般的なサイトだと、サイト最下部のコピーライト表記やプライバシーポリシーへのリンクなどがこの中に配置されます。

CSSの基礎

index.htmlと同じフォルダ内に、stylesheet.cssを新規で作成してください。

作成したら、index.htmlがstylesheet.cssを読み込めるように、headタグ内で以下のように記述します。

<head>
    <meta charset="UTF-8">
    <title>練習ページ</title>
    <link rel="stylesheet" href="stylesheet.css"> <!--追記-->
</head>

基本文法

CSSは以下のように記述します。

h6 {
    color: skyblue;
}

各部分には名前があります。

セレクター {
    プロパティ: 値;
}

セレクターはタグ名だったり、クラス名を指定します。その後「{}」で囲むようにして指定したセレクターに適用したい装飾を「プロパティ: 値」の形式で指定していきます。

文字の色

html

<p>ここから<span class="kyoucho">CSS</span>を学びます!</p>

css

.kyoucho {
    color: #ff0000;
    font-weight: bold
}

この例では、文字の色を部分的に変えています。色を変えたい部分をspanタグで囲い、クラス名をつけてあげることでCSS側から場所を指定できるようになります。クラス名は自由につけられます。

CSSを見ていきます。

セレクター部分について、タグによる指定とは違い、クラス名による指定の場合はクラス名の先頭に「.」を付けます。

color: #ff0000;で色を指定しています。色の指定は「#」+6桁の16進数の形式である「カラーコード」、rgb、色の名前などで指定できます。カラーコードなどは以下のようなサイトで調べます。

font-weight: bold;で太文字の指定をしています。

WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本

文字の背景色

css

h1 {
    color: white;
    background-color: skyblue;
}

h1タグに背景色を付けました。HTMLの章で記述したh1タグのついた文字の背景色がすべて水色になっています。

background-color: skyblue;で背景色の指定をしています。

ブロック・ブロックの色

html

<div id="square1">
        <p>四角</p>
    </div>

css

#square1 {
    background-color: skyblue;
    width: 200px;
    height: 200px;
}

divタグを使用してこのような図形を描くことができます。

また、タグにはクラス名のほか、idをつけることもできます。クラス名と同様にidをつけることでCSSから要素を指定することができます。classとidの違いは、classは1つのhtmlファイル中で同じ名前が複数回登場してもOKなのに対し、idはhtmlファイル中で1回しか使用できない点です。

width: 200px;でdiv要素の幅の大きさを、height: 200px;でdiv要素の縦の大きさを指定しています。大きさの指定には「px」のほかに、「%」、「vw」「vh」などでも指定できます。

ブロックの角丸

css

#square1 {
    background-color: skyblue;
    width: 200px;
    height: 200px;
    border-radius: 10px; /* 追記 */
}

角丸は非常によく使われます。

ここではsquare1の四角形を角丸にしています。

余白(padding)

要素の中に余白を取ります。

css

#square1 {
    background-color: skyblue;
    width: 200px;
    height: 200px;
    border-radius: 15px;
    padding: 10px; /* 追記 */
}

余白(margin)

要素の外に余白を取ります。

css

#square1 {
    background-color: skyblue;
    width: 200px;
    height: 200px;
    border-radius: 15px;
    padding: 10px;
    margin: 20px; /* 追記 */
}

要素間の余白が広くなりました。

リンクの色

リンク(aタグ)の文字の色はCSSで特に指定しないと青色になります。

css

a {
    color: red;
}

文字色の指定と同様の方法で指定できます。

画像のサイズ

画像のサイズは特に指定しないと、画素数に応じて表示されてしまいます。高解像度の画像ほど大きく表示され、ページからはみ出ることをよくあります。

画像のサイズはwidthやheigthで指定できるのですが、レスポンシブ対応(パソコンやスマホなど、どの大きさの画面で見てもページ表示が崩れない)も踏まえて紹介します。

pxで指定する場合

css

img {
    width: 200px;
}

幅を指定するだけで元々の画像の縦横比を保ったまま縮小できます。

逆に、画像の縦横比を無視してwidthとheighの両方を指定すると画像が引き延ばされるなどして不自然になります。

また、pxは絶対値なので、例えばパソコンでの表示のみを想定してpxを指定してしまうと、スマホで見たときに要素がページからはみ出してしますことがあります。

vwで指定する場合(よく使う)

css

img {
    /* width: 200px; */
    width: 50vw; /* 追記 */
}

vwとは、ビューポート(=ページの表示領域)の横幅における割合で指定する方法です。例えばパソコンのブラウザでページを見ている場合、ブラウザのウィンドウサイズがビューポートに相当します。

width: 50vw;と指定することで、ビューポートの50%のサイズの幅に指定しています。

ページを表示させてブラウザのウィンドウの横幅を変えてみると、それに合わせて犬の画像のサイズが変わるかと思います。

max-width

vwと合わせて使用したいが、max-widthです。

css

img {
    /* width: 200px; */
    width: 50vw;
    max-width: 500px; /* 追記 */
}

要素の幅の最大値を指定できます。vwでサイズを可変にする場合、大きな画面だと思わぬ大きさになることがあります。

上記のようにmax-widthを指定し、ブラウザのウィンドウの横幅を色々と変えてみてください。

ウィンドウの幅を大きくしていくにつれて画像は大きくなりますが、ある時点を境に大きさが変わらなくなることが分かります。