こんにちは、サブローです。
今回は、ブログを始ようとしている、もしくは、始めたけれどHTMLやCSSをほとんど知らないという方へ向けて、HTMLとCSSの入門編として、ブログ記事の文章を装飾できるようになる、というところまでを解説します。
この記事を書いている筆者は、情報系の大学を修了しており、情報技術に関してある程度の知識を有しております。
ちなみに、HTMLとCSSの入門書としては、1冊ですべて身につくHTML & CSSとWebデザイン入門講座 – Mana著がおすすめです。
HTMLとは
まずは、HTMLについて解説します。
HTMLは、ハイパー・テキスト・マークアップ・ラングエッジ（Hyper Text Markup Language）の略で、ハイパーテキストを記述するためのマークアップ言語です。
ハイパーテキストやマークアップ言語については説明を省きますが、要するにHTMLは、Webページを表現するために使われる、テキストの上位互換のようなものですね。
単なるテキストではなく、このテキストは見出しで、このテキストは本文でといったようにテキストに役割を与えることによって、Webページを表現してきます。
それぞれのテキストに役割を持たせるために、HTMLでは、タグを使って表現します。
タグは、
<タグ>テキスト</タグ>
といったようにテキストをタグで囲む形で記述します。
例えば、
<h1>見出し1</h1>
のように書くと、h1タグがついている「見出し1」というテキストは、テキストの通り、見出し1という役割が与えられたことになります。
CSSとは
CSSは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略で、HTMLの要素をどのように装飾するかといった取り決めを記述するため仕組みです。
style.cssといったような別ファイルに記述し、HTMLに読み込ませる形で使います。
それぞれのタグごとの文字の大きさや色などをCSSによって指定することで、自分好みのデザインを作り上げていきます。
CSSは、
タグ {
プロパティ
}
といったように記述し、
h1 {
font-size: 20px;
color: #000000;
}
のように書くと、h1タグの中のテキストを文字の大きさを20px、文字の色を黒で指定したということになります。
HTMLでおさえておきたいタグ
ここでは、ブログにおける頻出タグをご紹介します。
h1〜h6タグ
見出しを表現するためのタグは、h1、h2、h3、h4、h5、h6と6つのタグがあり、h1が一番大きな見出しで、h6が一番小さな見出しになります。
<h1>見出し1</h1> <h2>見出し2</h2> <h3>見出し3</h3> <h4>見出し4</h4> <h5>見出し5</h5> <h6>見出し6</h6>
といったように使います。
pタグ
pタグは、本文に使うタグで、記事の中ではpタグが一番多くなります。
<p>本文</p>
のように使います。
ul、olタグ
ulとolのタグは、箇条書きを表現するためのタグです。
ulは、各項目の先頭が黒い点、olは、数字の1からはじまる箇条書きとなります。
<ul> <li>1つ目の項目</li> <li>2つ目の項目</li> <li>3つ目の項目</li> </ul>
<ol>
<li>1つ目の項目</li>
<li>2つ目の項目</li>
<li>3つ目の項目</li>
</ol>
といったように使います。
aタグ
aタグは、リンクを貼るためのタグです。
aタグを持ったテキストは、クリックができるようになり、クリックするとリンク先のサイトへ飛ぶことができるようになります。
<a href="リンク先のURL">テキスト</a>
のように使います。
class属性とid属性
実際に記事内の要素を装飾する方法を解説する前に、覚えておいてほしい大事なものがあります。
それは、class属性とid属性です。
h1 {
font-size: 20px;
color: #000000;
}
と、CSSでh1タグの中のテキストを装飾する例をだしましたが、これだと、h1が複数あった場合、h1タグが付いている全てのテキストがこのCSSの影響を受けてしまいます。
h1タグのように記事の中で登場するのが1度だけのタグであれば関係のないことなのですが、pタグの場合はどうでしょう。
pタグのように、複数回登場するタグの一部にのみCSSを適用したい場合、この例のような方法では指定できません。
そういった場合に使うのが、class属性とid属性です。
全てのタグは、class属性やid属性を付与することによって、特定の値を持つことができます。
つまり、何の値も持たないpタグと値を持ったpタグは、別々の要素として扱われるので、pタグの一部だけを指定してCSSを適用するといったことができるようになります。
HTML上では、
<p class="class1">本文</p>
<p id="id1">本文</p>
のように記述し、CSSで、
.class1 {
プロパティ
}
#id1 {
プロパティ
}
といったようにclass属性は前に「.（ドット）」を付け、id属性は前に「#（ハッシュ）」を付けて指定することによって、同じタグでもその一部にCSSを適用することができるようになります。
ここで、class属性とid属性の違いについてですが、1つのページ上において、同じclass属性は何度でも使うことができ、同じid属性は1度だけしか使えないという違いがあります。
ブラウザによっては、回数に関係なく表示される場合もありますが、文法的には間違いなので、注意が必要です。
記事内の文章の装飾の仕方
では、実際に記事内の文章を装飾してみましょう。
今回は、僕が使っている方法を紹介します。
記事の本文の中に、一部の文を強調表示させたい時があるんですよね。
例えば、
<p>強調表示したい文章</p>
とあった時に、
<p class="bold">強調表示したい文章</p>
とします。
CSSは、
.bold {
font-weight: bold;
font-size: 20px;
}
のようにすると、文字が太字になり、文字サイズが大きくなるので、強調表示できます。
また、ドットをハッシュにすれば、id属性にも対応できます。
まとめ
今回は、ブログを始めたい、もしくは、始めたばかりの方へ向けて、HTMLとCSSの入門編として、記事内の文章を装飾するようになってもらう、という趣旨で解説をしました。
この基本の方法を覚えておけば、ネット上にCSSでの装飾方法がたくさん紹介されているので、様々な装飾方法に応用できます。
それではまた。
