Div span__object_があればいい

836 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
836
On SlideShare
0
From Embeds
0
Number of Embeds
128
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×