キッドマンのブログ -3ページ目

文字と画像のジャンプ率

ページ内に配置されている最も小さい文字と最も大きい文字の大小比が大きいほど、変化に富み、活動的なイメージがある。


その大小比を文字ジャンプ率と呼ぶ。


エンターテイメント系や若者向けWebページでは高めのジャンプ率を設定することで、楽しげな雰囲気や親しみやすさを演出できる。


また、高級感、信頼感が必要なページではジャンプ率を低めに設定すると、求めるイメージに近づきやすい。



・写真のジャンプ率


写真の場合は少し、趣が異なり、ジャンプ率を上げることで必ずしも活動的になるというわけではない。


例えば、クールな写真を大小つけてレイアウトすると、写真の持つクール感が強調される。


つまり、写真のジャンプ率を上げることは、写真がもつ元々持っているイメージをより強調する効果がある。


そのため、質の低い写真を大小織り交ぜてレイアウトしてしまうと、逆に質の低さが際立ってしまうことにもつながるので注意したい。


写真の質が低い場合は、大きさをそろえて整然と並べておいた方が無難で失敗が少ない。


写真の質が高ければ、メインとサブをうまく分けてレイアウトすることで、よりメインの写真の個性を印象づけられて効果的だ。



さらに詳しく見るなら

CSS、XHTML、レイアウト、ブラウザ、Ajaxなど、Webに関わる人なら最低限知っているべき常識100を紹介。知りたかったテク、使いたいワザが満載! デザイナー・プロデューサー・ディレクター必携の一冊。

レイアウトのコントラスト

Contrast(コントラスト)は画面のメリハリを生む重要な要素だ。コントラストが低いとあいまいで、退屈な印象になる。


・パっとしないときはコントラスト


デザインがいまいちパっとしないと感じたら、コントラストを上げることを考えると解決する場合が多い。


コントラストを上げるとは、揃え、バランスを整えた後に、崩していく作業といえる。



さらに詳しく見るなら

CSS、XHTML、レイアウト、ブラウザ、Ajaxなど、Webに関わる人なら最低限知っているべき常識100を紹介。知りたかったテク、使いたいワザが満載! デザイナー・プロデューサー・ディレクター必携の一冊。

IDとclassを効率よく使い分ける

CSSでレイアウトしていると属性の優先順位が邪魔をしてCSS指定が意図したとおり表示に反映されないことがある。


こういった場合は、あらかじめIDとclassの使い分けを意識してレイアウトしておくとよい。


・レイアウトに関するもの(ブロックの位置や大きさ)をIDで指定。


ヘッダー( #header )


メインコンテンツ( #main_contents )


(ブロックの大きさ)

width


height


(位置指定)

margin


padding



・それ以外(文字スタイルなど)はclassで指定。



文字( .contents )

font-size


line-height



属性の優先順


ID = 100

class = 10

要素タイプ(pなど) = 1



さらに詳しく見るなら

CSS、XHTML、レイアウト、ブラウザ、Ajaxなど、Webに関わる人なら最低限知っているべき常識100を紹介。知りたかったテク、使いたいワザが満載! デザイナー・プロデューサー・ディレクター必携の一冊。