HTML and CSS - HTML5 Markup: Modern HTML(new html5 elements, section)

Head First HTML and CSS
(O'Reilly Media)
Elisabeth Robson (著), Eric Freeman (著)

開発環境

• OS X Yosemite - Apple (OS)
• Safari, Firefox + Firebug, Google Chrome(Webプラウザ、プラグイン)
• BBEdit - Bare Bones Software, Inc. (GUI) , Emacs (CUI) (Text Editor)
• HTML (マークアップ言語)
• Cascading Style Sheets(CSS) (スタイルシート)

Head First HTML and CSS (Elisabeth Robson (著)、 Eric Freeman (著)、O'Reilly Media)のChapter 12(HTML5 Markup: Modern HTML)、SHARPEN YOUR PENCIL(No. 8731)を解いてみる。

SHARPEN YOUR PENCIL(No. 8731)

HTML (BBEdit, Emacs)

<style>
#test_table_container {
    display: table;
    border-padding: 5px;
}

#test_table_row {
    display: table-row;
}

#test_drinks {
    display: table-cell;
    background-color: #efe5d0;
    width: 20%;
    padding: 15px;
    vertical-align: top;
}

#test_main {
    display: table-cell;
    background-color: #efe5d0;
    font-size: 105%;
    padding 15px;
    vertical-align: top;
}
</style>

<div id="test_table_container">
  <div id="test_table_row">
    <section id="test_drinks">
      drinks
    </section>    
    <section id="test__main">
      main
    </section>  
    <aside>
      aside
    </aside>
  </div><!-- table_row -->
</div><!-- table_container -->

drinks

main

aside