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

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

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

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

HTML5

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

解決済

レスポンシブでpタグを改行させたい ボタンの配置を表の線に合わせたい

spn
spn

総合スコア8

CSS3

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

HTML5

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

2回答

0グッド

0クリップ

260閲覧

投稿2022/10/16 09:09

編集2022/10/16 09:16

前提

初歩的ですが、レスポンシブの対応中、
ネットで調べて試してみてもうまくいきませんでした。
わかる方おられましたらご教授お願い致します。

実現したいこと

2点あります。

1 お知らせページのpタグをレスポンシブで表に合わせて改行したい。
<pタグはoverflow: hidden;
text-overflow: ellipsis;に指定している。>
max-width,width90%を指定しても
折り返しができない。

2 全て見るボタンの最後の文字のる、を上の線の端に合わせたい。(レスポンシブの全てで)
▶︎は全て見るから7.56px離して表示させたい。

該当のソースコード

html

1<!-- ニュース -------------> 2 <div class="news"> 3 <h5>お知らせ</h5> 4 <ul class="news-container"> 5 <li class="news-container-list"> 6 <a href="#"> 7 <time datetime="2020-12-22">2020.12.22</time> 8 <span>休診情報</span> 9 <p>2021年1月の休診日は5日、17日、27日となります。</p> 10 </a> 11 </li><!-- ./news-container-list --> 12 13 <li class="news-container-list"> 14 <a href="#"> 15 <time datetime="2020-12-11">2020.12.11</time> 16 <span>イベント</span> 17 <p>当院でクリスマスイベントを行います。南高校吹奏楽団をお呼びして、ロビーコンサートを開催予定です。</p> 18 </a> 19 </li><!-- ./news-container-list --> 20 21 <li class="news-container-list"> 22 <a href="#"> 23 <time datetime="2020-12-01">2020.12.01</time> 24 <span>採用</span> 25 <p>当院では臨床検査技師を募集しております。詳しい福利厚生についてご説明させていただきます。当院で働く…</p> 26 </a> 27 </li><!-- ./news-container-list --> 28 29 <li class="news-container-list"> 30 <a href="#"> 31 <time datetime="2020-11-12">2020.11.12</time> 32 <span>イベント</span> 33 <p>ホームページをリニューアルしました。</p> 34 </a> 35 </li><!-- ./news-container-list --> 36 37 <li class="news-button"> 38 <a class="news-container-list-button" href="#">すべて見る</a> 39 <a class="news-container-list-button-triangle" href="#">▶︎</a> 40 41 </li> 42 </ul><!-- ./news-container --> 43 </div><!-- ./news -->

css

1/* ニュース */ 2 3.news { 4 padding-bottom: 112px; 5 background-color: #F5FCF8; 6} 7 8.news-container { 9 max-width: 1180px; 10 height: auto; 11 margin: 0 auto; 12 background: #FFFFFF 0% 0% no-repeat padding-box; 13 box-shadow: 0px 3px 6px #00000029; 14 border-radius: 30px; 15 opacity: 1; 16 list-style: none outside; 17 padding-top: 39px; 18 padding-bottom: 46px; 19 padding-left: 0; 20 width: 95%; 21} 22 23h5 { 24 font-size: 24px; 25 background: linear-gradient(transparent 70%, #99E5A5 70%); 26 max-width: 96px; 27 margin: 82px auto 70px; 28 line-height: 38px; 29 30} 31 32.news-container-list { 33 max-width: 1048px; 34 margin: 0 auto; 35 width: 90%; 36} 37 38.news-container .news-container-list a { 39 border-bottom: 2px solid #E7E7E7; 40 display: flex; 41 align-items: center; 42 flex-wrap: nowrap; 43 text-decoration: none; 44 padding: 19.5px 33px 19.5px 0; 45} 46 47time { 48 font-size: 16px; 49 color: #21A937; 50} 51 52.news span { 53 background-color: #444444; 54 width: 80px; 55 height: 25px; 56 line-height: 25px; 57 margin-right: 30px; 58 margin-left: 30px; 59 text-align: center; 60 color: #FFFFFF; 61 font-size: 12px; 62 flex-shrink: 0; 63} 64 65.news-container-list p { 66 font-size: 16px; 67 color: #444444; 68 white-space: nowrap; 69 overflow: hidden; 70 text-overflow: ellipsis; 71 72} 73 74.news-button { 75 text-align: right; 76 max-width: 1121px; 77 padding-top: 39.5px; 78 79} 80 81.news-container-list-button { 82 color: #444444; 83 font-size: 16px; 84 line-height: 38px; 85 max-width: 1048px; 86 margin-right: 7.52px; 87} 88.news-container-list-button-triangle { 89 color: #444444; 90} 91 92 93 94/* モバイル版 95----------------------------------*/ 96 97@media (max-width: 1140px) { 98 /* ニュース */ 99 .news-button{ 100 padding-right: 2%; 101 } 102} 103 104@media (max-width: 860px) { 105 106 107 /* ニュース */ 108 109 .news-container .news-container-list a { 110 flex-direction: column; 111 justify-content: start; 112 flex-wrap: wrap; 113 display: block; 114 115 text-align: left; 116 } 117 118 119 .news-container-list p { 120 width: 100%; 121 max-width: 300px; 122 overflow:initial; 123 overflow-wrap: break-word; 124 word-break: break-word; 125 word-break: break-all; 126 127 } 128 .news-container-list { 129 max-width: 300px; 130 } 131 132 .news span { 133 display: inline-block; 134 } 135 .news-button{ 136 padding-right: 2%; 137 } 138 139 140}

試したこと

1 max-width,width90%を指定しても
折り返しができない。
レスポンシブ対応のみ改行したいのでbrは使いたくない。

2 レスポンシブ対応全てで上の線に合わせたいが、幅によってずれてしまいます。

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

ここにより詳細な情報を記載してください。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答2

1

ベストアンサー

PCのときにwhite-space: nowrap;をつけているので、Tab・SPのときはwhite-space: normal;にしてやると改行できます。

css

1@media (max-width: 860px) { 2 3 /* 中略 */ 4 .news-container-list p { 5 width: 100%; 6 max-width: 300px; 7 white-space: normal; 8 /* overflow:initial; 9 overflow-wrap: break-word; 10 word-break: break-word; 11 word-break: break-all; */ 12 }

「すべてを見る」を右揃えにしました&いくつか修正しました。

html

1 <li class="news-button"> 2 <a class="news-container-list-button" href="#">すべて見る</a> 3 <!-- <a class="news-container-list-button-triangle" href="#">▶︎</a> --> 4 </li>

↑htmlから▶︎削除

css

1/* ニュース */ 2 3.news { 4 padding-bottom: 112px; 5 background-color: #F5FCF8; 6} 7 8.news-container { 9 max-width: 1180px; 10 height: auto; 11 margin: 0 auto; 12 background: #FFFFFF 0% 0% no-repeat padding-box; 13 box-shadow: 0px 3px 6px #00000029; 14 border-radius: 30px; 15 opacity: 1; 16 list-style: none outside; 17 padding-top: 39px; 18 padding-bottom: 46px; 19 padding-left: 0; 20 width: 95%; 21} 22 23h5 { 24 font-size: 24px; 25 background: linear-gradient(transparent 70%, #99E5A5 70%); 26 max-width: 96px; 27 margin: 82px auto 70px; 28 line-height: 38px; 29 30} 31 32.news-container-list { 33 max-width: 1048px; 34 margin: 0 auto; 35 width: 90%; 36} 37 38.news-container .news-container-list a { 39 border-bottom: 2px solid #E7E7E7; 40 display: flex; 41 align-items: center; 42 flex-wrap: nowrap; 43 text-decoration: none; 44 /* padding: 19.5px 33px 19.5px 0; */ 45 padding: 19.5px 0; 46} 47 48time { 49 font-size: 16px; 50 color: #21A937; 51} 52 53.news span { 54 background-color: #444444; 55 width: 80px; 56 height: 25px; 57 line-height: 25px; 58 margin-right: 30px; 59 margin-left: 30px; 60 text-align: center; 61 color: #FFFFFF; 62 font-size: 12px; 63 flex-shrink: 0; 64} 65 66.news-container-list p { 67 font-size: 16px; 68 color: #444444; 69 white-space: nowrap; 70 overflow: hidden; 71 text-overflow: ellipsis; 72 73} 74 75.news-button { 76 width: 90%; /* 追加 */ 77 margin: 0 auto; /* 追加 */ 78 text-align: right; 79 max-width: 1121px; 80 padding-top: 39.5px; 81 82} 83 84.news-container-list-button { 85 position: relative; /* 追加 */ 86 color: #444444; 87 font-size: 16px; 88 line-height: 38px; 89 max-width: 1048px; 90} 91 92/* 追加 */ 93.news-container-list-button::before { 94 content: "▶︎"; 95 position: absolute; 96 right: -1.2em; 97} 98 99/* .news-container-list-button-triangle { 100 color: #444444; 101} */ 102 103 104 105/* モバイル版 106----------------------------------*/ 107 108@media (max-width: 1140px) { 109 110 /* ニュース */ 111 .news-button { 112 /* padding-right: 2%; */ 113 } 114} 115 116@media (max-width: 860px) { 117 118 119 /* ニュース */ 120 121 .news-container .news-container-list a { 122 flex-direction: column; 123 justify-content: start; 124 flex-wrap: wrap; 125 display: block; 126 127 text-align: left; 128 } 129 130 131 .news-container-list p { 132 width: 100%; 133 /* max-width: 300px; */ 134 white-space: normal; 135 /* overflow:initial; 136 overflow-wrap: break-word; 137 word-break: break-word; 138 word-break: break-all; */ 139 } 140 141 .news-container-list { 142 /* max-width: 300px; */ 143 } 144 145 .news span { 146 display: inline-block; 147 } 148 149 .news-button { 150 /* padding-right: 2%; */ 151 } 152 153 154}

↑疑似要素で▶︎配置

投稿2022/10/17 08:13

編集2022/10/19 09:07
Cocode

総合スコア2125

spn👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

spn

2022/10/17 12:20

コメントありがとうございます。 早速試したところ、改行することができました。 全て見るのボタンの件はわかりますでしょうか。
Cocode

2022/10/17 13:37

回答更新しました〜!
spn

2022/10/18 12:31

ありがとうございます。 試したところ、ボーダーの左端に全て見るボタンがレスポンシブでズレるところがあるようです。 HTMLでボタンを<li>に変更してpaddingを上と同じようにつければ良いのでしょうか。
Cocode

2022/10/18 13:55

右寄せしている「すべてを見る」ボタンが、左寄せになってしまうということでしょうか? 私の方ではその現象が確認できません>< 動作確認用サンプル↓ https://jsfiddle.net/9o2mupq1/
Cocode

2022/10/19 09:08

回答更新しました。

0

イメージ説明
何回もコメントありがとうございます。
わかりにくく申し訳ありません。
上記コメントの左端という記述は間違えです。
下記の画像のように右端の線に全て見るボタンの端が合わせたいのですが、うまくいかないです。

投稿2022/10/19 07:31

spn

総合スコア8

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

Cocode

2022/10/19 09:09

詳細ありがとうございます!回答更新しましたのでご確認お願いします。 それからここは回答欄ですので質問を投稿するには不適切です>< 追加の質問がある際は、既に投稿済みのご自身の質問を編集して内容を追加してください。 次回からご注意くださいませ〜。
spn

2022/10/20 01:30

ありがとうございます。 解決いたしました。丁寧に何回も解説していただき感謝します。 失礼致しました。以後気をつけます。

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

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

HTML5

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