前回の記事を読んでない方は下からお願いします。
→シンプルな同人サイトの作り方！HTML編！

HTMLで基盤を作ったので今度はCSSで形を整えていきます。レイアウトのところが少しややこしく感じてしまうかもしれないですが、慣れもあるので何度もチャレンジしてみましょう！

スタート時のページ

リセットCSS

CSSにはリセットCSSって呼ばれるものがあります。これは何かというと…
世の中には様々なブラウザーがありますが、ブラウザーによって初期設定(余白など)が違うので表示が変わってしまいます。だからいったんそれをリセットしてしまおう！というものです。これに関しては色んなものが出ていて、個人での解釈が違うのでいまいちどれを扱えばいいのか分からないのが現状…。

今回は初心者向けですし、簡単な部分だけリセットしてみたいと思います！

ひとまずレイアウトする時に壁になりそうなので、余白に関するものだけ0の値を設定しました。

CSSの場合は/*ここにコメント*/このようにしてコメントを書くことができるのでHTML同様に書いておくとどれがどれかわかりやすくなります。

余白を無くすとぎっちり左に詰まりました。

全体のフォントを指定する

フォントを指定します。メイリオはwindows向けで、ヒラギノ角ゴはMac向けとして書いています。ここにMS P ゴシックなどを書くこともできます。sans-serifはブラウザ標準のゴシック体で表示されます。左側から優先的に読み込まれる模様。フォントの大きさは大きめの16pxにしてみました。

同人サイトでは文字が小さなサイトの方が多いですよね。これは主観なので小さくしたい方は調節してみてください。

フォントがメイリオになってすこーし柔らかくなった気がします*

コンテンツを中央揃えする

簡単なページを作る時に使ったものと同じなので説明は割愛します！

サイトタイトルの設定

フォントサイズは%でも指定する事が可能です。bodyに16pxを指定しているので、それの200％にしてみました。また、上下に余白が欲しかったのでmarginを設定。

ちなみに100%指定だとこうで…

200%でこうなりました！

メニュー部分を装飾

さてサイトのナビゲーションは大事な部分ですよね！各コンテンツへのリンクが張ってある大事な部分です。まずはここのリストの黒丸を消します。ulにはnavというidをつけていたので、以下の様な記述になります。

リストを横並びに変える

リストは基本的に勝手に改行されるブロックレベル要素というものに属しているので、横並びにできるようにするにはひと手間加えなくてはいけないんです。そこでliの要素に追加します。

CSSには子孫要素というものがあり、ulのnavというidの中のliという風に指定して書くこともできます。

display:inlineという部分が横並びにするプロパティとその値です。続くfloat:leftは左側に寄ってね！と指定している部分です。このふたつがあることで横並びになってくれるんです。

そして更に２つのプロパティを足して書きます。

text-align:centerは文字を中央寄せにするもので、width:20%は、メニュー数が5つなので足して100%になるように指定した数字です。要は100%をメニュー数で割った数字ですね！ピクセル(px)でも指定できますが、960pxに収まるようしっかり計算しなきゃいけません。現時点の姿はこんな感じです。

floatを解除する！

先ほどliの要素にfloat:leftという左に寄せるプロパティを使いました。実はこの要素を使った時にはきちんと解除してあげないと、次にくるコンテンツに変な影響が出たりします。解除の方法は２つありますが、今回はoverflow:hiddenというものを使って解除しましょう！

今は訳がわからないと思うので、とりあえずli要素にfloatを使ったらulにoverflow:hiddenを書く！って覚えておいてください。

ついでに上下にボーダーを追加します。

まずは細めのメニューが完成いたしました！

メニューを太くして触れた時の色を変えよう！

では今度はメニューを太くします！…がその前にa要素を変化させる必要があります。さっきはliの要素をインラインといって横に並べましたが、今度はa要素をブロックにしてあげなければなりません。(ブロックにしてもちゃんと横並びのままです)今回のスタイルだと四角いボックス部分に触れたらどこでもクリックできるようにしてあります。そうする為に必要なのがdisplay:blockという部分です。

li要素に含まれているリンク(a要素)に指定するので以下のような書き方になります。

ブロックレベル要素にしてあげた後に、paddingで内側を広げてボックスの見た目を広くしています！後はリンクの下線を消して、文字色を黒に指定です。

そして、マウスが触れた時の指定もしておきます。背景色と文字色だけ変えていますよ！

マウスが触れた時の反応などはデモを見た方が早いです！

デモサイトを表示

メニューの横に縦線も入れたい場合

横線を入れたい場合は少し計算が厄介になってきます。それはなぜか？
例として作ってみますので画像を見てくださいね(ダウンロードできるファイルにこちらは含んでいません)

通常メニューバーの真横に線を入れたい時は
ulに border-rightを使って一番右端に線を入れ、
liに　border-leftで個のメニューの左側に線を入れていく事が多いと思います。ここで問題になるのが横幅の定義です。

普通にwidth:20%のままでできるんじゃないの？って思うかもしれませんが、試しにやってみます。

ul#navに一文足しました。

結果はこうなります。ここまではできてますね。

次に左側に線を出すための一文をul#nav li に足します。

すると…なんということでしょう。ぽろりと左側に落ちています。

これは俗にカラム落ちって呼ばれます。今回の例でいうと定めている横幅960pxを超えてしまったので下にころっと落ちてしまったんです。

width:20%で5分割してるんだから普通できるだろ！！

と思うのも仕方がありません。レイアウトの際にこのwidthを理解しておくことが非常に大事です！
ちょっとわかりにくいかもしれないので画像で説明。

ちょっと寄り道★widthの説明

実はwidthで指定した値の中にはpaddingもborderも含まれていません！オレンジの部分だけがwidthになっていて、paddingはピンクの領域。ボーダーは赤い線の部分です。

もっとかみ砕いて説明すると…例えばさっきメニューの個別の大きさをwidth:20%でつくろうとしましたよね？そしてカラム落ち。

width:20%が5個分になると既に100%になってしまいます。(ここでは960pxになっているということ)
そこでborderを足そうとすると、元々のwidthの値にborderは入らない為、
width960px+6px=966pxになってしまうからさっきのメニューは落ちてしまったんですね。

じゃあ真横に線を入れたメニューを作るにはどうすればいいのか。まずは何pxの線を引くかを確認しましょう！今回の場合は1pxの線で5つのメニューがあるので、6つの線＝6px分の場所が必要になります。

960px(全体の幅)－6px＝954px(メニューに使える幅)

という計算ができました！しかし954は5で割り切れないので以下のように設定します。
191pxのメニューを4個と1個はclass指定で190pxに。これでぴったり954pxになります。実際の設定方法はこうです。まずul#nav liの方(4個のメニュー)はwidth:191pxを指定します。

そしてliの1つにclassをつけます。(ここでは.menu01)

CSSファイルを変えたら次はHTMLファイルの方も変えます。
li要素の一番最初にさっきCSSで決めたclass名を入れてください、ひとつだけですよ！

するとカラム落ちしていたメニューが…綺麗に表示されました^^♪

今後コンテンツなどのレイアウトをする時もこのwidthに対する概念っていうのが重要になってくるので、上手く横並びにならない時はwidthのサイズ指定に注目してみてください！

長くなってしまったので、メイン部分のレイアウトは次回の記事にします！

次：シンプルな同人サイトの作り方！CSS編2パート