web-dev-qa-db-ja.com

ボタンのサイズ変更

サイト全体で使用したい「ボタン」がありますが、buttonがサイトのどこにあるかに応じて、さまざまなサイズで表示したいです。

私のHTMLで試しました（ただし機能しません）：

<div class="button" width="60" height="100">This is a button</div>

一致するCSS：

.button {
  background-color: #000000;
  color: #FFFFFF;
  float: right;
  padding: 10px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

これを呼び出すたびにclassを呼び出すと、サイズを渡すことができると仮定しました。

buttonclassを呼び出すときに幅と高さを追加することで、サイズに影響を与えないようです。誰も私がこれを行う方法を知っていますか？ CSSに幅と高さを入れると、buttonはどこでも同じサイズになります。

htmlcssbuttonsize
8
heyred

「width」属性と「height」属性を直接使用しないでください。style="some css here"インラインスタイリングを使用する場合：

<div class="button" style="width:60px;height:30px;">This is a button</div>

ただし、インラインスタイリングは、メンテナンスとスタイルの更新が悪夢になるため、通常は避けてくださいことに注意してください。個人的に、あなたのようなボタンスタイリングがあり、異なるサイズを適用したい場合は、次のように複数のcssクラスでサイジングを行います。

   .button {
        background-color: #000000;
        color: #FFFFFF;
        padding: 10px;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        margin:10px
    }
    
    .small-btn {
        width: 50px;
        height: 25px;
    }
    
    .medium-btn {
        width: 70px;
        height: 30px;
    }
    
    .big-btn {
        width: 90px;
        height: 40px;
    }
    <div class="button big-btn">This is a big button</div>
    <div class="button medium-btn">This is a medium button</div>
    <div class="button small-btn">This is a small button</div>

jsFiddleの例

このスタイルの定義方法を使用すると、HTMLマークアップからすべてのスタイル情報が削除されます。これにより、すべての小さなボタンのサイズを変更する場合、CSSで一度変更するだけで済みます。

12
Anders Arpi

インラインでボタンの異なるサイズを呼び出したい場合は、おそらく次のようにします。

<div class="button" style="width:60px;height:100px;">This is a button</div>

または、異なるサイズ（ボタンには3つの標準サイズがあるなど）を設定するより良い方法は、サイズだけのクラスを使用することです。

たとえば、次のようにボタンを呼び出します。

<div class="button small">This is a button</div>

そしてあなたのCSSで

.button.small { width: 60px; height: 100px; }

必要なサイズごとにクラスを作成します。そうすれば、すべての小さなボタンのサイズを一度に変更したい場合に備えて、スタイルシートを使用するメリットがあります。

5
Rampant Creative Group

別の方法として、タグに複数のクラスを含めることができます。考慮してください：

 <div class="button big">This is a big button</div>
 <div class="button small">This is a small button</div>

そしてCSS：

 .button {
     /* all your common button styles */
 }

 .big {
     height: 60px;
     width: 100px;
 }
 .small {
     height: 40px;
     width: 70px;
 }

等々。

2
cobaltduck

インラインスタイルを使用します。

<div class="button" style="width:60px;height:100px;">This is a button</div>

フィドル

2
Turnip