2015年9月25日金曜日

border-radiusで角の丸いボックスを配置する

CSS3のborder-radiusで角の丸いボックスを簡単に配置できる。

下のように、4つの値を指定した場合は、左上から時計回りに指定した値が適用される。
#box {
  border-radius: 40px 160px 80px 120px;
}

表示例
時刻:

2015年9月18日金曜日

Angularでテンプレートを切り替えたタイミングで、Material Design Liteのコンポーネントを更新する

AngularJSとMaterial Design Liteを組み合わせて使った場合で、Angularのrouteを使ってtemplateを切り替えた場合、
切り替えて出力されたmdlコンポーネントの初期化処理が実行されない問題が発生した。

この問題を回避するには、templateを切り替えたタイミングでcomponentHandler.upgradeDom();を呼び出してあげれば良い。
参考サイト

例

    angular.module('app', ['ngRoute', 'ngResource'])
        .run(function ($rootScope, $location, $timeout) {
            $rootScope.$on('$viewContentLoaded', function () {
                $timeout(function () {
                  componentHandler.upgradeAllRegistered();
            });
        })
    })
時刻:

2015年9月16日水曜日

CSS3でフェードインとフェードアウト

CSS3のtransition-durationを使うと、jQueryなどを使わずに簡単に要素のフェードインやフェードアウトを行うことができる。

例

transition-durationに2sを設定しているので、2秒かけて要素の状態が徐々に変化していく。
removeでは、要素を徐々に透明にしつつ高さを0にする。
showでは、徐々に要素の高さと透明の設定も元にもどしている。
div.remove {
  opacity: 0;
  height: 0;
  transition-duration: 2s;
}

div.show {
  opacity: 1;
  height: 200px;
  transition-duration: 2s;
}
フェードイン、フェードアウト対象の要素の定義とJavaScriptの内容。
JavaScriptでは、ボタンのクリックイベントで対象要素のクラスを切り替えてフェードイン、フェードアウトを実行している。
<div id="target">
  要素
</div>

<button type="button" id="remove">削除</button>
<button type="button" id="add">表示</button>

<script>
  var removeBtn = document.getElementById('remove');
  var addBtn = document.getElementById('add');
  var div = document.getElementById('target');

  removeBtn.addEventListener("click", function() {
    div.className = 'remove';
  });
  addBtn.addEventListener("click", function() {
    div.style.display = '';
    div.className = 'show';
  });
</script>

実行例


要素




時刻:

2015年9月14日月曜日

[CSS3]box-sizingプロパティでボックス幅の計算方法を指定する

CSS3のbox-sizingプロパティを使うと、ボックスの幅や高さの計算方法を指定することができるようになる。

指定できる値

content-box
paddingやborderはbox幅や高さに含まれない
border-box
paddingとborderはbox幅や高さに含まれる

例

この例の場合、oneとtwoのボックスサイズは同じ大きさとなる。
twoは、paddingとborderがボックスサイズに含まれるので、幅と高さをその分大きく設定している。
  <!-- スタイル定義 -->
  <style>
    #one {
        box-sizing: content-box;
        width: 200px;
        height: 200px;
        border: 10px solid black;
    }

    #two {
        box-sizing: border-box;
        width: 220px;
        height: 220px;
        border: 10px solid black;
    }
  </style>

  <!-- html -->
  <div id="one"></div>
  <div id="two"></div>
時刻: