質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

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

CSS

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

Q&A

解決済

2回答

1208閲覧

背景画像を真ん中から展開したいのですが、どうすれば出来ますか?

takawork

総合スコア95

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/08/04 11:25

HTML初心者です。ゴリラの画像を真ん中から展開したいのですが、左から展開して、右の余った部分にリピートが生まれてしまいます。
ど真ん中から展開させるにはどうすれば良いですか?
またヘッダーと同じ大きさに拡大してぴったり合わせるにはどうすれば良いですか?

ヘッダーやコンテンツ、フッターの大きさは1140pxで、
ゴリラの画像は960*503pxです。
余白が生まれずにぴったりとしたカバーにしたいと思ってます。
あとヘッダーが太いので細くしたいのですが、細くなりません。
何卒よろしくお願いします。
イメージ説明
【HTML】

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Document</title> <link rel="stylesheet" type="text/css" href="./css/style.css"> </head> <body> <header class="header"> <div class="navbar"> <div class="logo"> <img src="img/logo.png" alt="ZOOLOPA2"> </div> <div> <div class="global-nav"> <ul> <li><a href="#">動物</a></li> <li><a href="#">zoolopaとは</a></li> <li><a href="#">イベント</a></li> <li><a href="#">よくある質問</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div> </div> </div> </header> <div class="hero"> <div class="lead"> <h1>俺に会いに来いよ</h1> <p>待ってるからさ</p> </div> </div> <div class="content"> <div class="main"> <h1>注目の動物</h1> <div class="section"> <div class="images"> <img src="img/panda.jpg" alt="パンダの画像"> </div> <div class="text"> <h2>パンダ</h2> <p>パンダはマジでかわいいよね。</p> </div> </div> <div class="section"> <div class="images"> <img src="img/zou.jpeg" alt="象の画像"> </div> <div class="text"> <h2>象</h2> <p>象はマジで大きいよね。</p> </div> </div> <div class="section"> <div class="images"> <img src="img/raion.jpeg" alt="ライオンの画像"> </div> <div class="text"> <h2>ライオン</h2> <p>ライオンはマジで凶暴よね。</p> </div> </div> </div>
<div class=sidebar> <div class="pengin"> <h1>秋のペンギン祭り</h1> <p>ペンギンと地獄の果てまで戯れよう!</p> <img src="img/pengin.jpeg" alt="ペンギンの画像"> </div> <div class="fes"> <h1>秋の大運動会</h1> <p>夜はクラブで大暴れしよう!</p> <img src="img/club.jpg" alt="クラブの画像"> </div> </div> </div> <div class="footer"> <p>フッター</p> </div>
</body> </html> 【CSS】 .header { background-color: aquamarine; max-width: 1140px; margin: 0 auto; } .navbar { display: flex; align-items: center; margin: 0 auto; justify-content: space-between; } .logo { display: flex; align-items: center; } .global-nav a { color: red; }

.global-nav ul{
display: flex;
list-style: none;
}
.global-nav li{
margin: 1rem;
font-weight: 600;
}
.hero {
background-image: url(../img/gorira.jpeg);
background-size: contain;
min-height: 503px;
display: flex;
justify-content: center;
align-items: center;
max-width: 1140px;
margin: 0 auto;
}
.lead {
background-color: aquamarine;
color: red;
text-align: center;
}
.content {
display: flex;
max-width: 1140px;
margin: 0 auto;
background-color: pink;
}
.main {
flex: 5;
margin: 1em;
}
.sidebar {
flex: 2;
margin: 1em;
}
.main img {
width: 100%;
}
.sidebar img {
width: 80%;
}
.section {
display: flex;
}
.images {
flex: 2;
}
.text{
flex: 5;
margin: 1em;
}
.footer{
width: 1140px;
background-color: gray;
min-height: 200px;
display: flex;
justify-content: center;
align-items: center;
max-width: 1140px;
margin: 0 auto;
}
.footer p {
color: aquamarine;
}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

ど真ん中から展開させるにはどうすれば良いですか? またヘッダーと同じ大きさに拡大してぴったり合わせるにはどうすれば良いですか?

background-size: cover; background-position: center;

あとヘッダーが太いので細くしたいのですが、細くなりません。

ul のブラウザ既定のマージンがあるのでそれを打ち消せばいいでしょう。

css

1/*前略*/ 2 3.global-nav ul{ 4 display: flex; 5 list-style: none; 6 margin: 0; /* 追加 */ 7} 8.global-nav li{ 9 margin: 1rem; 10 font-weight: 600; 11} 12.hero { 13 background-image: url(https://placehold.jp/600x400.png); 14 background-size: cover; /* 追加 */ 15 background-position: center; /* 追加 */ 16 min-height: 503px; 17 18/*効力*/

投稿2020/08/04 13:02

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takawork

2020/08/04 14:17

無事に解決出来ました。わかりやすい回答ありがとうございます。
guest

0

background-position: center top;
を付けてみてください。

投稿2020/08/04 12:11

miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問