Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Div span__object_があればいい

870 views

Published on

  • Be the first to comment

  • Be the first to like this

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

×