@Kobayashi0620 (さなだむし)posted at 2024-07-03

html css文字を別行で左右に配置したい。

Q&A

Closed

HTML CSS フロントエンド margin

解決したいこと

html cssでウェブサイトを作成しているのですが、文字の左右配置の方法で詰まってしまっています。

現状

理想

該当箇所

.html

        <div class="newsArea">
            <div class="verticalWrite">
                <h2>お知らせ</h2>
            </div>
            <div class="threadList">
                <div class="threadItem">
                    <a href="">
                        <p class="dateParagraph">2024.01.01</p>
                        <p class="mediumParagraph">○○○○○○○○○○イベント開催</p>
                    </a>
                </div>
                <div class="threadItem">
                    <a href="">
                        <p class="dateParagraph">2024.01.01</p>
                        <p class="mediumParagraph">○○○○○○○○○○イベント開催</p>
                    </a>
                </div>
                <div class="threadItem">
                    <a href="">
                        <p class="dateParagraph">2024.01.01</p>
                        <p class="mediumParagraph">○○○○○○○○○○イベント開催</p>
                    </a>
                </div>
                <div class="threadItem">
                    <a href="">
                        <p class="dateParagraph">2024.01.01</p>
                        <p class="mediumParagraph">○○○○○○○○○○イベント開催</p>
                    </a>
                </div>
                <div class="threadItem">
                    <a href="">
                        <p class="dateParagraph">2024.01.01</p>
                        <p class="mediumParagraph">○○○○○○○○○○イベント開催</p>
                    </a>
                </div>
                <div class="threadItem">
                    <a href="">
                        <p class="dateParagraph">2024.01.01</p>
                        <p class="mediumParagraph">○○○○○○○○○○イベント開催</p>
                    </a>
                </div>
                <div class="threadItem">
                    <a href="">
                        <p class="dateParagraph">2024.01.01</p>
                        <p class="mediumParagraph">○○○○○○○○○○イベント開催</p>
                    </a>
                </div>
            </div>
        </div>

.css

.newsArea{
    height: auto;
    display: flex;
    margin: 0 0 80px 0;
}

.threadList{
    width: 80%;
    float: right;
    margin: 0 0 0 auto;
}

.threadItem {
    min-height: 100px;
    border-top: solid 1px #333;
    border-bottom: solid 1px #333;
    display: flex;
    align-items: center;
}

最後まで読んでいただきありがとうございます。
ご存じの方がいらっしゃいましたら教えていただけますと幸いです。
何卒よろしくお願いいたします。

4Answer

@YottyPG posted at 2024-07-03

どんなふうに調べたり、どんなサイトを参考にしたかなども記載していただくことは可能でしょうか？

左右外側に配置する方法もいろいろあって、調べたら様々な情報が出てくると思います。
試したことや、調べてわからなかったことなども載せていただけるとありがたいです。

2Like

Comments

@Kobayashi0620
Questioner
失礼しました。
下記内容が調べたこと、試したことになります。
「ヘッダーメニュー　横並び」などで調べてflexを使用したら両端に表示できるということはわかったのですが、それだと行が同一になってしまうという欠点があり断念、、
次に「https://blog.codecamp.jp/programming-html-text-align」左記の記事を参考に`text-align`での調節を試みたのですが、

両端に表示されずつまずいてしまっています。
現状調べて詰まっている個所はこのような状態になります。
きれいに記載できる方法がありましたら教えていただけますと幸いです。
@YottyPG
回答ありがとうございます。
非常に惜しいところまで来てるように思います。
日付がその位置で止まっているのは、その親要素の右端がその位置にあるからです。
親要素の幅を工夫すればやりたいことは達成できると思います。

本題と外れますが、日付までaタグで囲っているのは問題ないでしょうか？
左右別々に配置しているのに、1つのリンクになっているのが少し気になりました。
@Kobayashi0620
Questioner
float: right;も試したのですが、
@Kobayashi0620
Questioner
ありがとうございます
そちらで試してみます。
スレッド単位でリンク化したかったので日付までaタグ範囲内に入れています！！

@Kobayashi0620

Questioner

下記内容で修正を行ったのですが、

このようになってしまいます。

大本を80%で設定しているため、日付の親要素をpx数での指定を行いたくないのですが、その場合何か良い方法はありますでしょうか？

.threadList{
    width: 80%;
    float: right;
    margin: 0 0 0 auto;
}

.threadItem {
    min-height: 100px;
    border-top: solid 1px #333;
    border-bottom: solid 1px #333;
    display: flex;
    align-items: center;
}

.threadItem .dateParagraph{
    width: 100%;
    text-align: right;
}

.threadItem .mediumParagraph{
    text-align: left;
}

@YottyPG
パーセントを使ってあげればいいと思います。
パーセントは親要素に対する割合になります。

日付を右端にしたいということなので、親要素のaタグが画面右端までになるようにwidth:100%と指定すればいい感じになると思います。

@ranggakcs posted at 2024-07-04

I tried to fix it, you can see the results in the codepen below:
https://codepen.io/ranggakcs/pen/MWMgagg

1Like

@changkejun posted at 2024-07-04

.dateParagraph{
	text-align:right;
}
.threadItem {
    min-height: 100px;
    border-top: solid 1px #333;
    border-bottom: solid 1px #333;
    align-items: center;
}

1Like

@72ki-s posted at 2024-07-04

justify-contentをうまく使えば解決できるかと思います
https://developer.mozilla.org/ja/docs/Web/CSS/justify-content

threadItemに対して
justify-content: space-between;
flexDirection: row;
を設定してはどうでしょうか？

またthreadListのfloatは不要な気がします。
threadListにも
display: flex;
flexDirection: column;
justify-content: start;
とかで上手くいく気がします。

手元で試したわけではないので間違えてたら申し訳ありません。

0Like

Are you sure you want to delete the question?