- ¥Ð¥Ã¥¯¥¢¥Ã¥×°ìÍ÷
- º¹Ê¬ ¤òɽ¼¨
- ¸½ºß¤È¤Îº¹Ê¬ ¤òɽ¼¨
- ¥½¡¼¥¹ ¤òɽ¼¨
- Web¥Ç¥¶¥¤¥Ê¡¼¤Ë¤â¤ï¤«¤ëFlex²èÌ̥ǥ¶¥¤¥ó¡Ê2¡Ë ¤Ø¹Ô¤¯¡£
- 1 (2008-10-02 (ÌÚ) 12:31:30)
- 2 (2008-10-02 (ÌÚ) 12:53:09)
- 3 (2008-10-09 (ÌÚ) 12:06:45)
- 4 (2008-10-09 (ÌÚ) 13:49:45)
Web¥Ç¥¶¥¤¥Ê¡¼¤Ë¤â¤ï¤«¤ëFlex²èÌ̥ǥ¶¥¤¥ó¡Ê2¡Ë
¡Ê¤³¤Îµ»ö¤ÏÅÓÃæ¤Ç¤¹¡Ë
Web¥Ç¥¶¥¤¥Ê¡¼¤Ë¤â¤ï¤«¤ëFlex²èÌ̥ǥ¶¥¤¥ó¡Ê1¡Ë¤Î¤Ä¤Å¤¡£
Flex¤Ç¤Î¥Ç¥¶¥¤¥ó¤ÎÄ´À°¤Ë¤Ä¤¤¤Æ½ñ¤¤Þ¤¹¡£
¥¹¥¿¥¤¥ë¥·¡¼¥È †
Flex¤Ç¤Ï¥¹¥¿¥¤¥ë¥·¡¼¥È¤¬»È¤¨¤Þ¤¹¡£
½ñ¼°¤ÏHTML¤Ç¤Ä¤«¤¦¤â¤Î¤È¤è¤¯»÷¤Æ¤¤¤Þ¤¹¡£
1¡Ë¥¤¥ó¥é¥¤¥ó¤Ç¤â½ñ¤±¤ë¤·¡¢
<mx:Button color="#ff0000">
2¡ËmxmlÆâ¤Ë¤â½ñ¤±¤ë¤·¡¢
<mx:Style> Button{ color: #ff0000; } </mx:Style>
3¡Ë¥¹¥¿¥¤¥ë¥·¡¼¥È¤Ë¤â½ñ¤±¤ë¡£
<mx:Style source="stylesheets/hoge.css" />
- hoge.css¤ÎÆâÍÆ
Button{ color: #ff0000; }
ɽ¼¨·ë²Ì¤Ï¤¤¤º¤ì¤Ç¤âƱ¤¸¡£
¤Ç¤â¹½Â¤¤Èɽ¼¨¤Ïʬ¤±¤¿¤Û¤¦¤¬¤è¤¤¤Î¤Ç¡¢¤ä¤Ï¤ê3¡Ë¤Î¤è¤¦¤Ë¥¹¥¿¥¤¥ë¥·¡¼¥È¤Ëµ½Ò¤·¤¿¤Û¤¦¤¬¤è¤¤¤Ç¤¹¤Í¡£
¤Á¤Ê¤ß¤Ë¡¢<mx:Style>¤Ï<mx:Application>ľ²¼¤Ë½ñ¤«¤Ê¤¤¤È¥¨¥é¡¼¤Ë¤Ê¤ê¤Þ¤¹¡£
¾åµ¤Î¤è¤¦¤Ë¥°¥í¡¼¥Ð¥ë¤Ë»ØÄꤹ¤ë°Ê³°¤Ë¡¢¡ÖstyleName¡×¤¬»È¤¨¤Þ¤¹¡£
class¤ß¤¿¤¤¤Ê¤â¤ó¤Ç¤¹¤Í¡£
<mx:Button styleName="hogeButton" />
- css¤Î»ØÄê
.hogeButton{ color: #ff0000; }
ÊØÍø¥Ä¡¼¥ë †
ÊØÍø¤Ê¥Ä¡¼¥ë¤¢¤ì¤³¤ì¡£
- StyleExplorer?
http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html
¥³¥ó¥Ý¡¼¥Í¥ó¥È¤´¤È¤Ë¥¹¥¿¥¤¥ëÀßÄê¤ò¤½¤Î¾ì¤Ç»î¤»¤ë¡£
¡ÊÁ´Éô¤Î¥¹¥¿¥¤¥ë¤¬ÍÑ°Õ¤µ¤ì¤Æ¤¤¤ë¤ï¤±¤Ç¤Ï¤Ê¤¤¤±¤ì¤É¡Ë
¤Û¤«¤Ë¤É¤ó¤Ê¥¹¥¿¥¤¥ë¤¬»ØÄê¤Ç¤¤ë¤«¤Ï¡¢¤³¤ì¤ò¸«¤¿¤Û¤¦¤¬Áᤤ¤Ã¤¹¡£
- flex Spy
ÍפÏFirebug¤Ç¤¹¡£¥Ü¥¿¥ó¤òËä¤á¹þ¤ó¤Ç»ÈÍѤ¹¤ë¤³¤È¤¬¤Ç¤¤ë¡£¤³¤ì¤ÏÊØÍø¡£
¸Ä¿ÍŪ¤Ë¤Ï¡¢Flex¤À¤È¥Ü¥¿¥ó¤È¤«¤Ë¥°¥é¥Ç¡¼¥·¥ç¥ó¤ä¥¢¥ë¥Õ¥¡ÃÍ¡¢³Ñ´Ý¤ÎÄøÅÙ¤òCSS¤Ç»ØÄê¤Ç¤¤ë¤Î¤ÏÁÇŨ¤À¤È»×¤¦¡£¥¢¥¤¥³¥ó+ÇطʤâÀßÄê¤Ç¤¤ë¤·¡£
¥ì¥¤¥¢¥¦¥È †
¥ì¥¤¥¢¥¦¥È¤Ë¤è¤¯»È¤¦¤Î¤Ï¡¢Box¡¢HBox¡¢VBox¡£div¤ß¤¿¤¤¤Ê¤â¤Î¤Ç¤¹¡£
Flex¤Î¾ì¹ç¡¢¤Ö¤Ã¤Á¤ã¤±¤Æ¤¤¤¦¤È¡¢Íפϥơ¼¥Ö¥ë¥ì¥¤¥¢¥¦¥È¤Ç¤¹¡£
float¤È¤«absolute¤È¤«¤Î³µÇ°¤Ï¤¢¤Þ¤ê¤Ê¤¤¡£
Box¤Ï¡¢»Ò¥ª¥Ö¥¸¥§¥¯¥È¤Îʤָþ¤¤ò·è¤á¤é¤ì¤Þ¤¹¡£VBox¤Ï½Ä¡¢HBox¤Ï²£¡£
<mx:VBox width="100%" height="100%" > <mx:Button label="Boo" width="100" height="18" /> <mx:Button label="Hoo" width="100" height="18" /> <mx:Button label="Wooooo" width="100" height="18" /> </mx:VBox>
¢¬»Ò¤ò½Ä¤Ëʤ٤롣
<mx:HBox width="100%" height="100%" > <mx:Button label="Boo" width="100" height="18" /> <mx:Button label="Hoo" width="100" height="18" /> <mx:Button label="Wooooo" width="100" height="18" /> </mx:HBox>
¢¬»Ò¤ò²£¤Ëʤ٤롣
table¤Ë¤è¤ëHTML¥½¡¼¥¹¤è¤ê¥·¥ó¥×¥ë¤Ê¥½¡¼¥¹¤Ë¤Ê¤ê¤Þ¤¹¡£
¤Þ¤¿¡¢Box¤Ï¥ª¥Ö¥¸¥§¥¯¥È¤È¥ª¥Ö¥¸¥§¥¯¥È¤Î´Ö³Ö¤òÀßÄꤹ¤ë¤³¤È¤¬²Äǽ¤Ç¤¹¡£
¤³¤ì¤Ë¤è¤Ã¤Æ¶ÑÅùÇÛÃÖ¤ÏHTML¤è¤ê¤¤ì¤¤¤Ë¤Ç¤¤ë¡£
CSSer¤¬¸ÍÏǤ¦¤È¤³¤í¡£XHTML+CSS¤È¤Î°ã¤¤ †
CSS¤ò½¤Àµ¤·¤Æ¥Ç¥¶¥¤¥ó¤òÊѤ¨¤ë¡¢¤È¤¤¤¦ÅÀ¤Ç¶¦Ä̤ʤΤǤ¹¤¬¡¢
¤ä¤Ï¤êÆȼ«¤ÎÊʤߤ¿¤¤¤Î¤¬¤¢¤ê¤Þ¤¹¡£
¡Ê°Ê²¼¡¢flex3¤Î¾ì¹ç¡Ë
- margin¤ÏCSS¤ÇÀßÄê¤Ç¤¤Ê¤¤¡£¥¨¡¼
- padding¤ÏCSS¤ÇÀßÄê¤Ç¤¤ë¡£
- width,height¤Ïmxml¤Î¤Û¤¦¤Ëµ½Ò¤·¤Ê¤¤¤È¤¤¤±¤Ê¤¤
- ·Ñ¾µ¤¬¸ú¤«¤Ê¤¤¡£
.content .main Button
¤ß¤¿¤¤¤Ê¤³¤È¤¬¤Ç¤¤Ê¤¤¤Î¤Ç¡¢¥°¥í¡¼¥Ð¥ë¤ËÀßÄꤹ¤ë¤«¡¢
¸ÄÊ̤ËstyleName¤ò¤Ä¤±¤Æ¤¢¤²¤Ê¤¤¤È¤¤¤±¤Ê¤¤¤Î¤¬»õ¤¬¤æ¤¤¡£
- ÇطʲèÁü¤¬°·¤¤¤Å¤é¤¤
- ÇطʲèÁü¤Ï·«¤êÊÖ¤µ¤ì¤ë¡£¡Êno-repeat¤¬¤Ê¤¤¡Ë
- ÇطʲèÁü¤ÏÃæ±ûÇÛÃ֤ˤʤ롣¡Êposition¤¬¤Ê¤¤¡Ë
ÇطʲèÁü¤Î¿ÍѤǥǥ¶¥¤¥ó¤ò¤¹¤ë¤³¤È¤¬Â¿¤¤¤È»×¤ï¤ì¤ë¤Î¤Ç¡¢¤³¤ì¤Ï¤Á¤ç¤Ã¤È¤¤Ä¤¤À©¸Â¤À¤È¤ª¤â¤¦¡£
µÕ¤Ë¡¢
- ÇطʲèÁü¤Ï100%ɽ¼¨¤â¤Ç¤¤ë¡Ê¥ª¥Ö¥¸¥§¥¯¥È¤Ë¤¢¤ï¤»¤Æ¿½Ì¤¹¤ë¡Ë
- 9slice¤¬ÊØÍø¡£
- ¥Ü¥¿¥óÎà¤Î¥°¥é¥Ç¡¼¥·¥ç¥ó¡¢³Ñ´Ý¡¢Æ©ÌÀÅÙ¡¢¥¢¥¤¥³¥ó¤òCSS¤ÇÀßÄê¤Ç¤¤ë¡£
¤Ï¤è¤¤ÅÀ¤À¤È»×¤¦¡£
°ìÈÖº¤¤Ã¤¿¤³¤È¡£ †
¡Ê¤³¤Îµ»ö¤ÏÅÓÃæ¤Ç¤¹¡Ë