皆さんが普段何気なく見ているHP最近はいろんなデザインの物がありますがどうやって作っているのか、作ってみたいと感じたことがあると思います。難しそうと思うでしょうがパターンやタグを覚えてしまえば簡単に出来ますしHP作成は自由度も高いのでとても楽しいです。新しくHTMLやCSSに手をつけてみたいという方に向けて優しく始め方を教えていこうと思います。
まずは環境を整える
「HTMLを作りたい！」と思っても最初に何をすればいいか分からないと思いますので、まずは作成環境を整えましょう。HTMLはテキストエディタつまりWindowsでいう”メモ帳”やMacでいう”テキストエディット”で作成が出来ます。しかしタグの入力サポートが無いことに加えCSSの記述も別で開かなければいけないので少し面倒ですし効率も悪いです。ですので、HTMLエディタというHTMLを作る事に特化した物をダウンロードして作成を行いましょう。しかし、世の中にはHTMLエディタが沢山あり何を使っていいか迷ってしまうかと思いますので、私のおすすめの物を簡単にご紹介します。
Visual Studio Code
VSCodeともよばれるVisual Studio Codeは2015年からMicrosoftよりリリースされた無料のHTMLエディタです。HTML以外にも様々なプログラミング言語に対応しているので使える幅は大きいかと思います。VSCodeの優れている点は広い言語対応の他にも自動補完機能で「インテリセンス」とも呼ばれます。他のエディタにもインテリセンスはありますがVSCodeは特に優れています。特定の文字を打つとHTMLが自動で記述されます。そのためタグをいちいち打たなくて済みますので効率良く作業が出来ます。VSCodeはいろんな人に使われているので解説記事も多く追加機能をインスト―ルが出来るので自分が欲しい機能だけいれることが出来ます。以上のことから初心者の方にもおすすめ出来るものになります。日本語対応していますが少し訳に変なところはあります。
プログラムの作り方
VSCodeをインストールしてカスタマイズしたら打ち込んでみましょう。今回の記事はHTMLとCSSの作り方なのでVSCodeの使い方は少し省きます。また別の機会に解説しようと思います。HTMLは”タグ”というものが存在しますVSCodeではインテリセンスがありますのでそこまで多く覚えなくていいと思います。では早速作っていきましょう。まずはプログラムの宣言をします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UFT-8">
<title></title>
</head>
<body>
</body>
</html>
まずは上のプログラムをコピーしてみましょう。タグを覚えたい人は1から打ち込むと覚えやすいと思います。これが基本的に使うプログラムになります。タグの解説も載せておきます。
<!DOCTYPEhtml> | HTMLである宣言 |
<htmllang=“ja”> | HTMLが日本語を扱う宣言 |
<head> | ファイルの読み込み |
<metacharset=“UTF-8”> | 文字コードがUTF-8という宣言 |
<title> | タブに表示するサイトのタイトル |
<body> | HPに表示する部分 |
この基本型からさらに使いたいタグを追加していきます。まずはこのままだと真っ白で何も無い空間ですので色をつけます。基本的にHTMLは文字や画像の配置をする宣言です。HPにおける色などの装飾はCSSを使います。今は背景の色を変えたいと思っているのでCSSはこのようになります。
body{
background-color:skyblue;
}これで何も無い白い空間が綺麗なスカイブルーになりました。こんな感じです。
上のように背景色をつけたい場合は<body>を宣言してからbackground-colorというタグで背景の色が変更できます。色は名前でもカラーコードでもどちらでも変更可能です。まだ色がついただけで味気ないので文字をいれてみましょう。
<body>
<p>hello world</p>
</body>先ほどのHTMLの<body>タグの中に<p>という文字を打つためのタグを指定します指定しなくても文章は表示出来ますがタグをつけないとCSSがつけられなくなってしまいます。上のように<p>の中に書きたい文字を打ち込みましょう。
body{
background-color:skyblue;
}
p{
color:white; font-size:20px;
}先ほどの背景色のパートで色を変えられるようになりましたので、せっかくだったら文字の色も変えてみましょう。今回は<p>という文章を扱うタグで文章を打ち込んでいるのでpを宣言した後はcolorのみで構いません。スカイブルーだったら私は白い文字をいれるのが好きなのでwhiteと打ちます。文字の大きさを変える場合はfont-sizeと宣言の後pxという単位で大きさを指定します。今は20pxで白文字なのでこのようになりました。
まとめ
今回はHTMLとCSSの超基礎をゆっくりと解説しました。HP作成は自分の情報発信の最適な手段だと思います。この記事は連載予定ですので自分のペースに合わせて作成してみてはいかがでしょうか。ではまた次回。