【独学】プログラミング初心者が掲示板サイトを作ってみた（CSS編）

こんにちは、穏やか暮らし計画ライターのあらです。

本記事では、プログラミング初心者である私が0から掲示板サイトを作ることを目標に、勉強している様子を皆さんに発信していますので、プログラミングを1から始めてみたい！掲示板サイトを作ってみたい！という方はぜひ参考にしてみてください。

今回の記事では、前回作成したHTMLコードを改良&CSSスタイルシートで装飾をして、サイト全体を見やすくしていきたいと思います。

本記事の内容

CSSスタイルシートに対応したHTMLファイルを作成
CSSで掲示板サイトの装飾

CSSを導入する方法

HTMLコードにCSSを導入するには、いくつかの方法があります。

外部cssファイルを作り、それを読み込ませる手法
HTMLファイルのhead内に書く手法
HTMLファイルのhtmlコードに直接書く手法

それぞれ小さいメリット・デメリットはありますが、さほど変わりはないので、自分の好みで使ってもらっていいと思います。

私は、HTMLとCSSが別の方が後々確認するときに見やすいかなと思い、1の外部ファイルを作って読み込ませています。

CSSについてもっと詳しく知りたい方は、私がCSSを勉強した時の記事がありますので、そちらをご覧ください。

HTMLファイルをCSSスタイルシートに対応させる

前回作成したHTMLコードに以下のような指定をしていきます。

CSS外部ファイルを読み込ませるコード

relやtypeは外部ファイルの説明、hrefで今回自分で用意したCSSファイルを書きます。

class指定をして、CSSで指定しやすくする

class指定をすることで、一部の箇所だけに指定することができます。例えば<section>に"toukou"というclass指定したとします。

CSSファイルでsectionの"toukou"の部分全ての文字を赤色に！というように、自分が好きな箇所自由に指定することが可能になります。

サイトが見やすくするために何が必要か

前回作成したHTMLコードの実行結果がこちらになります。

全体を中央揃えにする
適切な間隔を空ける。
投稿部分と投稿一覧の背景をつけ、区切りを持たせる。
「本文:」と書き込む箇所を上端揃えにする。

私がCSSで装飾したいのは上記の4つになりました。他にも装飾したいものがあれば、「CSS 左揃え」みたいな調べ方であれば、なんでも自由自在にできると思います。

全体を中央揃えにする

text-align: center;

今回はサイト全体を中央揃えするので<body>に対して、中央揃えを指定していきます。他にもright・left・start・end、justifyという指定方法もありますので、詳しく知りたい方はこちらをご覧ください。

適切な間隔を空ける

padding:10px 0 40px 0;

paddingは内側の余白・marginは外側の余白。paddingとmarginの使い分けは臨機応変に使い分けていきます。

padding-top（上側）:10px;
padding-bottom（下側）:40px;

でも指定できますが、padding:上右下左;で一気に指定することができます。marginも同様です。

padding/marginについて詳しく知りたい方はblog.codecamp.jp/margin_padding" rel="noopener" target="_blank">こちら。

投稿部分と投稿一覧の背景をつけ、区切りを持たせる。

背景の色を指定する方法

background-color:色指定;

背景を角丸にしておしゃれにする

border-radius: 10px;

背景の境界線を指定する

border:1px solid black;

背景は機能的に関しては絶対に必要ではないですが、見やすさに関しては1番重要な部分になると思います。

文字の大きさや文字の色・画像挿入でもっと見栄えが良いサイトになりますが、今回は「掲示板を作る」というのが目標なので、最低限でやっていきます

「本文：」を上端揃えにする

初期設定だと「本文:」と投稿スペースが下端揃えになっていて、少し気持ちが悪いので上端揃えにしていきます。

要素を上端揃えにする

vertical-align: top;

しかし、ここで問題がありました。なぜか上端揃いになりません。調べてみると、

vertical-aligonはインライン要素にしか効果がないみたいです。※<div>はブロック要素

ですから、投稿スペースの<div>にdisplay: inline-block;を追加してから、vertical-alignを指定しても何も変わらず...

対処法がこれ以上分からなかったので、ちょっとコードが不細工になってしまいますが、

最初は1文で成り立っていましたが、2文に分け、両方のdivにdisplay:inline-block;を指定して、vertical-align:top;でようやく上端揃いすることができました。

最後に

これで全ての目標としていたCSSの装飾をクリアできました。

今回作成したHTMLコード

今回作成したCSSコード

今回改良&作成したコードはこちらになります。CSSまでは難易度もそこそこで、この前まで勉強していたのでなんとかいけまいした。PHPは難易度も上がりそうで少し恐怖もありますが、今回まで自分で調べて突破できましたし、掲示板完成まであと一歩なので、次回も頑張っていきます。

最後までご愛読ありがとうございました。

▼プログラミング学習Part1

プログラミング初心者が独学で1から掲示板サイトを作れるのか？【始めた理由と目標編】

odayakakurashi.com

▼CSSを学びたい方へ

【独学】TechAcademyの無料入門講座でCSSを学んでみて【プログラミング初心者が独学で1から掲示板サイトを作れるのか？Part12】