[CSS]ãƒã‚§ãƒƒã‚¯ã—ã¦ãŠããŸã„ã€æœ€è¿‘ã®ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã®ã¾ã¨ã‚ -2014年秋
次ã®ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã§ã¡ã‚‡ã£ã¨ä½¿ã£ã¦ã¿ãŸããªã‚‹å®Ÿç”¨çš„ãªã‚‚ã®ã‹ã‚‰å®Ÿé¨“çš„ãªã‚‚ã®ã¾ã§ã€CodePenã§å¤šãã®ãƒ¦ãƒ¼ã‚¶ãƒ¼ã‚’ã†ãªã‚‰ã›ãŸã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã‚’紹介ã—ã¾ã™ã€‚ ã¾ãšã¯ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ãŒæ¥½ã—ã„デモã‹ã‚‰ã€‚ ※上ã‹ã‚‰10個ãらã„ã¯ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³gifã§ã™ã€‚
![[CSS]ãƒã‚§ãƒƒã‚¯ã—ã¦ãŠããŸã„ã€æœ€è¿‘ã®ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã®ã¾ã¨ã‚ -2014年秋](https://cdn-ak-scissors.b.st-hatena.com/image/square/d68594e0182d8d63cfb96eda05e4f18be75583c9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014091401-04.gif)
Grid 日本語版
ãªãœã€ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–ã«åŠ´åŠ›ã‚’費やã™ã®ã‹? ç§é”ã¯å…¨ã¦ã®ãƒ‡ãƒã‚¤ã‚¹ã«ãŠã„ã¦ã€ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã®ã‚µã‚¤ã‚ºã‚„縦横ã®æ–¹å‘ã¨ã„ã£ãŸãƒ¦ãƒ¼ã‚¶ãƒ¼ã®ç’°å¢ƒã«å·¦å³ã•ã‚Œãšã«ã€ã‚¦ã‚§ãƒ–サイトãŒåˆ©ç”¨ã—ã‚„ã™ããªã‚‹ã“ã¨ã‚’目指ã—ã¦ã„ã¾ã™ã€‚ æ–片化ã•ã‚ŒãŸä¸–ç•Œ 2013å¹´ç¾åœ¨ã€æ•°åƒç¨®é¡žã®ãƒ‡ãƒã‚¤ã‚¹ã¨ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã‚µã‚¤ã‚ºãŒã‚¤ãƒ³ã‚¿ãƒ¼ãƒãƒƒãƒˆã«ã‚¢ã‚¯ã‚»ã‚¹ã—ã¦ã„ã¾ã™ã€‚ãれら全ã¦ã«å¯¾ã—ã¦ã€ãã‚Œãžã‚Œãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã‚’è¨è¨ˆã™ã‚‹ã®ã¯ã‚‚ã¯ã‚„ä¸å¯èƒ½ã§ã™ã€‚ãã‚“ãªã“ã¨ã‚ˆã‚Šã€ãƒ‡ã‚¶ã‚¤ãƒ³ã«ã‚ˆã‚Šæµå‹•çš„ãªã‚¢ãƒ—ãƒãƒ¼ãƒã‚’å–り入れるã¹ãã§ã—ょã†ã€‚ モãƒã‚¤ãƒ«ãƒ•ã‚¡ãƒ¼ã‚¹ãƒˆ 最近ã«ãªã£ã¦ã€Œãƒ¢ãƒã‚¤ãƒ«ãƒ•ã‚¡ãƒ¼ã‚¹ãƒˆã€ã¨ã„ã†è¨€è‘‰ãŒãã“らã˜ã‚…ã†ã§èžã‹ã‚Œã‚‹ã‚ˆã†ã«ãªã‚Šã¾ã—ãŸã€‚ãã®è¨€è‘‰ã¯ã€ãƒ¢ãƒã‚¤ãƒ«å‘ã‘ã®ã‚¹ã‚¿ã‚¤ãƒ«ã‹ã‚‰å§‹ã‚ã¦ã€å¿…è¦ã¨ã•ã‚Œã‚‹æ™‚ã«å¤§ããªã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã«æœ€é©åŒ–ã—ãŸã‚¹ã‚¿ã‚¤ãƒ«ã‚’é©ç”¨ã™ã‚‹ã¨ã„ã†ã“ã¨ã‚’æ„味ã—ã¾ã™ã€‚言ã„æ›ãˆã‚‹ã¨ã€ä½œæˆã—ãŸãƒ¢ãƒã‚¤ãƒ«å‘ã‘ã®ã‚¹ã‚¿ã‚¤ãƒ«ãŒãƒ‡ãƒ•ã‚©ãƒ«ãƒˆã«ãªã‚Šã€ãれ以é™ã«æ›¸ãæ›ãˆã‚‹å¿…è¦ã¯ãªã„ã¨ã„ã†ã“ã¨ã§ã™ã€‚ãã‚Œã¯
知ã£ã¦ãŠãã¨é€Ÿã„ï¼CSS3ã«é–¢ã™ã‚‹ã€Œä¾¿åˆ©ã€ãªã¾ã¨ã‚
作æˆï¼š2013/11/25 更新：2014/10/24 Webデザイン > 先週WordPressã®è‡ªä½œãƒ†ãƒ¼ãƒžã‚’作ã£ã¦ã„ãŸã¨ãã«ã€ã‚‚ã£ã¨CSSã§åŠ¹çŽ‡åŒ–ã§ããªã„ã‚‚ã®ã‹ã¨ã€è‰²ã€…調ã¹ã¦ãŸã‚‰çµæ§‹ä½¿ã£ã¦ãªã„ã‚‚ã®ãŒã‚ã‚Šã¾ã—ãŸã€‚出æ¥ã‚‹ã ã‘çŸç¸®ã§ãã‚‹ã¨ã“ã‚ã¯çŸç¸®ã—ãŸã„ã®ã§ã€ä»Šå›žã¯CSSã®ä¸ã§ã‚‚サイトを作る上ã§ã€ŒçŸ¥ã£ã¦ãŠãã¨åŠ¹çŽ‡çš„ã€ãªã‚‚ã®ã‚’ã¾ã¨ã‚ã¾ã—ãŸã€‚ ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢é€Ÿå ±ã¯ Twitter ã®@commteã§é…ä¿¡ã—ã¦ã„ã¾ã™ã€‚ ã‚‚ã㘠知ã£ã¦ãŠããŸã„プãƒãƒ‘ティ １．カウント数を出力 ２．è¦ç´ ã®å‰å¾Œã«æ–‡å—ã‚„ç”»åƒ ï¼“ï¼Žã‚«ãƒ¼ãƒ‹ãƒ³ã‚° ４．画åƒãƒ•ã‚£ãƒ«ã‚¿ ５．å‡ç‰å¹…ã«ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆ ６．アニメーション一覧 ã‚¹ãƒžãƒ›ã‚µã‚¤ãƒˆå¯¾ç– ï¼—ï¼Žviewport ８．改行削除 ９．Webクリップアイコン １ï¼ï¼ŽUIリセットï¼å…¥åŠ›ãƒ•ã‚£ãƒ¼ãƒ«ãƒ‰æ‹¡å¼µ １１．横並㳠１２．ボタンサンプル １３．画åƒã‚’使ã‚ãªã„çŸ¢å° ï¼‘ï¼”ï¼Žè‡ªå‹•æ”¹è¡Œ １５．ã¯ã¿å‡ºã—ã‚’éš ã™ ï¼‘
CSS3ã§å®Ÿç¾ã™ã‚‹ã‚¢ãƒãƒ¼ã‚¢ã‚¤ã‚³ãƒ³
CSS3ã§å®Ÿç¾ã™ã‚‹ã‚¢ãƒãƒ¼ã‚¢ã‚¤ã‚³ãƒ³ スマートフォンãªã©ã§ãƒªãƒ³ã‚¯é ˜åŸŸã‚’示ã™ã“ã¨ãªã©ã§ä½¿ã‚れるã“ã¨ãŒå¤šã„ã‚¢ãƒãƒ¼ã‚¢ã‚¤ã‚³ãƒ³ã€‚ã“れをCSS3を使ã£ã¦è¡¨ç¾ã™ã‚‹æ–¹æ³•ã‚’紹介ã—ã¾ã™ã€‚ ã¡ãªã¿ã«ã‚¢ãƒãƒ¼ã‚¢ã‚¤ã‚³ãƒ³ã¨ã¯ã“ã‚“ãªã‹ã‚“ã˜ã®ãƒªã‚¹ãƒˆã®å³ã«ã‚る矢å°ã€‚(ã‚¢ãƒãƒ¼ã‚¢ã‚¤ã‚³ãƒ³ã®æ£å¼å称ã¨ã‹ã‚ã‚‹ã®ã‹ã—ら) ã¾ãšã€HTMLã¯æ¬¡ã®ã‚ˆã†ã«ã—ã¾ã™ã€‚今回ã¯ä¾¿å®œçš„ã«ã‚¢ãƒãƒ¼ã‚¢ã‚¤ã‚³ãƒ³ã‚’付ã‘ã‚‹aè¦ç´ ã«class属性「arrowã€ã‚’ä»˜åŠ ã—ã¦ã„ã¾ã™ã€‚ <ul> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#">link</a></li> <ul> .arrowã«ã¯ä»¥ä¸‹ã®ã‚ˆã†ãªCSSを指定ã—ã¾ã™ã€‚ li a
ã‚‚ã†CSS3ã§æ‚©ã¾ãªã„ ãƒãƒ¼ãƒˆã‚·ãƒ¼ãƒˆ/リファレンス系サイトã¾ã¨ã‚
先日書ã„ãŸCSSå°ãƒã‚¿ã¾ã¨ã‚ã®ã‚ˆã†ã«CSS3も使ãˆã°ä½¿ã†ã»ã©å‘³ãŒå‡ºã¦ã€å¿œç”¨æ¬¡ç¬¬ã§è‰²ã‚“ãªã“ã¨ã§ãã¦æ¥½ã—ã„ã§ã™ã‚ˆã。ç§ã‚‚大好ãã§ã™ã€CSS3。 IEéžå¯¾å¿œäº‘々ã®ãŸã‚ãƒãƒƒã‚¯ãŒã©ãƒ¼ã“ーã¨ã‹ã‚ã‚“ã©ãã•ã„ã“ã¨ã¯ã‚ã‚Šã¾ã™ã‘ã©ã€‚ ã¨ã„ã†ã‚ã‘ã§ã“ã“らã§åˆå¿ƒè€…ã‹ã‚‰ãƒ‘ワーユーザーã¾ã§ãœã²ãŠã•ãˆã¦ãŠããŸã„ãƒãƒ¼ãƒˆã‚·ãƒ¼ãƒˆãƒšãƒ¼ã‚¸ã‚„リファレンスサイトをã¾ã¨ã‚ã¦ãŠãã¾ã™ã®ã§å‚考ã«ã©ã†ãžã€‚ CSS3ã®å›°ã£ãŸ/アレãŒçŸ¥ã‚ŠãŸã„ã€ã¯ã“ã“ã§èª¿ã¹ã‚ˆã† ç†è€…é¸ã§7ã¤ã»ã©ã€‚ä»–ã«ã‚‚ã„ã‚ã„ã‚ã‚ã‚‹ã‚“ã§ã™ãŒã€èªã¿ã‚„ã™ã„ã®ãƒ¡ã‚¤ãƒ³ã«æŒ™ã’ã¦ã¿ã¾ã—ãŸã€‚ 1.E BISUCOM TECH LAB : CSS3プãƒãƒ‘ティ＆ブラウザ対応一覧 æã‚ã—ãã¾ã¨ã¾ã‚ŠéŽãŽã¦ã„るページ。もã¨ã‚‚ã¨æ›¸ç±ã®å·»æœ«ä»˜éŒ²ã ã£ãŸã‚‚ã®ã‚’Webã§å…¬é–‹ã—ã¦ã„るらã—ã„ã§ã™ã€‚å„プãƒãƒ‘ティã®å¯¾å¿œãƒ–ラウザãŒä¸€ç›®ã§ã‚ã‹ã‚‹ã®ãŒã‚ã‚ŠãŒãŸã„。 ベンダープレフィックスã®è¦ãƒ»ä¸è¦ã¨ã‹ã¾ã§æ›¸ã„ã¦ã¾ã™ã€‚時々更新ã•ã‚Œ
ã™ã’ー便利ï¼ãƒ‰ãƒ¡ã‚¤ãƒ³åˆ¥ã«ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆï¼ˆCSS）を当ã¦ã‚‹æ–¹æ³•ã€‚
ドメイン別ã«ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã‚’当ã¦ã‚‹æ–¹æ³•ã€‚ iframe[src*="youtube.com"]{ width: 500px; height: auto; } iframe[src*="nicovideo.jp"]{ width: 320px; height: auto; } 例ãˆã°ã€YouTubeã®å¤–部プレイヤー（iframe）ã®æ¨ªå¹…ã¯500ã«ã—ãŸã„ã‘ã©ã€ãƒ‹ã‚³ãƒ‹ã‚³å‹•ç”»ã®å¤–部プレイヤーã¯320ã«ã—ãŸã„ã¨ãã¯ã€ä¸Šã®ã‚ˆã†ã«æ›¸ãã¨ä¸Šæ‰‹ã動作ã—ã¾ã™ã€‚ a[href*="wayohoo.com"]{ color: red; } a[href*="goryugo.com"]{ color: blue; } ã¡ãªã¿ã«ã€aタグをドメイン別ã«æŒ‡å®šã™ã‚‹å ´åˆã¯ã“ã®ã‚ˆã†ã«ãªã‚Šã¾ã™ã€‚(wayohoo.comã¯é’色ã€goryugo.comã¯èµ¤è‰²ã¨ã™ã‚‹å ´åˆ) ã‚¿ã‚°å[属性å*="URL"]{ /* CSSã®ä¸èº« */ }
ページã«ç¾Žã—ã„ã‚·ãƒ£ãƒ‰ã‚¦ã‚’åŠ ãˆã€å¥¥è¡Œãを与ãˆã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆ -Depth | コリス
ãƒ–ãƒ©ã‚¦ã‚¶ä¸Šæž ã®ã™ã下ã€ãƒšãƒ¼ã‚¸ã®ä¸Šéƒ¨ã«ã€ã„ã„æ„Ÿã˜ã®ã‚·ãƒ£ãƒ‰ã‚¦ã‚’åŠ ãˆã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã‚’紹介ã—ã¾ã™ã€‚ Chrome, Safari, Firefox, Operaã§ã”覧ãã ã•ã„ã€IEã¯9+ã§ã€‚ Depth 実装ã¯ç°¡å˜ã§ã€HTMLã¯ç‰¹ã«å¤‰æ›´ã™ã‚‹ã“ã¨ãªãã€ä¸‹è¨˜ã®ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã‚’åŠ ãˆã‚‹ã ã‘ã§ã™ã€‚ position: fixed;ãªã®ã§ã€ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã—ã¦ã‚‚シャドウãŒè¡¨ç¤ºã•ã‚Œã¦ã„ã¾ã™ã€‚ body:before { /* top shadow */ content: ""; position: fixed; top: -10px; left: -10px; width: 110%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -ms-box
DIV一個ã§æ´’è½ãŸãƒœãƒƒã‚¯ã‚¹ã‚’作ã£ã¦ã¿ã‚‹ï¼æœ€è¿‘知ã£ãŸCSSを使ã£ãŸãƒœãƒƒã‚¯ã‚¹è£…飾ã¨ã‹è‰²ã€…ï¼ | ãƒãƒ³ã‚¯ãƒ¼ãƒãƒ¼ã®ã†ã‡ã¶å±‹
CSS3ã‹ã‚‰DIV一個ã§å‡ºæ¥ã‚‹è¡¨ç¾ãªã‚“ã‹ã‚‚色々ã‚ã‚‹ã‚“ã§ã™ã。ã¡ã‚‡ã£ã¨å‰ã¾ã§è¶…é¢å€’ã ã£ãŸãƒœãƒƒã‚¯ã‚¹ã®ã‚ªã‚·ãƒ£ãƒ³ãƒ†ã‚£ãƒ¼ãªç·šã®è£…飾ã¨ã‹ã¼ã‹ã—ã¨ã‹ã‚°ãƒ©ãƒ‡ã«ãªã‚“やらã‹ã‚“やら。DIVボックス一ã¤ã¨ã£ã¦ã‚‚色々ãªè£…飾効果をもãŸã›ã‚‰ã‚Œã‚‹ãªãã¨æ€ã†ä»Šæ—¥ã“ã®é ƒã€‚ ãã‚Œã“ãã€ONE DIVã®ã‚ˆã†ãªä¸€ã¤ã®DIVã§è¡¨ç¾ã§ãるアイコンを作ã£ã¦ã‚‹ã‚µã‚¤ãƒˆã‚‚ã‚ã£ã¦ã€CSS3ã‚’çªãè©°ã‚ã‚‹ã¨è‰²ã€…知るã“ã¨ã‚‚出æ¥ã¦é¢ç™½ã„ãªãã¨æ€ã†ã‚ã‘ã§ã™ã€‚ ã£ã¦ã„ã†ã‚ã‘ã§ã€ONE DIV程å‡ã£ãŸã“ã¨ã¯ã§ãã¾ã›ã‚“ãŒã€ä»Šæ—¥ã¯ãã‚“ãªDIV一個ã§ä½¿ãˆãã†ãªãƒœãƒƒã‚¯ã‚¹ã®ä½œã‚Šæ–¹ã‚’ã„ãã¤ã‹ã”紹介ï¼æ“¬ä¼¼è¦ç´ 使ã£ã¦ã¡ã‚‡ã£ã¨ã¡ã‚‡ã‚ã¡ã‚‡ã‚ã—ãŸã‚‰ç¸«ã„付ã‘効果ã®ãƒœãƒƒã‚¯ã‚¹å‡ºæ¥ãŸã‚Šã¨ã€ä»¥å¤–ã¨ä½¿ãˆãã†ãªã‚‚ã®ã‚’é¸ã‚“ã ã¤ã‚‚ã‚Šãªã®ã§ã€ä¸€åº¦è¦‹ã¦ã¿ã¦ã‚‚らãˆã‚‹ã¨å¬‰ã—ã„ã§ã™ï¼ã¡ãªã¿ã«ã€IEãƒã‚§ãƒƒã‚¯ã¯9ã ã‘ã—ã¦ã¾ã™ã€‚8ã¨ã‹ã¯CSSPIE当ãŸã‚Šã§é ‘å¼µã£ã¦ãªã‚“ã¨ã‹ã™ã‚‹æ–¹å‘ã§â€¦ä½•ã‹å¤‰ãªã¨ã“ã‚ã£ãŸã‚‰ç›´ã—ã¾ã™ã®
擬似è¦ç´ を使ã£ãŸè¦‹å‡ºã—デザイン
ã“ã®ãƒ–ãƒã‚°ã®è¦‹å‡ºã—ã¯ã‚·ãƒ³ãƒ—ルãªã‚“ã§ã™ãŒã€CSSã®ã€Œ:beforeã€ã‚„「:afterã€ãªã©æ“¬ä¼¼è¦ç´ を使ãˆã°è‰²ã€…ã¨è£…飾ãŒã§ãã¾ã™ã®ã§ä»Šå›žã¯8ã¤ã®ã‚µãƒ³ãƒ—ルを紹介ã—ã¾ã™ã€‚ HTMLã¯ã™ã¹ã¦Hã‚¿ã‚°ã ã‘ã§ã™ã€‚特ã«æ„味ã¯ã‚ã‚Šã¾ã›ã‚“ãŒä»Šå›žã®ã‚µãƒ³ãƒ—ルã¯h4タグを使ã£ã¦ã„ã¾ã™ã€‚ 「:beforeã€ã€Œ:afterã€ã‚„ボーダーã§è¡¨ç¾ã™ã‚‹ä¸‰è§’å½¢ã®ä½¿ã„æ–¹ãªã©æ…£ã‚Œãªã„方もã„ã‚‹ã‹ã‚‚ã‚Œã¾ã›ã‚“ã®ã§ã€ãã®éƒ½åº¦ç°¡å˜ã«è§£èª¬ã—ã¦ã„ãã¾ã™ã€‚「:beforeã€ã€Œ:afterã€ç–‘ä¼¼è¦ç´ ã¯IE7以下ã¯éžå¯¾å¿œã§ã™ã®ã§ã”注æ„ãã ã•ã„。 今回ã®ã‚µãƒ³ãƒ—ルã¯åˆ¥ã‚µãƒ¼ãƒã«ã‚¢ãƒƒãƒ—ã—ã¦ã„ã¾ã™ã®ã§ã”覧ãã ã•ã„。 ãã‚Œã§ã¯ä»Šå›ž8ã¤ã®ã‚µãƒ³ãƒ—ルを紹介ã—ã¦ã„ãã¾ã™ã€‚ 1. å¹ã出ã—ã®ã‚ˆã†ãªè¦‹å‡ºã—1 å¹ã出ã—ã®ä¸‹ã®éƒ¨åˆ†ã‚’:after擬似è¦ç´ ã§ä½œã£ã¦ã„ã¾ã™ã€‚三角形ã¯ãƒœãƒ¼ãƒ€ãƒ¼ã§ä½œã£ã¦ã„ã¾ã™ã€‚下ã®ç”»åƒã‚’見るã¨ä½•ã¨ãªãイメージã§ãã‚‹ã§ã—ょã†ã‹ã€‚今回ã®å ´åˆã¯ä¸Šã®èµ¤ã„部分ã®ã¿è‰²ã‚’付
[CSS]フォームã®è¦‹æ „ãˆã‚’ãã£ã¨ã‚ˆãã™ã‚‹ã€ãƒ†ã‚スト入力欄ã¨ãƒœã‚¿ãƒ³ã‚’CSS3ã§ç¾Žã—ãスタイルã™ã‚‹ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«
CSS3 Form Styling Cheat Sheet CSS3ã§ã‚¹ã‚¿ã‚¤ãƒ«ã™ã‚‹ãƒ†ã‚スト入力欄 CSS3ã§ã‚¹ã‚¿ã‚¤ãƒ«ã™ã‚‹ãƒ•ã‚©ãƒ¼ãƒ ã®ãƒœã‚¿ãƒ³ CSS3ã§ã‚¹ã‚¿ã‚¤ãƒ«ã™ã‚‹ãƒ†ã‚スト入力欄 HTMLã¯éžå¸¸ã«ã‚·ãƒ³ãƒ—ルã§ã™ã€‚ classã®hogeã¯ã€éšæ™‚変更ã—ã¦åˆ©ç”¨ã—ã¦ãã ã•ã„。 HTML <form> <input type="text" class="hoge" /> </form> ã¾ãšã¯ã€ãƒ™ãƒ¼ã‚¹ã¨ãªã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã§ã™ã€‚ CSS: Basic border:0; padding:10px; font-size:1.3em; font-family:Arial, sans-serif; color:#aaa; border:solid 1px #ccc; margin:0 0 20px; width:300px; æž ç·šã‚’è§’ä¸¸ã«ã—ã¾ã™ã€‚
CSS3ã®å‹‰å¼·ã«ãªã‚‹ã‹ã‚‚ï¼ï¼Ÿç”»åƒã‚’使ã‚ãªã„ボタンã®ä½œæˆæ‰‹é †
CSS3を使ã†ã¨ç”»åƒã®ã‚ˆã†ãªãƒœã‚¿ãƒ³ã‚‚ç°¡å˜ã«ä½œã‚Œã¾ã™ã€‚よãã‚るタイプã®ãƒœã‚¿ãƒ³ã§ã™ãŒã€ã§ãã‚ãŒã‚Šã®ã‚³ãƒ¼ãƒ‰ã ã‘ã ã¨å‹‰å¼·ã«ãªã‚‰ãªã„ã®ã§ã€ä½œã‚Šæ–¹ã‚’é †ç•ªã«ç´¹ä»‹ã—ã¦ã„ãã¾ã™ã€‚ 今回ã€Chomeã¨Firefoxã§å‹•ä½œç¢ºèªã—ã¦ã„ã¾ã™ã€‚IEã ã¨ã‚°ãƒ©ãƒ‡ãƒ¼ã‚·ãƒ§ãƒ³ãŒä½¿ãˆãªã„ã®ã§ã€åŒã˜ãƒœã‚¿ãƒ³ãŒãŸãã•ã‚“ã‚るよã†ã«è¦‹ãˆã¾ã™ã€‚スマホサイト用ãªã‚“ã‹ã ã¨å分実用的ã ã¨æ€ã„ã¾ã™ã€‚
CSS3をサãƒãƒ¼ãƒˆã—ã¦ã„ãªã„ブラウザã§ã©ã®ã‚ˆã†ã«è¦‹ãˆã‚‹ã‹ç°¡å˜ã«ç¢ºèªã§ãるブックマークレット -deCSS3
CSS3ã§ã‚¹ã‚¿ã‚¤ãƒ«ã—ãŸç®‡æ‰€ã‚’サãƒãƒ¼ãƒˆã—ã¦ã„ãªã„å¤ã„ブラウザã€ã¾ã主ã«IEãªã®ã§ã™ãŒã€ã§ã©ã®ã‚ˆã†ã«è¦‹ãˆã‚‹ã®ã‹ç°¡å˜ã«ç¢ºèªã§ãるブックマークレットを紹介ã—ã¾ã™ã€‚
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
Imageless iPhone 4 by Vasyl Zubach
{{#tags}}- {{label}}
{{/tags}}