技術書のサイトの模写をしています 上の画像が元サイトです 下の画像は元サイトの模写です
右のデベロッパーツールの一番下のline-heightの部分が元サイトは打ち消されているのですが、模写の方はそうなっておらず、アイコンのレイアウト崩れが生じてしまいました どちらもnormalize.cssを使っています
どうしてこのようなことになっているのか調べてもわかりません
HTML
1<!DOCTYPE html> 2<html lang="ja" > 3 <head> 4 <meta charset="utf-8"> 5 <title>もっしゃ</title> 6 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:700,400"> 7 <link rel="stylesheet" href="css4/normalize.css"> 8 <link rel="stylesheet" href="css4/single2.css"> 9 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"> 10 11 </head> 12 <body> 13 14 <section class="skills"> 15 <h2 class="heading">MY SKILLS</h2> 16 <div class="skill-wrapper"> 17 <div class="skill"> 18 <i class="skill-icon fa fa-lightbulb"></i> 19 <p class="skill-title">IDEA</p> 20 <p class="skill-text">何かを考えることが好きです。<br> 21 新しいことを思いついては試しています。<br> 22 ディレクションの経験もあります。 23 </p> 24 </div> 25 <div class="skill"> 26 <i class=" skill-icon fa fa-paint-brush"></i> 27 <p class="skill-title">DESIGN</p> 28 <p class="skill-text">見た目の綺麗さだけじゃなくて、<br> 29 使いやすさ、情報の伝わりやすさなど、<br> 30 その先まで考えることを意識しています。 31 </p> 32 </div> 33 <div class="skill"> 34 <i class=" skill-icon fa fa-code"></i> 35 <p class="skill-title">CODING</p> 36 <p class="skill-text">HTML/CSSコーディングも行います。<br> 37 正しく美しいマークアップと、<br> 38 今後の変更への強さを考慮しています。 39 </p> 40 </div> 41 42 </div> 43 </section> 44 45 </body> 46</html>
CSS
1@charset "UTF-8"; 2html{font-size:62.5%;} 3*,*::before,*::after{box-sizing: border-box;} 4body{background: #151515 url("../images/bg.png") no-repeat fixed left bottom; 5background-size: cover; 6color:#fff; 7text-align: center; 8font-size:1.4rem; 9font-family: Raleway, "Hiragino Kaku Gothic ProN", Meiryo ,sans-serif; 10} 11.skills{padding:80px 0px; background-color: #FFFFFF; color:#333333;} 12 .skill-wrapper{display:table; width:80%; 13margin:50px auto 0; table-layout: fixed; 14 } 15 .skill{display:table-cell;} 16.skill-icon{color:#f1b400; width:150px; height:150px; 17 border:4px solid; border-radius: 50%; font-size:8rem; 18 margin-bottom:30px; 19 line-height:142px; 20} 21.skill-title{font-size:2rem; margin-bottom:30px;} 22.skill-text{line-height:2; margin:0 20px;}
繰り返しになってしまうのですが、normalize.cssはどちらも同じです
ご自身が書かれたコードを、HTMLのDOCTYPE宣言から提示してください。
回答2件
あなたの回答
tips
プレビュー