本サイトは記事内に広告を含む場合があります

HTML・CSS WordPress 初心者

WordPressを始めるなら必須知識！！初心者でも理解できるHTMLとCSSの使い方

ウェブをするなら必須知識！！初心者でも理解できるHTMLとCSSの使い方教えます

突然ですが、みなさんはHTML、CSSという言葉を聞いたことはありますか？

ウェブについて勉強を始めた方や中学や高校の時に学校で多少触れたとい方であれば、ある程度何に使えるものなのかはご存知かと思います。

今回はそんなHTMLとCSSとは何なのかを改めて理解していただき、簡単な使い方と、ちょっとした応用方法までご紹介したいと思います。

 

 

HTMLとは？

HTMLとは今あなたがスマートフォンまたはパソコンで見ているウェブサイト構築するためのマークアップ言語(HyperText Markup Language / ハイパーテキスト マークアップ ランゲージ)と呼ばれるタグというもので構成された文章ファイルです。

具体的にウェブの何をするための言語かというと、ウェブで使われる文章や画像などにタグ付けすることによってコンピューターに意味を理解させるために利用される言語です。

例えば、人間は目で見て文章の見出しや画像であることを理解できますが、ロボット(ブラウザのレンダリングエンジン・GoogleBot)は目が無いのでそれを人間のように理解することはできません。

ですので、それにマークアップ(意味付け)することによって初めてロボットはそれが文章であるか、画像であるかが理解できます。

 

HTMLの書き方

上で紹介した通りHTMLはマークアップをする言語なので、タグというものを使うことによってそれを行います。

特徴としては、必ず『<>』開始タグと『</>』閉じタグで記述を行います。

例えはば以下のような書き方がHTMLの基本構造です。

<！DOCTYPE html>
<head>
ページの情報などを記述(例：タイトル、キーワードなど)
</head>

<body>
サイトに表示されるコンテンツ部分
</body>
</html>

 

上の例を見ていただければ、必ず『<html>』という開始のタグがあれば、それに対する『</html>』閉じタグが記述されていることが確認できますね。

そして、HTMLは大きく見た場合、以下の三つのタグで構成されています。

 

HTMLの基本要素

  1. <html>〜</html> (文章がHTMLである事を定義)
  2. <head>〜</head> (ページの情報などを記述 / タイトル、キーワードなど)
  3. <body>〜<body> (ページとして表示される部分)

 

基本的なHTMLタグ

上で紹介した『<body>〜</body>』などのタグの中に別のタグを書き込んでいくことでページとして作り込んでいくことができるようになりますので、よく使われる代表的なタグを紹介していきたいと思います。

 

<!-- 〜 --> (コメントタグ)

HTMLのファイルであれば、どこにでも記入可能です。

『<!-- 〜 -->』の中に記述された文字は画面に表示されることなく、コードを開発中の時や再編集する時に確認のためなどに使用されます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- ここにコメント記述します(ブラウザには表示されません) -->
</head>
<body>
    <!-- ここにコメント記述します(ブラウザには表示されません) -->
</body>
</html>

 

<meta>〜</meta> (メタタグ)

『<head>〜</head>』の中に記述するタグで、主にページ情報を記述する場合に使用されます。

<head> 
    <!-- 文字コードを指定 --> 
    <meta charset="UTF-8"> 

    <!-- ページの概要情報を伝える時に使う --> 
    <meta name="description" content="サイトの概要"> 

    <!-- 検索されたいキーワードを指定(現在はSEO的に意味をなさいないため記述しても、しなくても良い) --> 
    <meta name="keywords" content="キーワード01,キーワード02"> 
</head>
<title>〜</title> (タイトルタグ)
『<head>〜</head>』の中で記述するタグで、ページのタイトル情報を記述する時に使用します。
<head> 
    <title>ページのタイトルを記述します</title> 
</head>
 
<h1>〜</h1> (エイチワンタグ)
『<body>〜</body>』の中で記述するタグで、ページで一番重要な見出しとして使用されます。
例えば、サイトのトップページであればサイトのタイトルであったり、ブログ記事であれば記事のタイトルなどに記述されるのが一般的で、基本的には一ページに一度の使用が望ましいとされています。
<body> 
    <h1>サイトのタイトルまたはブログ記事のタイトルを記述します</h1> 
</body>

 
<p>〜</p> (ピータグ)
『<body>〜</body>』の中に記述するタグで、文章の段落として使用します。
<body>
    <p>1つ目の段落です。</p>
    <p>2つ目の段落です。</p>
</body>
 
<img> (イメージタグ)
『<body>〜</body>』の中に記述するタグで、画像を表示させる場合に使用します。
『src』属性で画像ファイルへのURLを記述し、『alt』属性で画像の説明を記述します。
<body> 
    <img src="画像ファイルへのパス / URLを記述" alt="画像の説明を記述"> 
</body>
 
<a>〜</a> (アンカータグ / エータグ)
『<body>〜</body>』の中に記述するタグで、ファイルへのリンクを貼る際に記述します。
『href』属性と組み合わせることによって他のファイルにリンクを貼ることができるようになります。
<body> 
    <p>これはサンプルテキストです。</p> 
    <a href="飛び先のURL">詳しくはこちら</a> 
</body>
 
<div>〜</div> (ディブタグ)
『<body>〜</body>』の中に記述するタグで、要素同士をグループ化するために使用されます。
<body> 
    <!-- h1タグとpタグをグループ化します --> 
    <div> 
        <h1>サイトタイトル</h1> 
        <p>段落</p> 
    </div> 
</body>
 
HTMLで画像と文字を表示させてみよう
ウェブをするなら必須知識！！初心者でも理解できるHTMLとCSSの使い方教えます
次は少し応用編で、上で紹介した基本的なタグを組み合わせてページに画像と文章を表示させてみたいと思います！
先にネタバレすると上の画像のような何の変哲もないシンプルなページが表示されます。
早速、下のサンプルコードをメモ帳などにコピー＆ペーストしていただき『index.html』というファイルを作成してからブラウザで確認してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>HTMLで画像と文字を表示させてみよう</title>
</head>

<body>
    <div>
        <h1>HTMLで画像と文字を表示させてみよう</h1>
        <img src="https://geek-website.com/wp-content/uploads/2020/04/cropped-mv-7.jpg" alt="Wordpressで稼ぐ技術">
        <p>Wordpressで稼ぐ技術の画像です。</p>
    </div>
</body>
</html>
 
  
CSSとは？
CSS(Cascading Style Sheet / カスケーディング スタイル シート)とはHTMLを装飾するための仕様です。
例えばHTMLなどで文字を書いた場合、その文字色を変えたり、動きをかけたりする時に使えます。
 
CSSの書き方
CSSは主に『セレクタ』『プロパティ』『値』の3つで構成されています。
『セレクタ』はHTMLの、これから操作する要素を示しています。
『プロパティー』は『セレクタ』で指定した要素の状態を示しています。
『値』は『プロパティー』で指定した状態をどのように操作するかを指定します。
順番としては『セレクタ { プロパティー: 値; }』のように記述します。
例えば、下の例ではbodyセレクタの背景色を赤色にしています。
/* bodyセレクタ */
body {
    /* プロパテー: 値; */
    background-color: #ff0000;
}

 
CSSの基本的なプロパティー
ここではCSSでよく使われる、一般的なプロパティーについての書き方と操作方法について説明します。
 
/* 〜 */コメント
プロパティーではないのですが、『/* 〜 */』の中に文字を書くことでコメントとして扱われます。
一般的には開発者がメモ書きとして使用します。
/* ここにコメントを記述します */
 
color プロパティー
文字色を変更する際に使用できます。
値には16進数(0〜F)を使用でき、先頭に『＃』を記述して色を決定します。
p {
    /* 文字色に赤色を指定(redでも可能) */
    color: #ff0000;
}
 
background-color(background)プロパティー
背景色を変更する際に使用できます。
値には『colorプロパティー』と同じように16進数での記述が可能です。
body {
    /* 背景色に赤色を指定(redでも可能) */
    background-color: #ff0000;
}
 
ちょっとアドバイス
16進数と言われても、情報工学をかじっていない人だと少しピンッとこない人もいるかと思います。
上で例としてあげたcolorプロパティーの場合は『#ff0000』が赤色でしたが、なぜこれが赤になるかというと、
『ff』の部分がRed(赤)を表していて、
次の『00』がGreen(緑)を表して、
最後の二桁の『00』がBlue(青)を表しています。
そして、最初の二桁以外の部分が全て『0』だったので赤色が表示されたのです。
 
widthプロパティー
要素の横幅を変更する際に使用できます。
値には主に『px』を単位とした数字を記述します。
div {
    /* divの横幅を640pxに指定 */
    width: 640px;
}

heightプロパティー
要素の縦幅を変更する際に使用できます。
値は『widthプロパティー』と同じように『px』を単位とした数字を記述します。
div {
    /* divの縦幅を640pxに指定 */
    height: 640px;
}

 
ちょっとアドバイス
『px』と言われても単位がピンッとこない方は上のwidthプロパティーやheightプロパティーの記述例をみていただくと640pxと書いてあることが確認できるかと思います。
これは、iPhone7の画面の横幅のピクセル数です。
『px』という単位にまだ馴染みのない方は、実際の実機のピクセルサイズを参考に考えると理解しやすいかと思います。
 
HTMLとCSSを繋げよう
CSSはHTMLと組み合わせて使うため、HTMLとCSSを紐ずけして操作できる状態にしておかなければなりません。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>HTMLでCSSを読み込む例</title>
</head>
<body>
</body>
</html>
 
まずは上のコードのようにHTMLからCSSを読み込みましょう(HTMLファイルと同じ階層にCSSファイルを作成してください)。
※トップページに使われるCSSファイルの名前は一般的に『style.css』という名前で作成されます。
 
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>『id』属性と『class』属性のサンプル</title>
</head>
<body>
    <div id="container"></div>

    <div class="item"></div>

    <div class="item"></div>
</body>
</html>
 
さらに上のサンプルコードのようにHTMLに『id』属性または『class』属性を記述することによってCSSから細かい操作を行うことが可能になります。
また『id』属性の特徴としては1ページに1つしか使えないという特徴があります。
対して『class』属性は汎用的なパーツを装飾する際に使われるので、1ページで何回でも使用できます。
 
HTMLとCSSを組み合わせて使ってみよう
HTMLとCSSを組み合わせて使ってみよう
実際にHTMLをCSS側から操作してみたいと思います。
まず、実行結果は上の画像のようになりました。
HTMLの章で作ったサンプルとは違いすっきりとした印象になったのが分かるかと思います。
上で紹介した方法をもとに、なぜこのような結果になったのか考えながら自分で記述してみましょう。
下は実際に使用したHTMLとCSSのソースコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>HTMLとCSSを組み合わせて使ってみよう</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="container">
        <h1>HTMLとCSSを組み合わせて使ってみよう</h1>
        <img src="https://geek-website.com/wp-content/uploads/2020/04/cropped-mv-7.jpg" alt="Wordpressで稼ぐ技術">
        <p>Wordpressで稼ぐ技術の画像です。</p>
    </div>
</body>
</html>
h1 {
    color: #ff0000;
}

img {
    width: 620px;
}

/* id属性がふられた要素を選択する場合はid名の先頭に『#』を記述して操作します */
#container {
    width: 620px;
    height: 310px;
}
 
  
まとめ
HTMLとCSSの使い方について説明してまいりましたが、いかがでしたでしょうか？
すでに知っていた方や、初めて知ったという方もいたかと思います。
HTML、CSSだけを勉強しておけばWEB業界でお金を稼ぐことができるというものではありませんので、必ず周辺の知識も習得するようにしましょう。
   
 -HTML・CSS, WordPress 初心者