ホームページはHTMLで作られていますが、大きく<head>と<body>に別れます。
<head>は主にCSS等を読み込んだり<meta>タグの設定を行います。
<body>は主にコンテンツを書いていく場所です。ブラウザに表示される。
Bracketsを起動 ➡ ファイル ➡ フォルダーを開く ➡ 02totoroを選択します。
サイドバーの index.html を選びます。
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>
<body>
となりのトトロ
ミミズクに似た姿の大きな体で体長約2m。口が大きく開く。体毛はとてもモフモフしている。年齢は1302歳。
魔法が使えるらしく、木の種を一瞬で大木に育てたり空を飛んだりもできる。
その正体は、森の精である。名前の由来は「所沢のとなりのお化け」から由来している。
仲間(家族?)に白い小トトロと青い中トトロがいる。
トトロ（大トトロ）
中トトロ
小トトロ
中トトロ
毛は青く、よく木の実が入った袋を持っている。
小トトロ
毛は白い。普段は半透明で姿を消すことができる。中トトロと一緒に行動する。
ネコバス
身体がボンネットバスのような巨大な雄ネコ。
</body>
</html>
プレビューして見てください。テキストがつながってあるだけでよくわからないと思います。
これからMark UPとCSSでデザインしていきましょう！
HTML
<head>
<meta charset="utf-8">
<title>トトロ</title>
</head>
今回はスタイルシートCSSをhead内に直接書かず、リンクさせます。
HTML
<head>
<meta charset="utf-8">
<title>トトロ</title>
<link rel="stylesheet" href="style.css">
</head>
CSS
body {
color: #333333;
font-size: 16px;
line-height: 1.7;
font-family: sans-serif;
background-color: #fffff0;
}
color: #333333;（文字カラー）
font-size: 16px; （文字サイズ）
line-height: 1.7;（文字間の高さ）
font-family: sans-serif;（フォントの種類）
background-color: #fffff0;（背景色）
さらに詳しく設定するには
※HTMLの基本とCSS ➡ テキストCSS（Reference）
HTMLの基本とCSS ➡ 見出しをつける ／ 見出しデザインSample CSS （Reference）
HTML
<body>
<h1> となりのトトロ</h1>
CSS
h1 {
background-color: #556b2f;
padding: 20px;
text-align: center;
color: #fff;
border-radius: 10px;
}
HTML
<h2>中トトロ</h2>
毛は青く、よく木の実が入った袋を持っている。
<h2>小トトロ</h2>
毛は白い。普段は半透明で姿を消すことができる。中トトロと一緒に行動する。
<h2>ネコバス</h2>
身体がボンネットバスのような巨大な雄ネコ。
CSS
h2 {
color: #556b2f;
}
テキストを読みやすくするために段落のマークアップをします。
<br>は改行する時やスペースを作りたい時にも使えます。
HTML
<body>
<h1> となりのトトロ</h1>
<p> ミミズクに似た姿の大きな体で体長約2m。口が大きく開く。体毛はとてもモフモフしている。年齢は1302 歳。
魔法が使えるらしく、木の種を一瞬で大木に育てたり空を飛んだりもできる。</p>
<p> その正体は、森の精である。名前の由来は「所沢のとなりのお化け」から由来している。</p>
<p> 仲間( 家族?) に白い小トトロと青い中トトロがいる。</p>
<br>
トトロ（大トトロ）
中トトロ
小トトロ
<h2> 中トトロ</h2>
<p> 毛は青く、よく木の実が入った袋を持っている。</p>
<h2> 小トトロ</h2>
<p> 毛は白い。普段は半透明で姿を消すことができる。中トトロと一緒に行動する。</p>
<h2> ネコバス</h2>
<p> 身体がボンネットバスのような巨大な雄ネコ。</p>
</body>
HTMLの基本とCSS ➡ リストを作る（Reference）
HTML
<ul>
<li>トトロ（大トトロ）</li>
<li>中トトロ</li>
<li>小トトロ</li>
</ul>
リストの上と下に水平線(horizontal rule)を入れてみよう
HTMLの基本とCSS ➡ 区切り線 hr アレンジ
HTML
<hr>
<ul>
<li>トトロ（大トトロ）</li>
<li>中トトロ</li>
<li>小トトロ</li>
</ul>
<hr>
HTML
<body>
<h1> となりのトトロ</h1>
<p> ミミズクに似た姿の大きな体で体長約2m。口が大きく開く。体毛はとてもモフモフしている。年齢は1302 歳。
魔法が使えるらしく、木の種を一瞬で大木に育てたり空を飛んだりもできる。</p>
<p> その正体は、森の精である。名前の由来は「所沢のとなりのお化け」から由来している。</p>
<p> 仲間( 家族?) に白い小トトロと青い中トトロがいる。</p>
<img src="images/ph1.jpg" alt=" トトロの写真">
<br>
<hr>
<ul>
<li>トトロ（大トトロ）</li>
<li>中トトロ</li>
<li> 小トトロ</li>
</ul>
<hr>
<h2> 中トトロ</h2>
<p> 毛は青く、よく木の実が入った袋を持っている。</p>
<img src="images/ph2.jpg" alt="中トトロ">
<h2> 小トトロ</h2>
<p> 毛は白い。普段は半透明で姿を消すことができる。中トトロと一緒に行動する。</p>
<img src="images/ph3.jpg" alt="小トトロ">
<h2> ネコバス</h2>
<p> 身体がボンネットバスのような巨大な雄ネコ。</p>
<img src="images/ph4.jpg" alt="ネコバス">
</body>
今回画像は images フォルダーへ入っているので
フォルダー名（images）/ファイル名（ph1.jpg）のようにパスを書きます。
04でbodyの設定をしましたが、背景に画像を入れてみましょう。
さらに詳しく HTMLの基本とCSS ➡ 背景のCSS
CSS
body {
color: #333333;
font-size: 16px;
line-height: 1.7;
font-family: sans-serif;
background-color: #fffff0;
background-image: url(images/bg.jpg);
background-repeat: repeat;
}
コンテンツがわかりにくいので、ボックスを作ってその中にコンテンツをいれましょう。
これまで「head」「ｈ1」などのタグを使ってきましたが、class名を使ってスタイルを適用することが出来ます。
今回はcontainerという名前を付けました。（英数字の小文字で作成）
HTML
<body>
<div class="container">
コンテンツ
</div>
</body>
CSS
.container{
width: 700px;
margin: 40px auto;
padding: 40px 80px;
background-color: #fff;
}
paddingとmargin について HTMLの基本とCSS ➡ PaddingとCenteredを参考
今の状態でスマホでページを見ると、コンテンツが切れてしまいます。
スタイルシートCSSの「width: 700px;」を「max-width: 700px;」変更します。
CSS
.container{
max-width: 700px;
margin: 40px auto;
padding: 40px 80px;
background-color: #fff;
}
今の状態でスマホでページを見ると、画像が切れてしまって全部表示されません。
CSSに以下を加えておく必要があります。
レスポンシブについては HTMLの基本とCSS ➡ レスポンシブ化を参考
CSS
img{
max-width:100%;
height:auto;
}
viewportとはWebページの表示領域を指します。
viewportを正しく指定すると、画面サイズに応じたレイアウトの最適化ができるようになる。
HTMLのheadタグ内にmetaタグを記述
<meta name="viewport" content="width=device-width, initial-scale=1">
※コピー・ペーストしましょう
HTML
<title>トトロ</title>
<meta name="viewport" content="width=device-width, initial-scale=1">