1-07CSSで装飾しよう

この回では、CSSについてさらに詳しく掘り下げて解説していきます。

リセットCSSを導入する

「Webサイトとブラウザの基礎知識」でブラウザを複数紹介しましたが、実はHTML・CSSの動作について、ブラウザごとにほんの少しだけ違いがあります。例えばフォントが違ったり、チェックボックス・プルダウンメニューの見た目が違ったりします。

これを解消するために、ブラウザごとの違いを補正してくれるリセットCSSと呼ばれるものが無料で配布されています。いくつか種類があり、それぞれメリット・デメリットがあるのですが、今回は最近よく用いられているNormalize.cssというものを利用したいと思います。Normalize.cssはブラウザごとに用意されているスタイルを活かしつつ、バグを解消することに重きを置かれたリセットCSSです。

Normalize.css

Normalize.cssをダウンロードして、前回作ったHTMLに組み込んでみましょう。

まずはNormalize.cssのページの赤いボタンを副ボタンクリック（指２本でクリック・controlを押しながらクリック・右クリック）してメニューを表示します。

図：Normalize.cssのダウンロードページ

リンク先を別名で保存を選択します。保存先はHOME＞developフォルダで、名前はそのままnormalize.cssにしてください。

続いてdevelopフォルダをVS Codeで開き、index.htmlを選択します。

<link rel="stylesheet" href="./style.css">の真上に<link rel="stylesheet" href="./normalize.css">を追加して、上書き保存します。

図：Normalize.cssを追加しました

この際、必ずstyle.cssの上にnormalize.cssを設置してください。CSSはあとから読み込んだものが優先的に適用されるため、normalize.cssをあとから読み込むと、style.cssで記述した内容が上書きされてしまいます。

また、1-3で記述したstyle.cssのbodyタグに対するmargin:0のCSSについては、normalize.cssに全く同じ記述がありますので削除しておきましょう。そして表示されるフォントを統一するため、font-familyにsans-serifを設定します。

body{
  font-family:sans-serif;
}

図：フォントの設定をsans-serifに

index.htmlとstyle.cssが保存できたら、Chromeを更新して表示を確認しましょう。

パッと見ではわかりませんが、ブラウザごとの差異がなくなり、一部のブラウザで発生しているバグも解消しています。

コメントアウトについて

CSSにもHTMLと同様に「コメントアウト」があります。CSSの場合は /∗ ∗/ で囲った部分がコメントとなります。

こういった形で /∗ ∗/ で囲った部分は、反映されなくなります。

h1{
 /* color: red; */
}

複数行での指定も可能です。

/*
  h1{
    color: red;
  }
*/

このようにどこに何が書かれているかあとでわかるようにメモとして利用することもできます。

/* --------------------
    トップページ
----------------------- */
h1{
  color: red;
}

VS Codeには、選択した部分を一発でコメントアウトできるショートカットキーがあります。

まずはコメントしたいところを選択します。

次に Command + / を押します。

これでコメントアウトできました。

ボーダー（境界線）を指定する

HTMLにはborderというCSSプロパティによって境界線をつけることができます。スタイル・太さ・色を上下左右ごとに指定することができます。

boderは上下左右のスタイル・太さ・色を合わせると全部で20パターンのCSSプロパティがあるのですが、これは使いづらいのでショートハンドで覚えてしまいましょう。

まずは試しに h2 タグを枠で囲ってみましょう。style.cssの一番下に以下の内容を記述します。

h2{
  border:solid 1px #000;
}

図：見出しにボーダーを指定

borderは上下左右の境界線をまとめて指定できるCSSプロパティです。

  • スタイル
  • 太さ
  • 色

の順番で指定をしています。

borderのスタイル

borderにはいくつかのスタイルがあります。一番多く使われるのはsolidで、1本線を表示します。他にも2本線を引くdoubleや、破線を引くdashed、点線のdottedなどがあります。

値説明
solid1本線
double2本線
inset全体的にくぼんだように表示される
outset全体的に隆起したように表示される
dashed破線
dotted点線

図：border-styleの見本

borderの太さと色

borderの太さはピクセルで、色はフォントや背景と同じようにカラーコードで指定します。

ショートハンドの順番

borderの値に「スタイル」「太さ」「色」の順番で半角スペースを1つ挟んで記述をすると、その内容が反映されます。

上下左右をそれぞれ指定したいとき

例えば要素の左側にだけ境界線を引きたい場合は、以下のように記述をしてください。

h2{
  border-left: solid 1px #000;
}
  • border-top（上）
  • border-right（右）
  • border-left（左）
  • border-bottom（下）

というように指定することができます。

borderのスタイル・太さ・色のショートハンド

borderの上下左右を、スタイルをまとめて指定する、太さをまとめて指定する、色をまとめて指定することが可能です。

例えば太さを指定したい場合は以下のように記述します。

h2{
  border-width: 2px 0px 2px 1px;
}

border-widthの値は上・右・下・左の順番で指定します。

図：上下左右の順番

スタイルはborder-style、色はborder-colorで指定します。

borderを細かく指定するだけで、装飾のバリエーションがぐっと広がります。

図：borderを細かく指定してみる

一旦、今回作っているサンプルではborderを使いませんので、h2タグにあてたborderのスタイルは削除しておきましょう。

背景画像を指定する

「HTMLとCSSでレイアウトを組んでみよう」で、backgroundというCSSプロパティによって背景に色をつけましたが、色だけではなく画像を設定することができます。その際に利用するのがbackground-imageです。試しにstyle.cssのbodyに画像の背景を設定してみましょう。

まずはこちらから画像素材をダウンロードしてdevelopフォルダに保存します。

画像素材をダウンロード

style.cssのbodyにbackground-imageを設定します。画像の指定には url(XXXXX)（Xのところにファイル名が入る）を使います。

body{
  font-family: sans-serif;
  background-image: url("niconico_bg_blue.png");
}

上書きして保存し、Chromeで確認しましょう。

図：bodyに背景を指定

背景に画像を指定する際は高さと横幅を設定することができます。それがbackground-sizeです。試しに以下のように記述をして確認してみましょう。

body{
  font-family: sans-serif;
  background-image: url("niconico_bg_blue.png");
  background-size: 100px 100px;
}

background-sizeは横幅・高さの順番で指定します。

図：background-sizeを指定

今は指定した画像が左右上下に繰り返して表示するようになっていますが、これを繰り返さないようにすることができます。

body{
  font-family: sans-serif;
  background-image: url("niconico_bg_blue.png");
  background-repeat: no-repeat;
}

図：background-repeatをno-repeatに

左右だけに繰り返す、もしくは上下にだけ繰り返すという指定方法もあります。試しに上下だけ繰り返しに指定してみます。

body{
  font-family: sans-serif;
  background-image: url("niconico_bg_blue.png");
  background-repeat: no-repeat;
  background-repeat: repeat-y;
}

図：background-repeat-yを指定

background-repeat-xで指定すると左右に繰り返しができます。

背景の位置を指定することができます。background-positionを利用します。

body{
  font-family: sans-serif;
  background-image: url("hoge.png");
  background-repeat: no-repeat;
  background-repeat: repeat-y;
  background-position: 50% 0;
}

図：background-positionを指定

これらをまとめて一行で指定することができます。これはbackground以外でも可能なショートハンドという手法です。ヘッダーの色を変えたbackground="red"も実はショートハンドで、正しくはbackground-colorです。

body{
  margin: 0;
  font-family: sans-serif;
  background: url("niconico_bg_blue.png") top center / 100px 100px no-repeat;
}

図：ショートハンドで指定

それでは一旦bodyからは背景を削除し、実際に利用する箇所に背景を当ててみたいと思います。

style.cssに以下の内容を追加します。

h2{
  background-image: url(niconico_bg_blue.png);
  line-height: 50px;
  padding: 0 15px;
  color: #fff;
  text-align: center;
}

図：見出しに背景画像を設定しました

画像の回り込み

このようにページ内に画像と文章が混ざっている部分があったとします。

このままのレイアウトだと、画像の右側がポッカリ空いていますね。

この部分に、画像の下に設置されている文章を回り込ませることができます。

回り込みに使うCSSプロパティはfloatというものです。

試しにこの画像に対してfloat:leftで画像を左にして回り込みをしてみます。

img{
  float: left;
}

逆にfloat:rightで右に回り込ませることもできます。

それではindex.htmlに画像を追加して、style.cssで画像の回り込みを指定します。

こちらから画像をダウンロードして、developフォルダに保存します。

画像素材をダウンロード

以下のように画像を追加します。

<article>
  <section>
    <h2>N水族館とは？</h2>
    <p><img src="pic1.jpg" width="150" height="150">N水族館は、VR・AR・プロジェクションマッピング・モーションキャプチャーなどの最先端技術を取り入れ、ネットとリアルを融合させた次世代の水族館です。展示面積は世界最大規模で、さまざまな海の魚や海の動物達を間近で見ることができます。大迫力の巨大水槽や、独自の特殊効果を取り入れたイルカのショーなど、子供から大人まで楽しめる施設になっています。</p>
  </section>
  <section>
    <h2>VR HMDをかぶって海の中へ</h2>
    <p><img src="pic2.jpg" width="150" height="150">用意されたVR HMD（ヘッドマウントディスプレイ）をかぶると、まるで巨大水槽のど真ん中にいるかのような状況が再現されます。モーションキャプチャーによってお客様の動きを読み取り、巨大水槽の中を自由に動き回ることが可能です。また時間帯によっては魚たちに餌付け体験が出来たり、お客様同士でゲームを楽しむことも出来ます。</p>
  </section>
  <section>
    <h2>バーチャルキャストによるイルカのショー</h2>
    <p><img src="pic3.jpg" width="150" height="150">イルカのショーには、人間ではなくN水族館オリジナルのバーチャルキャストが登場します。また、手元のスマートフォンからコメントやアクションを送信すると、リアルタイムに演出に反映され、インタラクティブなイルカショーを楽しむことができます。音楽や照明などの演出は毎回ランダムに生成されるため、見るたびに違う内容が上映されます。
    </p>
  </section>
</article>

続いて以下のように<div class="aboutWrapper">〜</div>を追加します。

style.cssで画像の回り込みを指定します。

.aboutWrapper img{
  float:left;
}

結果を確認してみましょう。

見出しまで折り返しに巻き込まれてしまいました。

ここで一箇所文章を変更してみたいと思います。

N水族館は、VR・AR・プロジェクションマッピング・モーションキャプチャーなどの最先端技術を取り入れ、ネットとリアルを融合させた次世代の水族館です。展示面積は世界最大規模で、さまざまな海の魚や海の動物達を間近で見ることができます。大迫力の巨大水槽や、独自の特殊効果を取り入れたイルカのショーなど、子供から大人まで楽しめる施設になっています。

この部分を短い文章に変更します。以下のようにしてみてください。

N水族館は、VR・AR・プロジェクションマッピング・モーションキャプチャーなどの最先端技術を取り入れ、ネットとリアルを融合させた次世代の水族館です。

確認すると、以下のように崩れてしまっています。

文章が短くなると、該当の箇所に空白が生まれて、さらに下の要素が右側に回り込んでしまいます。これを解消するにはclearfixというCSSを組み合わせたハック方法を利用します。

style.cssに以下の内容を追加します。

.clearfix:after{
  content: "";
  display: block;
  clear: both;
}

画像と文章が囲われている<p>〜</p>にclass="clearfix"を追加します。

これで確認すると、崩れが解消していることがわかります。

昔は要素を横並びにさせるCSSプロパティが少なかったため、このfloat:left rightやclearfixが多用されていました。しかしfloatは考え方や実装方法に難があり、最近ではdisplay:flexのようなわかりやすいものが出てきているため、画像の回り込み以外ではあまり使う機会がなくなってきました。

写真と文章がくっついてしまっているので、余白を追加しておきましょう。

.aboutWrapper img {
    float: left;
    margin-right: 10px;
}

図：画像の回り込みと余白を指定しました

Flexbox

HTMLとCSSでレイアウトを組んでみようでヘッダーのレイアウトを組む際に利用したフレックスボックスをもう少し細かく解説します。

FlexboxというCSSプロパティは、複雑なレイアウトをより簡単に実装できる方法です。スマートフォンやタブレットなどの多様な画面サイズへの対応が必要になり、ここ数年でどのブラウザでも当たり前のように利用することができるようになりました。一行CSSを追加するだけで要素が横並びになったり、要素をいい感じに伸び縮みさせることができるとても便利な方法です。

ここからは新しいサンプルのファイルを編集しながら確認していきます。

サンプルファイルをダウンロード

Flexboxの基本

Flexboxは親要素と子要素で構成されます。

  • 親要素はFlexコンテナー
  • 子要素はFlexアイテム

以下のようなHTMLがあったとします。

<div class="container">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
</div>

何もしなければ以下のように縦積みで表示されます。（わかりやすくcontainerとitemにそれぞれ色をつけました）

CSSでcontainerクラスに対してdisplay:flexをあてます。

.container{
  display:flex;
}

すると以下のように横並びに表示されるようになります。

子要素の並ぶ向きを変える

Flexboxでは、子要素の並び方をひっくり返したり、横並びから縦積みに変更することができます。これにはflex-directionというCSSプロパティを使います。

何も指定をしないとFlexboxは左から右へ横並びになりますが、flex-direction:row-reverseとすると、右から左に横並びに表示されます。

.container{
  display:flex;
  flex-direction:row-reverse;
}

flex-direction:columnとすると、縦並びに表示されます。

値説明
row初期値。左から右へ横並び
row-reverse右から左へ横並び
column上から下へ縦積み
column-reverse下から上へ縦積み

例えばパソコンで見るときは横並び、スマホで見るときは縦積みのような表現をするときに活用します。

折り返しの表示方法

通常、Flexboxではすべての子要素を一段で表示しようとします。しかし子要素が多いとパンパンになってしまって表示がおかしくなってしまいます。そこで、一定の領域まで横並びが行われたら、新しい段ができてはみ出た子要素がその次の段に落ちるという表示方法が指定できます。（折り返し）

containerクラスにflex-wrap: wrapと指定すると、以下のような形で折り返しされていきます。

.container{
  display:flex;
  flex-wrap: wrap;
}
値説明
nowrap初期値。改行しない
wrap改行する
wrap-reverse改行して、下から上へ並べる

並びの向きと折り返しをまとめて指定する

flex-flowを使うと、flex-directionとflex-wrapをまとめて指定することができます。

.container{
  display: flex;
  flex-flow: row wrap;
}

水平方向の指定

親要素と子要素の間に隙間があるときに、子要素を水平方向にどうやって表示するかを指定します。justify-contentというプロパティを使います。

例えばjustify-content: centerと指定すると中央寄せになります。

.container{
  display: flex;
  justify-content: center;
}

justify-content: space-betweenと指定すると、両端に最初と最後の要素を配置し、すべての要素が均等に配置されます。

.container{
  display: flex;
  justify-content: space-between;
}
値説明
flex-start初期値。左揃え
flex-end右揃え
center中央揃え
space-between両端に隙間なし、均等割
space-around両端に隙間をあけて、均等割

垂直方向の指定

親要素と子要素の間に隙間があるときに、子要素を垂直方向にどうやって表示するかを指定します。align-itemsというプロパティを使います。

例えばalign-items: centerと指定すると中央寄せになります。

.container{
  display: flex;
  align-items: center;
}
値説明
stretch初期値。一番高さのある子要素か、親要素の高さに合わせて、引き伸ばす
flex-start上揃え
flex-end下揃え
center中央揃え
baselineベースライン（テキスト の下の部分）で揃える

子要素の伸びる比率を指定する

通常、子要素はそれぞれ中身のテキストの長さなどに合わせて伸び縮みしますが、余白部分をどれぐらいの比率で伸びるかを指定することができます。flex-growというプロパティです。

例えばflex-grow: 1をすべてのアイテムに対して指定します。

.item{
  flex-grow: 1;
}

アイテムそれぞれに比率を指定します。

.item1{
  flex-grow: 1;
}
.item2{
  flex-grow: 2;
}
.item3{
  flex-grow: 3;
}

他にもFlexboxに関するプロパティがいくつかあります。

プロパティ説明
align-content複数行のときの垂直方向
order順序の指定
flex-shrink入り切らない子要素を縮める比率
flex-basis子要素の横幅を指定する。widthと同じ役割
align-self子要素の垂直方向の揃えを指定

Flexboxはプロパティと値がかなりのパターン存在しているので、わからなくなったときはこちらのサイトを参考にしながら実装をしてみましょう。

CSS Flexboxチートシート

CSSセレクター

ここまで、CSSプロパティを対象の要素に適用する際には、特定のタグか id・class を指定してきました。このようなスタイルを適用する対象を指定する部分のことを「CSSセレクター」と呼びます。

実はセレクターにはタグや id・class 以外にも、指定する方法があります。

全称セレクター

すべてのセレクターをまとめて指定したいときは全称セレクターと呼ばれる * （アスタリスク）を使います。

*{
  font-size: 16px;
}

このように記述すると、すべての要素に対してfont-size:16が設定されます。

複数のセレクター

2つ以上のセレクターを指定したいときは , （カンマ）で区切ることで指定できます。

h1,h2,h3{
  font-weight: bold;
}

子孫セレクター

2つ以上のセレクターを半角スペースで区切ると、下の階層の子孫要素を指定することができます。

ul li a{
  color: red;
}

子セレクター

2つ以上のセレクターを > で区切ると、直下の階層の子要素を指定することができます。

ul > li > a{
  color: blue;
}

※ 子孫セレクターと子セレクターは微妙に指定できる要素が違います。子孫セレクターは親要素の中にある子要素全てに対して指定することができます。子セレクターは親要素の直下の子要素しか指定することができません。

※ CSSでは親子関係になっているセレクターの「子」を指定することはできますが、「親」になっている部分を指定することはできません。

隣接セレクタ

2つ以上のセレクターを + で区切ると、直後にあるセレクターを指定することができます。

p + div{
  width: 100px;
}

※直後にあるセレクターを指定することはできますが、直前にあるセレクターを指定することはできません。

擬似クラス

擬似クラスとは、選択されたセレクターが特定の状態を指定するものです。例えばマウスのカーソルが上に乗っているときだけ色が変わるボタンをよく目にすることがありますが、これは擬似クラスの:hoverという状態を指定して記述することができます。擬似クラスは :◯◯ のような形で、◯◯にはその状態が記述されます。

hover

マウスカーソルが上に重なった状態の時を表すのがhoverです。

a:hover{
  color: red;
}
linkとvisited

linkは未訪問、visitedは訪問済みのリンクを指定するものです。<a>タグに指定するもので、何も指定をしていないと未訪問は青、訪問済みは紫になっています。

a:link{
  color: red;
}
a:visited{
  color: green;
}
first-child・last-child・nth-child()

兄弟要素の◯番目を指定できる擬似クラス。first-childは一番最初、last-childは一番最後、nth-childは () 内に数字を入れると指定することができます。nth-childに関しては偶数（even）・奇数（odd）・倍数（n）が指定できます。

ul li:first-child{
  color:red;
}
ul li:nth-child(3){
  color:green;
}
ul li:last-child{
  color:blue;
}

疑似要素

疑似要素は選択したセレクターの特定部分を整形して表示するためのものです。擬似クラスと同じく:◯◯というふうに記述します。

first-letter

最初の1文字目を変化させることができる疑似要素です。

p:first-letter{
  color:red;
  font-size:18px;
}
before・after

要素の直前と直後に擬似要素を作成します。プロパティにはcontentというものを用意して、内容を書き込みます。

p:before{
  content: "直前の疑似要素";
  color:red;
}
p:after{
  content: "直前の疑似要素";
  color:red;
}

属性セレクタ

HTMLタグの中には「属性」と呼ばれる部分があります。例えば<img src="hoge.jpg" width="300″ height="300″ alt="hogehoge">の中の、src="hoge.jpg" width="300″ height="300″ alt="hogehoge"の部分は属性にあたります。

この属性の部分を指定することができるのが属性セレクタです。例えば<a href="#" target="_blank">というHTMLタグがあったときに、ページの中でtarget="_blank"となっている< a >タグを指定したいときは以下のように記述します。

a[target="_blank"]{
  color:red;
}

このように [ ] で囲って属性を記述すると指定することができます。

今回出てきたHTMLとCSS

CSS

プロパティ値説明
background-imageurlを指定背景画像を指定する
background-sizepxで指定背景画像のサイズを指定する
background-repeatrepeat,no-repeat,repeat-x,repeat-y背景画像の繰り返しを指定する
background-positionpxもしくは%で指定背景画像の位置を指定
borderスタイル・太さ・色罫線を表示
floatleft,right文章の回り込みを指定
clearboth,left,right,none回り込みを解除する
flex-directionrow,row-reverse,column,column-reverseflexboxのアイテム配置方法を指定
flex-wrapwrap,nowrapアイテムの折り返し方法を指定
flex-flowflexboxのプロパティをまとめて指定
justify-contentcenter,start,end,flex-start,flex-end,left,rightアイテムの配置を指定
align-itemsstretch,center,start,endアイテムの垂直方向の配置を指定
flex-grow整数で指定アイテムの伸び率を指定

完成版サンプル

サンプルファイルをダウンロード

ダウンロードしたzipファイルを展開すると、以下のようなファイルが入っています。

  • n-aquarium（フォルダ）
    • index.html
    • style.css
    • 1.jpg
    • pic1.jpg
    • pic2.jpg
    • pic3.jpg
    • naqualogo.png
    • niconico_bg_blue.png

スポンサーリンク

Posted by エスパパの娘