HTMLを書く 2 (head編)

プログラミング入門

前回HTMLの<body>部分の解説を書いてみたので、次は<head>編です。

サンプルコードを下に載せておきます。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta name="description" content="サイトの説明">

    <title>タイトル</title>

    <meta property='og:title' content='タイトル'>
    <meta property='og:description' content='サイトの説明'>
    <meta property='og:image' content='画像のアドレス'>

    <link href='cssファイルのアドレス' rel='stylesheet'>
    <script src='javascriptファイルのアドレス'></script>
</head>
<body>
--今回は省略--
</body>
</html>

<head>部分は見た目にはわからないので、多少慣れが必要かと思います。
それまでは、とりあえずどこかのものをコピペして一部を入れ替えるだけでも大丈夫です。

一番はじめの<!DOCTYPE html>はHTML5から使われているものです。
<meta>部分は主にgoogleなど検索エンジンのためのもので、意外と書き方の移り変わりが早いですが、とりあえ2014年では最低限これくらい書いておけばいいと思います。<meta property="og: "の部分はソーシャルメディア向けですが、それ以外にも使われているので、ソーシャルメディアは気にしない場合でも書いておくほうがいいです。

<link href=" " rel="stylesheet">部分では、HTMLを装飾するためのCSSファイルの位置を指定しています。
<script src=''></script>には動きを出すためによく使われる、javascriptのファイルの位置を指定します。

次は何をしたらいい？

普通ならCSSを覚えて装飾の仕方を覚えるところですが、ホームページを作るなら先にBootstrapを使ってみるのがオススメです。
CSSは思うように装飾できるようになるまで慣れが必要ですが、Bootstrapならある短時間である程度の見た目にすることができます。
ブログのカスタマイズならCSSに進みましょう。