WordPressに挑戦 – 4限目 –

WordPressに挑戦 – 4限目 –

入力開始

それでは、早速HTMLを入力していきましょう。
まず、この文書は、HTMLですよ〜と、パソコンに伝えなければいけません。
なので、始まりは、<!DOCTYPE html>と、書きます。ちなみに、これらは、全て半角英字入力ですのでお気をつけください。
続いて、<html>で書くのは、ここから、ここまでですよ〜と、パソコンに伝えます。よって、<html>このページの最後は、</html>となります。/のマークは、ここで終わりという意味です。

 

中身

続いて、中身です。まさに今書いているこの文書ですが、まずは、<head>を作ります。ページ自体の名前ですね。

先ほどの、<html>の次に、<head>と入力<title>Word Pressに挑戦-4限目-</title></head>とします。すると、そのページが、Word Pressに挑戦-4限目-と表示されることになります。その次は、実際につらつらと、話が続くわけですが、これらは<body>となります。まずは、区分を意味する<div>を入力します。私は、章みたいなものかなぁと、理解しています。

<div>と入力し、まずは1章目です。1章目の見出しは、<h1>入力開始</h1>となります。そして、実際にその中身の文章は、<p>それでは〜〜〜〜という意味です</p>とします。

全て書き終わったら、</body></html>と入力して、閉じることを忘れないようにしましょう。

見出しを可愛くしよう!

続いて、先ほどの<h1>入力開始</h1>という場所を、もっと目立つ様な可愛い見出しにしていきたいと思います。

これは、CSSという言語を使います。
まずは、<style>と入力します。そして、この様なサイトから、CSSデータをコピペします。こちら
では、<h4>かわいい!</h4>
<style>
h5 {
color: #444;
font-size: 24px;
line-height: 1.6em;
border-bottom: 1px solid #bfbfbf;
}
h5:first-letter {
font-size: 48px;
}

body {
background: #5b6a78;
}

div {
width: 80%;
margin: 0 auto;
padding: 14px;
background: #fff;
}

</style>と、全て、半角英数で入力したらどうなるのでしょうか。

かわいい!

と、なります。先頭の文字だけ大きくなりました。次回は、気に入った見出しのCSSを特集したいと思います。