【CSS】IE7で親要素のpaddingが子要素にもついてしまう時の対処

親要素にheight:1%を指定すると解決したと思います(うろ覚え)。


parent{
	padding:500px;	
	height:1%
}

【CSS】CSSテクニック IE6対策その①

コーディングでハマる罠っていうのは大体同じようなことだと思います。

まぁ95%以上の確率で、コーディング時の問題はIE6、IE7、IE8で起こると思います。

今回はコーダー最大の敵、というかコーダーおよびJavascriptプログラマー曰く「ほんと消えてなくなってほしい」代表のIE6くんの基本的な対策を紹介します。

●loat要素のmargin2倍問題
IE6ではfloatを指定した要素にmarginも指定すると、そのmarginの値は2倍で表示されます。これを防ぐにはdisplay:inline;を指定する

.sample{
	float:left;
	margin-top:100px;
	display:inline;
}

●min-height問題
IE6はmin-heightが反映されません。しかし、IE6は要素の大きさが親要素よりも大きいと自動で親要素も大きくしてしまうので、単純にheightだけを指定すればOK。
.sample{
	min-height:500px;
	 height:500px; //heightの前に半角スペースがあるので、IE6だけに反映される
}

●position:relative問題
IE6ではposition:relativeをそのまま指定するとダメ。どうだめになるのかは未検証ですが、zoom:1;を追加するようにしましょう。
.sample{
	position:relative;
	zoom:1;
}

●ネガティブマージン問題
marginをマイナスで指定すると、要素が逆方向に移動しますが、IE6ではposition:relative; zoom:1を追加します。
.sample{
	margin-top:-50px;
	position:relative;
	zoom:1;
}

●overfllow:hidden問題
overfllow:hiddenにはzoom:1;を追加します。
.sample{
	overfllow:hidden;
	zoom:1;
}

とりあえず基本としてはこんなところだと思います。

IE6、IE7、IE8に関しては、困ったら「zoom:1;を追加」で問題が解決することが多いと思います。

IE6などはズレても修正が簡単ですが、まれに、ごくごーくまれにFirefoxだけ、とかsafariだけちょっとズレた、なんてときは結構大変ですよね。本当にまれですけれども。

【CSS】シンプルなclearfixと reset.cssをまとめたファイル

私が使っている、シンプルなclearfixとrecet.cssをまとめたファイルを紹介します。

clearfixは様々なものが色々な人によって作られてきましたが、いまいちシンプルでないものや、稀に効果が反映されなかったりするものがあります。

そのため「最も良いものはないか?」と以前調べたりカスタマイズしたりして、最終的に落ち着いたものが下記です。


@charset "utf-8";

/*----------------------------------------------------------------
 * recet
----------------------------------------------------------------*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,p,blockquote,th,td {
	margin:0;
	padding:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
object,embed {
	vertical-align:top;
}
h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight:normal;
}
img,abbr,acronym,fieldset {
	border:0;
}

li {
	list-style-type:none;
}

/*----------------------------------------------------------------
 * clearfix(フロート要素を含む親要素に適用させる)
----------------------------------------------------------------*/

#sample:after{
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	overflow:hidden;
}

#sample{
	zoom:1;
	overflow:hidden;
}


clearfixにoverflow:hidden;を指定しているのは、Dreamweaver上で見るときにこの指定がないとレイアウトが崩れて表示されてしまうためです。
clearfixも、タグを指定する箇所が2つしかないので、スムーズに作業できると思います。

いま紹介していて思ったのですが、bodyなどにline-height:170%などを指定して行間空けると、たまーにFirefoxにおいて画像要素の上下に余白ができることがあるので、img要素にline-height:0;の指定を追加してもいいかも。。。

上記のファイルはこちらからダウンロードできます。ご自由に使用・改造・配布して頂いて結構です。

シンプルなclearfixと recet.cssをまとめたファイル

iPhoneプログラム基本からのおさらい その1「Hello! World!」

iPhoneアプリとiPadアプリを10本リリースした後でなんですが、未だにあまりiPhoneプログラミングを理解したとはいいがたい状態の私です。

これではイカン!と思ったので、これから基本的なプログラムをちょいちょい作ることで、
基本的なことからおさらいをしてみようと思います。


その第1弾としては、やはり「Hello! World!」以外にはないでしょう。

ということで作ってみました。

Hello_WorldAppDelegate.h

/*
	アプリケーション起動時と終了時に実行されるクラスだよ
*/

// ユーザーインターフェースのフレームワークを読み込み
#import <UIKit/UIKit.h>

// 他の場所にあるクラスを使用するため、クラスとして宣言
@class Hello_WorldViewController;

// Hello_WorldAppDelegateクラスの宣言
@interface Hello_WorldAppDelegate : NSObject <UIApplicationDelegate> {
	
	/*
		<UIApplicationDelegate>はプロコトルといて読みこんでいる。
		プロコトルとは、メソッドの宣言だけの継承のこと。
		つまり、実装は自分でする必要がある。
	*/
	
	// インスタンス変数宣言
	// インスタンス変数の型がクラスオブジェクト型(紫色)の場合、
	// 宣言で変数名のアタマに*をつける。
    UIWindow *window;
    Hello_WorldViewController *viewController;
	int pokemon;
}

// アクセッサー
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet Hello_WorldViewController *viewController;

@end

Hello_WorldAppDelegate.m
// 自分のヘッダーファイルを読み込み
// また、ヘッダーで宣言したクラスのヘッダーファイルも読み込み
#import "Hello_WorldAppDelegate.h"
#import "Hello_WorldViewController.h"

@implementation Hello_WorldAppDelegate

// アクセッサー
@synthesize window;
@synthesize viewController;


#pragma mark -
#pragma mark Application lifecycle

// アプリケーションが起動したら実行
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    
    
    // Override point for customization after application launch.

    // Add the view controller's view to the window and display.
	// ヘッダーで指定したHello_WorldViewController型のインスタンス変数をサブビューとして指定
    [self.window addSubview:viewController.view];
	
	// サブビューを可視化する
    [self.window makeKeyAndVisible];

    return YES;
}

// アプリケーションがアクティブでなくなる直前に実行 1
- (void)applicationWillResignActive:(UIApplication *)application {
}

// アプリケーションがアクティブでなくなる直前に実行 2
- (void)applicationDidEnterBackground:(UIApplication *)application {
}

// アプリケーションが復帰した直後 1
- (void)applicationWillEnterForeground:(UIApplication *)application {
}

// アプリケーションが復帰した直後 2
- (void)applicationDidBecomeActive:(UIApplication *)application {
}

// なんじゃこりゃ
- (void)applicationWillTerminate:(UIApplication *)application {
}


#pragma mark -
#pragma mark Memory management

- (void)applicationDidReceiveMemoryWarning:(UIApplication *)application {
}

// メモリ解放
- (void)dealloc {
    [viewController release];
    [window release];
    [super dealloc];
}

@end

Hello_WorldViewController.h
// メインのビュークラス

// ユーザーインターフェースのフレームワークを読み込み
#import <UIKit/UIKit.h>

// UIViewControllerクラスを継承したビュークラス
@interface Hello_WorldViewController : UIViewController {
	
	// アウトレットとして使用するインスタンス変数
	IBOutlet UILabel *hello;
}

// プロパティ
@property (nonatomic,retain) IBOutlet UILabel *hello;

// アクション
- (IBAction) onHello;
- (IBAction) offHello;
- (IBAction) iyan;

@end

Hello_WorldViewController.m
#import "Hello_WorldViewController.h"

@implementation Hello_WorldViewController;

@synthesize hello;

- (void) onHello {
	self.hello.text = @"Hello! World!";
}

- (void) offHello {
	self.hello.text = @"";
}

- (void) iyan {
	self.hello.text = @"いやんばかん";
}


/*

// ビュー読み込み時に実行
// nibを使わないときはこちらを使用
- (void)loadView {
}
*/

/*
// ビュー読み込み時に実行
// nibを使うときはこちらを使用
- (void)viewDidLoad {
    [super viewDidLoad];
}
*/


/*
//横向きアプリや、傾きを固定したりするときに
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
*/

//メモリーがなんかえらいことになったら実行
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
}

// ビュー消去時に実行
- (void)viewDidUnload {
}

// メモリ解放
- (void)dealloc {
    [super dealloc];
}

@end

「動物オーケストラ for iPad」 サポートページ



うたに合わせて動物たちをタッチして遊ぶ知育アプリです。動物や森の植物などいろんなものをタッチすると、可愛い音と動きで子どもを楽しませます。
楽しみながらお子様の感性を養えますので、一緒に歌って遊んでください♪

**** 特徴 ****

・ライオン、ハチ、サル、アリ、カバ、ヒヨコや森の植物など、17つの楽器(音)が用意されています。タッチするとそれぞれがおもしろい動きをします。
・童謡の歌詞を表示できます。じゃまなときは非表示にもできます。
・動物たちがユラユラとリズムに乗ってゆれているので癒されます。

**** 童謡の種類 ****

♪どんぐりころころ
♪ぶんぶんぶん
♪幸せなら手をたたこう
♪アルプスいちまんじゃく
♪せんろはつづくよどこまでも
♪キラキラぼし

どんどん追加していきますので乞うご期待☆




アプリの基本情報

アプリ名:リズムで遊ぼう!動物オーケストラ
料金:無料
ダウンロードURL:http://itunes.apple.com/jp/app/id823972206?mt=8


アイコン

リズムで遊ぼう!動物オーケストラ



リズムで遊ぼう!動物オーケストラで使用している効果音、曲

下記の素材サイト様の音声を使用させていただきました。
童謡・唱歌の世界
音楽素材/魔王魂
その他昔購入した素材CDより。