CSS / CSS3 and LESS で作る iPhone ボタン – Step 02 空だと意味が無い! 引数のパラメータを適応させよう

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

超簡単♪ CSS / CSS3 and LESS で作る iPhone ボタン』の Step 02.

前回は ボタンスタイルを簡単に適応できるように中身が空の .button mixins を定義しました. 今回やっと見た目が変わります! mixins に渡した値をプロパティに適応させていきます.

screenshot

table of contents

サンプル & コード

サンプルです.

CSS(LESS) コード

// #! less 

/*
 * library
 */
#tm {
  
  
  /*
   * #tm .button
   * @param   {color} @color    テキストの色
   * @param   {color} @bg-color 背景色
   * @param   {size}  @width    幅
   * @param   {size}  @height   高さ
   */
  .button(@color, @bg-color, @width, @height) {
    // ボックス
    width: @width;
    height: @height;
    border: 1px solid #aaa;
    background-color: @bg-color;
    
    // テキスト
    color: @color;
    text-align: center;
    line-height: @height;
    font-size: @height*0.5;
  }
  
}

/*
 * main
 */

body {
  font-family: "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif;
}

h1 {
  font-size: 16px;
}

div[class|=button] {
  //float: left;
  margin: 10px;
}

@button-width: 128px;
@button-height: 32px;

.button-red {
  #tm .button(white, hsl(0, 80%, 50%), @button-width, @button-height);
}

.button-yellow {
  #tm .button(black, hsl(60, 80%, 50%), @button-width, @button-height);
}

.button-green {
  #tm .button(white, hsl(120, 80%, 50%), @button-width, @button-height);
}

.button-cyan {
  #tm .button(white, hsl(180, 80%, 50%), @button-width, @button-height);
}

.button-blue {
  #tm .button(white, hsl(240, 80%, 50%), @button-width, @button-height);
}

.button-purple {
  #tm .button(white, hsl(300, 80%, 50%), @button-width, @button-height);
}

.button-white {
  #tm .button(black, white, @button-width, @button-height);
}

.button-black {
  #tm .button(white, black, @button-width, @button-height);
}

up

解説

mixins の中身をさくっと追加

前回の step で定義した .button で引数に渡された値を それぞれ適切なプロパティに適応させていきます.

  .button(@color, @bg-color, @width, @height) {
    // ボックス
    width: @width;
    height: @height;
    border: 1px solid #aaa;
    background-color: @bg-color;
    
    // テキスト
    color: @color;
    text-align: center;
    line-height: @height;
    font-size: @height*0.5;
  }

特に難しいことはしていませんが, これだけでも大分見栄えが良くなりますね(:

ポイントとしては line-height を指定している点です. テキストの横揃えを中央にするには text-aligncenter を指定するだけで簡単にできます. しかし, 縦揃えはそうはいきません.

そこで便利なのが line-height プロパティです. このプロパティに要素の高さと同じ値を指定することで縦揃えも中央にすることができます.

up

次回はボタンにグラデーションフィルタを掛けて一気に iPhone っぽいボタンにしていきます.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT