A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
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>
No.1
- 回答日時:
コード例
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 …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- Word(ワード) ワード。長い四角の中に文字を体裁良く入力するには。 2 2022/09/24 14:19
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- 面接・履歴書・職務経歴書 履歴書の写真のサイズが合いません 証明写真機で履歴書サイズに指定し撮影したのに貼り付けてみたら上下左 5 2023/06/19 16:24
- Visual Basic(VBA) 【VBA】写真の貼り付けコードがうまく機能しません。 5 2022/09/01 18:43
- プリンタ・スキャナー エプソンのプリンターPX-1600Fについて質問です 2 2022/06/24 19:24
- JavaScript Cookieに保存されない 1 2023/12/26 18:45
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
- 防災 【自衛隊のPX品のPXってどういう意味ですか?】 3 2022/07/02 13:12
- 楽器・演奏 電子キーボードのCASIO Privia PX-S1100 とPrivia PX-S1000のどちら 1 2023/07/31 20:56
このQ&Aを見た人はこんなQ&Aも見ています
-
風水の観点で選ぶ観葉植物とは?置き場所や上げたい運気ごとの注意点を紹介!
観葉植物で運気をアップするコツを、風水デザイン1級建築士の福島昌彦さんに伺った。
-
どちのほうがすきですか?
C言語・C++・C#
-
こんなことてしますか??
C言語・C++・C#
-
プログラミング ソースコード
その他(プログラミング・Web制作)
-
-
4
ブラウザ自体の事じゃなくてJavaScriptで書かれたブラウザ上で動作するアプリのことをなんといい
JavaScript
-
5
プログラミング、アーキテクチャ好きに質問です。 kotlinなどのMVVM、単方向データフローの考え
その他(プログラミング・Web制作)
-
6
Gitについて質問。 クローンしたフォルダをコピーして、色々書き換えて、 さらにクローンして、そこに
その他(プログラミング・Web制作)
-
7
VBAに詳しい方教えてください。
Visual Basic(VBA)
-
8
mallocについて
C言語・C++・C#
-
9
プログラミング
その他(プログラミング・Web制作)
-
10
小学1年生の子です。塾に行かせるのは難しいので、自宅で学べたらと思うのですが、子供にプログラミングを
その他(プログラミング・Web制作)
-
11
過剰なオブジェクト指向脳からの脱却について
その他(プログラミング・Web制作)
-
12
Pythonって何を意識した言語なんですか?コマンドライン?
その他(プログラミング・Web制作)
-
13
テーブルのセルデータを自動改行させずに、はみ出た部分は切り捨てたい
HTML・CSS
-
14
楽しくて最高のプログラミング言語を作りたいのですが、そもそもプログラミング言語を作る意味なんてないと
その他(プログラミング・Web制作)
-
15
プログラマーと学歴の関係性について
その他(プログラミング・Web制作)
-
16
プログラムについて。
JavaScript
-
17
VBA レジストリの値の読み方について教えてください
Visual Basic(VBA)
-
18
ジャバスクリプトについて。
JavaScript
-
19
プログラミング言語で、使えるクラス沢山ありますが、以下のようなクラスってなんて名前ですか? 例えば1
PHP
-
20
オブジェクト指向プログラミングにおいて Aというクラスと Bというプロパティ(ゲッターとセッターはこ
その他(プログラミング・Web制作)
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<h1>タグの後の行間を詰めたい。
-
なぜ左に寄っているの?
-
スタイルシートで
-
macとwindowsのレイアウト崩れ...
-
CSSでh1とその下の文字との行間...
-
text-alignの解除の方法
-
CSSの設定
-
html,css 全体的に真ん中寄せに...
-
ランディングページのヘッダー...
-
CSSのtransform: translate(-50...
-
道路幅を調べたいのですが
-
パソコンサイズが横30cm縦20cm...
-
指定時間になったら、WEBサイト...
-
HPビルダーで、表を等間隔で...
-
word,excelで、cm...
-
エクセルでサイズ指定でPOP...
-
HTMLでブラウザを終了させる方法
-
gooブログに表を挿入できないで...
-
Excelの列や行の幅を表示...
-
ホームページビルダーで表の列...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
<h1>タグの後の行間を詰めたい。
-
HTMLフォームのSELECTの幅を一...
-
インラインフレームの表示位置...
-
INPUT TEXT内の文字位置を指定...
-
コードを書いて下さい( ; ; )...
-
text-alignの解除の方法
-
FireFoxで見るとブラウザの幅に...
-
なぜ左に寄っているの?
-
端から端まで横線を引きたい
-
ホームページビルダー 空白の...
-
アップロードするサーバーによ...
-
CSSでh1とその下の文字との行間...
-
CSSの設定
-
Formタグのブロックの高さについて
-
<legend>で表示されるタイトル...
-
ie8とCSSとマウスオーバーで何...
-
chromeだけbody直下に空白が開く
-
macとwindowsのレイアウト崩れ...
おすすめ情報