【書籍学習ログ】HTML/CSS/Webデザインが1冊できちんと身につく本 - 【4日目】

Chapter 7 2カラムページを制作する

2月5日(火) 0.5h

HTMLタグ

・サイドバー
　...<aside>タグ使用、section要素で区切ってリストでメニュー作成
CSS側で、メインコンテンツは左寄、サイドバーは右寄などを指定する。

<aside class="sidebar">
   <section>
      <h2>Photograph</h2>
      <ul>
         <li>街-City</li>
         <li>海-Beach</li>
         <li>森-Forest</li>
      </ul>
   </section>
      <h2>Video</h2>
      <ul>
         <li>Movie</li>
         <li>Short film</li>
      </ul>
   <section>
   </section>
</aside>

ポイント

・共通レイアウトを用いたページはUIを意識
　...｢ロゴクリックでホーム｣は暗黙の了解。その他、変更があるとユーザーの混乱を招く可能性があるので注意
・見栄えよりも操作性・使い勝手・わかりやすさを重視
・画像を見出しにすることも可能
・画像にリンクがあることを示すUI...マウスホバー時、画像を半透明にする
・カラム幅の算出...以下のようにサイドバーに指定する横幅を算出する

　全体 : 960px
　メインエリア : 700px
　メインエリアの余白(右) : 10px
　メインエリアの余白(左) : 10px
　サイドバーの余白(右) : 10px
　サイドバーの余白(左) : 30px

　<全体> - ( <メインエリア> + <メインエリアの余白> + <サイドバーの余白> )
　= 960 - (700 + 10 + 10 + 10 + 30) = 200px
　