WordPress超初心者のためのHTMLとCSSの基礎知識

 2015/03/03

WordPressはHTMLやCSSの詳しい知識がなくともインストールさえしてしまえばブログが運営できてしまいます。しかし少しオリジナリティーを出したくなった時、HTMLとCSSの知識がなくてはカスタマイズはできません。

わたしはWordPressの初心者の方からカスタマイズの問い合わせをいただきます。その方の多くはそもそもHTMLやCSSを理解されていない方が大半です。そんなHTMLやCSSが何が何だかわからない超超初心者向けにカスタマイズの記事を書いていきたいと思います。何回かにわたり連載していくつもりです。(たぶん)

今回はホントに初心者の方へHTMLとCSSの概要と記述方法をざっくりと説明していきます。

スポンサーリンク


HTMLとCSS

WordPressを理解するにはまずHTMLとCSSが何たるかを知っている必要があります。HTML、CSSを理解することができればWordPressを理解するのが容易になるでしょう。

HTMLとは

ブラウザ上で右クリックし[ソースを表示(ブラウザによって異なる)]を開いてみてください。文字列が並びますがこれがHTMLのソースになります。HTMLはWEBサイトのページの文書構造、つまり段落や見出しなどを明確に分けて文書の意味を正確に分類したり整理したり記述します。

この記事の上の[HTMLとCSS]見出し今読んでいただいているこの文文章・段落です。このように「ここは見出しですよ」「ここは文章・段落ですよ」と文書構造を記述してWebページを作成していくものがHTMLなのです。

CSSとは

cssは一般的にスタイルシートと呼ばれているHTMLの表示形式を記述していくものになります。表示形式とは、見た目の部分で文字の色や大きさ、背景色やレイアウトの位置など本文とは関係ないけれど見やすくするための装飾部分を制御するものになります。

WordPressとは

WordPress は、HTMLとCSS、PHP、JavaScriptなどで構成されたWebアプリケーションです。端折りすぎてちょっと違うかもしれませんがイメージ的にはこんな感じです。
wordPress構成イメージ

WordPressを理解するのにHTMLやCSSを理解して、PHPを勉強して…。などと難しいことは考えなくても大丈夫です。それぞれのプログラム言語の記述のルールを憶える程度でも、グッとWordPressのカスタマイズの幅が広がります。

JavaScriptは動きのある画面を構成したり、計算や情報検索などをWeb上で行うプログラム言語のことで、PHPはサーバー側で動作します。これら個々の説明はまた次の機会に。

以下のサイトはWordPressについてくわしい説明が載っているので初心者の方はぜひ読んでいただきたいブログです。

CSSの記述方法

CSSは以下のように記述します。

セレクタ(←スタイルを適用する対象){
プロパティ1(属性): 値1;←セミコロン(;)は忘れずに
プロパティ2(属性): 値2;
プロパティ3(属性): 値3;
}

セレクタというのはスタイルを適用する対象を示し、属性というのは後述するidセレクタやclassセレクタがそれにあたります。

例えばh2タグのスタイルを指定するときは以下のように記述します。

h2 {
font-size: 24px;
color:#FF0000;
margin-bottom: 20px;
}

またスタイルの内容が同じだったらいセレクタを,[コンマ]で複数設置することもできます。

h2, h3, h4 {
font-size: 24px;
color:#FF0000;
margin-bottom: 20px;
}

コメントアウト

コメントアウトとはCSSファイル内で自分自身がわかりやすいようにちょっとしたメモを入力したりする際に使用します。以下でご紹介しているのはCSSのコメントアウトです。HTML、PHP等はまた別の書き方になりますのでご注意ください。

/* 
ここがコメントアウト
*/

スタイルシートの適用方法

cssの適用方法で最低限憶えておきたいものは以下の3つです。

  • 外部CSSファイルとして記述する
  • <head>内に記述する
  • HTMLのタグに直接スタイルを記述する

では、一つずつ説明していきます。

外部CSSファイルとして記述する

外部CSSファイルというのはWordPressのテーマではstyle.cssというファイルが用意されています。そのファイルにスタイルを書き込んでいきます。テーマにあるheader.phpの<head>内に外部CSSファイルを呼び出すコードが記述されているためstyle.cssをWordPressに適応させているんです。※テーマによっては若干異なる場合あり。

WordPressの既存のテーマをカスタマイズするような場合は特に自分で設置するようなことをしなくてもstyle.cssを修正していくといいでしょう。

<head>内に記述する

WordPressではheader.phpのhead内に以下の例のように記述するとスタイルを適応することができます。WordPressの場合前ページにこのように記述されてしまいますので特に必要性がなければstyle.cssに書き込む方法がいいでしょう。

<style type="text/css">
h2 {
font-size: 24px;
color:#FF0000;
margin-bottom: 20px;
}
</style>

style type=”text/css”は外部CSSに記述する場合は不要です。

HTMLのタグに直接スタイルを記述する

WordPressでは記事を書くときに使う場面が多いかもしれません。いつも黒にしているh2の見出しを一カ所だけ文字色を赤にしたいという場合などに使ったりします。

<h2 style="color:red">これはH2タイトル</h2>

セレクタの種類

セレクタとはスタイルを適用する対象のことを言います。セレクタの種類は多数存在しますが最低でも頭に入れておきたいものは以下になります。

  • 基本セレクタ(タグ)
  • idセレクタ
  • classセレクタ

基本セレクタ(タグ)

セレクタとしてタグを指定しスタイルを適用させます。タグとはh2やh3、pやimgなどのHTMLで文書構造を作っているしるしの事です。タグは種類は多数存在しますが<●●>で始まり</●●>で終わるものがほとんどです(hrなど例外あり)

例:HTML部分

<h2>雨ニモマケズ</h2>

CSS部分

h2{
font-size:24px;
}

id(アイディ)セレクタ

cssの書き方を説明した際に属性というものがありました。idセレクタは特定のid属性を持ったタグに対してスタイルを適用させるものです。

例:HTML部分

<h3 id="midashi1">風ニモマケズ</h3>

CSS部分

#midashi1{
color:red;
}

class(クラス)セレクタ

idとほとんど同じで、classセレクタは特定のclass属性を持ったタグに対してスタイルを適用させるものです。

例:HTML部分

<h3 class="midashi2">雪ニモ夏ノ暑サニモマケヌ</h3>

CSS部分

.midashi2{
color:blue;
}

POINT

Idとclassのちがいについて

idは1ページに1つしか使用しません。CSSでスタイルを指定する際には#(ハッシュ)を使用します。classは1ページで複数回利用することができます。CSSでスタイルを指定する際には.(ドット)を使用します。

イメージ図
セレクタの説明図

CSSはこんな感じ

h2{
font-size:24px;
}
h3{
font-size:20px;
}
#midashi1{
color:red;
}
.midashi2{
color:blue;
}

まとめ

  • HTMLとは文書構造を構成するもの
  • CSSとはHTMLの表示形式を構成するもの
  • WordPressを知る上でHTMLとCSSの最低限の知識は必要

WordPressを勉強するのにWordPressの初心者向けの本を買う以前にHTMLとCSSに関する本を読んでみることをおすすめします。WordPressの情報はネット上に溢れているので、検索するとわからないことの大半が解決できますが、HTMLとCSSは書籍などで勉強する方がはるかに効率がいいですよ。

それでは、次回へ続く(かも)

それではちゅんこ@shufulifeがお送りしましたー

WordPress

Please comment!

  

Messege




1件のトラックバック