デザインカンプからの模写　リキッドレイアウトの実現

前提・実現したいこと

.psdからのサイト模写をしており、添付画像が作成途中の状態なのですが、
Newsトピックスのある薄い水色個所だけがリキッドレイアウトになってくれません。
原因はNews各トピックス下部の水色線をpx指定にしてあるためだと考えています。
しかし、下線幅はテキストを超えて引かれているため
.psdで指定距離を測定し、要素幅を設定してborder-bottomで
線を引いているため変更不可だと思っています。
このような場合はどのように処置をすれば
下線の幅、見た目はそのままにリキッドレイアウトの動きをしてくれるのでしょうか。

該当のソースコード

html
1<div class="contents">
2            <div class="news-list">
3                <p class="news">News</p>
4                <a href="#" class="list">一覧を見る ></a>
5            </div>
6            <div class="topics">
7                <p class="new-topic"><span class="date">2020.03.14</span><b class="press">プレス</b><span class="topic">【東京オリンピック会場跡地再開発計画】複合スポーツ施設及び新テーマパーク工事開始のお知らせ</span></p>
8                <p class="new-topic"><span class="date">2020.02.30</span><b class="ir">IR</b><span class="topic">2019年9月期&nbsp;第１四半期決算説明会動画</span></p>
9                <p class="new-topic"><span class="date">2020.02.30</span><b class="ir">IR</b><span class="topic">2019年9月期&nbsp;第１四半期決算説明会資料</span></p>
10            </div>
11</div>

css
1.contents{
2    height: 235px;
3    background-color: #edfcff;
4    display: flex;
5}
6
7.news-list{
8    padding-left: 200px;
9    padding-right: 40px;
10    padding-top: 57px;
11}
12
13.news{
14    font-size: 40px;
15    font-weight: bold;
16    font-family: "Open Suns";
17    color: #019bdf;
18    margin-top: 0;
19    margin-bottom: 0;
20}
21
22.list{
23    text-decoration: none;
24    color: black;
25}
26
27.topics{
28    padding-top: 57px;
29}
30
31.date{
32    padding-right: 29px;
33}
34
35b{
36    line-height: 18px;
37    width: 80px;
38    background-color: #019bdf;
39    display: inline-block;
40    text-align: center;
41    font-size: 10px;
42    color: white;
43}
44
45.topic{
46    margin-left: 34px;
47}
48
49.new-topic{
50    width: 1050px;
51    border-bottom: 1px solid #93deff;
52    margin: 0;
53    padding-bottom: 12px;
54    margin-bottom: 12px;
55}

試したこと

・Newsトピックスのエリアをinline-blockに⇒全体が1行になっただけ
・max-width / widthどちらでも100%に設定⇒変わらない
・widthで1600px(デザインカンプの全体幅測定値)に設定⇒見た目では正常化だが、リキッドレイアウトにならない

予備知識として知りたいこと

そもそも論ですが、.psdからweb模写をする際のページ全体の幅は
px測定した値を用いるのが定石なのでしょうか？
それとも width 100%？？

案件によると思いますが指定ない場合は...？？

今回のサンプルで<body>のwidthをpx指定してしまうと、
当然全体がソリッドレイアウトになってしまい、
1600px指定しているのにも関わらずGoogle検証で4k(2560 × 1155)にしても
スクロールバーが出たままになってしまいます。
(1600px指定で幅2560pxになったら左右に余白ができるだけじゃないんですか？)

行動規範の内容に同意します

回答2件

ベストアンサー

CSS
1.contents{
2    height: 235px;
3    background-color: #edfcff;
4    display: flex;
5    justify-content: space-between;
6}
7
8.news-list{
9    width: 280px;
10    padding-left: 200px;
11    padding-right: 40px;
12    padding-top: 57px;
13    background: #333;
14}
15
16.news{
17    font-size: 40px;
18    font-weight: bold;
19    font-family: "Open Suns";
20    color: #019bdf;
21    margin-top: 0;
22    margin-bottom: 0;
23}
24
25.list{
26    text-decoration: none;
27    color: black;
28}
29
30.topics{
31    width: calc(100% - 354px);
32}
33
34.new-topic{
35    border-bottom: 1px solid #93deff;
36    margin: 0;
37    padding-bottom: 12px;
38    margin-bottom: 12px;
39    display: flex;
40}
41.date{
42    width: 230px;
43}
44b{
45    margin-left: 20px;
46    height: 18px;
47    line-height: 18px;
48    min-width: 80px;
49    background-color: #019bdf;
50    display: inline-block;
51    text-align: center;
52    font-size: 10px;
53    color: white;
54}
55
56.topic{
57    margin-right: 34px;
58    width: calc(100% - 230px);
59
60}

HTML
1
2  <div class="contents">
3    <div class="news-list">
4        <p class="news">News</p>
5        <a href="#" class="list">一覧を見る ></a>
6    </div>
7    <div class="topics">
8        <p class="new-topic"><span class="date">2020.03.14<b class="press">プレス</b></span><span class="topic">【東京オリンピック会場跡地再開発計画】複合スポーツ施設及び新テーマパーク工事開始のお知らせ</span></p>
9        <p class="new-topic"><span class="date">2020.02.30<b class="ir">IR</b></span><span class="topic">2019年9月期&nbsp;第１四半期決算説明会動画</span></p>
10        <p class="new-topic"><span class="date">2020.02.30<b class="ir">IR</b></span><span class="topic">2019年9月期&nbsp;第１四半期決算説明会資料</span></p>
11    </div>
12  </div>

すみません、ざっくりなので余白は適当です。こういうことではなかったらごめんなさい。1000pxぐらいまではなんとか。

2020-06-04_追記：
borderをつけたnew-topicは可変で、news-listの分を除いた幅なので端までborderがつきます。なかのテキストに余白をつけるのとdateとtopicを横並びにするのにflexをつかっています。このときtopicにmargin-rightを指定しているのでnew-topicは端まで余白なくつきますが内側のtopicには余白が発生している状態です。
ざっくりした説明だと、p要素に線をつけて、内側のspanにmarginをつけたかたちです。ほかにもp要素に余白を設定して親divをつけたりできます。要素を入れ子にして内側の要素にmarginをあたえる手法で乗り切ります。

投稿2020/06/03 16:08

編集2020/06/04 13:34

sasa_

総合スコア140

hm08103

2020/06/04 13:03

回答ありがとうございます！記載いただいたcssをまるっとコピペで検証したところ、下線幅1050pxを保持したままリキッドレイアウトとして機能しました。しかし、自分で書いたものとどこが違ったのか、一つづつチェックを外していったのですが差がわからずじまいでした... あと一歩なようなので、もう少し自分でアレンジ入れてみたいと思います。質問がわかりづらいため、回答も難しかったと思います。私の理想により近くなったこちらでBAつけさせていただきます。

行動規範の内容に同意します

css
1.new-topic{
2    width: -moz-available;
3    width: -webkit-fill-available;
4    width: available;
5}

とかはどうでしょうか。

投稿2020/06/04 06:54

Lhankor_Mhy

総合スコア36896

hm08103

2020/06/04 12:46

回答ありがとうございます！抽象指示にするとリキッドレイアウトは満足するのですが、どうしても水色下線がテキスト幅になってしまいます。なので.new-topicの1050pxは外せないのかなと思っているのですが...解決しません。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.37%

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

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

質問する

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

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

デザインカンプからの模写　リキッドレイアウトの実現

前提・実現したいこと

該当のソースコード

試したこと

予備知識として知りたいこと

関連した質問