ブログデザインのカスタマイズ！HTMLとCSSの使い方を簡単に理解する！

html_css

ブログのデザインをカスタマイズをする上で、避けて通れないのがHTMLとCSS.

で、でた━━( ﾟ∀ﾟ)人(ﾟ∀ﾟ )━━!!
聞いたことあるけどイヤだーと思ったそこのあなた！

いや何事もそうですが、１つ１つ見て行けば難しいことはありません。

挫折するとしたら難しいからではなく、簡単そうが故に一気に色々とやろうとし過ぎたり、種類が多くてパニックになってしまっているだけです。

(∩ﾟдﾟ)ｱｰｱｰきこえなーい

いやいや大丈夫。HTML、CSSともデザインをカスタマイズする上ではとても重要ですが、実際はとってもシンプルです。

ここでは概要を説明しますので、この後の章に進むため、ここでしっかり理解しておきましょう。

ポイントは、ブログではテーマを元にデザインを修正することになるため、その修正に必要なもののみを使えるようになれば良い、ということ。（極端に言えば最低限コピペする術を覚えれば良い）

０から１０まで全てを理解して使いこなせるようにならないとダメ！などということはありませんので、ゆったりした気持ちで理解を進めましょう（Webデザイナーを目指すなら話は別ですよ！）

必要な部分だけでも一旦身に付ければ、あなたもメイクアップアーティスト！今後に向けてとてつもなく強力な武器を身に付けたことになります。

Contents

1 簡単動画解説
2 HTMLとは CSSとは
3 HTMLの具体例
4 CSSの具体例
5 今回の復習

簡単動画解説

動画で簡単にポイントを解説をしていますので御覧ください。

詳しくは以下を御覧ください。

HTMLとは CSSとは

ブログを運営して、デザインを少し変えたいな、などと色々調べたすと出てくる「HTML」と「CSS」。

ブログのデザインをカスタマイズするのに必要となるのがこのHTMLとCSSですが、いきなり英語で来られると、

ナンデスカソレ？　(?_?)

となるのが普通です。それでも慣れれば大したものではありませんので安心して下さい。

HTML, CSSを簡単にいえば以下のようになります。

HTMLとは
- HTMLとは、「ここはヘッダー」「これはタイトル」、「これは見出し」、「これは文の塊」（段落）、「これは画像」、など、文の構成や要素を指定するもの。
CSSとは
- CSSとは、それら要素に対して、フォントや文字の大きさ、背景の色、周りを線で囲む、など、見た目のデザインを指定するもの

つまり各々一言で言えば、

HTML　文の構成や要素
CSS　構成や要素に対するデザイン

これらの指定があってこそ Google Chrome や IE などのブラウザは、ウェブページが表示できるんですね。
（今見ているこの記事も、HTMLとCSSで成り立ってます）

これだけでは全くイメージが湧きませんので、以下具体例で見てみましょう。

HTMLの具体例

例えば身近なところではブログの記事のタイトル。

ブログの記事のタイトルを例えば「明日に向かって頑張る！」と付けた場合、HTMLは自動的に以下の様な記述になっています。

<h1>明日に向かって頑張る！</h1>

このタイトルの前と後を囲っている記号 <h1> .... </h1> がHTMLです。

ここでは一種類だけの登場ですが他にも色々なものがあり、それぞれが”タグ”と呼ばれます。（h1でいえば、”h1タグ”という言い方ですね）

タグは<>で囲まれ、
終わりは、終りを示す / を付けたタグで閉じる
<タグ> ・・・・</タグ>

というのが形です。
（<>を含めてタグという場合もあります）
（imgタグや単独で使用する brタグなど、イレギュラーな形をとるものもあります）

上で見た　<h1>明日に向かって頑張る！</h1>　も確かにこの形。

タグには主に以下の様なものがあり、他にも沢山ありますが全て覚える必要はありません。必要となるものだけ調べればOKです。

body：ブラウザで表示されるもの全て
h1, h2, h3, h4, h5, h6: タイトルや見出し
（WordPressの記事を書く時に、記事中の見出しは基本h2を使います。
これは記事のタイトルに h1 が割り当てられるためです）
p: 文のまとまり、段落。
br: 改行
div：まとまった範囲の指定
ul：リスト形式で表示
li：ulの中の１つの項目
a：リンク（アンカー）
img: 画像を表示

※）タグの種類は多くても、デザインを結構いじっていると自然と覚えます

CSSの具体例

上で見たHTMLのタグに対し、文字の色は黒、とか、太字にする、等を指定するのがCSSです。

文字色の指定は、例えば黒色なら、
- color: black;
太字は
- font-weight: bold;

このように、左に指定する項目名（プロパティ）、コロン「：」を挟んでその右に値、最後にセミコロン「 ; 」といった形で指定します。

プロパティ: 値;

（上の例では、color や font-weight がプロパティ、black, bold が値）

※）プロパティに対して指定できる値の種類は決まっています。

具体例

先ほどのタイトルはh1タグで囲まれてましたので、h1に対して「文字色は黒」「太字にする」という指定の仕方は以下のとおり。

h1{
font-weight: bold;
color: black;
}

HTMLのタグに{}をつけ、その中にCSSの指定を書く、という形です。
（font-weightなどの先頭に半角スペースが入ってますが、スペースはあってもなくてもOK。このように半角スペースを入れたりタブを入れたりして見やすくします。）

HTMLのタグ {
プロパティ: 値;
プロパティ: 値;
プロパティ: 値;
・・・・
}

なんとシンプルな。
この形を覚えておけば、色々なことが分かるようになります。（本当）

「プロパティと値」は幾つ指定してもOKです。

デザインを細かく修正する場合は、こうした指定を数多くすることになるため手間暇がかかります（このため途中で挫折していくいんですね）。

それでも１つ１つを見れば難しいものではありません。

今回の復習

HTMLとは、文の構成や要素
- 形式：　<タグ>・・・</タグ>
CSSとは、構成や要素に対するデザインの指定
- 形式：　プロパティ: 値;
HTMLにCSSを適用するときの形式
HTMLのタグ {
プロパティ: 値;
プロパティ: 値;
プロパティ: 値;
・・・・
}
- 具体例
  h1{
  font-weight: bold;
  color: black;
  }