Save images with WookmarkWelcome to Wookmark, the�visual�archive Get your profile, collect your favorite images, and share with others. Learn more
ãµã‚ãµã‚ã—ã¦ã‚‹ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ | ã‹ãˆãƒ©ãƒœBlog
ç”»é¢å†…ã§ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã‚’ãµã‚ãµã‚ã•ã›ã¦ã¿ã¾ã—ãŸã€‚ デモ var i = 0; (function move(){ // プラスマイナスを交互ã«æ¸¡ã™ i = i > 0 ? -1 : 1; var p = $("#sample").position().top; $("#sample").animate({ top: p + i * 10 }, { duration: 500, complete: move // アニメーション完了後ã«é–¢æ•°ã‚’å†å¸°å‘¼ã³å‡ºã—ã™ã‚‹ã€‚ }); })(); .animate()ã‚’å†å¸°çš„ã«å‘¼ã³å‡ºã™ã“ã¨ã§ç¹°ã‚Šè¿”ã—処ç†ã‚’è¡Œã£ã¦ã„ã¾ã™ã€‚
jmpress.js - a jQuery plugin to build a website on the infinite canvas
I am pure <html>, .css {} and function javascript() {} and use CSS3 transitions and transformations. I can pan, rotate and scale between elements on an infinite canvas. I currently work with most modern web browsers and fallback to simpler transitions with unsupported browsers. yes yes partly yes partly I started as a a jQuery port of impress.js but I have become much, much more. here are some of
floatã—ãŸéš›ã«èƒŒæ™¯ãŒæ¶ˆãˆã‚‹ä»¶ã€css tip】
floatã—ãŸéš›ã«èƒŒæ™¯ãŒæ¶ˆãˆã‚‹ä»¶ã€css tip】 親ボックスã«èƒŒæ™¯ã‚’é©ç”¨ã—ã¦ã€å†…包ã™ã‚‹åボックスã«å¯¾ã—ã¦floatã‚’é©ç”¨ã—ãŸå ´åˆã€IEã§ã¯åボックスを内包ã™ã‚‹å½¢ã§èƒŒæ™¯ãŒè¡¨ç¤ºã•ã‚Œã‚‹ã®ã«å¯¾ã—ã¦ã€Firefoxã§ã¯è¦ªãƒœãƒƒã‚¯ã‚¹ã®èƒŒæ™¯ãŒè¡¨ç¤ºã•ã‚Œãªããªã‚Šã¾ã™ã€‚ サンプルã¨ãªã‚‹html㯠<div class="parent"> 親ボックス <div class="child"> åボックス </div> <div class="child"> åボックス </div> </div> ã¨ã—ã¾ã™ã€‚ ã“ã‚Œã«å¯¾ã—㦠div.parent{ width:204px; background:#39FF6B; } div.child{ border:1px dotted #000; height:100px; width:100px; float:left; } ã“ã®ã‚ˆã†ãªCSSã‚’é©ç”¨ã—ãŸå ´åˆã€ä»¥ä¸‹ã®ã‚ˆã†ãªè¡¨ç¤ºã«
floatã—ãŸç”»åƒã®æ¨ªã®ãƒ†ã‚ストã®å›žã‚Šè¾¼ã¿ã‚’クリアã™ã‚‹CSS – creamu
floatã—ãŸç”»åƒã®æ¨ªã®ãƒ†ã‚ストを回り込ã¾ã›ãŸããªã„。 ãã‚“ãªã¨ãã«ãŠã™ã™ã‚ãªã®ãŒã€ã€ŽCorrecting Orphans w/ Overflowã€ã€‚floatã—ãŸç”»åƒã®æ¨ªã®ãƒ†ã‚ストã®å›žã‚Šè¾¼ã¿ã‚’クリアã™ã‚‹CSSã§ã™ã€‚ å³ã«é…ç½®ã—ãŸãƒ†ã‚ストをwrapã™ã‚‹divã«ã€widthを指定ã—ã¦floatã•ã›ãªãã¦ã‚‚ã€overflow: hidden;ã§å®Ÿç¾ã§ãるよã†ã§ã™ã。 デモã¯ä»¥ä¸‹ã‹ã‚‰ã€‚ View Demo ãœã²è¦‹ã¦ã¿ã¦ãã ã•ã„。 Correcting Orphans w/ Overflow 物件を探ã—ã™ãŽã¦ã‚“ーã¡ã‚‡ã£ã¨ç–²ã‚Œã¦ããŸã€‚ ã¡ã‚‡ã£ã¨åºƒå°¾ã‚’見ã«è¡Œã£ã¦ãã¦ã„ã„æ„Ÿã˜ã€‚
MdN Design｜ç·åˆæƒ…å ±ã‚µã‚¤ãƒˆ
第16回（最終回） 最新ã®ãƒ‡ã‚¶ã‚¤ãƒ³è¡¨ç¾ã‚’é©ç”¨ã™ã‚‹ ã“ã“ã¾ã§ç´¹ä»‹ã—ã¦ããŸCSSã®ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã‚„装飾テクニックã¯ã€ç¾åœ¨åˆ©ç”¨è€…ã®å¤šã„Internet Explorer 7ã‚„8ã€Safariã€Firefoxãªã©ã®Webブラウザã§ã»ã¼å•é¡Œãªã動作ã™ã‚‹ã‚‚ã®ã§ã—ãŸã€‚本連載ã®æœ€çµ‚回ã¯ã€æœªæ¥ã«å‘ã‘ãŸæº–å‚™ã¨ã—ã¦ç¾åœ¨ç–定ä¸ã®ã€ŒCSS 3ã€ã®ä¸ã‹ã‚‰ãƒ¢ãƒ€ãƒ³ãƒ–ラウザã§æ—¢ã«é©ç”¨å¯èƒ½ãªã‚¹ã‚¿ã‚¤ãƒ«ã‚’ã„ãã¤ã‹ç´¹ä»‹ã—ã¾ã™ã€‚ （公開日：2010å¹´4月16日　解説：ã“ã‚‚ã‚Šã¾ã•ã‚ã） ç¾åœ¨ç–定ä¸ã®CSS 3ã«ã¤ã„㦠CSSã§æŒ‡å®šã—ãŸã‚¹ã‚¿ã‚¤ãƒ«æŒ‡ç¤ºã¯ã€Webブラウザã®CSSサãƒãƒ¼ãƒˆã®åº¦åˆã„ã«ã‚ˆã£ã¦é©ç”¨ã§ãã‚‹ã‹ã©ã†ã‹ãŒç•°ãªã‚Šã¾ã™ã€‚例ãˆã°ã€ä»Šç¾åœ¨ã®ä¸»æµã§ã‚るブラウザã®å¤šãã§ã¯CSSレベル2（CSS 2）をサãƒãƒ¼ãƒˆã—ã¦ã„ã‚‹ã‚‚ã®ãŒã»ã¨ã‚“ã©ã§ã™ï¼ˆç‰¹å®šã®ãƒ—ãƒãƒ‘ティã ã‘未サãƒãƒ¼ãƒˆã‚‚å«ã‚）。ãã®ä¸€æ–¹ã€ç¾åœ¨CSSã®æ¬¡ã®ãƒãƒ¼ã‚¸ãƒ§ãƒ³ã«ã‚ãŸã‚‹CSSレベル3（CSS
HTML をシンプルã«ä¿ã¡ã¤ã¤ã€ãƒ–ãƒãƒƒã‚¯è¦ç´ ã®æ®µçµ„ã¿ã‚’実ç¾ã™ã‚‹æ–¹æ³• | ãƒã‚·ãƒ£ãƒã‚°ã€‚
HTML をシンプルã«ä¿ã£ãŸã¾ã¾ãƒ–ãƒãƒƒã‚¯è¦ç´ を段組ã¿ã™ã‚‹æ–¹æ³•ã§ã™ã€‚ ↑ã®ã‚ˆã†ã«å†™çœŸã‚’横並ã³ã§è¡¨ç¤ºã—ãŸã„ã€ã¨ã„ã†ã‚±ãƒ¼ã‚¹ã¯ã‚ˆãã‚ã‚‹ã¨æ€ã„ã¾ã™ã€‚ ã¾ãšã€ä¸Šè¨˜ã® HTML ソースãŒã“ã¡ã‚‰ã€‚ <div id="photo"> <ul> <li><img src="hoge1.jpg" alt="サンプル1" width="160" height="120" /></li> <li><img src="hoge2.jpg" alt="サンプル2" width="160" height="120" /></li> <li><img src="hoge3.jpg" alt="サンプル3" width="160" height="120" /></li> </ul> </div><!-- /#photo --> 今回ã®ã‚µãƒ³ãƒ—ルã§ã¯ã€ãƒœãƒƒã‚¯ã‚¹ã¨ä½™ç™½ãŒä»¥ä¸‹ã«ãªã£ã¦ã„ã¾ã™ã€‚ 全体ã®æ¨ªå¹…（500px）ãŒæ±ºã¾ã£ã¦ã„ã¦
Floatutorial: Step by step CSS float tutorial
Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts. General info Some definitions Float basics Floats and "clear" Browser types Tutorial 1. Floating an image to the right Float an image to the right of a block of text and apply a border to the image. Step 1 - Start with a paragraph
フãƒãƒ¼ãƒˆã¨ãƒã‚¬ãƒ†ã‚£ãƒ–マージンã¾ã¨ã‚:CSS | Tech de Go
漬物ã¯æ–™ç†ã«ãŠã„ã¦é‡è¦ãªã‚¢ã‚¯ã‚»ãƒ³ãƒˆã‚’æä¾›ã—ã¾ã™ã€‚ ãã®é…¸å‘³ãŒã€é£Ÿäº‹ã®å‘³ã‚ã„を引ãç· ã‚ã€æ–°ãŸãªæ·±ã¿ã‚’åŠ ãˆã‚‹å½¹å‰²ã‚’æžœãŸã—ã¾ã™ã€‚ 例ãˆã°ã€é…¢æ¼¬ã‘ã®æ¼¬ç‰©ã¯ã€ç‹¬ç‰¹ã®é…¸å‘³ã¨çˆ½ã‚„ã‹ã•ã§æ–™ç†å…¨ä½“を軽やã‹ã«ã—ã€æ²¹ã£ã½ã•ã‚’ä¸å’Œã—ã¾ã™ã€‚ ã“ã‚Œã«ã‚ˆã‚Šã€é£Ÿã¹æ‰‹ã®å£ã®ä¸ã‚’ã•ã£ã±ã‚Šã¨ã•ã›ã‚‹ã ã‘ã§ãªãã€é£Ÿæ¬²ã‚’増進ã•ã›ã‚‹åŠ¹æžœã‚‚期待ã§ãã¾ã™ã€‚ ã¾ãŸã€å¡©æ¼¬ã‘ã®æ¼¬ç‰©ã‚‚ã¾ãŸé‡è¦ã§ã™ã€‚ å¡©ã®åŠ¹æžœã§é‡Žèœã‹ã‚‰æ°´åˆ†ã‚’抜ãã€æ—¨å‘³ã‚’å‡ç¸®ã•ã›ã‚‹ã“ã¨ã§ã€æ–™ç†ã«æ·±ã„コクã¨é¢¨å‘³ã‚’åŠ ãˆã¾ã™ã€‚ ã“ã®å¡©å‘³ã¯æ–™ç†å…¨ä½“ã®ãƒãƒ©ãƒ³ã‚¹ã‚’æ•´ãˆã€é£Ÿäº‹ã‚’豊ã‹ã«ã—ã¦ãã‚Œã¾ã™ã€‚ 漬物ã®é…¸å‘³ãŒç”Ÿã‚€æ–™ç†ã®ã‚¢ã‚¯ã‚»ãƒ³ãƒˆã¯ã€æ–™ç†ã®ç¨®é¡žã‚„å£ç¯€ã«ã‚ˆã£ã¦ã‚‚ç•°ãªã‚Šã¾ã™ã€‚ å¤ã«ã¯ã•ã£ã±ã‚Šã¨ã—ãŸé…¢æ¼¬ã‘ã®æ¼¬ç‰©ãŒã€å†¬ã«ã¯å¡©æ¼¬ã‘ã®æ¼¬ç‰©ãŒç‰¹ã«é‡å®ã•ã‚Œã¾ã™ã€‚ å£ç¯€æ„Ÿã‚„地域ã®é£Ÿæã¨æ¼¬ç‰©ã®çµ„ã¿åˆã‚ã›ã‚’工夫ã™ã‚‹ã“ã¨ã§ã€æ–™ç†ã®é…力ãŒã•ã‚‰ã«å¼•ãç«‹ã¡ã¾ã™ã€‚ 漬物ã¯å˜ãªã‚‹ä»˜ã‘åˆã‚ã›ã§ã¯ãªãã€é£Ÿäº‹ã®ä¸€éƒ¨ã¨ã—ã¦ãã®é‡è¦æ€§ã‚’増
ã€CSS】clearfixを使ã‚ãšã«floatを解除ã™ã‚‹ | ãƒã‚·ãƒ£ãƒã‚°ã€‚
以å‰ã€floatを解除ã™ã‚‹ clearfixãƒãƒƒã‚¯ã¨ã„ã†è¨˜äº‹ã‚’書ãã¾ã—ãŸãŒã€ã§ãã‚‹ã“ã¨ãªã‚‰ãƒãƒƒã‚¯ã¯ä½¿ã„ãŸããªã„ã¨æœ€è¿‘æ€ã†ã‚ˆã†ã«ãªã£ã¦ãã¾ã—ãŸã€‚ ã„ã‚ã„ã‚ã¨æ¤œè¨¼ã—ãŸçµæžœã€ä»Šå›žã”紹介ã™ã‚‹ã®ã¯ãƒãƒƒã‚¯ã‚’使用ã›ãšã«floatを解除ã™ã‚‹ãŸã‚ã®æ–¹æ³•ã§ã™ã€‚ divã®æ§‹æˆã¯ã“ã¡ã‚‰ã€‚ boxã¨ã„ã†ã‚¯ãƒ©ã‚¹åã® div （floatを解除ã™ã‚‹ãŸã‚ã® div ）ã¯å¿…è¦ã§ã™ã€‚ cssã®ã‚½ãƒ¼ã‚¹ div.box { overflow: hidden; /* ã“ã‚ŒãŒãƒã‚¤ãƒ³ãƒˆ */ position: relative; /* IE6ã§ã‚¨ãƒªã‚¢ã‚’é¸æŠžã§ãるよã†ã«ã™ã‚‹ */ /* DreamWeaverã®ãƒ‡ã‚¶ã‚¤ãƒ³ãƒ“ューã§æ£ã—ã表示ã•ã›ã‚‹ */ } div.left { float: left; /* å·¦ã«å¯„ã›ã¦é…ç½® */ width: 200px; } div.right { float: right; /* å³ã«å¯„ã›ã¦é…ç½® *
1
ランã‚ング
ãŠçŸ¥ã‚‰ã›
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}