[14日目]画像の整え方

べ

2021年8月5日 19:24

模写コーディング

間違っていた点

・remでフォントのサイズ指定
・各部分を<section>で区切る
・疑似要素を使って下線を書く
・line-height:1px

max-width:1000px;
width:100%
でmaxを指定しつつ大画面では大きく取れる
wrapperなどの囲いを使って使用

line-height とheightを一致させることで文字をブロックの上下中心に
text-alignで左右中心

object-fit:cover
でコンテナいっぱいにフィット。左右比率変わらず。はみ出た部分はカット

100vh→画面の上での100%
100%→親要素での%

divでイメージを囲み、img{width:100%}とすることで必要なサイズが得やすい(object-fit:cover)

line-height:で行間指定

<dl><dt><dd>の活用

flex-wrapをdlの表で活用

HTML回答

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<h1 class="logo"> <img class="logo" src="logo.svg"></h1>
<ul class="nav">
<li class="nav-list">NEWS</li>
<li class="nav-list">ABOUT</li>
<li class="nav-list">BUSINESS</li>
<li class="nav-list">COMPANY</li>
</ul>
<div class="contact">お問い合わせ</div>
</header>
<main>

</div>

<div class="main-news">
<h2 class="en">NEWS</h2>
<h3 class="jp">ニュース</h2>

<ul>
<li>
<div class="date-news">
<p class="date">2021.01.01</p>
<p class="news">NEWS</p>
</div>
<p class="title">タイトルタイトルタイトルタイトル</p>
</li>
<li>
<div class="date-news">
<p class="date">2021.01.01</p>
<p class="news">NEWS</p>
</div>
<p class="title">タイトルタイトルタイトルタイトル</p>
</li>
<li>
<div class="date-news">
<p class="date">2021.01.01</p>
<p class="news">NEWS</p>
</div>
<p class="title">タイトルタイトルタイトルタイトル</p>
</li>
</ul>
</div>

<div class="about">
<img class="about-img" src="about.jpg">
<div class="about-text-div">
<h2 class="en">ABOUT</h2>
<h3 class="jp">私たちについて</h3>
<p class="about-text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>

<div class="business">
<h2 class="en">BUSNESS</h2>
<h3 class="jp">事業内容</h3>
<div class="business-list">
<div class="business-left">
<ul>
<li>
<p class="business-title">Web制作・マーケティング</p>
<img class="business-photo" src="business1.jpg">
</li>
<li>
<p class="business-title">インターネットメディア事業
</p>
<img class="business-photo" src="business2.jpg">
</li>
</ul>
</div>
<div class="business-right">
<ul>
<li>
<p class="business-title">プロモーション企画・制作グ</p>
<img class="business-photo" src="business3.jpg">
</li>
<li>
<p class="business-title">ソーシャル企画・運営</p>
<img class="business-photo" src="business4.jpg">
</li>
</ul>
</div>
</div>
</div>
<div class="company">
<div class="company-left">
<h2 class="en">COMPANY</h2>
<h3 class="jp">会社情報</h3>
<div class="company-text">
<div class="company-text-title">
<p>会社名</br>所在地</br>代表</br>設立</br>資本金</br>事業内容</p>
</div>
<div class="company-text-main">
<p>ウェブエンターテイメントデザイン株式会社</br>東京都渋谷区桜丘町99-9 West Building 3F
</br>☓☓☓☓☓☓</br>2020-01-01</br>3,000,000円</br>ウェブ制作・マーケティング</br>インターネットメディア事業</br>プロモーション企画・作成</br>ソーシャル企画・運営</br> </p>
</div>
</div>
</div>
<img src="company.jpg">
</div>
</main>
<footer class="footer">
<div class="footer-div">
<div class="footer-top">
<div class="footer-logo">
<img src="logo.svg">
</div>
<div class="footer-address">
Web Entertainment Design Inc.</br>
West Building 3F</br>
9-99 Sakuragaokacho Shibuya-ku</br>
Tokyo, Japan 150-0031</br>
T/99-9999-9999
</div>
</div>
<div class="footer-copy">
© Web Entertainment Design Inc.
</div>
</div>
</footer>
</body>
</html>

CSS回答

body{
font-size: 16px;
}
.header{
display: flex;
}
.logo{
width: 140px;
height: 80px;
padding: 0 0 0 30px;
}

.nav{
display: flex;
margin-left: 80px;

}
.nav-list{
margin-left: 30px;
line-height: 80px;
}
.contact{
line-height: 80px;
margin-left: auto;
height: 80px;
width: 200px;
text-align: center;
background-color: black;
color: white;
}
.main-visual{
& img{
width: 100%;
height:600px;
object-fit: cover;
}
}
.main-news{
width:1000px;
height: 250px;
margin:100px auto;
& ul{
display: flex;
}
& li{
margin-top: 50px;
padding-left: 10px;
width: 33%;
border-left: solid 1px black;
&:first-child{
border-left: none;
}
}
}
h2{
font-size: 30px;
letter-spacing:8px;
margin-bottom: 20px;
}
.date-news{
display: flex;
}
.news{
background-color: black;
color: white;
font-size: 10px;
text-align: center;
line-height: 20px;
margin-left: 30px;
height: 20px;
width: 50px;
}
.title{
margin-top: 30px;
}
.about{
margin-top: 120px;
display: flex;
}
.about-img{
width:60%;
height: 400px;
object-fit: cover;
}
.about-text-div{
padding-top: 200px;
margin-left: 70px;
width: 470px;

}
.about-text{
margin-top: 50px;
line-height: 30px;
}

.jp{
margin-top:5px;
}

.business-list{
display: flex;
margin-top: 70px;
& img{
object-fit: cover;
width: 370px;
height: 230px;
}
& li {
width: 370px;
height: 280px;
list-style-type: square;
margin-left: 30px;

}
& .business-right{
margin-left: 60px;
margin-right: 60px;
}
& .business-left{
margin-top: 90px;
margin-left: 50px;
}
}

.business{
width: 80%;
margin: 100px auto;
}

.company{
width: 1050px;
height: 600px;
margin: 0 auto;
display: flex;
position: relative;
& img {
height: 400px;
width: 540px;
display: flex;
position: relative;
top:100px;
left: -50px;
z-index: 100;
object-fit: cover;
}
& .company-left{
height: 560px;
width: 570px;
background-color: #ffffff ;
padding: 50px;
font-size: 14px;
& .company-text-title{
width:70px;
position:absolute;
top: 50%;
transform: translateY(-50%)

}
& .company-text-main{
position:absolute;
top: 66%;
left: 70px;
transform: translateY(-50%)
}
}
& .company-text{
display: flex;
width: 380px;
height:260px;
align-items: center;
position: relative;
line-height: 2;

}
& p {
display: block;
}
}
body{
background-color: #f0f0f0 ;;
}

.footer{
width: 100%;
height: 200px;
background-color: white;
img{
width: 110px;
height: 40px;
margin-top: 30px;

}
}

.footer-div{
height: 100%;
max-width:1000px;
margin: 100px auto;

}

.footer-top{
display: flex;
justify-content: space-between;
}
.footer-copy{
font-size:2px;
margin-top: 30px;

}
.footer-address{
line-height: 1.5;
font-size: 14px;
margin-top: 30px;

}

この記事が気に入ったらサポートをしてみませんか？