Div span__object_があればいい
Download as PPTX, PDF0 likes811 views
The document provides examples of HTML code using different HTML elements like div, span, img and their default display properties. It also demonstrates how to style elements using CSS properties like width, height, margin, padding, border, float, position etc. and different CSS concepts like cascading, selectors, stylesheet etc. The examples aim to explain the basic usage and behavior of common HTML elements and CSS properties.
![セレクタ
• div > div
• div + div
• div ~ div
• div div
• div.hoge
• div#hoge
• div[alt=hoge]](https://image.slidesharecdn.com/divspanobject-130213073704-phpapp02/85/Div-span__object_-20-320.jpg)
Div span__object_があればいい
- 1. div, span, img があればいい
- 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. stylesheet <style> * { background: red } div { background: blue } </style> <link rel="stylesheet" href="style.css">
- 20. セレクタ • div > div • div + div • div ~ div • div div • div.hoge • div#hoge • div[alt=hoge]
- 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. 他よく使うプロパティ • font-size • overflow • line-height • background-image • background-position • outline