--->test_image.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="test_image.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>画像の上に文字を配置</h1>
<div class="hero_bg">
<div class="hero_title">
<h2>毎日の食事、<br>カラダに優しいものを</h2>
<p>日々の食事がおろそかになりがちな働き盛りのあなたへ</p>
</div>
</div>
<script src="test_image.js"></script>
</body>
</html>
--->test_image.css
body{
background: #fec;
}
.hero_bg{
height: 480px;
background-image: url('hero.jpg');/*シングルでもダブルコートでも可*/
/*
background: linear-gradient(to top, rgba(217,177,217,0.7) 10% ,rgba(151, 217, 225, 0.7) 100%),url('hero.jpg');
*/
background-size: cover;/*pxや％やcontainなどのいろんな指定がある*/
background-repeat: no-repeat;
background-position: center;/*画像を中心に配置*/
display: flex;/*親要素にこれをかけると子要素が横並びになる*/
align-items: center;/*親要素にこれを掛けると子要素が上下方向の中心に配置*/
}
.hero_title{
color: #fff;
font-family: Meiryo;
font-size: 1.2rem;
font-weight: normal;
text-shadow: 2px 2px 10px #555;/*みやすく*/
padding-left: 4rem;
}
.hero_title p{
font-size: 0.8rem;
}
もちろんpositionを使って動かしたり、
いろんな方法がある
→transformというのを使う
要素を変形させるプロパティ
回転とか縦横比かえる等
transform: translateY(-50%);
縦の方向に、このhero_titleの自分自身のサイズの半分をマイナス方向に移動
transform: translate(-50%, -50%);
縦横の方向に、このhero_titleの自分自身のサイズの半分を
マイナス方向に移動（完全に中心に配置）
positionを使った例
--->test_image2.css
body{
background: #fec;
}
.hero_bg{
height: 480px;
background-image: url('hero.jpg');/*シングルでもダブルコートでも可*/
background-size: cover; /*pxや％やcontainなどのいろんな指定がある*/
background-repeat: no-repeat;
background-position: center;/*画像を中心に配置*/
position: relative;/*相対配置：これを入れておくことで親要素を基準にのちのちabsoluteがかかる*/
}
.hero_title{
color: #fff;
line-height: 1.2;
position: absolute;/*0,0を基準にした絶対配置*/
top: 50%;
left: 2rem;
transform: translateY(-50%);/*縦の方向に、このhero_titleの自分自身のサイズの半分をマイナス方向に移動*/
text-shadow: 2px 2px 10px #555;/*みやすく*/
}
.hero_title p{
font-size: 0.8rem;
}
.hero_title h2{
font-weight: normal;
margin-top: 0;
margin-bottom:0.5rem;
}
逆に、先にクラスを作っておいて、
あとでhtmlのクラスに当てはめるという手法もある
htmlを上から順に作らなくてはいけないということではないので
最近はこれが主流らしい
.y_center{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
とか
.flex{
display:flex;
justify-content: space-between;
}
みたいに作っておいてから、あとでクラス名を振れば効率的、みたいな手法
