JugemKey
GMOインターネット株式会社
  • GMO

ポイントでお買い物

ホーム > ヘルプ > 管理者ページ・マニュアル

管理者ページ・マニュアル

CSS講座 ： CSSでデザインチェンジ後編

はじめに

前回の講座ではCSSの記述方法であるクラス(class)とHTMLタグに対するスタイル指定に挑戦しました。今回はもうひとつの記述方法である「id」を使ってJUGEMの「plain」テンプレートのレイアウトを大きく変えてみましょう。

HTMLをまったく触らなかった前回に対して、今回は少しHTMLにも触れてレイアウトを変える準備をして、CSSでレイアウトのコントロールをしてみたいと思います。

idとclassはちょっと違う

「id」も「class」と同様、HTMLタグにではなくユニークな名前を付けてそれに対してスタイルを定義するために使います。 HTMLタグにスタイルを継承させる方法は便利ですが、同じタグでも場合によって違うスタイルを定義させたい場合があると思います。そういった場合は「id」や「class」を使用します。HTMLタグにそれぞれユニークな名前を付けて、それらに対してスタイルを定義することが可能になります。そして「class」のときと同様、「id」もHTMLの属性として書き込みます。

<div id="sitetitle">これがこのサイトのタイトルです</div>

CSSファイルに定義を記述する場合は「id」だと「#ユニーク名」となります。ユニーク名の付け方も「class」のときと同様、半角英数で定義していきましょう。

#sitetitle{
font-size: x-large;
font-weight: bold;
}

「id」と「class」は一見同じように使用されているので違いが分かり難いですが、きちんと違いがあります。「id」はページ内で１度しか使われないスタイルに対して使われ「class」は複数回にわたって使われるスタイルに対して使用します。

ブログサイトを作る場合はレイアウトを組むときに使うスタイルは「id」で、その他のスタイルは「class」と使い分けると良いでしょう。

「plain」のレイアウトを読み解く

mainとside

CSSの記述方法やしくみがある程度分かったところで「plain」テンプレートをじっくり見てみましょう。

「plain」のレイアウトは大きく分けて２つのエリアに分かれています。まずはBLOGエントリーが入る「main」と、カレンダーやメニューが入る「side」。もちろん、これらはスタイルシートでスタイル定義されていて、その結果今ご覧になっているようにmainの右隣にsideが来るようになっています。それでは実際、この２つのエリアを定義しているスタイルシートをみてみましょう。

#main {
float: left;
width: 500px;
}
#side {
margin-left: 590px;
padding: 0px 0px 20px 0px;
}

【mainとsideの間に間隔がないと読み難くなる】

mainとside2

エントリーが入るmainには横幅500ピクセルのエリアが左側に寄るように設定されています。mainのほうはあまり難しくないのですが、ここでミソになってくるのがsideのスタイル定義に書かれている部分です。最初の「margin-left: 590px;」というのがありますが、ここでウィンドウの左端から590ピクセル間隔を空けてsideエリアを配置しなさい・・・と命令しています。mainの横幅が500ピクセルなので、500ピクセル以上の間隔を左に空けておけばsideはmainの隣に回り込むことが出来るわけです。

もちろん「margin-left: 500px;」にしておいてもmainの隣に配置することが出来ますが、エントリーがあるエリアとサイドバーがあまりにも近過ぎて読み難くなる場合があるので、ここではmainとsideの間に90ピクセル空けて十分な間隔を作っているわけです。

レイアウトを変えてみる

id:layout

plainのディフォルトだとmainの右隣にsideが配置されていますが、これを逆にしてみましょう。ちょっとHTMLを加えて、CSSをカスタマイズするだけで実現可能です。前回の講座ではHTMLにまったく触れなくても改造可能でしたが、今回はレイアウトを変えるということで構造が記述してあるHTMLに触れる必要が出てきているわけです。とはいうものの、従来のTABLEを使ったレイアウトとは異なり、コードの付け足しを最小限に抑えてレイアウトを大きく変えることが可能になりました。

まずHTMLに２行ほどコードを加えて下ごしらえしましょう。HTML内の<body>の次の行に<div id="layout">を書き込み、</body>の前に</div>を記述します。これでmain、sideを含めたページ全体を制御するlayoutというエリアが作られました。これを入れなくてはならない理由はあとで説明しますが、layoutのようにページ全体を形作るエリアがあるとレイアウトを中央揃えにすることも可能になったり、いろいろメリットもあります。

ではHTMLの記述はこれくらいにしておいて、メインであるCSSを改造していきましょう。まずは先ほどHTMLの中に加えたlayoutのスタイルを定義してみましょう。

#layout{
width: 760px;
}

ここでページ全体のレイアウトの横幅を760ピクセルと指定します。もちろん、この横幅はお好みの数値に設定してもらっても構いませんが、今回は小さめのモニター（解像度800x600)でも横スクロールなく見せるというのを前提にして760ピクセルにしてみました。

また、エントリーのあるmainは既に500ピクセルと設定してあり、sideのほうもカレンダーもあることから最低200ピクセルは欲しいところなので、そのあたりも考慮してlayoutの横幅を決めて行くと良いかもしれません。

layout

それでは、mainとsideのスタイルを設定してディフォルトのplainとは左右逆のレイアウトにチェンジしてみましょう。コードは以下のようになります。

#main {
float: right;
width: 500px;
}
#side {
float: left;
padding: 0px 0px 20px 0px;
}
右寄せと左寄せ

floatを使ってmainのほうは右寄せ、sideのほうを左寄せに設定します。sideは左側に配置したいので、ディフォルトのときにあったmargin-leftは削除します。ちなみにmainとsideにあるfloatの値を逆にしてあげるだけでmainが左側でsideが右側に戻す事も可能です。

このテクニックで重要になってくるのがHTMLにも記述したページ全体を制御するlayoutエリア。もしこれがないとmainのほうがウィンドウ右端からの右寄せ配置するのでウィンドウサイズを広げるとsideとmainの間がだんだん広くなってしまうのです。

横幅をきちんと指定したlayoutエリアが加わることにより、mainの右寄せ配置もウィンドウの右端からではなくlayoutの右端からになるので、ウィンドウサイズを変えてもmainとsideの幅が広くなってくるという問題が発生することはありません。

中央揃えのレイアウト

レイアウトを左右逆に成功したでしょうか？それでは今度はサイトレイアウト全体を中央揃えにしてみましょう。ウィンドウのサイズを変えてもサイトが常にウィンドウの中央に表示させるようにします。先ほどはHTMLにタグを付け足しましたが、このテクニックはCSSに数行付け足すだけで実現可能です。それではまず、bodyとlayoutに新たにプロパティを付け足しましょう。

body {
background-color: #FFF;
margin: 0px 25px;
padding: 0px;
text-align: center;
}
#layout{
margin-left: auto;
margin-right: auto;
width: 760px;
}

【全部中央寄せ】

テキストも中央寄せ

まず、bodyに記述した「text-align: center」でbodyタグ内にあるすべてのタグに対して中央揃えにします。そしてレイアウト全体を制御する「#layout」に対して「margin-left: auto;」「margin-right: auto;」の２つを付け足します。ここで左右に余白幅を自動に設定にしています。この２つを記述することでどのブラウザでも確実にレイアウトが中央に行くようにしています。この状態でサイトをチェックすると確かにレイアウトは中央へ行くのですが、文字を含めたすべてが中央になってしまいます。

【テキストは左寄せ】

テキストは左寄せ

なぜすべて中央揃えになったかというと、bodyタグでの「text-align: center」のためです。レイアウトは中央になってほしいですが、レイアウト内にあるエレメントは基本的に左揃えにしたいです。そこで「#layout」に「text-align: left;」を新しく加えます。これでレイアウトが中央揃えですが、本文は従来のとおり左揃えになりました。

#layout{
margin-left: auto;
margin-right: auto;
text-align: left;
width: 760px;
}

HTMLとCSSの関係を見極める

前回と今回、２回に分けてCSSの基本的な記述方法をご紹介しましたが、この２回で共通しているのがHTMLの構造をきちんと理解してそれに基づいてCSSを記述するという流れです。

まずはHTML内のどこに「id」や「class」があるのかを把握して、どのようなデザインにするか検討していく必要があります。HTMLもCSSも最初はプログラミング言語に見えて非常に分かりにくいかもしれませんが、一気に読み解こうとせず、一部ずつ観察していくと良いかもしれません。

続いて　>>> CSSでテンプレートを作ってみよう 前編
マニュアル内を検索
ケータイからも JUGEM にアクセス！
QRコード