プロが教える店舗＆オフィスのセキュリティ対策術

うーん・・・

CSS初心者です。わかる方教えてください。

解決済

  • 質問者：denpataro
  • 質問日時：
  • 回答数：3件

画像の左上の背景色(plum－親要素)に重なるように、同位置で子要素の画像(xxx.png)を同高さ左詰め中央で配置したいのですが、表示できません。原因と対処法がしりたいです。htmlに<img src=xxx は避けたいです。
よろしくお願いいたします。

html

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
省略
<title>ホームページ</title>
<link rel="stylesheet" href="cssA/styleA.css">

</head>
<body>
<div class="wrapper" >
<header class="container">
<div class="header-left">h-left
<div id="image1">image1</div>
</div>
<div class="header-center">h-center</div>
<div class="header-right">h-right</div>
</header>
<div class="main">main</div>
<footer class="footer">footer</footer>
</div>
</body>
</html>

CSS

@charset "utf-8";
/*全体の設定
---------------------------------------------------------------------------*/
.wrapper {
max-width: 1200px;
margin: 0 auto;
}
header {
background: tomato;
opacity: 0.7;
max-width: 1200px;
height: 150px;
margin-left: auto;
margin-right: auto;
}
.container {
display:flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
}
.header-left{
height: 150px;
width: 40%;
background:plum;
position: relative;
}
.header-center{
margin-left: auto;
margin-right: auto;
height: 150px;
width: 40%;
background:gold;
}
.header-right{
margin-left: auto;
margin-right: auto;
display:flex;
height: 150px;
width: 20%;
background:lime;
}
header-left #image1{
position:absolute;
top:0;
bottom:0;
margin:auto;
background-image:url("../images/xxx.png");
background-position:center;
background-size: contain;
background-repeat: no-repeat;
}

.main {
margin: 0 auto; /* 外側の余白:上下 左右; auto で左右センタリング */
box-sizing: border-box; /* 幅を padding も含めた幅にする */
max-width:1200px;
background: blue;
}
footer {
background:olive;
}

「CSS初心者です。わかる方教えてください」の質問画像

質問者からの補足コメント

  • 説明が悪かったため、補足します。完成形の画像（仮の画像）を添付しました。（本番はロゴです）が、左詰めで、ヘッダーのh-leftの高さ中央に表示します。レイアウトの崩れを把握しやすいように背景色は完成までそのままで、画像を原寸でh-left（プラム色）に収まるように配置したいです。画像上乗せでも、h-leftに入れ込んでもかまいませんが、色は残します。文字image1は消したいです。

    「CSS初心者です。わかる方教えてください」の補足画像1
      補足日時：2023/09/10 13:54
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： gura_
  • 回答日時：

denpataro さん


　･････子要素の画像(xxx.png)を同高さ左詰め中央で配置･･････

「左詰め中央」の意味がよく分かりません･･･。
＊仕上がり予定図の添付があると良いですね。

こういう事ですか。↓

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ホームページ</title>
<style>
@charset "utf-8";
.wrapper {
max-width: 1200px;
margin: 0 auto;
}
header {
background: tomato;
opacity: 0.7;
max-width: 1200px;
height: 150px;
margin-left: auto;
margin-right: auto;
}
.container {
display:flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
}
.header-left{
height: 150px;
width: 40%;
background:plum;
position: relative;
display: flex; justify-content: center; align-items: center;
}
.header-center{
margin-left: auto;
margin-right: auto;
height: 150px;
width: 40%;
background:gold;
}
.header-right{
margin-left: auto;
margin-right: auto;
display:flex;
height: 150px;
width: 20%;
background:lime;
}
#image1{ /* header-center 削除 */
/* この間変更
position:absolute;
top:0;
bottom:0;
margin:auto;
background-image:url("../images/xxx.png");
background-position:center;
background-size: contain;
background-repeat: no-repeat;
*/

width: 60%; height: 100%; /* width は適宜調整 */
background-image:url("https://oshiete.xgoo.jp/images/v2/common/profile …
background-size: 100% 100%;
}

.main {
margin: 0 auto; /* 外側の余白:上下 左右; auto で左右センタリング */
box-sizing: border-box; /* 幅を padding も含めた幅にする */
max-width:1200px;
background: blue;
}
footer {
background:olive;
}
</style>
</head>
<body>
<div class="wrapper" >
<header class="container">
<div class="header-left">
<div id="image1">h-left - image1</div>
</div>
<div class="header-center">h-center</div>
<div class="header-right">h-right</div>
</header>
<div class="main">main</div>
<footer class="footer">footer</footer>
</div>
</body>
</html>
「CSS初心者です。わかる方教えてください」の回答画像3
    • good
    • 0
    • 件
通報する

参考程度に

No.2

  • 回答者： fujillin
  • 回答日時：

No1です。



＞文字サイズの画像を大きくしないといけませんが～～
#image1の要素の目的がわかりませんけれど、CSSでwidthを指定すれば、指定のサイズになります。

何をなさりたいのか実際のところが不明なので、よくわかりませんけれど・・

もしも、背景画像だけを大きくしたいのなら、背景画像は元の要素のサイズを超えて表示することは不可能です。（あくまでも「背景」なので・・）
#image1の要素の内容がテキスト（＝ご提示の例ではimage1）だけ、あるいは何もなく背景画像を表示するためだけの要素であるなら、背景画像を#image1に設定する必要はないのかも知れません。
親要素（＝.header-left）の背景画像として設定しておけば、それで済む話なのかもしれない気もします。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： fujillin
  • 回答日時：

こんばんは



＞header-left #image1{　～～～
で指定しているのだと想像しますけれど、「header-left」はクラス名なので「.header-left」としないとこの指定全体が適用されません。
（ご提示の状態は、適用されていない状態だと想像されます）
更には、idで指定しているので、「.header-left」も不要ですね。
（詳細度を調整するために、付加している　ならそれでもよいですが・・）

＞同高さ左詰め中央で配置したい
親要素と同じ高さということですよね？
「左詰め中央」の意味が不明ですが、「left:0;」で左詰めにはできるでしょうから、左右中央配置になさりたいものと勝手に推測してみました。

#image1{
position: absolute;
top: 0;
left: 50%; transform: translateX(-50%);
height: 100%;
}
などとすることで、#image1要素は親要素と同じ高さで左右中央に表示されると思います。

※ 幅は指定していませんので、内包要素の内容によって幅が決まります。
　（ご提示の例では、文字列の「image1」の幅になります）
※ #image1内のレイアウトを指定したければ、更に、レイアウトを追加してください。
　（上記は無指定なので、通常の上詰めのレイアウトになるはずです）
※ 上記で決まる要素サイズに対して、背景画像が表示されることになりますが、背景画像をどのようにレイアウトしたいのか不明なので、こちらではわかりかねます。
　background-position
　background-size
などの、指定内容によって調節してください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

助かりました

ありがとうございます。画像は文字サイズで表記されました。文字サイズの画像を大きくしないといけませんが、一歩前進しました。

通報する
お礼日時：2023/09/09 07:06

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報