 |
プロならではのアイデアが満載！ ＷＥＢレイアウトのネタ帖 第1回 写真を生かしながら多くの文章を表示できるレイアウト |
POINT B
文章をグリッド状にレイアウトする
| ●グリッド状の6つの領域を作成する ●5つの領域のうちのひとつだけ文章を表示する |
![B [1]](/attach/images/2008january/magazine/webcre/webneta/B/B-01.jpg) [1] |
横を3等分、縦を2等分にして、グリッド状の6つの領域を作成する［1］。 |
![B [2]](/attach/images/2008january/magazine/webcre/webneta/B/B-02.jpg) [2] |
左上の領域にタイトルを配置する［2］。 重たい感じにならないように、細めの明朝体を使う。サブタイトルは背景の写真とも違和感のない色を選択する。 |
![B [3]](/attach/images/2008january/magazine/webcre/webneta/B/B-03.jpg) [3] |
それぞれの領域に、原稿を配置してみる［3］。 ただし、この状態では背景画像がじゃまで読むことが難しいし、画面全体が文字で埋め尽くされてしまう。 |
![B [4]](/attach/images/2008january/magazine/webcre/webneta/B/B-04.jpg) [4] ![B [5]](/attach/images/2008january/magazine/webcre/webneta/B/B-05.jpg) [5] |
そこで、背景に半透明の白を配置し、5つの領域のうちのひとつだけ、文章を表示するようにする［4］［5］。 |
次のPOINT >>
本記事は『web creators』2008 vol.74よりの転載です
月刊『web creators』掲載記事号の情報はこちら！>>>
