魚ゲット、魚を逃した時

本日は、魚を釣り上げたときにどんな魚が釣れたのかを表示させる部分と魚を逃がしたときに表示させる部分を 作りました。ここでのポイントは、すべてを縦に並べ、かつ中央に配置することです。

それぞれの配置

まず、「鯉++が釣れたよ」と配置では、テキストを中央に配置するにはtext-alignというスタイルがあるので 、これにcenterを指定してあげれば中央にきます。
次に、画像の配置ではmarginを上手く利用して中央に配置します。今回のサンプルではmarginを使う時に{margin:*px auto} と使われていることが多いかと思います。これは、＊ｐｘの部分は上下、autoの部分は左右ということになっているのです。 なので左右がautoということは必然的に中央にくるというわけです。marginではそれぞれまとめて記載することができます。2つ記載した場合は、 上下、左右。3つ記載した場合は、上、左右、下。4つ記載した場合はそれぞれというかたちで指定できるのです。この指定方法は便利なので、覚えておいた方がいいかもです。
という感じに中央に並べていき、それぞれの幅などを調節して完成です。逃した方はこれを元に、色などを変えて作りました。

12月17日　宮本　勇