PHP初心者がいきなり掲示板を作ってみた。Statusおすすめ脱獄アプリ週間TweaksフォーラムiBitzEdgeHTML・CSSPHP初心者がいきなり掲示板を作ってみた。for:PHP初心者がいきなり掲示板を作ってみた。コメント)こんにちは!!ライターのtomomiです。今回は、前回書かせていただいた記事「掲示板作成(HTML編)」の続きです。PHP初心者がいきなり掲示板を作ってみた。その1(HTML編)2016-07-03前回アレンジしたHTMLコードに、今回はさらにCSSを付け足してデザインを変えていこうと思います。現段階での掲示板の見た目と、完成形の掲示板を比べてみたいと思います。もくじ現段階と完成形の掲示板のデザインを見比べてみる「text-align」によりテキストを画面の中心に揃える「font-family」によりフォントの種類を指定するHTMLコードにクラスを追加する「お名前」と「本文」の入力テキストフォームの間に余白を作る「本文」の文字を入力テキスト部分の上に合わせる「投稿」ボタンと「投稿一覧」の間に線を入れるあとがき現段階と完成形の掲示板のデザインを見比べてみる今現在の掲示板のデザインと、完成形のデザインを見比べて、どこをどう直していきたいかをイメージしてから作業にかかった方がわかりやすいかと思ったので、一度2つの画像を見てみたいと思います。́ω`)パッと見てもわかる変更点だけでも「名前」を「お名前」に変更(この変更はCSSではなくHTMLで行います。)テキストが画面の中心に揃っている「名前」と「本文」の入力フォームの間にスペースがある「本文」の文字が入力フォームの上の段に合わせられている「投稿ボタン」の位置が変わっている「投稿一覧」の上に線が入っているよく見るとフォントの種類が変わっている・・・気がするなどがあるかと思います。これらの変更を今回は1つずつ実行していきたいと思います。「text-align」によりテキストを画面の中心に揃えるまずはテキストを画面の中心に揃えることから始めてみたいと思います。前回作っておいたCSSファイルを開き、以下のコードを入力するだけです。text-align:center;}たったこれだけのことで、左に寄っていたテキストが中心に揃ったかと思います。ちなみに、text-align:center;のcenterをleftにすると画面の左端に、rightにすると右端に寄せられます。「font-family」によりフォントの種類を指定する次に、フォント(文字)の種類を変えてみたいと思います。フォントを変えるには以下のコードを付け足しました。(3行目の黄色くハイライトされている部分です。sans-serif;}font-family:の後にフォントの種類を、優先して表示させたい順に書いていきます。ユーザーのパソコン環境によっては、見れないフォントもあるため「このフォントが見れなかったらその次に記載しているフォントを表示させる、それもダメならその次のフォント・・・」というように、優先させたい順にフォントの種類を指定できます。(シングルクォーテーション)」で囲む必要があるようです。フォントを変更する前と変更した後の違いです。見ないとわかりにくいかもしれませんが、画像の左はCSSに何も追加していないデフォルト(もともとブラウザに備わっている書体)の状態、右がCSSにfont-familyを追加してフォントを変更した状態です。なんとなくですが、文字がオシャレになった気がします・・・。HTMLコードにクラスを追加する次はCSSによりテキストの位置を変えたり線を入れたりしていきたいのですが、現段階のHTMLコードには必要最低限のコードしか記入していないため、CSSを追加していくためには少し不便な状態です。CSSコードを記入していきやすくするために、HTMLコードにクラスを追加しました。追加済みのHTMLコードは以下のようになりました。placeholder="80字以内で入力してください。<p>投稿はまだありません</p></section></body></html>このようにHTMLコードにクラスを付け足しておくことで、CSSでデザイン部分を細かく直していきたい時にやりやすくなるかと思います。クラスを追加する時ついでに「名前」の部分を「お名前」に書き換えておきました。ここまでの作業が終わった段階での掲示板の見た目はこんな感じです。それでは、残りのデザイン部分を変更していきたいと思います。「お名前」と「本文」の入力テキストフォームの間に余白を作る今の状態だと、「お名前」と「本文」の入力テキストフォーム部分がほぼくっついている状態なので、その間にスペースをあけたいと思います。そのために以下のようにCSSコードを追加しました。(5~8行目の黄色くハイライトされている部分です。12px;}このように「お名前」と「本文」の間に余白を作ることができました。「本文」の文字を入力テキスト部分の上に合わせる「本文」という文字が今は入力テキストの下に表示されている状態なので、これを上に合わせられるようにCSSコードを追加したいと思います。以下のようにCSSコードを追加しました。(9~12行目の黄色くハイライトされている部分です。5px;}「本文」の文字が入力テキスト部分の上に合わせることができました。これでだいぶ完成に近づいてきました!!後は「投稿一覧」の上に線を入れて完成です。「投稿」ボタンと「投稿一覧」の間に線を入れる最後は、「投稿」ボタンと「投稿一覧」の文字の間に真っ直ぐ線を入れます。以下のようにCSSコードを追加しました。(13~17行目の黄色くハイライトされた部分です。次回はいよいよPHPを導入していく予定です・・・。そこが一番の問題(汗)PHPに関してはわからないことだらけなので、少しずつ理解しながら進めていこうと思います。最新の記事Tomomi今までWebの世界には全く無縁だった超アナログ人間。無謀にもWebの世界で生きていくことを決意。ハムスターと柴犬好きの文系女子です。最終的にはプログラミングが一人で出来るレベルになることが目標です。text-align投稿ナビゲーションApple、開発者向けにiOS10beta2をリリース。[Excel]関連記事PHP初心者がいきなり掲示板を作ってみた。その2(CSS編)PHP初心者がいきなり掲示板を作ってみた。