質問編集履歴

2 必要事項の修正

shouwuh

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で作成されています。

  • CSS

    17480 questions

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

1 必要事項の追加

shouwuh

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で作成されています。

  • CSS

    17480 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る