logo

paizaがお届けする、テック・キャリア・マネジメント領域の「今必要な情報」を届けるWebメディア

トップ > Tech > 【主要タグ一覧＆解説】5分でわかるHTML・CSS入門

【主要タグ一覧＆解説】5分でわかるHTML・CSS入門

Tech Tech-Webデザイン プログラミング
f:id:paiza:20170125183513p:plain

f:id:paiza:20151217152725j:plainこんにちは、吉岡(@yoshiokatsuneo)です。

あらゆる情報が集まるインターネットですが、パソコンや携帯電話のWebブラウザで表示される情報は、全てHTML・CSSで書かれています。逆に言えば、HTML・CSSを使えば、好きなデザインのWebページが作り放題ということです。

HTML・CSSは多くのブログサイトでも使うことができますので、記事にHTML・CSSを少し追加すれば、より表現豊かにわかりやすい記事が書けるようになります。

さらにJavaScript・PHP・Ruby on Rails・Javaなどを学べば、本格的なWebサービスを作ることもできますし、スマートフォンなどで動くモバイルアプリケーションでも、HTML・CSSを使っていることが多いです。

ここでは、HTML・CSSの基本を5分でわかるように簡単にまとめてみます。

【目次】

HTML・CSSファイルの作り方

HTML・CSSファイルの作り方はいくつかあります。

エディタで作る

HTML・CSSは普通の文章と同じようなテキストファイルで使えますので、Windowsのメモ帳や、Macのテキストエディタなどでも利用できますが、専用のテキストエディタであれば、HTMLタグの色を変えてくれるなどの便利な機能もあります。

たとえば、Sublime Text、Atom、Visual Studio Codeなどは、WindowsとMacで利用できる便利なエディタです。

エディタでHTML・CSSファイルを作成した後は、ブラウザでHTMLファイルを開いて表示します。

また、作ったHTML・CSSファイルは、GitHub PagesなどでWebページとして公開することもできます。

ブログで作る

このはてなブログを含めて、多くのブログではHTML・CSSを利用できます。

はてなブログでは、はてな記法やMarkdown記法の中にHTMLを埋め込むこともできます。

オンラインHTML共有サービス(JSFiddle, CodePen)を使う

JSFiddle, CodePenでは、Web上でHTML・CSSを作成できます。

Web上でファイル作成とページの確認が同時に行えて、環境設定も必要ないので、やってみたいことを気軽に試すことができます。

また、作ったファイルは公開できますので、他の人に見てもらうときにも便利です。

はじめてのHTMLファイル

それでは、HTMLを書いてみましょう。

以下のようにファイルを作成してみます。

index.html:

はじめてのHTML

普通のテキストですね。HTMLでは、書いた文章はそのまま表示されますので、実はこのままでも表示できます。

ブラウザなどで確認すると、「はじめてのHTML」と表示されているかと思います。

次に、この文章を大きく表示してみましょう。

以下のHTMLファイルを作成します。

index.html:

<h1>はじめてのHTML</h1>

結果を見てみましょう。

結果:

はじめてのHTML

大きい文字で表示されました。

このHTMLには、見慣れない"<h1>"と</h1>が追加されていますね。

"<"(小なり記号)と">"(大なり記号)で囲まれた"<h1>"の部分をタグといい、タグの中の文字をタグ名と言います。

タグは"<h1>"と</h1>のように、2つを1セットで扱い、その間に何らかの文章を囲むことが多いです。

文章をタグで囲むと、その文章がタグの影響を受けます。ここでは、"<h1>はじめてのHTML</h1>"と書くことで、「はじめてのHTML」という文章に"h1"タグが適用されます。

正式なHTML

今書いたHTMLファイルですが、実は正式なHTMLとはいえません。

正しいHTMLファイルは、下記のような形式になります。 HTMLファイルを一から作る場合に、最低限必要な部分です。

<!DOCTYPE html>
<html>
  <head>
    <title>タイトルです。</title>
  </head>
  <body>
    <h1>はじめてのHTML</h1>
  </body>
</html>

<head>で囲まれた部分をヘッダといい、ブラウザのページとしては直接表示しません。例えば、titleタグではブラウザのタイトルバーに表示する文章を書きます。

<body>で囲まれた部分が、ブラウザの中で実際に表示される文章になります。

【参考】HTML5公式で推奨されているDOCTYPE宣言についてはこちら

タグ

先ほどはH1タグを使いましたが、HTMLでは様々なタグが使えます。ここでは、よく使われる主なタグを紹介します。

ヘッダタグ(H1, H2, H3, H4, H5, H6)

H1, H2, H3, H4, H5, H6タグはヘッダを表すタグで、タグで囲まれた文章を大きく表示します。

H1が一番大きく、H2, H3...とだんだん小さくなります。

例:

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

結果:

H1
H2
H3
H4
H5
H6

改行(BR)

HTMLファイルの文章では、普通に改行をしても改行せずに表示されてしまいます。

改行するにはBRタグを使う必要があります。

例:

1行目
<br>
2行目
<br>
3行目

結果:

1行目
2行目
3行目

リスト(UL, LI)

ULタグの中にLIタグを入れることで、一覧表示を行います。

例:

<ul>
  <li>はじめに</li>
  <li>次に</li>
  <li>最後に</li>
</ul>

結果:

  • はじめに
  • 次に
  • 最後に

リンク(A)

他のWebページへのリンクを作ります。文字をクリックすると、"href"属性で指定したURLのページに移動します。

例:

<a href="http://paiza.jp/works/">paizaラーニング</a>

結果:

クリックした場合に別ウインドウを開くには、「target="_blank"」と書きます。

例:

<a href="http://paiza.jp/works/" target="_blank">paizaラーニング</a>

結果:

画像(IMG)

画像を埋め込むにはIMGタグを使い、"src"属性で画像ファイルを指定します。

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paiza/20170221/20170221130631.jpg">

結果:

画像のサイズを指定すると、それにあわせて画像が伸び縮みします。

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paiza/20170221/20170221130631.jpg" widht="100" height="100">

結果:

整形済みテキスト(PRE)

改行やスペースなどをそのまま表示します。コードなどを埋め込む場合に利用できます。

例

<pre>
1行目
2行目
3行目
</pre>

結果:

1行目
2行目
3行目

表(TABLE/TR/TD/TH)

HTMLで表を作るにはTABLE/TR/TD/THタグを使います。TRタグで囲んだ範囲が表示一行になり、その中にTRタグで列を書いていきます。テーブルのヘッダではTRの代わりにTHを使います。

例:

<table>
  <tr>
    <th>ヘッダの1列目</th>
    <th>ヘッダの2列目</th>
    <th>ヘッダの3列目</th>
  </tr>
  <tr>
    <td>1行目の1列目</td>
    <td>1行目の2列目</td>
    <td>1行目の3列目</td>
  </tr>
  <tr>
    <td>2行目の1列目</td>
    <td>2行目の2列目</td>
    <td>2行目の3列目</td>
  </tr>
</table>

結果:

ヘッダの1列目 ヘッダの2列目 ヘッダの3列目
1行目の1列目 1行目の2列目 1行目の3列目
2行目の1列目 2行目の2列目 2行目の3列目

コメント

HTMLの一部を表示したくない場合、「<!--」と「-->」で囲むことで、その部分が表示されなくなります。

例:

<!--
  ここは表示しない
-->

インラインフレーム(IFRAME)

インラインフレームでは、他のWebページを埋め込むことができます。

ブログパーツのように提供されているパーツを埋め込む場合に利用できます。

実際のHTMLは、埋め込みパーツ提供元で、「共有」や「埋め込み」のようなメニューを選ぶと取得できます。

例:

<iframe src="https://paiza.io/projects/e/kQ-3_NdqqP2OeYmlOViulQ?theme=chrome" width="100%" height="500" scrolling="no" seamless="seamless"></iframe>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d51855.75168019686!2d139.69540495346882!3d35.6773841396102!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xf482f2123e4fb08f!2z77yI5qCq77yJ44Ko44Og44Ki44Km44OI!5e0!3m2!1sja!2sus!4v1485331884759" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

結果:

フォーム(FORM, INPUT)

フォームを使えば、テキスト入力欄、チェックボックス、ボタンを表示することができます。

例えば、Google検索を利用することもできます。

paiza開発日誌検索 Powered by Google

スタイル

タグでは文章の構造を表しましたが、色や大きさなどの文章の表現方法はスタイルを使います。

スタイルの使い方には以下の3つの方法があります。

インラインスタイル

タグのstyle属性にスタイルを記述します。一番基本的な方法です。

<div style="color: red;">赤色</div>

スタイルタグ(STYLE)

styleタグでスタイルを定義する方法です。

タグなどの条件を指定して、スタイルを指定します。複数の場所で同じスタイルを適用する場合に便利です。

例えば、H1タグの色を赤色にするには以下のように書きます。

<style>
h1 {
  color: red;
}
</style>

スタイルを適用するにはクラスを指定すると便利です。クラスはドットで始まる名前で以下のように書きます。

<style>
.color_red {
  color: red  
}
</style>

スタイルを適用するタグには、クラスを"class"属性で指定します。

<div class="color_red">赤色</div>

複数のタグをスペースで区切って指定することもできます。

<div class="color_red font_large">赤色で大きい文字</div>

スタイル情報をファイルとして読み込むこともできます。この場合、以下のようにスタイルを書いたCSSファイルを指定します。

<link href="path/to/file.css" rel="stylesheet">

様々なスタイル

ここでは、便利なスタイルを紹介します。

大きさ

  • font-size

文字の大きさを指定します。

文字で指定する場合、大きい順に"xx-large", "x-large", "large", "medium", "small", "x-small", "xx-small"を使います。"%"で指定することもできます。

例:

<div style="font-size: xx-large;">大きいフォント</div>

結果:

大きいフォント
  • width, height

タグが表す四角部分(ボックス)の大きさを指定します。

<div style="background-color: green; width: 100px; height: 25px;">横長の四角</div>

結果:

横長の四角

色

  • color

文字の色はcolorプロパティを使います。

色は"red", "blue", "yellow"のように名前で指定できます。

利用できる名前はこちらで確認できます。

HTML Color Names

16進数で"#RRGGBB"のように、３原色(赤、緑、青)で指定することもできます。

例:

<div style="color: red;">赤色</div>
<div style="color: #336633;">暗い緑色</div>

結果:

赤色
暗い緑色
  • background-color

背景色を指定します。

例:

<div style="background-color: red;">赤色の背景</div>

結果:

赤色の背景

影

  • text-shadow

文字に影をつけます。この例では2ptずれた位置に赤色の影をつけています。

例:

<div style="text-shadow: 2px 2px red;">影付き文字</div>

結果:

影付き文字
  • box-shadow

四角い範囲(ボックス)に対して影をつけます。insetを指定すると内側に影が着きます。

例:

<div style="box-shadow: 10px 5px 5px black;; background-color: #e0e0e0;">影付きボックス</div>
<div style="box-shadow: inset 0 0 5px gray; background-color: #f0f0f0;">影付きボックス</div>

結果:

影付きボックス


影付きボックス

枠線(border, border-left)

  • border

タグの四角(ボックス)に枠線をつけることもできます。

"boder"タグでは、枠線の幅、形状、色を順に指定します。

例:

<div style="border: 2px solid black;">黒い枠線</div>
<div style="border: 2px solid red;">赤い枠線</div>
<div style="border: 2px dashed black;">点線(ダッシュ)</div>

結果:


黒い枠線

赤い枠線

点線(ダッシュ)
  • border-left

左だけ枠線をつけることもできます。

例:

<div style="border-left: 2px solid black; background-color: lightgray">黒い枠線</div>

結果:

黒い枠線
  • border-radius

丸まった枠線も作れます。

<div style="border: 2px solid red; border-radius: 5px;">丸まった枠線</div>

結果:

丸まった枠線

回転(transform)

回転させることもできます。

例:

<div style="background-color: yellow; width: 100px; border: 1px solid black; padding: 5px;">普通の文章</div>

<div style="transform: rotate(20deg); background-color: yellow; width: 100px; border: 1px solid black; padding: 5px;">20度回転した文章</div>

結果:

普通の文章
20度回転した文章

まとめ

Web開発の基本となるHTML・CSSの応用範囲はどんどん広がっています。Webサイトを構築する場合だけでなく、ブログを書いたり記事を投稿したりする場合に使えることも多く、またモバイルアプリケーションでHTMLを使っているものも多いです。ITエンジニアにとっては基本となる技術ですね。

初心者でもブラウザさえあれば、タグをつけながらいろいろとデザインを変えていけるので、気軽に始めて様々な使い方を覚えていくことができるでしょう。実際にいろいろ書いて試してみることで、より理解が深まります。

動画で学べる「paizaラーニング」でも、動画を見ながらブラウザ上でHTML・CSSを書いたり演習問題を解いたりすることで、気軽に学べるレッスンを公開中です。ぜひお試しください。

HTML/CSS入門編のレッスン一覧 | プログラミング学習サービス【paizaラーニング】

HTML/CSS入門・動画講座も公開中！

「paizaラーニング」では、今回記事の中で取り上げた「HTML/CSSの入門編」も好評公開中です。ぜひごらんください！

paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。

自分のスキルを磨いていきたいという方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。

paizaラーニング

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

paizaのスキルチェック

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのおすすめコンテンツ

CGC codemonster プログラミングゲーム「初恋プログラミング研究会 ～海に行こうよ～」 CGC codemonster プログラミングゲーム「コードモンスター大図鑑 プログラミングでゲットだぜ！」 paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.