Q&A
ご回答ありがとうございます。
わざわざ違う方法も教えて頂き助かります。是非参考にさせて頂きます。
CSSの最後の記述の.clearfix:before, .clearfix:after {content:""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }の部分ですが、わからない部分が二つありあます。
一つは、content:"";の部分でcontentが何故空なのかという部分です。
二つ目は、なぜbefore,afterを使ったのかという部分です。
直接書き込んでもよかったのではないかと考えております。
ご回答宜しく意お願い致します。
HTML
コード<!DOCTYPE html>
</div><!-- メイン --> <!-- サイド --> <div class="side mobile-collapse"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--/side--> </div><!-- Two-colums --> </div></div><!-- body-content --> <!-- footer --> <div class="footer"><div class="section-inner"> <p>Footer text placed here.</p> </div></div><!--/footer--> </body> </html> ```<!-- info-box --> <div class="info-box-a"> <h4>Important Content</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> </div><!--/info-box--> <!-- info-box --> <div class="info-box-b hide-mobile"> <h4>Not Vital</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> </div><!--/info-box--> <!-- info-box --> <div class="info-box-b hide-mobile"> <h4>Not Vital</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> </div><!--/info-box-->
CSS
1コードh1, h2, h3, h4, h5, h6, p { 2 margin: 0; 3 padding: 0; 4} 5 6p { 7 margin: 0 0 1em 0; 8 font-size: 93%; 9 line-height: 1.5em; 10} 11 12body { 13 font-family: Arial, Helvetica, sans-serif; 14 padding: 0; 15 margin:0; 16 background-color: #3f3f3f; 17} 18 19img { 20 max-width: 100%; 21 height: auto; 22 margin: 0 0 10px 0 ; 23} 24 25div.section-inner { 26 max-width: 1100px; 27 padding: 0 25px; 28 margin: 0 auto; 29} 30 31div.header { 32 background-color: #E9e9e9; 33} 34 35div.nav { 36 background-color: #d4d4d4; 37} 38 39div.nav ul { 40margin: 0; 41padding: 0; 42} 43 44div.nav ul li { 45 list-style: none; 46 float: left; 47 font-size: 93%; 48} 49 50div.nav ul li a:link, 51div.nav ul li a:visited { 52 display: block; 53 padding: 10px 15px; 54 text-decoration: none; 55 color: #000; 56} 57 58div.body-content { 59 padding: 50px 0; 60 background: #FFF; 61} 62 63div.thirds{ 64 padding-bottom: 50px; 65} 66 67div.one-third { 68 width: 30%; 69 float: left; 70 margin-right: 5%; 71} 72 73div.one-third-last { 74 margin: 0; 75} 76 77div.main { 78 width: 60%; 79 float: left; 80 margin-right: 5%; 81} 82 83div.side { 84 width: 30%; 85 float: left; 86} 87 88div.info-box-a { 89 background-color: #9bdaef; 90 padding: 20px; 91 font-size: 13px; 92 margin: 0 0 15px 0; 93} 94 95div.info-box-b { 96 background-color: #efdb7f; 97 padding: 20px; 98 font-size: 13px; 99 margin: 0 0 15px 0; 100} 101 102 div.footer { 103 background-color: #3f3f3f; 104 color: #FFF; 105 padding: 15px 0; 106 text-align: center; 107 } 108 109 .clearfix:before, .clearfix:after {content:""; display: table; } 110.clearfix:after { clear: both; } 111.clearfix { *zoom: 1; } 112 113 */ 114
回答2件
0
一つは、content:"";の部分でcontentが何故空なのかという部分です。
content: "あ";と記述してみてください。画面上に「あ」という文字が出てきてしまいます。
「あ」など不要な文字を表示したくないため、空する必要があります。
二つ目は、なぜbefore,afterを使ったのかという部分です。
直接書き込んでもよかったのではないかと考えております。
CSS側からみると、別に直接書き込んでも構いません。
が、HTML側からみると謎の空の<li>が存在してしまうことになります。
HTML
1<ul> 2 <li class="clear的なクラス名1"></li> 3 <li>...</li> 4 <li>...</li> 5 <li class="clear的なクラス名2"></li> 6</ul>
CSS
1.clear的なクラス名1 { 2 clear: both; 3 /* 省略 */ 4} 5.clear的なクラス名2 { 6 clear: both; 7 /* 省略 */ 8}
あとは、他者がソースコードを更新する際に、広く普及する「.clearfix」が削除されてしまう可能性は低いですが、
空のliタグは削除されてしまっても不思議ではないため、それを回避するためにafterなど疑似要素を使っている..、ということも考えられます。
(.clearfixのバージョンが古いのと、そもそもfloat: left;での横並びは古い点は気になりました。「display: flex;」による方法をおすすめします。)
投稿2020/04/02 13:37
編集2020/04/02 22:20
総合スコア4528
0
ベストアンサー
一つは、content:"";の部分でcontentが何故空なのかという部分です。
何かないと疑似要素を発生させられないからです。
直接書き込んでもよかったのではないかと考えております。
いえ、フロート解除を行うには別に要素が必要です。疑似要素を使わずに直接は行なえません（overflow: hiddenなど、別系統の手法はありますが）。
投稿2020/04/02 13:01
総合スコア145183
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/05 03:38