文字や動画を真ん中や左右に寄せたい！：水平方向に配置する基本のCSS

CSSを使用して、ウェブページ上の要素を水平方向に配置する方法について。

テキストや動画を中央寄せや左右寄せに配置するための基本的なCSSプロパティやクラスの使い方です。具体的なコード例を交えて説明します。

HTMLの基本構造

<div class="container"> <!-- コンテナ全体 -->
  <h3 class="center-align">タイトル</h3>
  <div class="responsive-container">IFrame動画プレイヤー</div>
  <div class="caption center-align">キャプション</div>
  <div class="description">ディスプリクション</div>
</div>

右寄せ

タイトルとキャプションはセンターに。ディスクリプションは左寄せ。

世界で6番目に売れた曲

It's Now or Never（今でしょ！）｜Elvis Presley

1960年にリリース。「オーソレミオ」が原曲。エルビスの最も売上が多い曲。歌詞は失われた愛について、愛と別れのテーマを探求しているロマンチックで感情的なもの。

.right-align-container {
    text-align: right; /* カラム内の要素を右寄せ */
    max-width: 400px; /* プレーヤーの最大幅を設定 */
    overflow: hidden;
    float: right; /* コンテナを右寄せ */
}
.center-align {
    text-align: center; /* タイトルとキャプションを中央寄せ */
}
.responsive-container {
    position: relative;
    width: 100%;
    padding-top: 61.8%; /* 縦横比1:1.618を近似 */
    display: flex;
}
.responsive-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.description {
    text-align: left; /* テキストを左寄せ */
}

真ん中寄せ

ディスクリプションは左寄せ。

世界で6番目に売れた曲

It's Now or Never（今でしょ！）｜Elvis Presley

.container {
    text-align: center; /* コンテナ内のテキストを水平方向に中央寄せ */
    max-width: 400px; /* プレーヤーの最大幅を設定 */
    margin: 0 auto; /* コンテナを水平方向に中央寄せ */
    overflow: hidden;
}
.responsive-container {
    position: relative;
    width: 100%;
    padding-top: 61.8%; /* 縦横比1:1.618を近似 */
    display: flex;
    justify-content: center; /* 子要素を中央寄せ */
    align-items: center; /* 子要素を中央寄せ */
}
.responsive-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.description {
    text-align: left; /* テキストを左寄せ */
}

左寄せ

タイトルとキャプションはセンター。

世界で6番目に売れた曲

It's Now or Never（今でしょ！）｜Elvis Presley

.left-align-container {
    text-align: left; /* カラム内の要素を左寄せ */
    max-width: 400px; /* プレーヤーの最大幅を設定 */
    overflow: hidden;
    float: left; /* コンテナを左寄せ */
}
.center-align {
    text-align: center; /* タイトルとキャプションを中央寄せ */
}
.responsive-container {
    position: relative;
    width: 100%;
    padding-top: 61.8%; /* 縦横比1:1.618を近似 */
    display: flex;
}
.responsive-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.description {
    text-align: left; /* テキストを左寄せ */
}