Blog

HOME > Web > css > 【CSS】テキストの均等割り付け

【CSS】テキストの均等割り付け

2017/07/23

css

備忘録です。

文字数がばらばらで均等に揃えたい場合のCSSです。

参考サイト
HTML文書の両端揃えと、均等割り付け　CSS

tableを使う方法です。

HTML

<table class="jidori">
    <tr>
        <td>企画と執筆</td>
    </tr>
    <tr>
        <td>原稿編集</td>
    </tr>
    <tr>
        <td>造本設計</td>
    </tr>
    <tr>
        <td>構成</td>
    </tr>
    <tr>
        <td>原価と定価</td>
    </tr>
    <tr>
        <td>用紙材料の準備</td>
    </tr>
</table>

CSS

.jidori{
     width:7em;
     font-size:2em;
     table-layout:auto;
}
.jidori td{
     padding:0;
     -moz-text-align-last: justify;
     text-align-last: justify;
     text-justify:inter-ideograph;
     border:none;
}

サンプル

企画と執筆
原稿編集
造本設計
構成
原価と定価
用紙材料の準備

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ