css を用いた要素の幅と高さの設定例

css を用いて、要素の幅と高さを設定してみる．

◆ 動作画面の例

◆ HTML ファイルの例


<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.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=Windows-31J" />
        <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>
      
        <style>
          .box160x40 {
            width: 160px; 
            height: 40px; 
            border: solid 2px; 
            background: #ccffff;
            padding: 0; 
            margin: 0; 
            font-size: medium; 
            font-size: medium; 
          }
        </style>
    </head>

    <body>

      <div class="box160x40">
        <p>あいうえお。かきくけこ。さしすせそ。たちつてと。なにぬねの。</p>
      </div>

    </body>
</html>

jQuery を使って、

jQuery(function(){
     jQuery(".box160x40").click(function(){
         window.location=$(this).find("a").attr("href");
         return false;
    });
})

...

        <p>あいうえお。かきくけこ。さしすせそ。たちつてと。なにぬねの。</p> 
            <a href="hoge">[hoge ページヘ飛ぶ]<a>