yuu's dev: 7月 2009

2009年7月23日木曜日

[CSS] width: 100% の解釈

CSSで width: 100% を指定した場合、margin, padding, border を指定すると、 100% + 指定した幅が全体の横幅となる。

例えば、
<style type="text/css">
.container {
   height: 200px;
   width: 200px;
   overflow: auto;
}
.content {
   width: 100%;
   height: 100%;
   background-color: #ccc;
   border: 1px solid red;
}
</style>

<div class="container">
   <div class="content"></div>
</div>

この場合、content の横幅は 100% + 1px x 2 となる。100%は200pxなので、横幅は202pxとなり、スクロールバーが表示される。margin, paddingでも同様。

100%の解釈は、IE(IE7, IE8で確認)、FF3でも同じ。

IEとFF3で異なるのは、スクロールバーの幅を100%に含むかどうかが異なるみたい。例えば、上の例で、border を border-top にして、縦スクロールバーが出るようにすると、FFでは縦スクロールバーのみ表示されるが、IEでは縦と横のスクロールバーが表示される。IEではcontentの横幅が 200px + スクロールバーの幅になるのに対し、FFではスクロールバーの幅を含めた横幅が 200px になる模様。

2009年7月16日木曜日

[CSS] スクロールする領域内で position: relative; を指定すると、スクロールが効かなくなる

overflow: auto; を設定したdiv内で、
position: relative; を設定すると、
overflowした部分がそのまま表示され、
かつ、スクロールが効かなくなる現象があった。

Firefox 3 では問題ないが、IE7, IE8 で起きた現象。
IEのバグらしい。

(例)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.frame {
width: 100px;
height: 100px;
overflow: auto;
}

.item {
width: 80px;
height: 80px;
position: relative;
background-color: red;
margin-bottom: 5px;
}
</style>
</head>

<body>
<div class="frame">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</body>
</html>

※説明のために簡略化。
　どうしてもrelativeが使いたかったのです。。。

解決方法としては、
1. DOCTYPEを無くすとうまく表示される。
　つまり、互換モードにすればいいのかな。
　でも、これだと全体の表示が崩れてしまいそう。
　（もうすでにいろいろ書いていたので。)

2. .frame に position: relative; を追加する。
　これでIEでもFFでも思ったとおりの表示になる。

FF, IE以外は確認してません。。。

2009年7月15日水曜日

[iPhone] View Orientation

iPhoneは横にすると、自動的に画面を横表示に切り替えられる。

今日は、縦や横の切り替えを試してみた。

1. Xcodeの起動

2. 新規プロジェクトの作成

　ファイル > 新規プロジェクト...

　View-based Applicationを選択

3. UIの作成

　View上にLabelを配置

　配置したLabelを選択し、Tools > Size Inspector を開く

　Placementで中央にLabelを配置し、

　Autosizingで何も選択しないようにすると、

　自動で中央に位置を合わせてくれる

4. ソースコードの編集

　ViewOrientationViewController.mを開く

　(この場合、ViewOrientationがプロジェクト名)

　shoudAutorotateToInterfaceOrientationのコメントを外し、

　YESを返すように編集

　- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {

　//　Return YES for supported orientations

　//　return (interfaceOrientation == UIInterfaceOrientationPortrait);

　　　return YES;

　}

5. ビルドと実行

　ビルドと実行するとiPhone Simulatorが立ち上がる

　iPhone Simulatorの向きを変えるには、command + 矢印 (右、左)で切り替え

2009年7月13日月曜日

[Git] 新規ファイルのインポート

Gitをインストールしたので、ソースコードをGitのリビジョン管理化に置いてみました。

0. 設定

　コミットしたときの名前やメールアドレスを設定する

　$ git config --global user.name "xxx xxx"

　$ git config --global user.email "xxx@xxx.com"

1. 管理したいソースのあるディレクトリで、

　$ git init

　下記のように表示される

　Initialized empty Git repository in /Users/...

　また、.gitというディレクトリができているのがわかる

2. ファイルをステージに追加する

　$ git add .

　. で現在のディレクトリのすべてのファイルを追加する

　Gitでは、コミット前の段階をステージに追加すると表現するらしい

3. コミット

　$ git commit

　vi が立ち上がり、コメントを追加する

　viの操作

　　i: insert

　　esc: モード切り替え

　　wq: 保存して終了

個人でやるならここまでで十分？

Gitらしい分散管理はやってないけど。。。

本当は git push や git pull でおおもとのレポジトリに追加やマージをするみたい

2009年7月7日火曜日

[iPhone] Hello World!

初めてiPhoneアプリを作ってみました。

最初に作るアプリは、やっぱり「Hello World」。

1. Xcodeの起動

　/Developer/Applications/Xcode を起動

　もしくはSpotlightでXcodeを検索して起動

2. プロジェクトの作成

　ファイル > 新規プロジェクト...

　iPhone OS/Application のテンプレートから

　Window-based Application を選択

　プロジェクト名を入力して保存する

3. ビルド＆実行

　ビルドの構成が「Simulator - 3.0 | Debug」になっていることを確認し、

　　ビルド > ビルドと実行

　を選択して、実行する

　当然、まだ何も作ってないので、何もない画面ですが、

　ちゃんとiPhone Simulatorが立ち上がります。

4. UI作成

　ファイルリストからMainWindow.xibをダブルクリック

　　・xibはUIの定義されたXMLファイル

　　・Interface Builder で簡単に編集できる

　Interface Builder

　　a. ラベルの作成

　　　・LibraryからLabelを探し、Windowにドラッグ＆ドロップする

　　　・Tools > Inspector を選択し、Label Attributes を編集

　　　　Textを空にする

　　b. ボタンの作成

　　　・LibraryからRound Rect Buttonを選択し、

　　　　Windowにドラッグ＆ドロップする

　　　・Tools > Inspector を選択し、Button Attributes を編集

　　　　Titleに「Click!」と入力

5. コード編集

　HelloWorldAppDelegate.hを編集する

　　　#import

　　　@interface HelloWorldAppDelegate : NSObject {

　　　 UIWindow *window;

　　　 IBOutlet UILabel *label; // <-- 追加

　　　}

　　　@property (nonatomic, retain) IBOutlet UIWindow *window;

　　　-(IBAction)putText; // <-- 追加

　　　@end

　HelloWorldAppDelegate.mを編集する

　　　// 追加

　　　- (IBAction)putText {

　　　 label.text = @"Hello World!";

　　　}

6. Outletsとアクションの接続

　MainWindow.xibを選択

　Hello World App Delegate を control を押しながらクリック

　新たに開いたウィンドウのOutlets/labelの右の丸をドラッグして、

　Windowの中のLabelにドロップする

　同様にReceived Actions/putTextの右の丸をドラッグして、

　Windowの中のボタンにドロップする

　開いたウィンドウの中から「Touch Up Inside」を選択

7. ビルド＆実行

　「Click!」をクリックすると、「Hello World!」が表示される

2009年7月3日金曜日

[iPhone] iPhone SDK のダウンロード

1. Apple IDの登録（無料）

2. iPhone SDKのダウンロード

　http://developer.apple.com/iphone/ に行ってログイン

　Downloads > iPhone SDK 3.0　から iPhone SDK 3.0 をダウンロード

2009年7月1日水曜日

[mac] Firefoxのインストール

http://mozilla.jp/firefox/

[mac] パスの設定

パスを表示する

　$ printenv PATH

　パスの一覧を表示する

　$ printenv

　環境変数の一覧を表示する

　$ echo $PATH

　パスの一覧を表示する

パスを設定する

　$ PATH=$PATH:/usr/local/git/bin

　$ export PATH

ログインする度に自動的に設定する

　~/.bash_profile を編集（もしくは作成）

　export PATH=$PATH:/usr/local/git/bin

[Git] Gitをインストール

Gitが流行っているみたいなのでインストールしてみた。

GitはSubversionのようなソースコード管理を行うためのシステムだが、分散型なのが特徴（個人で使うには関係ないか...）。でもせっかくなので試してみた。

下記からdmgファイルをダウンロードしてきてインストールするだけ。簡単！

git-osx-installer - Google Code

あとは ~/.bash_profile を編集してパスを通すだけ。

PATH=$PATH:/usr/local/git/bin

※デフォルトでは /usr/local/git にインストールされる

[mac] ctrlとcapsの入れ替え

新しく MacBook Pro を購入！

まずは、ctrl と caps を入れ替えてみた。

「システム環境設定」→「キーボードとマウス」→「修飾キー...」

yuu's dev

2009年7月23日木曜日

[CSS] width: 100% の解釈

2009年7月16日木曜日

[CSS] スクロールする領域内で position: relative; を指定すると、スクロールが効かなくなる

2009年7月15日水曜日

[iPhone] View Orientation

2009年7月13日月曜日

[Git] 新規ファイルのインポート

2009年7月7日火曜日

[iPhone] Hello World!

2009年7月3日金曜日

[iPhone] iPhone SDK のダウンロード

2009年7月1日水曜日

[mac] Firefoxのインストール

[mac] パスの設定

[Git] Gitをインストール

[mac] ctrlとcapsの入れ替え

フォロワー

ブログアーカイブ

自己紹介

2009年7月23日木曜日

2009年7月16日木曜日

2009年7月15日水曜日

2009年7月13日月曜日

2009年7月7日火曜日

2009年7月3日金曜日

2009年7月1日水曜日

フォロワー

ブログ アーカイブ

自己紹介

ブログアーカイブ