CSSのボックスモデル(CSSで画像を中央にする方法)

Webで画面レイアウトをいじくろうとしたときに、margin、border、padding がどこの部分だっけ?と忘れてしまうのでボックスモデルと呼ばれるものを書いてみた。

CSSでは内容(Content)に対して幅と高さの指定ができて、余白部分がpadding、border、marginとなるんだなと。ただこのボックスモデルはブロックレベル要素には効くのだがインライン要素には効かないときがあるらしい(後述)。

[広告]

ブロックレベル要素とは要素の前後に改行が入って要素同士が縦に並ぶもの。インライン要素とは要素の前後に改行が入らず要素同士が横に並んでいくもの。HTMLタグでいうと以下です。

ブロックレベル要素
・div
・h1〜h6
・p
・ul, ol, li
・table
・form
 など

インライン要素
・a
・span
・img
・label
 など

先ほどインライン要素ではボックスモデルの指定が効かないときがあると書きましたが、具体的に言うと「marginは左右は効くが上下は効かない」、「paddingは他の要素の領域を考慮しないので重なるときがある」らしいです。なので、インライン要素でmargin、paddingを使うときは注意が必要そうです。

[広告]

初歩的なんですけれども、、、画像を中央にしたくって、CSSをいじくったときの話。
div(ブロックレベル要素)の中にあるimg(画像)を中央にするにはCSSを以下のようにすればうまくいきました。

■HTMLの内容
<div class=”abc”>
  <img ・・>
</div>

■CSSの内容
.abc { text-align: center;
   margin-left: auto;
   margin-right: auto}

margin-leftとmargin-rightをautoにしておけば画像が中央にいくとばかり思っていたのですが、それだけではdivのブロック領域が中央にいくだけで画像は真ん中より少し左によってしまいます。画像自体も真ん中にするにはtext-alignを使う必要がありました。text-alignは文字列に使うものだと思っていましたが画像にも使えるみたいです。もう少し言うと、text-alignはインライン要素に使えるようです(ブロックレベル要素には使えない)。

レンタルサーバーとVPS(Virtual Private Server)の違い

ブログを始めるにあたりレンタルサーバーを借りようと思ったのだけど、レンタルサーバーとVPS(Virtual Private Server)の違いが初めよくわからなかったので、他の方の参考になればと思い書いておこうと思います。

まず提供される機能(インフラ、OS、アプリケーションなど)の面から分類すると、レンタルサーバーはPaaS(Platform as a Service)、VPSはIaaS(Infrastructure as a Service)に該当します。

IaaSはインフラ(CPU、メモリ、ストレージ、ネットワーク等)のみの提供でOSやミドルウェア、アプリケーションはユーザー自身でインストールと設定を行う必要があります。ただOSのインストールについては管理画面から好みのOSを選択して自動でインストールしてくれるところが多いです。

PaaSはインフラ部分、および、OSとミドルウェア(Webサーバ、データベース等)まで提供されます。ブログサービスを行うCMS(Content Management System)はユーザーがインストール、設定を行います。代表的なCMSとして、WordPress、concrete5、Joomra! などがあります。CMSのインストールは管理画面で操作して自動でインストールしてくれるところがほとんどです。

SaaS(Software as a Service)はインフラからブログサービスまですべて提供されます。ユーザーは提供されたブログサービスを使うだけです。代表的なブログサービスとして、「Amebaブログ」とか「はてなブログ」などがあります。

僕の場合はCMSにWordPressを使い好きなテーマを選びたかったのと、自由にアフィリエイトをやりたかったためSaaS型のブログサービスは検討から外していました。SaaS型のブログサービスは手軽で一番簡単に始められるのですが、いろいろと制約があるからです。ただ情報発信をメインに考えている方であればSaaS型のブログサービスは良いかと思います。

リソースの面でレンタルサーバーとVPSを比べると、レンタルサーバーでは他の利用者とネットワークの帯域、メモリ、CPUなどを共有します。1台のサーバに自分のユーザーを作成してもらい、みんなでそのサーバーを使うのです。そのため、そのサーバーの利用者の誰かが人気ブロガーでそのサイトにアクセスが集中してサーバーに負荷をかけるようなことがあったら、自分のサイトも重くなってしまうかもしれません。その点、VPSの場合は自分専用のリソースを割り当てられます。だいたい契約するときに「CPUは2コア、メモリ1Gのプラン」等、どのスペックで契約するかを選びます。そのためVPSであれば契約したときのスペックは保証されます。

ここらへんの話はレンタルサーバーの提供会社のサイトの説明にあるのですが、僕が一番知りたかったのは「root権限があるのか?」でした。結論を言うと、レンタルサーバーではroot権限はなく通常のユーザー権限のみですが、VPSではroot権限がもらえます。ではVPSのほうがよいのか?というとそうではなくて、VPSを契約した場合はOSの自動インストールのサポートはあるものの、それ以降(それ以外)は全て自分でやらなくてはならないということです。WordPressを使う場合だと、WEBサーバ(Apache)、データベース(MySQL)、PHPのインストールも自分でやる必要があります。それ以外にもセキュリティの設定(iptablesとか)などもそうです。なので、もしWordPressでブログを始めようとするならレンタルサーバーの方をお勧めします。

僕はブログとは別にC言語で作られたプログラムもそのサーバーで動かしたかったのですが、それにはコンパイルをサーバー上で行う必要があり、コンパイラ(gcc)をインストールする必要がありました。始めからgccがサーバに入っていればいいですが、悪意あるプログラムをサーバ上で動かされては困るだろうからサービス提供会社としてはC言語プログラムの実行は許可していなかったです。そうなると、root権限があればあとは好き勝手にできるので「root権限がもらえるサーバーはどこか?」で探して、VPSのことを知った感じです。

具体的に、さくらインターネット株式会社が提供する「さくらのレンタルサーバー」と「さくらVPS」とで比較します。以下のURLに詳細が書かれています。

【さくらのレンタルサーバ】基本仕様

レンタルサーバーだと、WEBサーバ、メールサーバ、FTPサーバ、シェル(SSH)ログイン、データベース、PHP、Perl 等、必要と思われるものはだいたい提供されます。管理画面から「インストール」ボタンを押すだけです。

VPSサービス仕様

これがVPSになると、選べるOSの説明があるだけで他の資料はないです。上級者向けです(初心者では無理だと思う)。なので、ブログをVPSで始めるのはよほどの理由がない限りやめたほうが良いかと思います。

最後に、僕が使ってみた(もしくは使ってみたい)レンタルサーバー/VPSの提供元のバナーを載せておきます。参考にしてみてください。

レンタルサーバーの提供元

[エックスサーバー株式会社]
エックスサーバーはレンタルサーバーを借りようとしたときの第一候補だったのですが、1ヶ月の値段で以下のさくらインターネットにしました。もし支払えるならエックスサーバーにしていたと思います。

[さくらインターネット株式会社]
エックスサーバーかさくらかで迷いましたがこちらにしました。今のところ、使ってみて特に問題はないです。

VPSの提供元

[さくらインターネット株式会社]
サーバー構築から自分で行う必要がありますが、さくらのホームページのサポート情報が充実していたので問題なかったです。

[GMOクラウド株式会社]


GMOクラウドが推しているPleskは使っていません。特に問題はないですが、ホームページのサポート情報はさくらのほうが見やすい感じがします。

さくらインターネットとGMOクラウドを使ってみてサーバー性能は特に不満はないです。サポートにはメールや電話はしたことがないのでオペレーターの親切度はわからないのですが、ホームページの情報でなんとかなりました。