質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

Q&A

解決済

2回答

1177閲覧

子要素のwidthが100%にならない

yukitur

総合スコア9

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/07/27 14:02

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>isara</title> 7 <link rel="stylesheet" href="main.css"> 8 <link rel="stylesheet" href="responsive.css"> 9 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 10 <script defer="" src="https://use.fontawesome.com/releases/v5.13.1/js/all.js"></script> 11 <script defer="" src="https://use.fontawesome.com/releases/v5.13.1/js/v4-shims.js"></script> 12 <script src="./jquery-3.5.1.min.js"></script> 13</head> 14<body> 15 <div class="wrapper3"> 16 <div> 17 <h2>iSaraで「基本的なプログラミングスキル」は教えません</h2> 18 <p id="f-4">基礎的なプログラミングスキルは無料で学べる時代。</p> 19 <p id="f-4">iSaraでは、基礎知識学習は<span>事前課題</span><span>チャットサポートのみ。<span</p> 20 <div class="wra3-content"> 21 <div class="wra3-left"> 22 <p id="step">STEP.1</p> 23 <p id="f-5">【バンコク渡航前1ヶ月】</p> 24 <p>事前課題で基礎知識を学ぶ</p> 25 </div> 26 <div class="wra3-center"> 27 <p id="step">STEP.2</p> 28 <p id="f-5">【バンコク到着後】</p> 29 <p>実践的に稼ぐことに特化した学習</p> 30 </div> 31 <div class="wra3-right"> 32 <p id="step">STEP.3</p> 33 <p id="f-5">【バンコク帰国後】</p> 34 <p>講座実施後の案件獲得サポート</p> 35 </div> 36 </div> 37 <div class="wra3-bottom"> 38 <p>スキルアップしてもフリーランスエンジニアとして食べていくことは難しい。</p> 39 <p>フリーランスには <span>プログラミングスキル以外<spanが大切。</p> 40 </div> 41 </div> 42 </div> 43</body> 44</html>

css

1.wrapper3 { 2 display: -webkit-box; 3 display: -ms-flexbox; 4 display: flex; 5 -webkit-box-pack: center; 6 -ms-flex-pack: center; 7 justify-content: center; 8 -webkit-box-align: center; 9 -ms-flex-align: center; 10 align-items: center; 11 padding-top: 70px; 12 text-align: center; 13 background-color: #c7cac7; 14} 15 16.wrapper3 h2 { 17 font-size: 28px; 18 padding-bottom: 20px; 19 color: white; 20} 21 22.wra3-content { 23 display: -webkit-box; 24 display: -ms-flexbox; 25 display: flex; 26 width: 1170px; 27 -ms-flex-pack: distribute; 28 justify-content: space-around; 29 margin: 30px auto; 30} 31 32.wra3-left { 33 -ms-flex-preferred-size: 310px; 34 flex-basis: 310px; 35 background-color: white; 36 border-radius: 0.3em; 37 padding: 30px; 38} 39 40.wra3-left p { 41 font-weight: bold; 42} 43 44.wra3-center { 45 -ms-flex-preferred-size: 310px; 46 flex-basis: 310px; 47 background-color: white; 48 border-radius: 0.3em; 49 padding: 30px; 50} 51 52.wra3-center p { 53 font-weight: bold; 54} 55 56.wra3-right { 57 -ms-flex-preferred-size: 310px; 58 flex-basis: 310px; 59 background-color: white; 60 border-radius: 0.3em; 61 padding: 30px; 62} 63 64.wra3-right p { 65 font-weight: bold; 66} 67 68#step { 69 color: white; 70 font-weight: bold; 71 background-color: #ebb94d; 72 border-radius: 0.3em; 73 margin-bottom: 25px; 74 letter-spacing: 2px; 75} 76 77.wra3-bottom { 78 background-color: #016ea9; 79} 80#f-5 { 81 font-size: 14px; 82 margin-bottom: 15px; 83}

wra3-bottomの部分のwidthを100%にしたいのですが、どうしても広がりません。すべての要素がwra3-contentのwidthと同じになってしまいます。

すみませんが、よろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

.wrapper3をflexレイアウトにする必要はない。これがwidthを狭めている原因。

Diff

1.wrapper3 { 2- display: -webkit-box; 3- display: -ms-flexbox; 4- display: flex; 5- -webkit-box-pack: center; 6- -ms-flex-pack: center; 7- justify-content: center; 8- -webkit-box-align: center; 9- -ms-flex-align: center; 10- align-items: center; 11 padding-top: 70px; 12 text-align: center; 13 background-color: #c7cac7; 14}

HTMLもspanの閉じ忘れや、id属性の値が同じ要素が複数あるなど、ひどい状態。

投稿2020/07/27 14:58

Daregada

総合スコア11990

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

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

kai0310

2020/07/27 19:14

fontawesomeすごい読み込んでますね、、
yukitur

2020/07/28 05:55

ありがとうございました(^^)/ 参考になりました! コードのミスも気を付けていきます。
guest

0

リセットCSS入れてますか?

投稿2020/07/27 14:52

yonn

総合スコア120

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

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

yonn

2020/07/28 03:18

低評価が入ってしまいました。 一番にリセットCSSを確認するようにしているのですが間違えていますでしょうか? 素直な疑問です。 どなたかお教え頂けませんでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問