お問い合わせ

    氏名

    メールアドレス

    件名

    メッセージ本文



    763万 キーワード

    2021年 検索パフォーマンス

    57.8万 人が訪問

    2021年 訪問ユーザー数

    WordPressのスキルアップはこちら!▶[click]
    いま、どうしてる? 誰でも検索できます

    【CSS】文字の行右端の位置が合わない…?時に使えるjustify(均等割り付け)の方法|text-align

    CSS(シーエスエス)
    この記事は約2分で読めます。
    「ワードプレスで未来を変える!」
    誰でも挑戦できます!!
    【未経験挑戦可!】スキルアップしたい!WordPressに挑戦したい!何かに挑戦して未来を変えたい!という方をお待ちしています↓↓

    p(段落)でテキストを入れた時に、右側の端が微妙に合わない…?という状態になっていました。

    そんな時は「text-align プロパティに「justify」を指定する」という方法で、CSSの両端揃え(均等割り付け)を設定すると、行の右端も揃えることができます。

    text-align プロパティに「justify」を指定する

    text-align プロパティに「justify」を指定することで「均等割り付け」を設定することができます。

    .section01 {
    text-align: justify;
    }

    文字が「均等割り付け」になりました!右端がきれいに揃ったことがわかります。

    「末尾行も均等割り付け」にしたい場合は?

    このシチュエーションがあるのかどうかは分かりませんが、もし「末尾行も均等割り付けにしたい」と考えた場合では、さらにひと工夫を加える必要があるようです。

    その方法とは「text-align-last」を加える、という方法です。

    .section02 {
        text-align: justify;
        text-align-last: justify;
    }

    末尾行が均等割り付けになりました。

    text-align-last: をcenterにすれば中央揃え、rightにすれば右揃えになります。

    .section02 {
        text-align: justify;
        text-align-last: justify;
    }

    末尾行を調整するときは「text-align-last」が役に立つようです。

    まとめ

    text-alignでは一般的にはcenterで中央揃えにしたりrightで右揃えにしたりという使い方が多いのかな?と思いますが、justifyという方法を使うことで均等割り付けを設定することができます。

    というより、今更ですが、どうやらpだと右端は合わないのが標準なのか…?という気も?

    右端の位置が気になる…という方は、ぜひお試しください😃

    Loading
    タイトルとURLをコピーしました