CodeRyoku's BLOG

プログラミング教育サービス「CodeRyoku」の公式ブログです。CodeRyokuの講師が、プログラミングの基本のTipsや講座の開講情報など、ゆるく綴っていきます。

公式サイトはこちら

2018-07-05

【入門編】はじめてのHTML5/CSS3プログラミング

written by: ARAKAWA

keywords: プログラミング, ウェブサイト制作, HTML, CSS, 初心者

HTML/CSSのプログラミングコードのイメージです。

初心者向け、HTML5/CSS3のプログラミングの入門です。HTMLとCSSの簡単なコードをサクッと試してみたいと思います。

1. 準備

以下は、雛形となるシンプルなHTMLファイルです。ファイル名は「index.html」として保存します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ようこそ</title>
</head>
<body>
</body>
</html>

いろいろ書いていますが、初めの段階では、あまり気にする必要はありません。すこし難しいかもしれませんが、2箇所だけ簡単に説明しておきます。headと書いてあるところの中身です。

index.html(抜粋)

<head>
  <meta charset="UTF-8">
  <title>ようこそ</title>
</head>

まず、<meta charset..の箇所ですが、文字コードの設定をしています。このプログラムでは「UTF-8」を指定しています。文書を保存するときに文字コードが違うと文字化けを起こしてしまいます。ハンズオンの講座などをやっていると、よくハマっている方がいらっしゃいます。もう一つ、<title>ようこそ</title>の箇所で、タイトルを設定しています。ブラウザで表示するときのタブの名前なんかに使われています。

2. はじめてのHTML

では、このファイルをベースとして「見出し」を表示してみたいと思います。HTMLでは「タグ」と呼ばれるもので囲むことで、その中身に意味を持たせることができます。タグで囲んだ全体を「要素」というので併せて覚えておくと良いでしょう。以下のようなイメージです。

開始タグと終了タグで囲んで、その中身に意味を持たせることができます。全体を要素と呼びます。

さて、上の例にもありますが、h1タグで囲むと、その中身は「見出し」の意味になります。画面に表示させるには、<body〜<body>の中身に記述してあげます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ようこそ</title>
</head>
<body>
  <h1>はじめてのHTMLです</h1>
</body>
</html>

ファイルを保存してブラウザで確認してみると、画面に「はじめてのHTMLです」と表示されていると思います。

3. はじめてのCSS

では、次にCSSを適用してみたいと思います。先ほどの見出しの文字の色を変更します。具体的にはh1要素に対して「style属性」を適用してあげます。属性と聞くと難しい感じがしますが、要素に何らかのオプションを設定をしてあげる、というように覚えておいていただければ良いと思います。具体的には、以下のように記述します。

index.html(抜粋)

<body>
  <h1 style="color:red;">はじめてのHTMLです</h1>
</body>

「color」は文字の色を指定することができる設定(プロパティと言います)で、赤色を指定しています。この「red」の部分は「blue」「green」といったように変更してあげることで様々な色を表現することができます。
ファイルを保存してブラウザで確認してみると、「はじめてのHTMLです」の文字の色が変更されていると思います。

4. まとめ

今回は「はじめてのHTML5/CSS3プログラミング」ということで難しい理屈は置いておいて、サクッと見出しを作って文字の色を変更してみました。HTML,CSSと聞くとなんとなく難しそうなイメージがありますが、意外と簡単に作成できることを感じていただけたのではないでしょうか。

プログラミングを学びたいですか?
CodeRyokuではプロのITエンジニアによるプログラミング講座、ワークショップを東京、博多、仙台、オンラインで開講しています。オンラインセミナーは全国各地から受講可能です。詳しくは、こちらのページをご覧ください。また、子ども向けプログラミング教室を東京、博多、仙台、大分、オンラインで開講しています。詳しくは、こちらのページをご覧ください。

ブログトップへ戻る

 PROFILE

Kohei ARAKAWA
- System Engineer

宮城県出身のITエンジニア。国内大手IT企業にてシステム開発プロジェクトのプロジェクトマネジメント、複数のWebサイト構築実績。「HTML5レベル1」認定プロフェッショナル等。


 KEYWORDS


 ARCHIVE