🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

HTML

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

CSS

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

Q&A

解決済

1回答

2741閲覧

左に画像、右にテキストを配置しつつレイアウトを整えたい

_505turkish

総合スコア6

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/12/07 04:41

編集2020/12/07 14:08

前提

HTML/CSSを学習中です。
現在、実践演習中で模写コーディングを行っています。
↓イメージの様なLPを目指しています。
イメージ説明
###実現したいこと
↓イメージの赤枠で囲まれた部分の様に、
左:画像、右:テキスト を配置しつつ、
左画像、右テキストを共に中央に寄せて配置したいのですが、画像が左寄せになってしまいます。
解決策の回答をお願いします。
######本来指定したい状態 ※赤枠部
イメージ説明

######現在の誤りのある状態 ※赤枠部
※左に配置した画像の中央寄せが適用されていない
イメージ説明

補足情報(FW/ツールのバージョンなど)

使用機器:Dynabook 15インチ
使用ブラウザ:Chrome
使用エディタ:Visual Studio Code

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>デイトラ/copy</title> 7 <link rel="stylesheet" href="stylesheet.css"> 8 9</head> 10<body> 11 <header> 12 <div class="container"> 13 <div class="header-left"> 14 <h2>30DAYSトライアル</h2> 15 </div> 16 <div class="header-right"> 17 <a href="#">デイトラとは</a> 18 <a href="#">コース一覧</a> 19 <a href="#">お問い合わせ</a> 20 </div> 21 </div> 22 </header> 23 <div class="main"> 24 <div class="container"> 25 <h1>1日1題30日で<br>プロのWebエンジニアになろう!</h1> 26 <p>毎日指定された課題をこなすだけ!未経験から<br>30日でプログラミングスキルが身に付きます</p> 27 </div> 28 </div> 29 <div class="about-wrap"> 30 <div class="container"> 31 <div class="heading"> 32 <h1>デイトラとは</h1> 33 </div> 34 <div class="about"> 35 <div class="box"> 36 <img src="img/about.png" > 37 <div class="right"> 38 <p>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学<br>習アプリです。毎日設定された課題をこなしていくだけで、未経<br>験から30日でプログラミングスキルが身に付きます。<br>1日1題30日でプロのWebエンジニアを目指しましょう! 39 </p> 40 </div> 41 </div> 42 43 <!-- デイトラとは、無料で・迷わず・楽しく学べるプログラミング学<br>習アプリです。毎日設定された課題をこなしていくだけで、未経<br>験から30日でプログラミングスキルが身に付きます。<br>1日1題30日でプロのWebエンジニアを目指しましょう! --> 44 45 </div> 46 </div> 47 </div> 48 </div> 49 </div> 50 <div class="service"></div> 51 <div class="contact"></div> 52 <footer></footer> 53</body> 54</html>

css

1* { 2 color: navy; 3 text-decoration: none; 4 box-sizing: border-box; 5} 6 7div { 8 display: block; 9} 10header { 11 height: 65px; 12 width: 100%; 13 background-color: white; 14 position: fixed; 15 top: 0; 16 z-index: 10; 17} 18.header-left { 19 float: left; 20 margin-left: 200px; 21} 22.header-right { 23 float: right; 24 margin-right: 200px; 25} 26.header-right a { 27 line-height: 65px; 28 padding: 0 25px; 29 /* color: white; */ 30 display: block; 31 float: left; 32 transition: all 0.5s; 33} 34 35.main h1 { 36 /* opacity: 0.7; */ 37 font-size: 45px; 38 /* letter-spacing: 5px; */ 39} 40h1 { 41 display: block; 42 font-size: 2em; 43 margin-block-start: 0.67em; 44 margin-block-end: 0.67em; 45 margin-inline-start: 0px; 46 margin-inline-end: 0px; 47 font-weight: bold; 48} 49.main { 50 padding: 180px 0 100px 0; 51 background-image: url(img/main-vsual-nontitle.png); 52 /* color: white; */ 53 background-size: cover; 54 text-align: center; 55} 56.about-section { 57 float: left; 58} 59.heading { 60 padding-top: 30px; 61 padding-bottom: 30px; 62 text-align: center; 63} 64 65.about { 66 text-align: center 67} 68.box { 69 margin: 10px 0; 70 float: left; 71 width: 100%; 72 73} 74.box img { 75 max-width: 40%; 76 float: left; 77} 78.box p { 79 margin: 0; 80 padding: 10px; 81} 82.right { 83 width: 60%; 84 float: left; 85}

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

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

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

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

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

guest

回答1

0

ベストアンサー

こんにちは。

以下を追加するとどうですか?

css

1.box { 2 display: flex; 3 justify-content: center; 4} 5

投稿2020/12/07 05:35

Lhankor_Mhy

総合スコア36928

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

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

_505turkish

2020/12/07 06:02

ご回答ありがとうございます。 追加してみましたがレイアウトに変化は見られませんね どうすれば解決したものか…
Lhankor_Mhy

2020/12/07 06:05

当方では解決します。ご提示いただいていない部分のコードが原因かもしれませんね。
_505turkish

2020/12/07 07:11

ありがとうございます。 サンプルを参照し、サンプル内のコードをエディタへコピペしましたがレイアウトに変化は見られませんでした。 コードもHTML・CSS共にすべて提示したはずなのですが…
Lhankor_Mhy

2020/12/07 07:21

繰り返しになって申し訳ないですが、サンプルではレイアウトに変化が見られたのかどうかを教えてください。
_505turkish

2020/12/07 08:10

URL内のレイアウトでしたか。認識を誤って返信してました。お手数お掛けしてすみません。 サンプル内の変化は見られます。サンプル内レイアウトは私が目指しているイメージに近いです。 サンプル内テキストは問題なく表示されています。 サンプル内画像は本来指定したものから、別の物(about.pngと中央に表示された画像)に差し代わっています。
Lhankor_Mhy

2020/12/07 12:20

ご提示のコードでは、CSS読み込みを2つ行っているようですが、ご提示いただいているのは1つだと思います。 もう1つの方に原因があるのでは?
_505turkish

2020/12/07 13:15

ご指摘ありがとうございます。 質問の情報に不備がありましたので、情報を修正して後ほど再投稿します。
Lhankor_Mhy

2020/12/07 17:26 編集

質問の編集拝読。特に回答に変更するべきところはないと思いますが、とりあえず、 .right { width: 60%; float: left; } ↑これを全部消してみてはどうでしょうか。
_505turkish

2020/12/08 02:32

解決しました。ありがとうございます。 .right { width: 60%; float: left; } ↑これを全部消し... .box { display: flex; justify-content: center; } ↑を追加することで解決しました。 ご丁寧にご教示いただき、ありがとうございました。
Lhankor_Mhy

2020/12/08 02:44

ご解決されて何よりです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問