重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

急いでいます！

コードを書いて下さい（ ; ; ）写真有り

締切済

  • 質問者：Jijtmdp745j
  • 質問日時：
  • 回答数：2件

添付している写真の
html cssのコードを書いていただきたいです

白長方形の幅は1200px
画像の大きさ幅600px 縦408px

テキスト内につきまして

タイトルはh3

上部の余白56px
右側の余白75px(写真との余白)
下側の余白134px
左側の余白100px

ノーコードで作成していたのですが、
うまくいかず、、、分かる方コードを手入力しようと思っています…よろしくお願いします（ ; ; ）

「コードを書いて下さい（ ; ; ）写真有」の質問画像
通報する

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

質問の本文を隠す

A 回答 (2件)

No.2

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

Jijtmdp745j さん


　･････添付している写真のhtml cssのコード･･･････

例えば、↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
body{background-color: #cf8;}
.wrap { margin:10px auto 30px; position: relative;
width: 1200px;
display: flex;
background:#fff; padding:0; gap: 20px;
border-radius: 40px;
}
.wrap .txt { padding: 56px 75px 134px 100px; }
.wrap .txt h3 { margin: 0 0 60px 0; text-align: center; }
.wrap .img { background:#ffd; }
.wrap .img img { width: 600px; height: 408px; padding: 0; vertical-align: bottom; }
.wrap:nth-of-type(even) { flex-direction:row-reverse; }
.wrap:nth-of-type(odd) .img { border-radius:0 40px 40px 0; }
.wrap:nth-of-type(even) .img { border-radius:40px 0 0 40px; }

</style>
</head>
<body>
<div class="wrap">
<div class="txt">
<h3>タイトル</h3>
<div>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>
<div class="img"><img src="https://oshiete.xgoo.jp/images/feeling/qjiro/pc/ … ></div>
</div>

<div class="wrap">
<div class="txt">
<h3>タイトル</h3>
<div>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>
<div class="img"><img src="https://oshiete.xgoo.jp/images/feeling/qjiro/pc/ … ></div>
</div>

<div class="wrap">
<div class="txt">
<h3>タイトル</h3>
<div>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>
<div class="img"><img src="https://oshiete.xgoo.jp/images/feeling/qjiro/pc/ … ></div>
</div>

<div class="wrap">
<div class="txt">
<h3>タイトル</h3>
<div>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>
<div class="img"><img src="https://oshiete.xgoo.jp/images/feeling/qjiro/pc/ … ></div>
</div>

</body>
</html>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： Ogre7077
  • 回答日時：

コード例


https://developer.mozilla.org/ja/docs/Web/CSS/wi …
https://developer.mozilla.org/ja/docs/Web/CSS/he …
https://developer.mozilla.org/ja/docs/Web/CSS/ba …
https://developer.mozilla.org/ja/docs/Web/CSS/ba …
https://developer.mozilla.org/ja/docs/Web/HTML/E …
https://developer.mozilla.org/ja/docs/Web/CSS/pa …
https://developer.mozilla.org/ja/docs/Web/CSS/pa …
https://developer.mozilla.org/ja/docs/Web/CSS/pa …
https://developer.mozilla.org/ja/docs/Web/CSS/pa …

コードを書いてくれるサービスの例
https://www.adobe.com/jp/products/dreamweaver.html
https://ja.wix.com/website/design
https://www.lancers.jp/menu/browse/graphics_desi …
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報