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

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

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

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

HTML5

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

Q&A

2回答

878閲覧

flexで要素をmargin除き、widthできる限り100%に

free_teku

総合スコア103

CSS3

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

HTML5

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

0グッド

0クリップ

投稿2021/10/05 00:50

編集2022/01/12 10:55

前提・実現したいこと

表題の通りだとわかりにくいので下記のようなイメージ図のようにしたいです
width: calc(100%-40px*1);でulを全体に広げたいです。中央によりがちですが左右に調整させたい

完成](584bfca10ce01f9114d7f3f8d3c4fa0b.jpeg)
現状

width-調整

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

エラーメッセージ

試したこと

width: calc(100%-40px1);でulを全体に広げたいです。→✖
news-itemにwidth: calc(50%-40px
1/2);を設定したものの全体に広がらないため
aタグをblockに設定しましたができませんでした。

https://csshtml.work/img-width-bad/#1htmlwidth
も読んだのですが
解決できませんでした。

該当のソースコード

HTML

1 <section class="news"> 2 <div class="ineer"> 3 <div class="sec-theme aos-init aos-animate" data-aos="zoom-in"> 4 <img src="./img/logo02.png" alt="ロゴ"> 5 <p class="cmn-ttl">お知らせ</p><!-- /.cmn-ttl --> 6 </div><!-- /.sec-theme --> 7 <div class="news-link aos-init aos-animate" data-aos="zoom-in"> 8 <a href="#"> 9 <p class="sale-info">営業情報</p> 10 </a> 11 <a href="#"><p>その他</p></a> 12 13 </div><!-- /.news-link --> 14 <!--1--> 15 <ul class="news-list aos-init aos-animate" data-aos="fade-right"> 16 <li class="news-item"> 17 <a href="" class=""> 18 <img src="./img/news01.jpg" alt="news01"> 19 <div class="news-txt"> 20 <time>2020.12.24</time> 21 <p class="news-desc">年末最後の営業日は27日になります。</p><!-- /.news-desc --> 22 </div><!-- /.news-txt --> 23 </a> 24 </li><!-- /.news-item --> 25 <li class="news-item"> 26 <a href="" class=""> 27 <img src="./img/news02.jpg" alt="news02"> 28 <div class="news-txt"> 29 <time>2020.12.24</time> 30 <p class="news-desc">年末最後の営業日のお知らせ</p><!-- /.news-desc --> 31 </div><!-- /.news-txt --> 32 </a> 33 </li><!-- /.news-item --> 34 </ul><!-- /.news-list --> 35 <!--2--> 36 <ul class="news-list aos-init aos-animate" data-aos="fade-right" > 37 <li class="news-item"> 38 <a href="" class=""> 39 <img class="news-img" src="./img/news02.jpg" alt="news02"> 40 <div class="news-txt"> 41 <time>2020.12.11</time> 42 <p class="news-desc">12.21は臨時休業とさせていただきますので、 <br> よろしく お願いします。</p><!-- /.news-desc --> 43 </div><!-- /.news-txt --> 44 </a> 45 </li><!-- /.news-item --> 46 <li class="news-item"> 47 <a href="" class=""> 48 <img src="./img/news01.jpg" alt="news01"> 49 <div class="news-txt"> 50 <time>2020.12.24</time> 51 <p class="news-desc">年末最後の営業日のお知らせ</p><!-- /.news-desc --> 52 </div><!-- /.news-txt --> 53 </a> 54 </li><!-- /.news-item --> 55 </ul><!-- /.news-list --> 56 <!--3--> 57 <ul class="news-list aos-init aos-animate" data-aos="fade-right" > 58 <li class="news-item"> 59 <a href="" class=""> 60 <img src="./img/news01.jpg" alt="news01"> 61 <div class="news-txt"> 62 <time>202.12.01</time> 63 <p class="news-desc">和室の改装を行いますため、12.10はお休み させていただきます。</p><!-- /.news-desc --> 64 </div><!-- /.news-txt --> 65 </a> 66 </li><!-- /.news-item --> 67 <li class="news-item"> 68 <a href="" class=""> 69 <img src="./img/news02.jpg" alt="news02"> 70 <div class="news-txt"> 71 <time>2020.12.24</time> 72 <p class="news-desc">年末最後の営業日のお知らせ</p><!-- /.news-desc --> 73 </div><!-- /.news-txt --> 74 </a> 75 </li><!-- /.news-item --> 76 </ul><!-- /.news-list --> 77 </div><!-- /.ineer --> 78 </section><!-- /.news -->

CSS

1 2.news { 3 background-color: #ffffff; 4} 5 6.news-link { 7 display: -webkit-box; 8 display: -webkit-flex; 9 display: -ms-flexbox; 10 display: flex; 11 -webkit-box-pack: center; 12 -webkit-justify-content: center; 13 -ms-flex-pack: center; 14 justify-content: center; 15 -webkit-box-align: center; 16 -webkit-align-items: center; 17 -ms-flex-align: center; 18 align-items: center; 19} 20 21.news-link > a { 22 display: block; 23 margin: 46px 26px 49px; 24} 25 26.news .news-list { 27 display: -webkit-box; 28 display: -webkit-flex; 29 display: -ms-flexbox; 30 display: flex; 31 -webkit-box-pack: center; 32 -webkit-justify-content: center; 33 -ms-flex-pack: center; 34 justify-content: center; 35 width: calc(100%-40px*1); 36} 37 38.news .news-list .news-item { 39 background-color: #F6F6F6; 40 margin-top: 49px; 41 margin-bottom: 20px; 42 display: -webkit-box; 43 display: -webkit-flex; 44 display: -ms-flexbox; 45 display: flex; 46 -webkit-box-align: center; 47 -webkit-align-items: center; 48 -ms-flex-align: center; 49 align-items: center; 50} 51 52.news .news-list .news-item:nth-child(2n) { 53 margin-left: 40px; 54 width: calc(50%-40px*1/2); 55} 56 57@media screen and (min-width: 600px) and (max-width: 1179px) { 58 .news .news-list .news-item { 59 width: calc(50%-20px*1/2); 60 } 61} 62 63@media screen and (max-width: 599px) { 64 .news .news-list .news-item { 65 width: 100%; 66 } 67} 68 69.news .news-list .news-item > a { 70 display: -webkit-box; 71 display: -webkit-flex; 72 display: -ms-flexbox; 73 display: flex; 74} 75 76.news .news-list .news-item > a > img { 77 width: 80px; 78 height: 80px; 79 padding: 15px 10px; 80} 81 82@media screen and (max-width: 599px) { 83 .news .news-list .news-item > a > img { 84 width: 100px; 85 height: 100px; 86 } 87} 88 89.news .news-list .news-item > a .news-txt time { 90 padding: 15px 10px; 91} 92 93.news .news-list .news-item > a .news-txt .news-desc { 94 padding-top: 10px; 95}

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

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

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

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

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

Lhankor_Mhy

2021/10/05 01:07

「全体」というのは親要素全体のことでしょうか? そうだとすると、100%-40px*1 は必ず親要素より小さいので全体に広げることはできないです。
guest

回答2

0

こんな感じですか?

css

1<style> 2ul{ 3 list-style:none; 4 display:flex; 5 flex-wrap:wrap; 6 justify-content:space-between; 7 padding:0px; 8} 9li{ 10 display:block; 11 height:30px; 12 margin:0px; 13 width:calc(50% - 40px); 14 background-Color:gray; 15} 16li:nth-child(n+3){ 17 margin-top:20px; 18} 19</style> 20<ul> 21<li>1</li> 22<li>2</li> 23<li>3</li> 24<li>4</li> 25<li>5</li> 26</ul>

調整

CSS

1<style> 2ul{ 3 list-style:none; 4 display:flex; 5 flex-wrap:wrap; 6 justify-content:space-between; 7 padding:0px; 8} 9li{ 10 display:block; 11 height:60px; 12 margin:0px; 13 max-width:calc(50% - 40px); 14 min-width:34%; 15 background-Color:gray; 16 word-break:break-all; 17} 18li:nth-child(n+3){ 19 margin-top:20px; 20} 21</style> 22<ul> 23<li>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li> 24<li>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</li> 25<li>3</li> 26<li>4</li> 27<li>5</li> 28</ul>

投稿2021/10/05 01:31

編集2021/10/05 02:02
yambejp

総合スコア114574

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

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

free_teku

2021/10/05 01:45

ご回答ありがとうございます。 一点質問したいです。 文字の長さに合わせて、li width:が変動しています。 左端のliを均等に割り振るには、どんなコードを書いたらよろしいのでしょうか? justify-content space-beetweenでしょうか? ご回答いただけると幸いです。
yambejp

2021/10/05 02:02

> 文字の長さに合わせて、li width:が変動しています。 ちょっと意味がわからないですが max-width/min-widthで調整するとか?
free_teku

2021/10/06 02:43

3枚目の画像のように、左端のliのwidthの大きさが変動しています。 調べたところ、文字の数により変動しているようでした。 こちらを修正する際は、どのようなコードが必要でしょうか? ご回答いただけると幸いです。
yambejp

2021/10/06 02:50

ごめんなさい。どういう結果がほしいかさっぱりわからない liをwidthを均一にして、1行あたり2項目を、左右に振り分けるということですか? それって最初に回答した内容だと思うのですが・・・
guest

0

今一つ何がしたいのかわからないのですが、想像で回答すると、おそらくtypoが原因では。
calc(50%-40px*1/2)calc(50% - 40px*1/2)

  • 演算子と - 演算子は前後にホワイトスペースを置く必要があります。

[calc() - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/calc(%29#%E3%83%A1%E3%83%A2)

開発者ツールを使って、当たっているスタイルを確認するようにした方がいいですよ。

投稿2021/10/05 01:13

Lhankor_Mhy

総合スコア35865

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

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

free_teku

2021/10/05 01:43

ご回答ありがとうございます。できました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問