テキストを中央配置し、左右逆寄せにデザインする方法 |CSS HTML|③
CSS
タイトルがややこしいのですが、こういう事です。
ページャーの下にそれぞれのページのディスプリクションを付けたいときなど。
コード
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">↼ 月別アーカイブを<br>任意の場所に置く方法</div> <div class="yagami-right">カレンダーのボタンに<br>アニメーションをつける ⇀</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
クラスまでの各クラスについて、詳細な説明。
.kontena
クラス:display: flex;
:kontena
クラスは、その中に配置された要素を水平に横並びに配置するためにFlexboxを使用しています。これにより、内部の要素を左から右に並べることができます。margin: 0 auto;
:kontena
クラスの外側の余白を上下にゼロ(0)に設定し、左右の余白を自動的に均等に設定します。これにより、コンテナ全体が水平方向に中央に配置されます。
.page-numbers-container
クラス:display: flex;
:page-numbers-container
クラスもFlexboxを使用しており、ページ番号要素を水平に中央配置します。justify-content: center;
:page-numbers-container
内の要素の水平配置を中央寄せにします。これにより、ページ番号が中央に表示されます。
.yagami-left
クラス:text-align: right;
:yagami-left
クラスは、テキストの水平配置を右寄せに設定します。このクラスが適用された要素内のテキストは、右端に配置されます。width: 50%;
:yagami-left
クラスの幅を親要素の50%に設定し、画面の左半分を占めます。
.yagami-right
クラス:width: 50%;
:yagami-right
クラスの幅も親要素の50%に設定し、画面の右半分を占めます。
これらのクラスは、要素の配置とスタイルを制御するために使用されています。kontena
クラスとyagami-○○
クラスの組み合わせにより、2つのテキスト要素が左右に分かれて配置されています。
実装例
※リンク先はこのページのTOPです
おわりに
こういう要素の配列とかの話は、いつまで経ってもスッキリ習得出来ませんよね。。中央寄せとか、画像右寄せテキスト回り込みとか(^_^;)…。
今日のひとこと
今日の一曲
⇘ こちらはホントのリンクボタンです~ ⇙