トップページ -> 研究道具箱と教材 -> JavaScript と jQueryUI による Web プログラミング -> 子要素の高さをそろえる
[サイトマップへ]  

子要素の高さをそろえる

この Web ページでは,

MITSUE-LINKS JavaScript Library を用いて次のことを行います.


準備

◆ MITSUE-LINKS JavaScript Library を入手

http://www.mitsue.co.jp/service/produce/mjl.html

◆ JavaScript に関する Web ブラウザの設定


子要素の高さをそろえる

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>

        <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=Shift_JIS" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="MSThemeCompatible" CONTENT="yes" />

        <title>
            高さをそろえる
        </title>

        <script type="text/javascript" src="./mjl/mjl.js"></script>
        <script type="text/javascript" src="./mjl/run.js"></script>

        <style>
         .container_small { 
              width: 20%;
              margin-top: 0.5em; 
              margin-bottom: 0.5em; 
              margin-left: 2em; 
              padding: 0.5em; 
              border: solid 0.2px #9966ff;
              background-color: #66aa77;
          }
        </style>
    </head>

    <body>

      <h1>高さをそろえる</h1>
  
      <ul class="equalize">
        <li> りんご </li>
        <li> なにか冷たくておいしいものを食べたい。できればぶどう味がいい </li>
        <li> やっぱり、健康に気をつけて野菜を食べたい。新鮮な野菜は甘くておいしい。できればきゅうりと大根を食べたいなあと思っている </li>
      </ul>

    </body>
</html>

高さをそろえる前

高さをそろえた後