2014年9月9日火曜日

Android WidthやHeightとWeightの関係

androidでレイアウトを作成する時、WidthやHeight、Weightの設定でデザインが大きく変わります。

WidthプロパティとHeightプロパティに指定できる値は以下の3種類あります。
match_parent・・・親のViewいっぱいに表示
wrap_content・・・自動調整で表示
fill_parent・・・Android SDK 2.2以降は非推奨。match_parentを使用する。

次にWeightですが「画面上のオブジェクトの占有比率」を指定します。

つまりボタンを3つ配置し、Weight=1、Weight=2、Weight=3と指定すると
Weight=3を指定したボタンが一番大きく、次にWeight=2、Weight=1の順でボタンが大きく表示されるということです。
しかし、WidthやHeightの設定によって、まったく逆の結果になってしまうこともあります。
Weight=1を指定したボタンが一番大きく、次にWeight=2、Weight=3の順でボタンが大きく表示されることもあります。

具体的に見ていきます。
以下はLinearLayout(Vertical)にボタンを3つ配置して、ボタンのプロパティをそれぞれ設定します。

まずボタンのHeightにwrap_contentを指定した場合です。

1つ目のボタン
Width=wrap_content
Height=wrap_content
weight=1

2つ目のボタン
Width=wrap_content
Height=wrap_content
weight=2

3つ目のボタン
Width=wrap_content
Height=wrap_content
weight=3
次はボタンのHeightにmatch_parentを指定した場合です。

1つ目のボタン
Width=wrap_content
Height=match_parent
weight=1

2つ目のボタン
Width=wrap_content
Height=match_parent
weight=2

3つ目のボタン
Width=wrap_content
Height=match_parent
weight=3

Heightプロパティにwrap_contentを指定した場合は
Weight=3を指定したボタンが一番大きく、次にWeight=2、Weight=1の順でボタンが大きく表示されます。

Heightプロパティにmatch_parentを指定した場合は
Weight=1を指定したボタンが一番大きく、次にWeight=2、Weight=3の順でボタンが大きく表示されます。

原因はコチラに詳しく解説されています。
zaki日記 LinearLayout の width(またはheight) と weight の関係
つまりweightは余白を配分する割合を指定するもので、
wrap_contentを指定し場合は余白が正の値になるため、weightに指定した値で余白を分配できるが
match_parentを指定した場合は余白が負の値になるため、weightに指定した値で分配するとおかしなことになるとのことです。
なるほど~

次は横パターンで見ていきます。
LinearLayout(Horizontal)にボタンを2つ配置して、Width=wrap_contentを指定しweightは指定していない状態です。

1つ目のボタン
Width=wrap_content
Height=wrap_content


2つ目のボタン
Width=wrap_content
Height=wrap_content

それぞれのボタンにweight=1を指定します。

1つ目のボタン
Width=wrap_content
Height=wrap_content
weight=1


2つ目のボタン
Width=wrap_content
Height=wrap_content
weight=1

右のボタンの方が大きいですね。
wrap_contentはボタンに設定されているテキストからボタンサイズを計算し、さらにweightの指定による余白の分配をしているので当然の結果ですね。

次はそれぞれのボタンにWidth=match_parent、weight=1を指定した状態です。

1つ目のボタン
Width=match_parent
Height=wrap_content
weight=1


2つ目のボタン
Width=match_parent
Height=wrap_content
weight=1


左右のボタンの大きさが同じになりました。
しかし、2つのボタンのweightが共に1なので問題ありませんが、それぞれweightを変えてみると、縦配置と同じような現象が発生します。
1つ目のボタンをweight=1、2つ目のボタンをweight=2とすると、2つ目のボタンが小さくなってしまいました。

1つ目のボタン
Width=match_parent
Height=wrap_content
weight=1


2つ目のボタン
Width=match_parent
Height=wrap_content
weight=2


widthやheightにwrap_contentを指定した上でweightを指定するということは、ウィジェットに設定されている内容からウィジェットのサイズを自動計算し、 さらにweightの指定による余白の分配が行われます。
そのため少しパフォーマンスが悪くなるようです。

weightに指定した比率でボタンを配置したい場合は、縦配置であればHeight=0dip、横配置であればWidth=0dipに指定し、Weightを指定するようにします。

縦配置の例です。

1つ目のボタン
Width=wrap_content
Height=0dip
weight=1

2つ目のボタン
Width=wrap_content
Height=0dip
weight=2

3つ目のボタン
Width=wrap_content
Height=0dip
weight=3
横配置の例です。

1つ目のボタン
Width=0dip
Height=wrap_content
weight=1

2つ目のボタン
Width=0dip
Height=wrap_content
weight=2

2014年9月8日月曜日

Android パッケージ名

androidプロジェクトをを作成する際、アプリケーション名を入力すると、 パッケージ名は「com.example.xxxxx」となります。
Android Marketに登録する時、「com.example.xxxxx」のままだとエラーで登録できません。

通常、パッケージ名にはドメイン名を逆に並べたものを指定することが推奨されています。
たとえば会社ドメインが「mycompany.co.jp」であれば、パッケージ名は「jp.co.mycompany」となります。
ドメイン名は一意なので、これをパッケージ名に使うことでパッケージ名も一意が保障されることになります。

ドメインを持っていない個人の場合は、
日本インターネット協会 Java 部会のパッケージ名登録/利用サービスというサービスがあります。
http://www.java-conf.gr.jp/Package/naming/index.html
こちらのサービスを利用すると、一意なパッケージ名を取得できます。
取得したパッケージ名は「jp.gr.java_conf.xxxxx」となります。

ドメイン名をお持ちでない方はコチラの利用をお勧めします。

Androi 最新の開発環境 2014年9月現在

2014年9月現在のAndroidの最新の開発環境の作成手順です。
説明はすべてwindowsの64ビットマシンを前提にしています。

Javaのインストール


以下のサイトからJDKをダウンロードします。

http://www.oracle.com/technetwork/java/javase/downloads/index.html

ダウンロードした「jdk-8u20-windows-x64.exe」を実行し、JDKのインストールを行います。

インストールが終了したら、環境変数を設定します。
コンピュータのプロパティ画面より「システムの詳細設定」リンクをクリックし「システムプロパティ画面」を開きます。

「詳細設定」タブの「環境変数」ボタンをクリックします。


「JAVA_HOME」の値を、先ほどJDKをインストールしたパスに変更します。
JDKのデフォルトのインストールパスは「C:\Program Files\Java\jdk1.8.0_20」になっています。

「システム環境変数」のリストより「Path」を選択し、「%JAVA_HOME%bin」が含まれていることを確認します。
Pathに含まれていない場合は、編数値の末尾に「;」をつけ、「%Java_HOME%bin;」を追記します。


Eclipseのインストール


以下のサイトからEclipse4.4をダウンロードします。
http://www.eclipse.org/downloads/
ダウンロードしたファイル「eclipse-standard-luna-R-win32-x86_64.zip」を解凍します。
解凍してできた「eclipse」フォルダを任意の場所に配置します。
私はC:\Program Files\eclipse4.4\に配置しました。

Eclipseの日本語化


「Pleiades」というサードパーティ製のソフトウェアを使用します。 以下のページよりダウンロードします。
http://mergedoc.sourceforge.jp/
少し下にスクロールして「安定板」を選択します。
「pleiades_1.5.0.zip 」をタウンロードします。
ダウンロードしたファイル「pleiades_1.5.0.zip」を解凍します。
解凍してできた「pleiades_1.5.0」フォルダの中身をすべて、「C:\Program Files\eclipse4.4\」フォルダの中に上書きします。

次にeclipse.ini を編集します。
C:\Program Files\eclipse4.4\eclipse.iniをテキストエディタで開きます。
最後に「-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar」1行を追記します。
-startup
plugins/org.eclipse.equinox.launcher_1.3.0.v20140415-2008.jar
--launcher.library
plugins/org.eclipse.equinox.launcher.win32.win32.x86_64_1.1.200.v20140603-1326
-product
org.eclipse.epp.package.standard.product
--launcher.defaultAction
openFile
--launcher.XXMaxPermSize
256M
-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
256m
--launcher.defaultAction
openFile
--launcher.appendVmargs
-vmargs
-Dosgi.requiredJavaVersion=1.7
-Xms40m
-Xmx512m
-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar  

eclipseのクリーン起動を行います。
C:\Program Files\eclipse4.4\eclipse.exe -clean.cmdをダブルクリックして実行します。
eclipse が起動し日本語化されていることを確認します。
これは日本語化に伴う作業なので、1回だけ実行します。
通常Eclipse を起動するときは、 eclipse.exe をダブルクリックして実行します。


Android SDKのインストール


Android SDKはAndroidアプリを開発するために必要なライブラリや、AndroidアプリをPC上で動作させるためのAndroid端末エミュレータなどの開発ツールがまとまった開発キットです。
以下のページよりダウンロードします。

http://developer.android.com/intl/ja/sdk/index.html
少し下にスクロールして「VIEW ALL DOWNLOADS AND SIZES」を選択し、「SDK Tools Only」の「installer_r23.0.2-windows.exe 」をダウンロードします。
ダウンロードしたインストーラーを実行し、SDKをインストールします。

Android Devlopment Tools(ADT)のインストール

Android Devlopment Tools(ADT)をインストールします。
ADTはExlipseにAndroidアプリの開発機能を追加するためのプラグインです。
Eclipseからインストールします。
Eclipseを起動し、 「ヘルプ」メニューにある「新規ソフトウェアのインストール…」 を選択します。
開いたダイアログの「追加」ボタンを押します。

「リポジトリーの追加」ダイアログに以下を入力します。
名前:任意
ロケーション:ADTプラグインの配布サイトのURL 「https://dl-ssl.google.com/android/eclipse/」
表示されているもの全部にチェックを入れて、「次へ」ボタンをクリックします。
インストールの途中で警告が出ますが、無視してOKをクリックします。 インストールが完了したらEclipseを再起動します。

以上で、環境の作成は終了です。

2014年9月5日金曜日

【HTML & CSS】 ボタンの設定(まとめ)

予算の都合上、Webデザイナさんが入ってくれないwebシステムで、
プログラマだけで何とかちょっとでもマシなデザインを作るために、知っておくといいかもしれないスタイルシートプロパティを紹介していきます。

今回はボタンのスタイルシートの設定についてです。

ボタンのスタイルシートの設定

ボタンを機能ごとに色を変えて欲しいという要望はよくあると思います。
例えば
通常ボタンは青系で、削除系のボタンは赤色で・・・といった要件です。

スタイルシートはこんな感じですかね。
.btn {
    padding: 10px 30px;
    font-weight: bold;
    color: #ffffff;
    border: none;
    border-radius: 5px;
}

.btn_def{
    background:  #000080;
}

.btn_del{
    background:  #CD5C5C;
}
HTML
<input type="submit" value="通常" Class="btn btn_def">
<input type="submit" value="削除" Class="btn btn_del">

次によくあるのが「カーソルが当たった時がわかりにくいですよねぇ・・・」というお言葉です。
ボタンの色を変えているので、それぞれのボタンごとにホバーしたときの色を設定するのはメンドクサイです。
ここは全てのボタンで使用できる透過で処理しちゃいます。
透過を適用すると、ボタンにカーソルが当たった時にボタンの色が少し薄い色に変わります。
先ほどのスタイルシートにホバー時の設定を追加します。
.btn:hover {
    opacity: 0.75;
}
opacityプロパティはCSS3の機能で透過効果を適用できます。
0.0(透明)から1.0(不透明)の数値を指定します。


このままではプログラムからボタンを無効にした時、ボタンの色が変わりません。
無効にした時のcssを追記します。
.btn:disabled {
    color: #808080;
    background:  #C0C0C0;
}

ここで完成と言いたいところですが、このままでは無効にしたボタンをホバーした時もボタンの色が透過されてしまいます。
ボタンが無効の時は透過させない設定を追加します。
.btn[disabled]:hover {
    opacity: 1;
}

これでボタンのスタイルシートの設定は完成です。
CSS
.btn {
    padding: 10px 30px;
    font-weight: bold;
    color: #ffffff;
    border: none;
    border-radius: 5px;
}

.btn:hover {
    opacity: 0.75;
}

.btn:disabled {
    color: #808080;
    background:  #C0C0C0;
}

.btn[disabled]:hover {
    opacity: 1;
}

.btn_def{
    background:  #000080;
}

.btn_del{
    background:  #CD5C5C;
}
HTML
<input type="submit" value="実行" Class="btn btn_def" >
<input type="submit" value="削除" Class="btn btn_del" >
<input type="submit" value="無効" Class="btn" disabled="disabled" >

これだけできれば最低限の見た目は満たしているのではと思います。

【HTML & CSS】 liner-gradient関数で線形グラデーションを付ける

予算の都合上、Webデザイナさんが入ってくれないwebシステムで、
プログラマだけで何とかちょっとでもマシなデザインを作るために、知っておくといいかもしれないスタイルシートプロパティを紹介していきます。


border-radiusプロパティで角を丸くする
box-shadowプロパティでボックスに影を付ける

上記に続いて第3弾はグラデーションを付ける方法です。
今まではグラデーション画像を用意して、ボタンなどの背景画像に設定していました。
画像編集ソフトを使うのが面倒で、ボタンは基本ベタ塗りです・・・(;^ω^)
CSS3からはスタイルシートだけでグラデーションが実現できるんです。
便利になりました。

liner-gradient関数で線形グラデーションを付ける

グラデーションはbackgroundプロパティかbackground-imageプロパティに、線形グラデーションであればlinear-gradient()関数を、円形グラデーションであればradial-gradient()関数を指定することで実現します。
今回はliner-gradient関数で線形グラデーションを付ける方法です。

linear-gradient()関数で線形グラデーション

background:linear-gradient(グラデーションの方向、 開始色 0%, 終了色 100%)
または
background-image:linear-gradient(グラデーションの方向、 開始色 0%, 終了色 100%)
グラデーションの方向は、キーワードまたは角度で指定します。
方向 キーワード 角度
下から上 to top 0deg
左から右 to right 90deg
上から下 to bottom 180deg
右から左 to left 270deg

開始色が白、終了色が黒で上から下にグラデーションを付けたい場合は、以下のように指定します。
background:linear-gradient(to bottom, #fff 0%, #000 100%)
または
background:linear-gradient(180deg, #fff 0%, #000 100%)
または
background-image:linear-gradient(to bottom, #fff 0%, #000 100%)
または
background-image:linear-gradient(180deg, #fff 0%, #000 100%)


開始色が白、終了色が黒で左下から右上にグラデーションを付けたい場合は、以下のように指定します。
background:linear-gradient(45deg, #fff 0%, #000 100%)
または
background-image:linear-gradient(45deg, #fff 0%, #000 100%)



linear-gradient()関数の各ブラウザ対応状況


linear-gradient()関数はCSS3の機能で一部のブラウザではベンダープレフィックスを使用する必要があります。
IEIE10よりサポート
ChromeChrome26よりサポート
FirefoxFirefox16よりサポート
SafariSafari6.1よりサポート
iOsiOS7.0よりサポート
Androidサポートなし
Android2.1以降ではベンダープレフィックス「-webkit-gradient」を使用します。
Android4.0以降からはベンダープレフィックス「-webkit-linear-gradient」を使用します。
iOS3.2以降ではベンダープレフィックス「-webkit-gradient」を使用します。
iOS5.0以降ではベンダープレフィックス「-webkit-linear-gradient」を使用します。
2014年時点ではスマートフォン向けに「-webkit-linear-gradient」を使用する方がよさそうです。
「-webkit-gradient」を使用するかは微妙な所です。

というわけで、linear-gradientの指定の仕方は下記のようになります。(※2014年9月時点)
.box{
   background-image : -webkit-linear-gradient(top, #fff 0%, #000 100%);
   background-image : linear-gradient(to bottom, #fff 0%, #000 100%)
}
-webkit-linear-gradientで指定できるグラデーションの方向、キーワードまたは角度は、linear-gradientの指定と異なります。
方向 キーワード 角度
下から上 bottom 90deg
左から右 left 0deg
上から下 top 270deg
右から左 right 180deg



linear-gradientの設定を簡単に作成するツール


たとえばコチラ CSS matic のような設定ツールを使うと、linear-gradientの設定が簡単に作成・確認できます。

2014年7月18日金曜日

【HTML & CSS】 box-shadowプロパティでボックスに影を付ける

予算の都合上、Webデザイナさんが入ってくれないwebシステムで、
プログラマだけで何とかちょっとでもマシなデザインを作るために、知っておくといいかもしれないスタイルシートプロパティを紹介していきます。

border-radiusプロパティで角を丸くする方法に続いて、次はボックスに影を付ける方法です。

ボックスに影を付ける


box-shadow: 横オフセット 縦オフセット [ぼかし幅]  [影の広がり]  [inset];
[]は省略可能です。
[影の広がり]を指定しない場合は影のサイズはボックスのサイズと同じになります。正の値を指定すると全方位に影が拡大されます。反対に負の値を指定すると影は縮小されます。
[inset]を指定すると影はボックスの内側に付きます。

box-shadow: 10px 20px;
横方向に10px、縦方向に20pxにずらした位置に影を付けます。


box-shadow: 10px 20px 5px;
横方向に10px、縦方向に20pxにずらした位置に影を付け、影のぼかし幅を5pxに設定します。


box-shadow: 0 0 0 10px;
影の広がりだけを10pxに設定すると、ボックスサイズより全方位に10px拡大された影が付きます。


box-shadow: 10px 20px 5px #aaaaaa;
横方向に10px、縦方向に20pxにずらした位置に影を付け、影のぼかし幅を5px、影の色をグレーに設定します。


box-shadow: 0 0 16px 5px #aaaaaa inset;
insetを指定してボックスの内側に影を付けます。
insetを指定した場合、影の広がりは正の値で縮小されるようになります。



box-shadowの各ブラウザ対応状況


box-shadowプロパティはCSS3の機能で一部のブラウザではベンダープレフィックスを使用する必要がありますが、
IEIE9よりサポート
ChromeChrome10.0よりサポート
FirefoxFirefox4.0よりサポート
SafariSafari5.1よりサポート
iOsiOS5.0よりサポート
AndroidAndroid4.0よりサポート
Android4.0以前、iOs5.0以前に対応するためにはベンダーブレフィックス「-webkit-」を使用します。
2014年時点ではスマートフォン向けにwebkitを使用する方がよさそうです。

というわけで、box-shadowの指定の仕方は下記のようになります。(※2014年7月時点)
.box{
 -webkit-box-shadow: 10px 20px 5px #aaaaaa;
 box-shadow: 10px 20px 5px #aaaaaa;
}


box-shadowの設定を簡単に作成するツール


たとえばコチラ CSS matic のような設定ツールを使うと、box-shadowの設定が簡単に作成・確認できます。

2014年7月17日木曜日

【HTML & CSS】 border-radiusプロパティで角を丸くする

予算の都合上、Webデザイナさんが入ってくれないwebシステムで、
プログラマだけで何とかちょっとでもマシなデザインを作るために、知っておくといいかもしれないスタイルシートプロパティを紹介していきます。

まずはボックスの角を丸くする方法です。
今までは画像を使って角丸を実現してきましたが、CSS3からはスタイルシートを使って簡単に角丸を実現できるようになりました。

時間が無かったり、めんどくさかったりで、ただ罫線で囲んだだけの味気ないボックスを
ほんの少し角を丸くするだけで、すこしはマシなデザインになるかも?です。

ボックスの4隅の角を丸くする

まずは、ボックスの4隅の角をまとめて丸くする方法です。
border-radius: 20px;


4隅の角をそれぞれ指定するには、border-radius: 左上 右上 右下 左下; と指定します。
border-radius: 20px 30px 40px 50ox;


4隅の角の指定を100%にすると、円も表現できます。



他にも指定方法は色々あります。
複雑な事はしないので、基本的な設定方法だけまとめてみました。


border-radiusの各ブラウザ対応状況


border-radiusプロパティはCSS3の機能で一部のブラウザではベンダープレフィックスを使用する必要がありますが、
border-radiusのサポート状況からベンダープレフィックスは必要なさそうです。
IEIE9よりサポート
ChromeChrome5.0よりサポート
FirefoxFirefox4.0よりサポート
SafariSafari5.0よりサポート
iOsiOS4.0よりサポート
AndroidAndroid2.2よりサポート


border-radiusの設定を簡単に作成するツール


たとえばコチラ CSS matic のような設定ツールを使うと、border-radiusの設定が簡単に作成・確認できます。

2014年7月11日金曜日

【HTML & CSS】marginが重なると相殺し合う

私はプログラマーです。普段CSSを触る事は滅多にありません。
それでもCSSを触らないといけない事も、時々あります。
そんな時によく遭遇するのが「marginが効かないっ!!」です。

すこ~し前にmarginが重なると、一方のmarginが効かなくなるようなことは、ネットで検索して知っていました。
「ふ~ん」って感じで読み流しちゃって、ちゃんと理解していませんでした。
今回はしっかり理解したいと思います(`・ω・´)キリッ


marginが相殺し合うパターン

CSSでは「上下のマージンは重ねて表示する」というルールがあります。

同階層の要素の場合


下記の画像はdivTopにmargin-bottom: 40pxを指定しています。


次にdvBottomにmargin-top: 20pxを指定します。
divTopの下マージン + divBottomの上マージンで、divTopとdivBottomの間隔は60pxになると思ってました。
でも結果は先ほどと変わりません。


CSSでは「上下のマージンは重ねて表示する」というルールがあります。
上記の例でいうとdivTopのmargin-bottomとdivBottomのmargin-topが重なり、marginが大きいdivTopのmargin-bottomだけの間隔があきます。


例えばdivBottomのmargin-topを60pxに設定すると、divTopのmargin-bottomより大きいので、divBottomのmargin-topだけの間隔があきます。


親子要素の場合


下記の画像は水色が親のdiv、赤色が子のdivです。
<div class="divParent">
 <div class="divChild">divChiled</div>
</div>

.divParent{
 width: 100px;
 height: 100px;
 background-color: #7ef1e0;
}

.divChild{
 background-color: #f17e7e;
 width: 70px;
 height: 40px;
}


それでは親のdivParentにmargin-top: 10pxを設定し、子のdivChildにmargin-top: 30pxを設定してみます。
私の希望する結果は下記の画像のように、親要素が10px下がって、子要素は親要素から30px下がっている状態です。


結果は親要素も子要素も30px下がってます。

親要素のmargin-topと子要素のmargin-topが相殺され、大きい方の子要素のmargin-topが適用されています。


marginが相殺されないケースがある

相殺されるなら必ずされる。相殺されないならすべての条件で相殺されない。とハッキリしてくれていたらいいのに
ある一定の条件下で相殺されないケースがあります。

同階層の要素の場合
  • 要素にfloatが指定されているとき

親子要素の場合
  • 親要素にborderが指定されているとき
  • 親要素にpaddingが指定されているとき
  • 親要素が空でないとき
  • ・・・etc

今の私には相殺されないケースすべてを理解することは無理なので、親子要素の3つのケースについて試してみました。

親子階層でmarginが相殺されている状態です。
親のdivParentにmargin-top: 10pxを設定し、子のdivChildにmargin-top: 30pxを設定しているので
子要素のmargin-top: 30pxが適用されている状態です。


親要素にborderを指定してみます。marginは相殺されていません。


次は親要素にpaddingを指定してみます。こちらもmarginは相殺されていません。


最後に親要素に文字を入れてみます。こちらもmarginは相殺されていません。
<div class="divParent">divParent
 <:div class="divChild">divChiled</div>
</div>




今回理解したことは「マージンには気をつけろ」( ´▽` )ノ

【HTML & CSS】CSS3のbox-sizingプロパティ

私はプログラマーなので、普段はCSSはほぼ触りません。
でも今日はCSS3で導入されたbox-sizingプロパティを使って驚きました!
box-sizingが便利~っ!    ・・・てことに驚いたんじゃありません。
borderやpaddingでボックスサイズが変わる事を初めて知りました!
box-sizingの機能が標準だと思ってました(;・∀・)
いやぁ無知って恐ろしいですなぁ

ボックスの標準の動きのおさらい


width:100px; height:100px; を指定したdivです。



標準のdivに罫線10pxを指定したdivです。
罫線の分が増えたので、高さ:120px、幅:120pxです。



さらにpadding: 10pxを指定します。
paddingの分が増えたので、高さ:140px、幅:140pxです。



罫線とpaddingを含め標準のサイズ(高さ:100px、幅:100px)で表示したければ、罫線とpaddingの分を引いて width:60px height:60px を指定することになります。
pxで指定されていればよいですが、width:40% で border: 5px の場合などは計算するの面倒ですね…


box-sizingを設定する


width:100px; height:100px; を指定したdivです。



罫線を10px、padding:10pxを指定したdivに「box-sizing: border-box」を指定します。



「box-sizing: border-box」を指定するとwidthとheightで指定した幅に、罫線とpaddingを含めてくれます。


box-sizingの各ブラウザ対応状況


box-sizingプロパティはCSS3の機能で一部のブラウザではベンダープレフィックスを使用する必要があります。
IEIE8よりサポート
ChromeChrome10よりサポート
FirefoxVersion29よりサポート
SafariSafari5.1よりサポート
iOsiOS5.0よりサポート
AndroidAndroid4.0よりサポート
Android4.0以前に対応するためにはベンダーブレフィックス「-webkit-」を使用します。
2014年時点でAndroid4.0以前のシェアも約半数あるので、指定しておく方がよいかもしれません。

FireFoxのVersion29は2014/04/29にリリースされました。
もうしばらくの間、ベンダープレフィックス「-moz-」を指定しておく方がよいかもしれません。

というわけで、box-sizingの指定の仕方は下記のようになります。(※2014年7月時点)
.box{
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

box-sizingを使う使わないはサイト全体で統一していた方が良いと思いますので、ユニバーサルセレクタで指定する方がよいかもしれません。
* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}