A 回答 (2件)
- 最新から表示
- 回答順に表示
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 …
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>
お探しの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も見ています
-
性格の違いは生まれた順番で決まる?長男長女・中間子・末っ子・一人っ子の性格の傾向
同じ環境で生まれ育っても、生まれ順で性格は違うものなのだろうか。家庭教育研究家の田宮由美さんに教えてもらった。
-
こんなことてしますか??
C言語・C++・C#
-
プログラミング ソースコード
その他(プログラミング・Web制作)
-
どちのほうがすきですか?
C言語・C++・C#
-
-
4
ブラウザ自体の事じゃなくてJavaScriptで書かれたブラウザ上で動作するアプリのことをなんといい
JavaScript
-
5
Gitについて質問。 クローンしたフォルダをコピーして、色々書き換えて、 さらにクローンして、そこに
その他(プログラミング・Web制作)
-
6
プログラミング、アーキテクチャ好きに質問です。 kotlinなどのMVVM、単方向データフローの考え
その他(プログラミング・Web制作)
-
7
VBAに詳しい方教えてください。
Visual Basic(VBA)
-
8
小学1年生の子です。塾に行かせるのは難しいので、自宅で学べたらと思うのですが、子供にプログラミングを
その他(プログラミング・Web制作)
-
9
mallocについて
C言語・C++・C#
-
10
プログラミング
その他(プログラミング・Web制作)
-
11
Pythonって何を意識した言語なんですか?コマンドライン?
その他(プログラミング・Web制作)
-
12
テーブルのセルデータを自動改行させずに、はみ出た部分は切り捨てたい
HTML・CSS
-
13
プログラマーと学歴の関係性について
その他(プログラミング・Web制作)
-
14
楽しくて最高のプログラミング言語を作りたいのですが、そもそもプログラミング言語を作る意味なんてないと
その他(プログラミング・Web制作)
-
15
ジャバスクリプトについて。
JavaScript
-
16
プログラムについて。
JavaScript
-
17
これの対応OSを教えて下さい。php-8.3.0-src.zip
PHP
-
18
プログラミング言語の制作方法について
C言語・C++・C#
-
19
これなにがちがうんですか??
C言語・C++・C#
-
20
コードを直していただきたいです。 以下のコードはネットで拾ったものをほんの少しいじった物なのですが、
Visual Basic(VBA)
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
ホームページビルダー 空白の...
-
文字を中央に寄せる
-
HTMLフォームのSELECTの幅を一...
-
Dreamweaverで画面サイズを一定...
-
ドリームウィーバーでホームペ...
-
線が極端に細いテーブルで、特...
-
pタグによる段落間のアキ調整...
-
CSSでテキストを垂直、中央に設...
-
ヘッダーの上にほんのわずかに...
-
右寄せ表示方法
-
なぜ左に寄っているの?
-
CSSで、文字は左寄せにして、文...
-
*{margin:0px;padding:0px;}と...
-
htmlのタグ間の謎の空白
-
Microsoft1Officeの互換ソフト...
-
エクセルで一部分のセルの高さ...
-
敬語
-
実行結果をデジタル時計みたい...
-
エクセルでサイズ指定でPOP...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
<h1>タグの後の行間を詰めたい。
-
HTMLフォームのSELECTの幅を一...
-
インラインフレームの表示位置...
-
コードを書いて下さい( ; ; )...
-
端から端まで横線を引きたい
-
INPUT TEXT内の文字位置を指定...
-
なぜ左に寄っているの?
-
FireFoxで見るとブラウザの幅に...
-
iPhone用のサイトの文字がずれ...
-
<legend>で表示されるタイトル...
-
Formタグのブロックの高さについて
-
CSSでh1とその下の文字との行間...
-
Dreamweaverで画面サイズを一定...
-
macとwindowsのレイアウト崩れ...
-
ホームページビルダー 空白の...
-
text-alignの解除の方法
-
パソコンのみで反映される余白...
-
Firefox 横スクロールバーを表...
おすすめ情報