Successfully reported this slideshow.

More Related Content

More from Shuhei Iitsuka

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Div span__object_があればいい

  1. 1. div, span, img があればいい
  2. 2. div (display: block) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div>aaa</div> <div>bbb</div> <div>ccc</div> <div>ddd</div> <div>eee</div> </body> </html>
  3. 3. span (display: inline) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <span>aaa</span> <span>bbb</span> <span>ccc</span> <span>ddd</span> <span>eee</span> </body> </html>
  4. 4. img (display: inline-block) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <img src="https://graph.facebook.com/4/picture?type=large"> <img src="https://graph.facebook.com/4/picture?type=large"> <img src="https://graph.facebook.com/4/picture?type=large"> <img src="https://graph.facebook.com/4/picture?type=large"> <img src="https://graph.facebook.com/4/picture?type=large"> <img src="https://graph.facebook.com/4/picture?type=large"> <img src="https://graph.facebook.com/4/picture?type=large"> <img src="https://graph.facebook.com/4/picture?type=large"> <img src="https://graph.facebook.com/4/picture?type=large"> <img src="https://graph.facebook.com/4/picture?type=large"> </body> </html>
  5. 5. width, height (block and inline-block only) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style="width: 200px; height: 200px; background: red"></div> </body> </html>
  6. 6. margin, padding, border (block and inline-block only) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style=" width: 200px; height: 200px; margin: 200px; padding: 200px; border: black solid 200px; background: red; "></div> </body> </html>
  7. 7. margin 相殺 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style=" height: 10px; margin: 200px; background: red; "></div> <div style=" height: 10px; margin: 200px; background: red; "></div> </body> </html>
  8. 8. margin 相殺 2 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style="background: red; height: 10px"></div> <div style=" height: 10px; margin: 200px; background: red; "> <div style=" height: 10px; margin: 200px; background: red; "> </div> </div> </body> </html>
  9. 9. margin 相殺 3 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style="background: red; height: 10px"></div> <div style=" height: 10px; margin: 200px; padding: 1px; background: red; "> <div style=" height: 10px; margin: 200px; background: red; "> </div> </div> </body> </html>
  10. 10. margin 相殺 4 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style="background: red; height: 10px"></div> <div style=" height: 10px; margin: 200px; background: red; "> a <div style=" height: 10px; margin: 200px; background: red; "> </div> </div> </body> </html>
  11. 11. float <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style=" float: left; width: 100px; height: 100px; margin: 10px; background: red "></div> <div style=" float: left; width: 100px; height: 100px; margin: 10px; background: blue "></div> </body> </html>
  12. 12. float <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style="background: pink;"> aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa <div style=" float: left; width: 100px; height: 100px; margin: 10px; background: red "></div> <div style=" float: left; width: 100px; height: 100px; margin: 10px; background: blue "></div> aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa </div> </body> </html>
  13. 13. clear <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style="background: pink;"> aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa <div style=" float: left; width: 100px; height: 100px; margin: 10px; background: red "></div> <div style=" float: left; width: 100px; height: 100px; margin: 10px; background: blue "></div> aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa </div> <div style="clear: left"></div> </body> </html>
  14. 14. clear <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style="background: pink;"> aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa <div style=" float: left; width: 100px; height: 100px; margin: 10px; background: red "></div> <div style=" float: left; width: 100px; height: 100px; margin: 10px; background: blue "></div> aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa <div style="clear: left"></div> </div> </body> </html>
  15. 15. position: relative <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style=" position: relative; background: red; margin: 20px; padding: 20px; border: black solid 20px; width: 100px; height: 100px; top: 100px; left: 100px; "> </div> aaa </body> </html>
  16. 16. position: relative <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style=" position: relative; background: red; margin: 20px; padding: 20px; border: black solid 20px; width: 100px; height: 100px; bottom: 100px; right: 100px; "> </div> aaa </body> </html>
  17. 17. position: absolute <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style=" position: absolute; background: red; margin: 20px; padding: 20px; border: black solid 20px; width: 100px; height: 100px; top: 100px; left: 100px; "> </div> aaa </body> </html>
  18. 18. position: fixed <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style="height: 10000px; width: 10000px"></div> <div style=" position: fixed; background: red; margin: 20px; padding: 20px; border: black solid 20px; width: 100px; height: 100px; top: 100px; left: 100px; "> </div> </body> </html>
  19. 19. stylesheet <style> * { background: red } div { background: blue } </style> <link rel="stylesheet" href="style.css">
  20. 20. セレクタ • div > div • div + div • div ~ div • div div • div.hoge • div#hoge • div[alt=hoge]
  21. 21. cascading <style> * { background: red } div { background: blue } #hoge { background: pink } div#hoge { background: gray } </style> 詳細度 div: (0, 0, 1) div#hoge: (1, 0, 1) div.hoge div#hoge: (1, 1, 2)
  22. 22. 他よく使うプロパティ • font-size • overflow • line-height • background-image • background-position • outline

×