[à ] HTML5ã¨CSS3ãIE対å¿ãããã«ã¯ãã®2ã¤ã§ããï¼ããã°ã対å¿ãããæã«ä½¿ã£ãæ¹æ³ãæ¸ãããï¼
ããã«ã¡ã¯ãä¸æä¸ä¼ã®ã¢ã«ã¡ï¼@mk_mizuhoï¼ã§ã❦ ã©ããç«ã¡ä¸ãããªãHTML5ã¨CSS3ã®åå¼·ãå ¼ãã¦ã¨ããæããæã£ã¦å§ããããã°ãIEã§ã¯HTML5ã¨CSS3ã¯ã¾ã 対å¿ãã¦ããªãã®ã§å°ãæãå ããªãã¨ç¶ºéºã«è¡¨ç¤ºãããªãã®ãç¾ç¶ãå´©ãã¦ããã ããã¨ã¯æããªãããæ¾ç½®ãã¦ã¾ãããæè¿IEã§èªãã§ãã ããæ¹ãå¢ãã¦ããã®ã§IEã®HTML5ã¨CSS3対å¿ããããªãã¾ããï¼
IEã«HTML5ã®ã¿ã°ãèªèãããæ¹æ³
HTML5ã§ã¯headerã¿ã°ãfooterã¿ã°ãnavã¿ã°ãªã©æ°ããã¿ã°ãå¢ãã¾ãããããããããã®ã¿ã°ãIEã¯èªèãã¦ããã¾ãããããã¨ã©ããªããã¨ããã¨â¦ãããªãã¾ãã
ãã¿ã°ã®èªèãããªã = ã¹ã¿ã¤ã«ã·ã¼ããèªèããªããã¨ããç¾è±¡ãèµ·ããã¾ããå®å ¨ã«è¡¨ç¤ºãå´©ãã¾ãã
ãã®ç¶æ ã§ç§ã¯ä»ã¾ã§ããã°ãæ¾ç½®ãããã°è¨ªåè ãªãã¦ãããªã«ããªããããããã¨æã£ã¦ããã®ãçç±ã§ããããã¾ãããããããããã¨ã«è¨ªåè ãå°ããã¤å¢ãã¦ããã®ã§IE対çã決è¡(´âï½â©)
ç§ã使ã£ãã®ã¯ãhtml5shivãã¨ããJavaScriptã
http://code.google.com/p/html5shiv
ç¹ã«ä½ãããã¦ã³ãã¼ãããããã§ã¯ãªã以ä¸ã®ã³ã¼ããheadå ã«æ¸ããç´æ¥èªã¿ã«è¡ããã¾ãã
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>IEã«å¯¾å¿ããããï¼</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
ããã ãã§HTML5ã®å¯¾å¿ã¯ããã¾ãã
表示ã¯ãããªæãï¼IE8ã®æ¤è¨¼ãããã¦ã¾ããï¼
ä¸è¦è¯ãããã«è¦ãã¾ãããããè¦ãã¨è§ä¸¸ãå¹ãã¦ãªãâ¦ã
HTML5ã®ã¿ã°ãèªã¿è¾¼ã¾ããã®ã§ã¨ãããããã¬ã¼ã ã¯èªèãã¾ãããç¶ãã¦ã¹ã¿ã¤ã«ã·ã¼ãã
IEã§CSS3ãèªèãããæ¹æ³
æçµçã«ã¯ç¡äºã«è¡¨ç¤ºå®äºï¼
IE対å¿åã¨æ¯è¼ããã¨æããã«éãã¾ããã
ãã¦ãã©ã対å¿ããããã¨è¨ãã¨ãããå°ãåä»ã ã£ãããIE CSS3ãã¨æ¤ç´¢ããã ãã§ãæ¹æ³ãããããã
ç§ãé¸ãã ã®ã¯ãCSS3ãPIEãã¨ãããã®ã
ãCSS3ãPIEãã¨ã¯CSS3ã«å¯¾å¿ãã¦ããªãIE6/IE7/IE8ã«å¯¾ãã¦ãããã¤ãã®CSS3ããããã£ãã¬ã³ããªã³ã°ããæ©è½ãæä¾ããããã°ã©ã ãApache License v2ããã³GPL v2ã®ãã¥ã¢ã«ã©ã¤ã»ã³ã¹ã®ãã¨ãªã¼ãã³ã½ã¼ã¹ã§å ¬éããã¦ããã
ã¤ãæè¿ããCSS3 PIEãåã®ã¡ã¸ã£ã¼ãã¼ã¸ã§ã³ã¨ãªããCSS3 PIE 1.0.0ããå ¬éãããç¾æ®µéã§ã¯ä¸çªæ°ããããªãã®ã ã£ãã®ã§ä½¿ç¨ã
IE6ï½IE8ã§CSS3ã使ãããCSS3 PIE 1.0.0ãç»å ´ | ã¨ã³ã¿ã¼ãã©ã¤ãº | ãã¤ãããã¥ã¼ã¹
ãCSS3 PIEãå°å
¥ã§ä½¿ç¨åºæ¥ãããã«ãªã£ãCSS3ã®ããããã£ã¯ä»¥ä¸ã
IE9ã§ã¯ä»¥ä¸ã使ç¨å¯è½ã
CSS3 PIEã®ãµã¤ãã¸è¡ããå³ã®æ¹ã«ãããã¦ã³ãã¼ããã¿ã³ã§ãã¦ã³ãã¼ãã
ãã¦ã³ãã¼ãããããã¼ã¿ãä»»æã®ãã£ã¬ã¯ããªã«ä¿åã
ããã¦ããã¨ã¯CSSã®å¯¾å¿ããããåã»ã¬ã¯ã¿ã®ããããã£ã«ãbehavior: url(/ä»»æã®ãã¹/PIE.htc); ãã¨ä¸è¡è¿½å ããã ãã
å ·ä½çãªæ¸ãæ¹
nav { border-radius:5px ; /* CSS */ -webkit-border-radius: 5px; /* Safari,Google Chrome */ -moz-border-radius: 5px; /* Firefox */ behavior: url(/js/PIE.htc); }
â» PIE.htcã®ãã¹ãhttp://ãããå§ã¾ã絶対ãã¹ã§æå®ãããèªèããªãã£ããç§ã ãï¼
ããã«ä¸æ©è¸ã¿è¾¼ãã§â¦ç§ã¯WordPressã®ããã°ã«å ¥ãè¾¼ã¿ããã£ãã®ã§ããæ¸ãã¾ããã
WordPressã«PIE.htcãè¨ç½®
nav { border-radius:5px ; /* CSS */ -webkit-border-radius: 5px; /* Safari,Google Chrome */ -moz-border-radius: 5px; /* Firefox */ behavior: url(/wp-content/themes/ä»»æ/PIE.htc); }
ä¸è¡è¿½å ããã ãã§åé¡ãªã表示åºæ¥ãã
ããããã®ã¯ãã¡ã¿ãã
li.box_widget{ border-top-left-radius: 8px; border-top-right-radius: 8px; behavior: url(/ä»»æ/PIE.htc); }
åä½ã§ããã¦ãããã®ã«å¯¾ãã¦ã¯å¹ããªãã£ããã¨ãããã¨ã§ç§ã®ããã°ã¯IEã§è¦ãã¨ãµã¤ãã¨ãªã¢ãè§ä¸¸ã«ãªã£ã¦ãªãã§ããã¡ãªã¿ã«border-radiusãªãå¹ãã¾ãããã¤ã¡ã¼ã¸ã¨éãå½¢ã«ãªã£ãã®ã§å´ä¸ã
ã¨ã¯ãããå人çã«ã¯ãããªã«ç°¡åã«IEã§ãborder-radiusãbox-shadowã使ããããã«ãªã£ãã®ã§è¯ãã¨ãã¾ãããã¨è©¦ãã¦ãªãã®ã¯ã°ã©ãã¼ã·ã§ã³ãããã°ã§ã°ã©ãããã¦ãã¨ãããªããããªâ¦ããã¯å¾ã»ã©ã
æå¾ã«
ãhtml5shivãããCSS3 PIEãã¾ã å°å ¥ããã°ã£ããã§ãããIEã§ããã£ããã¨è¡¨ç¤ºãããããã«ãªãã¾ãããIE対å¿ããã¦ããªãHTML5ã¨CSS3ã§ä½ã£ããµã¤ãã¯é ·ãã£ããå´©ãããã¦ã¦ãã¼ã¸ã¨ãã¦æãç«ã£ã¦ãªãã£ããä»ã¾ã§æ¾ç½®ãã¦ãã®ãæ¥ããããã§ã(ï¾Ð`)ãã®å´©ãå»ã£ããã¶ã¤ã³ã¯å¿ãã¦ãã ããã
ã²ã¨ã¾ãHTML5ã¨CSS3ã使ã£ãç°¡åãªãµã¤ãã ã£ãããã®2ã¤ãå ¥ãã¨ãã°ååãªããããªãããªã¨ã
canvasã¨ãè¨ãåºãããç¡çãããããªãã§ããâ¦ãä»ã¯ç§ã¯ããã¾ã§ããªãã®ã§ããã¨ã¯ãCSS3 PIEãã§ã©ãã¾ã§åºæ¥ãããã¡ãã£ã¨æ¤è¨¼ãã¦ã¿ããã¨æãã¾ãã
ãã®ä»ãå¥ã®è¯ãæ¹æ³ãããã£ï¼ããã¯éããã£ã¦ãã¨ãããã¾ããã@mk_mizuhoã¾ã§ãããããé¡ããã¾ããã§ã¯ã§ã¯(^^)
â åãã«ãã´ãªã«ã¤ãã¦ãã£ã¨èªã
ããã°éå¶è ããã©ãã¼ããï¼
@mk_mizuhoããããã©ãã¼ï¼¼ ãã®æ å ±ãå¨ãã®äººã«ãæãã ï¼

[à ] HTML5ã¨CSS3ãIE対å¿ãããã«ã¯ãã®2ã¤ã§ããï¼ããã°ã対å¿ãããæã«ä½¿ã£ãæ¹æ³ãæ¸ãããï¼
ãã®è¨äºãæ°ã«å
¥ã£ãæ¹ã¯ãããï¼ã§
æ´æ°æ
å ±ãåãåãï¼
ä»èªãã è¨äºã¨ä¼¼ããããªè¨äºä¸è¦§
[à ] HTML5ã§åç»ãé³å£°ã楽ãããµã¤ããçºè¦ãã¾ããã
[à ] boxããURLãé£ã³åºãããªãã¹ã¿ã¤ã«ã·ã¼ãã®è¨è¿°æ¹æ³
[à ] 誰ã§ãç°¡åï¼ï¼AppHtmlã®ãiTunesã§è¦ããã移åãããæ¹æ³ï¼
[à ] AppHtmlã®ã¢ããªãã¦ã³ãã¼ããRetina対å¿ç¨ã«ä½ãç´ããï¼