iBitzEdge

PHP初心者がいきなり掲示板を作ってみた。その2（CSS編）

Tomomi

こんにちは!!ライターのtomomiです。

今回は、前回書かせていただいた記事「掲示板作成（HTML編）」の続きです。

PHP初心者がいきなり掲示板を作ってみた。その1（HTML編）
2016-07-03

 

前回アレンジしたHTMLコードに、今回はさらにCSSを付け足してデザインを変えていこうと思います。

まずは、現段階での掲示板の見た目と、完成形の掲示板を比べてみたいと思います。

もくじ

現段階と完成形の掲示板のデザインを見比べてみる

今現在の掲示板のデザインと、完成形のデザインを見比べて、どこをどう直していきたいかをイメージしてから作業にかかった方がわかりやすいかと思ったので、一度2つの画像を見てみたいと思います。

HTMLコードを少し追加しただけの現段階の掲示板

今回CSSを追加することで完成予定の掲示板

 

前回のHTMLコードを足しただけではそこまでデザインは変わっていませんが、今回CSSを付け足すことでかなりデザインが変わりそうですね(´ω｀)

パッと見てもわかる変更点だけでも

などがあるかと思います。

これらの変更を今回は1つずつ実行していきたいと思います。

 

「text-align」によりテキストを画面の中心に揃える

まずはテキストを画面の中心に揃えることから始めてみたいと思います。

前回作っておいたCSSファイルを開き、以下のコードを入力するだけです。

body{
    text-align:center;
}

たったこれだけのことで、左に寄っていたテキストが中心に揃ったかと思います。

ちなみに、text-align:center;のcenterをleftにすると画面の左端に、rightにすると右端に寄せられます。

 

「font-family」によりフォントの種類を指定する

次に、フォント（文字）の種類を変えてみたいと思います。

フォントを変えるには以下のコードを付け足しました。（3行目の黄色くハイライトされている部分です。）

body{
    text-align:center;
    font-family: Quicksand, 游ゴシック体, YuGothic, 'ヒラギノ角ゴシック Pro',メイリオ, Meiryo,'ＭＳ Ｐゴシック', sans-serif;
}

font-family:の後にフォントの種類を、優先して表示させたい順に書いていきます。

ユーザーのパソコン環境によっては、見れないフォントもあるため「このフォントが見れなかったらその次に記載しているフォントを表示させる、それもダメならその次のフォント・・・」というように、優先させたい順にフォントの種類を指定できます。

また、「ヒラギノ角ゴシック　Pro」のように間にスペースが入っているフォント名は「” (ダブルクォーテーション)」もしくは「’ (シングルクォーテーション)」で囲む必要があるようです。

フォントを変更する前と変更した後の違いです。

よく見ないとわかりにくいかもしれませんが、画像の左はCSSに何も追加していないデフォルト（もともとブラウザに備わっている書体）の状態、右がCSSにfont-familyを追加してフォントを変更した状態です。

なんとなくですが、文字がオシャレになった気がします・・・。

 

HTMLコードにクラスを追加する

次はCSSによりテキストの位置を変えたり線を入れたりしていきたいのですが、現段階のHTMLコードには必要最低限のコードしか記入していないため、CSSを追加していくためには少し不便な状態です。

CSSコードを記入していきやすくするために、HTMLコードにクラスを追加しました。

追加済みのHTMLコードは以下のようになりました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link href="keijiban.css" rel="stylesheet" type="text/css" media="all">
<title>掲示板</title>
</head>
<body>
<h1>掲示板</h1>
<section>
    <h2>新規投稿</h2>
    <form action="" method="post">
        <div class="name"><span class="label">お名前:</span><input type="text" name="name" value=""></div>
        <div class="honbun"><span class="label">本文:</span><textarea name="comment" cols="30" rows="3" maxlength="80" wrap="hard" placeholder="80字以内で入力してください。"></textarea></div>
        <input type="submit" value="投稿">
    </form>
</section>
<section class="toukou">
    <h2>投稿一覧</h2>
    <p>投稿はまだありません</p>
</section>
</body>
</html>

このようにHTMLコードにクラスを付け足しておくことで、CSSでデザイン部分を細かく直していきたい時にやりやすくなるかと思います。

また、クラスを追加する時ついでに「名前」の部分を「お名前」に書き換えておきました。

ここまでの作業が終わった段階での掲示板の見た目はこんな感じです。

それでは、残りのデザイン部分を変更していきたいと思います。

 

「お名前」と「本文」の入力テキストフォームの間に余白を作る

今の状態だと、「お名前」と「本文」の入力テキストフォーム部分がほぼくっついている状態なので、その間にスペースをあけたいと思います。

そのために以下のようにCSSコードを追加しました。（5~8行目の黄色くハイライトされている部分です。）

body{
    text-align:center;
    font-family: Quicksand, 游ゴシック体, YuGothic, 'ヒラギノ角ゴシック Pro',メイリオ, Meiryo,'ＭＳ Ｐゴシック', sans-serif;
}
.honbun {
    margin-top: 30px;
    margin-bottom: 12px;
}

このように「お名前」と「本文」の間に余白を作ることができました。

 

「本文」の文字を入力テキスト部分の上に合わせる

「本文」という文字が今は入力テキストの下に表示されている状態なので、これを上に合わせられるようにCSSコードを追加したいと思います。

以下のようにCSSコードを追加しました。（9~12行目の黄色くハイライトされている部分です。）

body{
    text-align:center;
    font-family: Quicksand, 游ゴシック体, YuGothic, 'ヒラギノ角ゴシック Pro',メイリオ, Meiryo,'ＭＳ Ｐゴシック', sans-serif;
}
.honbun {
    margin-top: 30px;
    margin-bottom: 12px;
}
.label{
    vertical-align: top;
    margin-right: 5px;
}

 

「本文」の文字が入力テキスト部分の上に合わせることができました。

これでだいぶ完成に近づいてきました!!

後は「投稿一覧」の上に線を入れて完成です。

 

「投稿」ボタンと「投稿一覧」の間に線を入れる

最後は、「投稿」ボタンと「投稿一覧」の文字の間に真っ直ぐ線を入れます。

以下のようにCSSコードを追加しました。（13~17行目の黄色くハイライトされた部分です。）

body{
    text-align:center;
    font-family: Quicksand, 游ゴシック体, YuGothic, 'ヒラギノ角ゴシック Pro',メイリオ, Meiryo,'ＭＳ Ｐゴシック', sans-serif;
}
.honbun {
    margin-top: 30px;
    margin-bottom: 12px;
}
.label{
    vertical-align: top;
    margin-right: 5px;
}
.toukou{
    border-top: 1px solid;
    margin: 40px auto;
    max-width: 975px;
}

線を入れることができたので、掲示板の見た目は一応これで完成しました!!

 

あとがき

なんとか掲示板のデザインは完成しました・ω・

次回はいよいよPHPを導入していく予定です・・・。

そこが一番の問題（汗）

PHPに関してはわからないことだらけなので、少しずつ理解しながら進めていこうと思います。

頑張るぞ～(´；ω；｀)