WordPress 初心者 HTML・CSS

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

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

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

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

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

 

 

HTMLとは?

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

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

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

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

 

HTMLの書き方

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

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

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

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

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

 

HTMLの基本要素

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

 

基本的なHTMLタグ

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

 

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

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

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

 

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

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

 

<title>〜</title> (タイトルタグ)

『<head>〜</head>』の中で記述するタグで、ページのタイトル情報を記述する時に使用します。

 

<h1>〜</h1> (エイチワンタグ)

『<body>〜</body>』の中で記述するタグで、ページで一番重要な見出しとして使用されます。

例えば、サイトのトップページであればサイトのタイトルであったり、ブログ記事であれば記事のタイトルなどに記述されるのが一般的で、基本的には一ページに一度の使用が望ましいとされています。

 

<p>〜</p> (ピータグ)

『<body>〜</body>』の中に記述するタグで、文章の段落として使用します。

 

<img> (イメージタグ)

『<body>〜</body>』の中に記述するタグで、画像を表示させる場合に使用します。

『src』属性で画像ファイルへのURLを記述し、『alt』属性で画像の説明を記述します。

 

<a>〜</a> (アンカータグ / エータグ)

『<body>〜</body>』の中に記述するタグで、ファイルへのリンクを貼る際に記述します。

『href』属性と組み合わせることによって他のファイルにリンクを貼ることができるようになります。

 

<div>〜</div> (ディブタグ)

『<body>〜</body>』の中に記述するタグで、要素同士をグループ化するために使用されます。

 

HTMLで画像と文字を表示させてみよう

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

次は少し応用編で、上で紹介した基本的なタグを組み合わせてページに画像と文章を表示させてみたいと思います!

先にネタバレすると上の画像のような何の変哲もないシンプルなページが表示されます。

早速、下のサンプルコードをメモ帳などにコピー&ペーストしていただき『index.html』というファイルを作成してからブラウザで確認してみましょう。

 

CSSとは?

CSS(Cascading Style Sheet / カスケーディング スタイル シート)とはHTMLを装飾するための仕様です。

例えばHTMLなどで文字を書いた場合、その文字色を変えたり、動きをかけたりする時に使えます。

 

CSSの書き方

CSSは主に『セレクタ』『プロパティ』『値』の3つで構成されています。

『セレクタ』はHTMLの、これから操作する要素を示しています。

『プロパティー』は『セレクタ』で指定した要素の状態を示しています。

『値』は『プロパティー』で指定した状態をどのように操作するかを指定します。

順番としてはセレクタ { プロパティー: ; }』のように記述します。

例えば、下の例ではbodyセレクタの背景色を赤色にしています。

 

CSSの基本的なプロパティー

ここではCSSでよく使われる、一般的なプロパティーについての書き方と操作方法について説明します。

 

/* 〜 */コメント

プロパティーではないのですが、『/* 〜 */』の中に文字を書くことでコメントとして扱われます。

一般的には開発者がメモ書きとして使用します。

 

color プロパティー

文字色を変更する際に使用できます。

値には16進数(0〜F)を使用でき、先頭に『#』を記述して色を決定します。

 

background-color(background)プロパティー

背景色を変更する際に使用できます。

値には『colorプロパティー』と同じように16進数での記述が可能です。

 

ちょっとアドバイス

16進数と言われても、情報工学をかじっていない人だと少しピンッとこない人もいるかと思います。

上で例としてあげたcolorプロパティーの場合は『#ff0000』が赤色でしたが、なぜこれが赤になるかというと、

『ff』の部分がRed(赤)を表していて、

次の『00』がGreen(緑)を表して、

最後の二桁の『00』がBlue(青)を表しています。

そして、最初の二桁以外の部分が全て『0』だったので赤色が表示されたのです。

 

widthプロパティー

要素の横幅を変更する際に使用できます。

値には主に『px』を単位とした数字を記述します。

 

heightプロパティー

要素の縦幅を変更する際に使用できます。

値は『widthプロパティー』と同じように『px』を単位とした数字を記述します。

 

ちょっとアドバイス

『px』と言われても単位がピンッとこない方は上のwidthプロパティーやheightプロパティーの記述例をみていただくと640pxと書いてあることが確認できるかと思います。

これは、iPhone7の画面の横幅のピクセル数です。

『px』という単位にまだ馴染みのない方は、実際の実機のピクセルサイズを参考に考えると理解しやすいかと思います。

 

HTMLとCSSを繋げよう

CSSはHTMLと組み合わせて使うため、HTMLとCSSを紐ずけして操作できる状態にしておかなければなりません。

まずは上のコードのようにHTMLからCSSを読み込みましょう(HTMLファイルと同じ階層にCSSファイルを作成してください)。

※トップページに使われるCSSファイルの名前は一般的に『style.css』という名前で作成されます。

 

さらに上のサンプルコードのようにHTMLに『id』属性または『class』属性を記述することによってCSSから細かい操作を行うことが可能になります。

また『id』属性の特徴としては1ページに1つしか使えないという特徴があります。

対して『class』属性は汎用的なパーツを装飾する際に使われるので、1ページで何回でも使用できます。

 

HTMLとCSSを組み合わせて使ってみよう

HTMLとCSSを組み合わせて使ってみよう

実際にHTMLをCSS側から操作してみたいと思います。

まず、実行結果は上の画像のようになりました。

HTMLの章で作ったサンプルとは違いすっきりとした印象になったのが分かるかと思います。

上で紹介した方法をもとに、なぜこのような結果になったのか考えながら自分で記述してみましょう。

下は実際に使用したHTMLとCSSのソースコードです。

 

まとめ

HTMLとCSSの使い方について説明してまいりましたが、いかがでしたでしょうか?

すでに知っていた方や、初めて知ったという方もいたかと思います。

HTML、CSSだけを勉強しておけばWEB業界でお金を稼ぐことができるというものではありませんので、必ず周辺の知識も習得するようにしましょう。

ココナラで初めてのサイト制作案件を獲得!!【実績ゼロでもできます】

ココナラで初めてのサイト制作案件を獲得【実績ゼロでもできます】

フリーランスになりたいと思って、今までいろんなエージェントやクラウドソーシングに登録したけど実績が無いから、全く案件が獲得できずに困った経験はありませんか?

ココナラを利用すれば、実績ゼロからでもサイト制作案件を獲得することができます。

技術を身に付けたいと思っていても発揮する場所が無かったり、実績作りに困っている方にオススメです。

現在は稼働していませんが、駆け出しの頃は、よくお世話になったサービスです。

ココナラ 売り上げ

  • この記事を書いた人

岡田元輝

大阪に住んでるWEBエンジニア。
高卒でアルバイトを転々とする生活の中、一念発起し独学でプログラミングを習得。
底辺脱出後はWEB制作(フロントエンド / バックエンドの実装)の仕事をして、休みの日は講師業やウェブサービスの運営とブログアフィリエイトで稼ぐ生活をしています。
WEBに関するお困りごとがありましたら、お気軽にお問い合わせください。

-WordPress 初心者, HTML・CSS

Copyright© WordPressサイトで稼ぐ技術 , 2020 All Rights Reserved Powered by AFFINGER5.