document.write("<ul>");
document.write("<li><code>vertical-align : baseline ;</code><p style=\"color:green; font-size:1.5em;\"><img src=\"../../sample/css/vertical-align.gif\" alt=\"パンダ\" style=\"vertical-align:baseline;\" />オッス！おら、パンダ！笹よこせ！</p></li>");
document.write("<li><code>vertical-align : middle ;</code><p style=\"color:green; font-size:1.5em;\"><img src=\"../../sample/css/vertical-align.gif\" alt=\"パンダ\" style=\"vertical-align:middle;\" />オッス！おら、パンダ！笹よこせ！</p></li>");
document.write("<li><code>vertical-align : top ;</code><p style=\"color:green; font-size:1.5em;\"><img src=\"../../sample/css/vertical-align.gif\" alt=\"パンダ\" style=\"vertical-align:top;\" />オッス！おら、パンダ！笹よこせ！</p></li>");
document.write("<li><code>vertical-align : super ;</code><p style=\"font-size:1.5em;\">2<span style=\"vertical-align:super; font-size:70%;\" />2</span>=4</p></li>");
document.write("<li><code>vertical-align : sub ;</code><p style=\"font-size:1.5em;\">H<span style=\"vertical-align:sub; font-size:70%;\" />2</span>O</p></li>");
document.write("</ul>");