-1

以下の部分を右端に寄せたいです、わかる方いらっしゃいましたらご教授ください。

footertext部分の <p>Web Entertainment Design Inc. West Building 3F 9-99 Sakuragaokacho Shibuya-ku Tokyo, Japan 150-0031 T/99-9999-9999</p>


HTML

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>Web Entertainment Design</title>
    <meta name="description" content="テキストテキストテキストテキストテキストテキストテキストテキスト">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="img/favicon.ico">
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link rel="stylesheet" href="css/style.css">

</head>


<body>
    <header id="header">
        <div class="wrapper">
            <section class="headerlists">
                <div class="headerimg"><img src="img/logo.svg" alt=""></div>
                <nav class="headerlist">
                    <ul>
                        <li><a href="#news">NEWS</a></li>
                        <li><a href="#about">ABOUT</a></li>
                        <li><a href="#business">BUSINESS</a></li>
                        <li><a href="#company">COMPANY</a></li>
                    </ul>
                </nav>
            </section>
        </div>
        <div class="button">
            <a href="#">お問い合わせ</a>
        </div>
    </header>
    <main>
        <section class="bg-img"></section>
        <div class="wrapper">
            <h1 class="newslogo">NEWS</h1>
            <p>ニュース</p>
            <div class="news">
                <ul class="title">
                    <li>20221.01.01 NEWS
                        <p>タイトルタイトルタイトルタイトル</p>
                    </li>
                    <li>20221.01.01 PRESS
                        <p>タイトルタイトルタイトルタイトル</p>
                    </li>
                    <li>20221.01.01 NEWS
                        <p>タイトルタイトルタイトルタイトル</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="about">
            <img src="img/about.jpg" alt="">
            <div class="abouttext">
                <h2>About</h2>
                <a>私たちについて</a>
                <p>テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト
                </p>
            </div>
        </div>
        <div class="wrapper">
            <div class="business">
                <h2>BUSINESS</h2>
                <p>事業内容</p>
            </div>
            <div class="businessphotos">
                <div class="businessphoto1">
                    <h3>- web制作•マーケティング
                        <img src="img/business1.jpg" alt="">
                    </h3>
                    <h3>- インターネットメディア事業
                        <img src="img/business2.jpg" alt="">
                    </h3>
                </div>
                <div class="businessphoto2">
                    <h3>-プロモーション企画・制作
                        <img src="img/business3.jpg" alt="">
                    </h3>
                    <h3>-ソーシャル企画•運営
                        <img src="img/business4.jpg" alt="">
                    </h3>
                </div>
            </div>
            <section class="COMPANY">
                <div class="companyinfo">
                    <h2 class="companylogo">COMPANY</h2>
                    <p>会社情報</p>
                    <dl>
                        <dt>会社名</dt>
                        <dd>ウェブエンターテイメントデザイン株式会社</dd>
                        <dt>所在地</dt>
                        <dd>東京都渋谷区桜丘町99-9 West Building 3F</dd>
                        <dt>代表</dt>
                        <dd>XXXXXX</dd>
                        <dt>設立</dt>
                        <dd>2021年1月1日</dd>
                        <dt>資本金</dt>
                        <dd>3,000,000円</dd>
                        <dt>事業内容</dt>
                        <dd>Web制作・マーケティング</dd>
                        <dd>インターネットメディア事業</dd>
                        <dd>プロモーション企画・制作</dd>
                        <dd>ソーシャル企画・運営</dd>
                    </dl>
                </div>
                <div class="companyphoto">
                    <img src="img/company.jpg" alt="">
                </div>
            </section>
        </div>
    </main>
    <section class="footer">
        <div class="wrapper">
            <div class="footers">
                <div class="footerlogo">
                    <img src="img/logo.svg" alt="">
                </div>
                <div class="footertext">
                    <p>Web Entertainment Design Inc.
                        West Building 3F
                        9-99 Sakuragaokacho Shibuya-ku
                        Tokyo, Japan 150-0031
                        T/99-9999-9999</p>
                </div>
            </div>
        </div>
    </section>
</body>

</html>

CSS

@charset "UTF-8";

.wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

header {
    background-color: #cccccc41;
}

main {
    background-color: #cccccc41;
}

footer {
    width: 100%;
}

.headerlists {
    display: flex;
}

.headerlists img {
    width: 100px;
    display: flex;
    padding: 30px 0px;
    align-items: center;
}

nav {
    display: flex;
    padding: 30px;
}

.headerlist a {
    color: #000;
    padding: 20px;
    text-decoration: none;
}


.headerlist ul {
    display: flex;
    list-style: none;
    gap: 20px;
    align-items: center;
}

.button a {
    text-decoration: none;
    color: #ccc;
    border: 1px solid;
    width: 100px;
}

.bg-img {
    background-image: url(../img/mainvisual.jpg);
    background-size: cover;
    height: 100vh;
}

.newslogo {
    padding-top: 70px;
}

.newslogo p {
    width: 30px;
    background-color: #000;
}

.title {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.title li {
    border-left: 1px solid;
    list-style: none;
    padding-top: 35px;
    padding-left: 30px;
    justify-content: space-between;
}

.about {
    display: flex;
    width: 100%;
}

.about img {
    width: 55%;
    height: 571px;
    padding-top: 100px;
    object-fit: cover;
}

.abouttext {
    width: 100%;
    padding: 450px 5% 50px 5%;
}

.abouttext a {
    border-bottom: 1px solid;
    padding-bottom: 30px;
}

.abouttext p {
    padding: 80px 0px 0px 0px;
}

.business p {
    border-bottom: 1px solid;
}

.businessphotos {
    width: 100%;
    display: flex;
    padding: 100px 5% 0px 5%;
}

.businessphoto1 img {
    width: 90%;
    height: 240px;
    padding-right: 30px;
    padding-top: 10px;
    object-fit: cover;
}

.businessphoto1 h3 {
    padding-top: 50px;
}

.businessphoto2 img {
    width: 90%;
    height: 240px;
    padding-top: 10px;
    object-fit: cover;
}

.businessphoto2 h3 {
    padding-bottom: 55px;
}

.COMPANY {
    display: flex;
    padding-top: 100px;
}

.companyinfo {
    width: 100%;
}

.companyinfo p {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid;
}

dl {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
}

dt {
    width: 20%;
    padding-top: 15px;
}


dd {
    width: 80%;
    padding: 10px 0px 0px 40px;
}

.companyphoto img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.footers {
    display: flex;
    width: 240px;
}

.footerlogo img {
    width: 100px;
}

.footertext {
    
}
1
  • もし、回答が解決につながったのであれば、解決済を表現するためにも、回答を承認 いただければと思います。 Commented 5月24日 15:33

1 件の回答 1

0

footertext 内の文字列を右寄せするには、以下でできます。

.footertext {
  text-align: right;
}

ただし、上位の footers が、以下のように width: 240px と指定されているので、その範囲でのレイアウトとなります。

.footers {
    display: flex;
    width: 240px;
}

width: 240px フッター
分かりやすくするために、テキストに改行を入れています。
また、各要素の枠線に色を入れています。黒の枠線が、footers です。

これを以下のように修正することで、画面の右端に要素ごと配置することもできます。

.footers {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

画面の右端に配置

2
  • ありがとうございます!無事解決できました!引き続き勉強頑張ります Commented 5月24日 2:33
  • いつもご丁寧な説明ありがとうございますとてもわかりやすく助かっております Commented 5月24日 2:34

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。