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>

本サイトは金子邦彦研究室のWebページである．

資料等の公開では，原則，「クリエイティブコモンズ BY NC SA」として公開するようにしている． PDFファイル，パワーポイントファイルなどには，「クリエイティブコモンズ BY NC SA」を明記するとともに，ロゴを記載するようにしている（作業が間に合っていない分もあるのでご容赦ください）．

公開している資料をご利用になる場合の，再配布の条件，剽窃の防止などについて，別ページ »で説明再配布や資料改変の際には，そのページをご確認ください．

サイトマップは，サイトマップのページをご覧下さい．本サイト内の検索は，サイト内検索のページをご利用下さい．

問い合わせ先：金子邦彦（かねこくにひこ） [image]