webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

疑似要素

疑似要素 :before :afrer - dlに飾りをつける

参考サイト Glossary and Table Layout 完成したもの。 css @charset "utf-8"dl, dt, dd{ margin: 0; padding: 0; line-height: 1.0;}dl, dt, dd{ list-style: none;}.container{ width: 800px; margin: 20px auto; position: relative;/* 縦線の位置決め用 …

疑似要素 :before :afrer - block要素の上下左右にcssで線を引く

<html><head> <title>line</title> <meta charset="UTF-8"> <style> .square{ height:200px; width:200px; background: coral; margin: 20px auto; position: relative; } </style> </head><body><div class="container"> <div class="square"> </div></div> </body></html> たとえばこの正方形の右側に赤い線を引いてみる。

疑似要素 :before :after で年表を作る

たとえばこのような図形をCSSで作るときに、、、 .container dt{ width: 130px; height: 40px; font-size: 16px; font-weight: bold; background: #ffd800; line-height: 40px; text-align: center; position: relative; float: left; } .container dt:befor…