水瓶座列車

どこまで行けるか、とりあえず発車します。

ブログ初心者が知っておきたいHTMLタグとCSSの書き方を解説

f:id:aquarius999:20180926152351j:plain

 

私は、ブログを始めた当初、記事を書くだけで精一杯で、ブログのデザインは、後回しにしていました。

しかし、記事数が増えてきて多くの方に見られるようになり、

ブログのデザインや記事内の項目などをもっと見やすくしていきたいと思うようになりました。

ブログデザインを良くするためには、HTMLとCSSの知識が必要になりますが、

ある程度のHTMLタグとCSSの書き方を知っているだけで、ブログの見た目がかなり変わります。 

ブログをこれから始めるブログ初心者が、最低限これだけは知っておくと良いHTMLタグやCSSの書き方について簡単に解説します。

 

 

 

 

  1.<p>タグ、<br>タグ

 

<p>タグは、文章であることを示すときに使用します。

はてなブログBloggerWordPressでは、ほぼ自動的にこのタグで囲んでくれます。

<br>タグは、改行させる時に使用します。

ブログソフトによって、行間など微妙に変わるので、この2つを使い分けると良いです。

 

  2.<h1>タグ、<h2>タグ、<h3>タグ

 

文字を強調させたいときにこれらのタグを使います。

この項目のタイトル文字は、<h2>タグを使用しています。

<h1>タグを実際に使用するとこんな感じです。

<h2>タグを実際に使用するとこんな感じです。

<h3>タグを実際に使用するとこんな感じです。

 

項目のタイトルなどに使用すると便利です。

 

  3.<li>タグ

 

このタグは、項目や箇条書きにしたいときによく使用します。

  • 使用するとこんな感じです。

単独で<li>タグを使うことは、あまりありません。

ほとんどの場合が次に説明する<ul>タグや<ol>タグと一緒に使います。

 

  4.<ul>タグ、<ol>タグ

 

この2つのタグは、箇条書きにしたいときに使用します。

通常<li>タグを中に入れて使用します。

<ul>タグを実際に使用すると下図の右側のように表示されます。

 

<ul>
  <li>項目1</li>     
  <li>項目2</li>
  <li>項目3</li>
</ul>

  • 項目1       
  • 項目2
  • 項目3

 

<ol>タグは、<ul>タグの「・」が数字になって表示されます。

<ol>タグを実際に使用すると下図の右側のように表示されます。

 

<ol>
  <li>項目1</li>     
  <li>項目2</li>
  <li>項目3</li>
</ol> 
  1. 項目1       
  2. 項目2
  3. 項目3

 

これらのタグは記事の目次によく使います。

 

  5.<div>タグ

 

このタグで囲んだ部分が、1つのブロックとして扱うことができます。

このブロックにクラス定義をして、CSSファイルで背景色や文字色を定義すると、このブロックにだけ反映されます。

なので、記事一覧ページの項目などブログの中の一部分だけ異なるデザインにする場合に良く使います。

例えば、こんな感じです。

 

<div style="background-color: yellow;">
<p>このブロックだけ背景色が黄色にできます。</p>
</div>

 

このブロックだけ背景色が黄色にできます。

 

  6.CSSの書き方

 

CSSの書き方は、超簡単です。初めて取り組むときは、なかなかやる気が起きませんが、

やってみて少しでも理解できれば、そこからは早いです。

CSSの書き方は、上記で説明した<div>タグで説明すると、

まず<div>タグにid定義もしくはクラス定義をします。

 <div id="sample_id"> ・・・ </div>

もしくは、

 <div class="sample_cls"> ・・・ </div>

これらはブログ上に書きます。

 

そして次に、実際にCSS定義する場所ですが、

はてなブログの場合は、デザインー>カスタマイズ(スパナマーク)ー>追加CSSの欄に記述します。

WordPressの場合は、style.cssというファイルに記述します。

 

id定義のCSSに書くサンプルは、こんな感じです。

 

#samble {
   font-size: 0.8em;
   background-color: #fff;
} 

 

クラス定義のCSSに書くサンプルは、こんな感じです。

 

.sample {
   font-size: 1.2em;
   background-color: green;
}

 

基本的に書き方としては、id定義もクラス定義も{}の書き方は同じで、

定義名の前にある「#」か「.」が違うだけです。

 

id定義とクラス定義の違うところは、

id定義でつけた名前は、ページ内に1つのみ使用でき、

クラス定義で付けた名前は、ページ内に何個も使用できます。

 

ページ内に同じようなデザインを離れた場所にする時などは、

クラス定義にしておくとCSSの修正だけで全部のデザインを変えることができるので便利です。

 

  7.最後に

 

 大体これだけ知っていれば、はてなブログWordPressでもかなり見た目が良くなります。

ブログを始めたなら、これらを組み合わせて、

最初の方で記事のフォーマットとなるデザインを考えた方が良いです。

後から一度に修正してもしなくても構わないですが、

やっぱりデザインを決めておくと、記事も書く意欲が出てくると思います。

今回紹介したタグとCSSの定義だけで、

オリジナルなデザインを自分で作ることができるので、

是非トライしてみてください。

 

 

<関連・おすすめ記事>

WordPressに必要なレンタルサーバーのおすすめランキング - 水瓶座列車

はてなブログでjQueryを使ったアコーディオンメニューの作り方 - 水瓶座列車

はてなブログでjQueryを使った階層型メニューの作り方 - 水瓶座列車

はてなブログでダブルレクタングルを設置したら枠線が出たので消したい件 - 水瓶座列車

Bloggerのメニューバーを自分で作成するのは超簡単 - 水瓶座列車

Bloggerでダブルレクタングルを2つ並べるために記事幅を変えたい件 - 水瓶座列車