幸せになり隊

幸せってなに?どうやったら幸せになれるの?そんな思いを密かに燃えたぎらせる人たちの試行錯誤の記録。

5分で分かる?ブログで使えるhtml講座 ~レイアウト初級編~

前回記事「文字装飾編」はコチラ (「CSS」あるいは「style属性」でピンとこない場合は、目を通しておくことをオススメします)

 

はてなブログを書いてて思ったんですけど、htmlを知らないと文字のサイズとか微調整できないんですよね。インデントとか画像の表示位置とか、割と需要がありそうな気がするけど、はてなブログはTinyMCEとか採用する予定はないのだろうか・・・。

 

ということで、今回はレイアウトに関する初心者向けhtml講座です。
レイアウトをマスターすると画面上を自由自在に使うことができるようになるのですが、まずは初級編としてよく使うものからいきたいと思います。

 

例のごとく緑文字で書かれた部分は少し難しい内容なので、興味があったら軽く読む程度でOKです。ある程度知識がついてきたら読み返すと幸せになれるかもしれません。

SEO対策をするならセマンティックを考慮したほうがいいのですが、あくまでも見た目の変化と覚えやすさ、汎用性を重視した内容になっています。

  1. 基本
  2. パディング
  3. マージン
  4. 中央(左、右)寄せ

 基本

htmlにはspanやdivなどたくさんのタグが用意されていますが、レイアウトという観点からいくと「インライン要素」と「ブロック要素」の2つと、その両方の性質をもつ「インライン-ブロック要素」に分けられます。ですがどのタグがどちらに属するかなんて覚えなくても大丈夫です。すべてdisplayというプロパティで設定できます。

  • インライン要素 (display: inline;)
    文中に入る要素でレイアウトは普通の文字と同じように扱われます。
    要素の前後に改行が入らず幅と高さが指定できません。
    代表タグ: span, a, b, emなど文字装飾で使うもの
  • ブロック要素 (display: block;)
    文字とは違い1つの枠として扱われます。
    要素の前後に改行が入り幅と高さが指定できます。
    代表タグ: div, p, table, h1, ..., h6, ulなど
  • インライン-ブロック要素(display: inline-block;)
    要素の前後に改行が入らず幅と高さが指定できます。

具体的な見え方の違いは以下の通りです。
幅はwidth, 高さはheight, 枠線はborderで指定できます。


インライン要素 

あいうえお<span style="display: inline; width: 100px; height: 50px; border: 1px solid red;">かきくけこ</span>さしすせそ

   ↓

あいうえおかきくけこさしすせそ

※spanはインライン要素なので、通常はdisplayの設定は不要です。
※高さを設定したい場合は line-height というプロパティを設定します。


ブロック要素

あいうえお<span style="display: block; width: 100px; height: 50px; border: 1px solid red;">かきくけこ</span>さしすせそ

   ↓

あいうえおかきくけこさしすせそ


インライン-ブロック要素

あいうえお<span style="display: inline-block; width: 100px; height: 50px; border 1px solid red;">かきくけこ</span>さしすせそ

   ↓

あいうえおかきくけこさしすせそ


性質の違いが分かりましたか?
スタイル(CSS)のプロパティにはいろいろな種類がありますが、インライン要素にしか効かなかったり、ブロック要素にしか効かないものがありますので注意してください。

パディング

要素の内側に作られる余白のことです。
上下左右にそれぞれ設定できますがいくつか書き方があり、まとめて同じ値を設定することもできます。

  • 4方向を同じ値で設定 
    padding: 10px;

  • 4方向それぞれを別々のプロパティで設定
    padding-top: 1px;
    padding-right: 2px;
    padding-bottom: 3px;
    padding-left: 4px;

※paddingに設定する値の数によって、4方向それぞれを1つのプロパティで設定することもできます。

値が1つ: [上下左右]
値が2つ: [上下][左右]
値が3つ: [上][左右][下]
値が4つ: [上][右][下][左]

padding: 1px 2px 3px 4px なら[上]に1px, [左]に4pxの余白がつくられます。

 


<span style="padding: 10px; border: 1px solid red;">あいうえお</span>

あいうえお

 


<span style="padding-left: 50px; border: 1px solid blue;">あいうえお</span>

あいうえお

 

マージン

要素の外側に作られる余白のことです。 
上下左右にそれぞれ設定できますがいくつか書き方があり、まとめて同じ値を設定することもできます(パディングと同じなのでそちらを参照してください)
※インライン要素は左右しか効きません。

 


<span style="margin: 10px; border: 1px solid red;">あいうえお</span>

あいうえお

 


<span style="margin-left: 50px; border: 1px solid blue;">あいうえお</span>

あいうえお

 

 中央(左、右)寄せ

文字や画像を中央に寄せるやり方です。text-alginで設定します。
幅が設定された要素の中で使うのでブロック要素に設定して使います。
※通常ブロック要素はwidthを指定しなければ横いっぱいに広がります。

 <div style="text-align: center; border: 1px solid red;">中央寄せ</div>

中央寄せ
 

<div style="text-align: left; border: 1px solid green;">左寄せ</div>

左寄せ
 

<div style="text-align: right; border: 1px solid blue;">右寄せ</div>

右寄せ
 

 

パディングとマージンの違いをまとめると以下のような図になります。
分かりにくいですが少し濃い枠線が要素そのものの枠で、内側にパディング、外側にマージンがあるということです。(他にボーダーなんかもありますが、いろいろなスタイルの関係性がこの図で分かるようになっています。

f:id:wbhappy:20141115123637g:plain

おわり