テキストを中央配置し、左右逆寄せにデザインする方法 |CSS HTML|③


タイトルがややこしいのですが、こういう事です。


ページャーの下にそれぞれのページのディスプリクションを付けたいときなど。

コード

HTML

<div class="p-article-wp-pager">
    <div class="page-numbers-container">
        <p class="post-page-numbers">1</p>
        <a href="" class="post-page-numbers"><p>2</p></a>
    </div>
  <br>
    <div class="kontena">
        <div class="yagami-left">&#8636; 月別アーカイブを<br>任意の場所に置く方法</div>
        <div class="yagami-right">カレンダーのボタンに<br>アニメーションをつける &#8640;</div>
    </div>
</div>


CSS

.kontena {
    display: flex;
    margin: 0 auto;
}
.page-numbers-container {
    display: flex;
    justify-content: center;
}
.yagami-left {
    text-align: right;
    width: 50%;
  background: #fd94bd;
}
.yagami-right {
    width: 50%;
    background: #e6ffcc;
}

.post-page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: #ddd;
    border-radius: 50%;
    margin: 0 5px;
}
.p-article-wp-pager {
    margin: 24px auto;
}


コードの解説

kontenaクラスからyagami-rightクラスまでの各クラスについて、詳細な説明。

  1. .kontena クラス:

    • display: flex;: kontenaクラスは、その中に配置された要素を水平に横並びに配置するためにFlexboxを使用しています。これにより、内部の要素を左から右に並べることができます。
    • margin: 0 auto;: kontenaクラスの外側の余白を上下にゼロ(0)に設定し、左右の余白を自動的に均等に設定します。これにより、コンテナ全体が水平方向に中央に配置されます。
  2. .page-numbers-container クラス:

    • display: flex;: page-numbers-containerクラスもFlexboxを使用しており、ページ番号要素を水平に中央配置します。
    • justify-content: center;: page-numbers-container内の要素の水平配置を中央寄せにします。これにより、ページ番号が中央に表示されます。
  3. .yagami-left クラス:

    • text-align: right;: yagami-leftクラスは、テキストの水平配置を右寄せに設定します。このクラスが適用された要素内のテキストは、右端に配置されます。
    • width: 50%;: yagami-leftクラスの幅を親要素の50%に設定し、画面の左半分を占めます。
  4. .yagami-right クラス:

    • width: 50%;: yagami-rightクラスの幅も親要素の50%に設定し、画面の右半分を占めます。


これらのクラスは、要素の配置とスタイルを制御するために使用されています。kontenaクラスとyagami-○○クラスの組み合わせにより、2つのテキスト要素が左右に分かれて配置されています。


実装例

※リンク先はこのページのTOPです



おわりに

こういう要素の配列とかの話は、いつまで経ってもスッキリ習得出来ませんよね。。中央寄せとか、画像右寄せテキスト回り込みとか(^_^;)…。



今日のひとこと

バーガーキング
「バーガーキングのスモーキーBBQワッパーはただひたすら美味しい」


今日の一曲


⇘ こちらはホントのリンクボタンです~ ⇙