質問編集履歴

1 コードの更新

yanmar

yanmar score 4

2020/09/26 13:43  投稿

iSara模写 参考HPのようなレイアウトにできない
![イメージ説明](a9d73e4863fad46ad000e7db39ed2668.jpeg)
わからないこと
1.円形の図形と背景画像が参考HPのように重ならない。
2.背景画像が中途半端な表示になってしまい、「そこで必要なのが稼ぐ力です」という部分との空白ができてしまっている。
試したこと
1.width等を書いて実行、背景画像の中でしか動かせず。
2.marginやpaddingを使用してみたが、空隙が埋まらず・・・。
該当コード
1.
html
   <div class="part4">
   <div class="about">
    <h3>ABOUT</h3>
   </div>
   </div>
css
.part4 {
 background-image: url(../images/road.jpg);
 background-size: 100%;
 background-position: center;
 background-repeat: no-repeat;
 padding-top: 10px;
 }
.about {
 background-color: #eab857;
 border-radius: 50%;
 height: 80px;
 width: 80px;
 margin:0 auto;
}  
 
 
2.  
<HTML>  
<div class="part3">  
<h2>エンジニアとして本当の自由を手に入れるためには?</h2>  
<div class="content">  
<br><br>エンジニア需要の高まりに伴い、プログラミングスクールが増えています。  
<br>しかし、そこでの学習の先は提携して決められた就職先に就職すること。  
<br><br>これで本当にいいのですか?  
<br>日本人エンジニアはアメリカ比べて給料が格段に低い。  
<br>その理由がここにあり、エンジニアは自分の給料をコントロールすべきなのです。  
<br><br>スキルを身に付けたエンジニアは、人生をコントロールすることでより自由に。  
<br>そこで必要なのが<span class="under">「稼ぐ力」</span>です。  
</div>  
</div>  
 
<CSS>  
.part3 {  
text-align: center;  
margin-bottom: 100px;  
}  
 
* {  
margin: 0;  
padding: 0;  
}  
 
.part3 h2 {  
position: relative;  
text-align: center;  
padding: 35px 0;  
margin: 10px auto;  
margin-top: 50px;  
}  
 
.part3 h2::before {  
content: "";  
position: absolute;  
top: 10px;  
left: 350px;  
width: 50px;  
height: 50px;  
border-top: 4px solid #EBB94D;  
border-left: 4px solid #EBB94D;  
}  
 
.part3 h2::after {  
content: "";  
position: absolute;  
top: 50px;  
right: 300px;  
width: 50px;  
height: 50px;  
border-bottom: 4px solid #EBB94D;  
border-right: 4px solid #EBB94D;  
}  
 
.content {  
font-size: 20px;  
font-weight: 100;  
margin-bottom: 100px;  
}  
 
.content span {  
color: black;  
font-weight: bold;  
}  
.under {  
background: linear-gradient(transparent 70%, #EBB94D 0 );  
}
  • HTML

    23415 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    16689 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る