ページのひな型
ファイル名は何でもよいですが、今回は定番の「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;で太文字の指定をしています。
文字の背景色
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; /* 追記 */
}
要素間の余白が広くなりました。
paddingとmarginの違いは、以下のサイトで分かりやすく解説されています。
リンクの色
リンク(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を指定し、ブラウザのウィンドウの横幅を色々と変えてみてください。
ウィンドウの幅を大きくしていくにつれて画像は大きくなりますが、ある時点を境に大きさが変わらなくなることが分かります。
大きさの指定について、以下のサイトが分かりやすいです。