質問編集履歴

2 必要事項の修正

shouwuh score 3

2021/03/24 15:54  投稿

要素を縦または横並びにさせたい

### 前提・実現したいこと

プログラミングを勉強していて、あるサイトの写しをしています。

要素を横並びにしたいんですが一つだけ横並びにならず場所が固定されてしまっている。

class="life-style" class="chapteritem-one" class="chapteritem-two"この三つの要素を横並びにしたいんですがclass="life-style"の一つだけ横並びにならず場所が固定されてしまっている。

レスポンシブデザインとしてモバイルサイズでは縦並びにさせたい

### 発生している問題・エラーメッセージ

```

エラーメッセージ

```

### 該当のソースコード

```HTML

<div class="all-two">

<div data-reactroot>

<div class="container-two">

<div class="container-two">---

<div class="life-style">ホスティングで実現する、自分らしいライフスタイル</div>

<div class="hosting-chapter">

<div class="chapteritem-one">

<div class="title-one">ホスティングで広がる可能性</div>

<div class="list-one">柔軟な働き方を楽しみながら、ホスティングをとおして、好きなことをもっとするための収入アップや長く続く友情関係にめぐりあう機会を得てみませんか。</div>

<div class="link-one">

<a target="blank" href="#" class="hosting-world">ホスティングの世界を知ろう</a>

</div>

</div>

<div class="chapteritem-two">

<div class="title-two">安心のホスティング</div>

<div class="list-two">24時間365日対応サポート、頼れるホストコミュニティからツールのカスタム設定、ヒント・実践アドバイスのご提供、Airbnbが全力でホストの成功をサポートします。</div>

<div class="link-two">

<a target="blank" href="#" class="hosting-surport">Airbnbによるホストのサポート体制</a>

</div>

</div>

</div>

</div>

<div></div>

</div>

</div>

```

```CSS

.all-two {

width: 100%;

}

.all-two::before {

display: flex;

content: '';

}

.all-two::after {

display: flex;

content: '';

}

@media (min-width: 744px) {

.container-two {

padding-left: 40px;

padding-right: 40px;

margin-top: 48px;

margin-bottom: 48px;

}

}

.container-two {

-webkit-box-direction: normal;

-webkit-box-orient: vertical;

-webkit-box-pack: justify;

-webkit-box-align: start;

max-width: 1760px;

display: flex;

align-items: flex-start;

justify-content: space-between;

flex-direction: column;

}

@media (min-width: 744px) {

.life-style {

margin-bottom: 64px;

margin-top: 0px;

padding-left: 0px;

padding-right: 0px;

font-size: 46px;

line-height: 48px;

transform: translateY(-20px);

}

}

.life-style {

font-family: sans-serif;

font-weight: 400;

color: #000;

max-width: 404px;

position: relative;

}

@media (min-width: 744px) {

.hosting-chapter {

-webkit-box-pack: justify;

-webkit-box-direction: normal;

-webkit-box-orient: horizontal;

padding-left: 0px;

margin-bottom: 0px;

flex-direction: row;

justify-content: space-between;

}

}

.hosting-chapter {

width: 100%;

display: flex;

flex-wrap: wrap;

}

.chapteritem-one {

flex-basis: 100%;

flex: 1;

max-width: 313px;

margin-right: 16px;

}

.title-one {

max-width: 313px;

font-family: sans-serif;

margin-bottom: 16px;

font-weight: 600;

color: #333333;

font-size: 24px;

line-height: 30px;

}

.list-one {

max-width: 313px;

font-family: sans-serif;

color: #484848;

font-size: 16px;

line-height: 25px;

margin-bottom: 16px;

}

.link-one {

margin-top: 32px;

}

.hosting-world {

font-size: inherit;

font-family: inherit;

font-style: inherit;

font-variant: inherit;

line-height: inherit;

color: #222222;

text-decoration: underline;

border-radius: 4px;

font-weight: 600;

outline: none;

}

.chapteritem-two {

flex-basis: 100%;

flex: 1;

max-width: 313px;

}

.title-two {

max-width: 313px;

font-family: sans-serif;

margin-bottom: 16px;

font-weight: 600;

color: #333333;

font-size: 24px;

line-height: 30px;

}

.list-two {

max-width: 313px;

font-family: sans-serif;

color: #484848;

font-size: 16px;

line-height: 25px;

margin-bottom: 16px;

}

.link-two {

margin-top: 32px;

}

.hosting-surport {

font-size: inherit;

font-family: inherit;

font-style: inherit;

font-variant: inherit;

line-height: inherit;

color: #222222;

text-decoration: underline;

border-radius: 4px;

font-weight: 600;

outline: none;

}

```

### 試したこと

flexやcolumnなどを試したのですができません。

### 補足情報（FW/ツールのバージョンなど）

初心者で分からなくなってしまい手詰まりとなってしまいました

助けていただけると幸いです

HTMLのコードなどほかに必要な情報があれば教えてください

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

1 必要事項の追加

shouwuh score 3

2021/03/24 14:22  投稿

要素を横並びにさせたいができない

要素を縦または横並びにさせたい

### 前提・実現したいこと

プログラミングを勉強していて、あるサイトの写しをしています。

要素を横並びにしたいんですが一つだけ横並びにならず場所が固定されてしまっている。

レスポンシブデザインとしてモバイルサイズでは縦並びにさせたい

### 発生している問題・エラーメッセージ

```

エラーメッセージ

```

### 該当のソースコード

```HTML

<div class="all-two">

<div data-reactroot>

<div class="container-two">

<div class="life-style">ホスティングで実現する、自分らしいライフスタイル</div>

<div class="hosting-chapter">

<div class="chapteritem-one">

<div class="title-one">ホスティングで広がる可能性</div>

<div class="list-one">柔軟な働き方を楽しみながら、ホスティングをとおして、好きなことをもっとするための収入アップや長く続く友情関係にめぐりあう機会を得てみませんか。</div>

<div class="link-one">

<a target="blank" href="#" class="hosting-world">ホスティングの世界を知ろう</a>

</div>

</div>

<div class="chapteritem-two">

<div class="title-two">安心のホスティング</div>

<div class="list-two">24時間365日対応サポート、頼れるホストコミュニティからツールのカスタム設定、ヒント・実践アドバイスのご提供、Airbnbが全力でホストの成功をサポートします。</div>

<div class="link-two">

<a target="blank" href="#" class="hosting-surport">Airbnbによるホストのサポート体制</a>

</div>

</div>

</div>

</div>

<div></div>

</div>

</div>

```CSS

.all-two {

width: 100%;

}

.all-two::before {

display: flex;

content: '';

}

.all-two::after {

display: flex;

content: '';

}

@media (min-width: 744px) {

.container-two {

padding-left: 40px;

padding-right: 40px;

margin-top: 48px;

margin-bottom: 48px;

}

}

.container-two {

-webkit-box-direction: normal;

-webkit-box-orient: vertical;

-webkit-box-pack: justify;

-webkit-box-align: start;

max-width: 1760px;

display: flex;

align-items: flex-start;

justify-content: space-between;

flex-direction: column;

}

@media (min-width: 744px) {

.life-style {

margin-bottom: 64px;

margin-top: 0px;

padding-left: 0px;

padding-right: 0px;

font-size: 46px;

line-height: 48px;

transform: translateY(-20px);

}

}

.life-style {

font-family: sans-serif;

font-weight: 400;

color: #000;

max-width: 404px;

position: relative;

}

@media (min-width: 744px) {

.hosting-chapter {

-webkit-box-pack: justify;

-webkit-box-direction: normal;

-webkit-box-orient: horizontal;

padding-left: 0px;

margin-bottom: 0px;

flex-direction: row;

justify-content: space-between;

}

}

.hosting-chapter {

width: 100%;

display: flex;

flex-wrap: wrap;

}

.chapteritem-one {

flex-basis: 100%;

flex: 1;

max-width: 313px;

margin-right: 16px;

}

.title-one {

max-width: 313px;

font-family: sans-serif;

margin-bottom: 16px;

font-weight: 600;

color: #333333;

font-size: 24px;

line-height: 30px;

}

.list-one {

max-width: 313px;

font-family: sans-serif;

color: #484848;

font-size: 16px;

line-height: 25px;

margin-bottom: 16px;

}

.link-one {

margin-top: 32px;

}

.hosting-world {

font-size: inherit;

font-family: inherit;

font-style: inherit;

font-variant: inherit;

line-height: inherit;

color: #222222;

text-decoration: underline;

border-radius: 4px;

font-weight: 600;

outline: none;

}

.chapteritem-two {

flex-basis: 100%;

flex: 1;

max-width: 313px;

}

.title-two {

max-width: 313px;

font-family: sans-serif;

margin-bottom: 16px;

font-weight: 600;

color: #333333;

font-size: 24px;

line-height: 30px;

}

.list-two {

max-width: 313px;

font-family: sans-serif;

color: #484848;

font-size: 16px;

line-height: 25px;

margin-bottom: 16px;

}

.link-two {

margin-top: 32px;

}

.hosting-surport {

font-size: inherit;

font-family: inherit;

font-style: inherit;

font-variant: inherit;

line-height: inherit;

color: #222222;

text-decoration: underline;

border-radius: 4px;

font-weight: 600;

outline: none;

}

```

### 試したこと

flexやcolumnなどを試したのですができません。

### 補足情報（FW/ツールのバージョンなど）

初心者で分からなくなってしまい手詰まりとなってしまいました

助けていただけると幸いです

HTMLのコードなどほかに必要な情報があれば教えてください

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