前回は、要素の「外側の余白」と「内側の余白」について説明しました。これらを組み合わせることで、様々な表示の間隔を自由に設定することができました。見た目が整ってきましたので、今回は仕上げをやっていきましょう。今回作るページ今回は先にどういうページを作るのかご覧いただきたいと思います。最終的にはこのようなページになります。以下の要素にスタイルを追加しています。微調整それでは、前回のHTMLソースを修正してページを改良していきましょう。見出しに下線を引くまずは見出し(h2タグ)を修正していきます。ついてお話ししましたね。今回のように、見出しに下線を引く場合も、このborderを使用します。余白のプロパティ(marginやpadding)と同様に、borderも線を追加する方向を指定することができます。要素の右の線を描く値の書き方は方向を指定しない場合と同じです。実際に使ったCSSを見てみましょう。私は家野ペイジと言います。このホームページを作りました。<p>これから色々な情報を発信していきたいと考えています。</html>h2タグにborder-bottomを設定しました。このように下線が引かれたと思います。見出しの先頭記号を設定するh2タグで作られる見出し全てに先頭記号を設定します。h2タグの中身のテキストに書いてもできますが、タグの数が増えてきたり、後から追加したくなったときに毎回書くのは大変です。今回は一気に先頭記号を設定する方法を紹介します。h2タグ以外にも応用できます。いうセレクタを作りました。ように、セレクタに特殊な働きを持たせるものを擬似要素(Pseudo-elements)と呼びます。ある要素(タグ)の直前に何か要素を追加したい場合に以下のようなセレクタを指定します。}今回は「h2タグ」の直前に記号「◆」を表示したいので、以下のように書きます。文字列はダブルクオテーションで囲います。}記号を「★」や「○」などにしても大丈夫です。文字列であれば記号でなくても構いません。今回は解説しませんが、好きな画像を先頭記号にすることもできます。今回はh2タグを対象に擬似要素を適用しましたが、他のセレクタ(クラスセレクタなど)にも同様に設定することができます。コロン(:)が一つしか付いていない書き方を紹介しているサイトがありますが、それは古い書き方です。現在使用されているCSS3では、擬似要素のコロンは2つです。昔のブラウザ(IE8など)にどうしても対応しなければならない場合以外は、コロンは2つつけましょう。変更されたため、IEに対応する必要はほぼなくなりました。擬似要素を指定する場合はコロンを2つつけるようにしましょう。以外の擬似要素については、後ほど紹介していきたいと思います。書き加えた後のページはこのようになりました。これで、先頭記号が全てのh2タグにつきました。サンプル実際に設定したHTMLソースとCSSを以下に記載します。<p>おやすみ</p></body></html>画像と文字の高さをぴったり合わせたい場合、重要な点は以下の通りです。設定するこの方法で画像マーカーを作れば、表示サイズが調整されるので、オリジナルの画像ファイルの大きさはどんな大きさでも大丈夫です。表に枠線をつける次に、表の見た目を整えていきましょう。borderを使って表の中のタグ(tdとth)に枠線をつけてみます。以下のようにカンマ(,)で区切って複数の要素にスタイルを設定できます。...さて、どうなったでしょうか。以下のように線が2重に表示されてしまうと思います。デフォルトでは、表のセル(一つのマス)の間に隙間ができるようになっています。これをCSSで無効化しましょう。...これでセル間の隙間がなくなりました。表の色を設定する「好きなもの」と「嫌いなもの」の違いがわかりやすいように、表に色を設定します。:nth-of-type(○)「好きなもの」は2列目、「嫌いなもの」は最後の列にあります。ある列だけにスタイルを設定できれば楽に済みそうです。その方法を紹介します。2列目のthとtdにスタイルを設定します。...これで、2列目のthタグの文字色が青になり、2列目のtdタグの背景が薄い青になりました。いうのは、「○番目の〜」を指定する書き方です。これは擬似要素とは違い、コロン(:)が1つなので注意してください。これは擬似要素ではなく擬似クラスと呼ばれ、特定の条件下のタグだけを指定する方法です。今は明確に違いがわからなくても大丈夫です。〜:nth-of-type(○)で指定する○番目とは、同じ親タグを持っているタグの中で○番目という意味です。tdタグは1つのtrタグの中に3つあります。指定すると、trタグの中の2番目のtdタグが対象となります。具体的な色の名前を指定していました。青)の数値で設定する方法を使っています。これによって細かく色を指定できます。:last-child次に、最後の列のスタイルを変更しましょう。:nth-of-type(3)としても良いのですが、最後の要素だけを指定する擬似クラスがあるので、それを紹介します。...CSS設定後、表が以下のような見た目になったと思います。余白の微調整を行うさて、必要なスタイルの設定は終わりました。最後に余白を調整して見やすくしましょう。余白は、関連ある要素の間は小さく、関連のないものの間には大きく設定します。することで、まとまった情報が目に入りやすくなります。見出しであれば、上の余白を大きく、下の余白を小さくするといいでしょう。見出しの先頭記号とテキストが近すぎるので、先頭記号の右側に余白を設けましょう。表のセル内に余白を設定します。説明しきれていない部分もありますが、ホームページを作る流れが一通り理解していただけたかと思います。おさらい今回の仕上げの際に登場した新しいことについておさらいしましょう。borderプロパティは線をどの部分に引くか指定できます。セレクタをカンマで区切れば複数のタグに同じスタイルを適用できます。擬似要素「::before」を使うと、タグの直前に表示する要素を設定できます。擬似クラス「:nth-of-type(○)」「:last-child」などで特定の要素だけを対象にスタイルを設定できます。B)」が利用できます。次回は色の指定方法について詳しく解説します。関連する記事CSS入門4(外側の余白と内側の余白)前回はこのようにページコンテンツ全体を線で囲むところまでCSSを書きました。線で囲えたのはいいのですが、線の中の余白が整っていませんね。今回はこれを直していきましょう。前回は特定のタグのスタイルを変えるためにclass属性が利用できることを解説しました。これで様々なタグの装飾を行えるようになりました。デフォルトで設定されている名前付きの色パラメータの一覧です。呼び出せるので、サクッと色を設定したいときに使えるかも知れません。»...divタグを使ったレイアウト前回はブロックレベル要素とインラインレベル要素の違いについて説明しました。今回は、ページレイアウトを作る上で重要なタグを紹介します。それは、ブロックレベル要素の「divタグ」とインライン要素の「spanタグ」です。コメントをキャンセルメールアドレスが公開されることはありません。