現象
CSSグリッドで画像(image_0.svg
)の位置を指定しても、指定した位置に画像がフィットしません。
期待値
画像がgrid-column: 3 / -3;
grid-row: facebook-logo;
で指定した位置にフィットさせたい。
再現手順
下記のコードを実行する。ちなみに、Facebookのモバイルでのログインページを模写コーディングしています。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Facebook-copy</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<header>
<i class="fas fa-mobile-alt"></i>
<div class="header-text">
<p>iPhone用Facebookで高速ブラウジング</p>
</div>
</header>
<div class="main">
<img class="facebook-logo-image" src="./image_0.svg" alt="facebookのロゴ">
<div class="login-form">
<form action="#">
<input type="email" name="mail">
<input type="password" name="pw">
<input type="submit" value="ログイン">
<p>または</p>
<a href="#">パスワードを忘れた場合</a>
<hr>
<button>新しいアカウントを作成</button>
</form>
</div>
<div class="under-login-form-text">
<p>有名人、バンド、ビジネスのために<a href="#">Facebookページを作成</a></p>
</div>
</div>
<footer>
<div class="language">
<p>日本語</p>
<a href="#">English (US)</a>
<a href="#">Português (Brasil) </a>
<a href="#">中文(简体) </a>
<a href="#">Español</a>
<a href="#">Français (France) </a>
<a href="#">Deutsch</a>
<button>+</button>
</div>
<div class="footer-menu">
<a href="#">Facebookについて</a>
<p>・</p>
<a href="#">ヘルプ</a>
<p>・</p>
<a href="#">その他</a>
</div>
<div class="copy-right">
<small>Facebook Inc.</small>
</div>
</footer>
</body>
</html>
stylesheet.css
@charset "UTF-8";
/* 基本設定 */
* {
margin: 0;
}
/* ページ全体の設定 */
body {
display: grid;
grid-template-columns: 15px 52px 1fr 52px 15px;
grid-template-rows:
[head] 45px
[facebook-logo] 40px
[login-form] 175px
[or] 15px
[create-new-account] 51px
[forget-password] 27px
[blank-middle] 35px
[language] 85px
[footer-menu] 11px
[copy-right] 15px
[blank-footer] 7px;
}
/* ヘッダー */
header {
grid-column: 2 / -2;
grid-row: head;
}
/* facebookロゴ */
.facebook-logo-img {
grid-column: 3 / -3;
grid-row: facebook-logo;
width: 112px;
height: 39.42px;
text-align: center;
}
皆さまご回答宜しくお願い致します。
追記
grid-template-rows
プロパティで指定している名前付き行のいくつかがどうしてCSSに存在しないのかと言いますと、まだ作成途中でCSSを記述している途中だからです。