HTMLで中央寄せをマスター!あなたはいくつ知ってる?中央寄せのテクニックを4つ紹介
  • facebookページ
  • twitterページ
  • 2020.05.29

    HTMLで中央寄せをマスター!あなたはいくつ知ってる?中央寄せのテクニックを4つ紹介

    HTMLで中央寄せ

    HTMLで、テキストや要素を中央寄せにするシーンは多々あります。
    この記事では、中央寄せにするテクニックを4つ解説し、さらにHTML5で廃止されたタグなどの注意点についても解説していきます。

    ちなみにHTMLは、デフォルトでは左寄せです。

    text-align: center で文字を中央寄せ

    まずは、 text-align: centerを使って、文字を中央寄せにする方法を解説します。
    text-alignは、インライン要素を中央寄せ・右寄せ・左寄せにするためのCSSプロパティです。

    ■ ブラウザでの表示

    text-align:centerは、CSSを指定した要素はもちろん、要素の下にある子要素や、さらにその下の要素(孫要素)にも反映されます

    ▪️ ブラウザでの表示

    画像もtext-align: center で中央寄せ

    画像もテキストと同じように text-align: centerで中央寄せにします。
    ただし <img>タグに指定するのではなく、親のタグに対して text-align: centerを指定します。

    margin: auto でブロック要素を中央寄せ

    ブロック要素とは、CSSの displayプロパティが blockになっている要素を指します。
    代表的なものとして、 <div>``<h1><h6>``<p>``<ul>などのタグがあります。

    ブロック要素は、 text-align: centerで要素自体を中央寄せにできないため、 marginなどを使って中央寄せにします。
    実際にサンプルコードを見てみましょう。

    ▪️ ブラウザでの表示

    上の結果の通り、要素のサイズが 400pxで、残った部分の余白が margin: autoで左右に均等に配分され、中央寄せになっています。

    transformで中央寄せ

    少し変わった方法として、CSS3で追加された transformプロパティを使って、左右に中央寄せする例を紹介します。

    次のサンプルコードのように、要素を left: 50%でページの半分の位置に移動させ、さらに translateで要素の大きさの半分戻すことにより、ページの中央に要素を配置するテクニックを使っています。

    ▪️ CSS

    Flexboxで中央寄せ

    最後に、CSS3で追加されたFlexboxで、中央寄せにする方法を解説します。
    FlexboxはFlexible Box Layout Moduleの略で、その意味の通り、フレキシブルにボックスレイアウトを組む為のCSSです。
    Flexboxは比較的新しい機能ですが、PC・モバイルも含めて主要なブラウザの多くでサポートされ、現在では多くのWebサイトが使用しています。

    では、Flexboxを使って要素を中央寄せにする例を見てみましょう。

    ▪️ HTML

    ▪️ CSS

    ▪️ ブラウザでの表示

    上のサンプルコードのポイントは、CSSの justify-contentを指定しているところです。
    Flexboxで水平方向の位置を揃えるときは、 justify-content: centerを指定します。
    また、中央寄せ以外にも次のような値が指定できます。

    flex-start(初期値):行の開始位置から配置(左揃え)
    flex-end : 行の終了位置から配置(右揃え)
    left左揃え
    right右揃え
    center : 中央揃え
    space-between : 最初のアイテムは先頭に、最後のアイテムは末尾に配置され、残りは均等に間隔空けて配置
    space-around:全てのアイテムを均等配置

    HTML5で廃止されたタグ

    HTML5から、文字の装飾はCSSで行うことが推奨されるようになり、それに伴い次のタグや属性がHTML5の仕様から削除されました。

    <center>タグ

    <center>は、タグで囲まれた内容を中央寄せするタグです。中央寄せにする意外には特に機能がないため、「装飾はCSSで行うべき」という方針のもと、HTML5の仕様から <center>タグは削除されました。

    【centerの使用例】

    align属性

    要素内コンテンツの、水平位置を指定する align属性も、「装飾はCSSで行うべき」という方針のもと、HTML5で削除されました。

    【align属性の使用例】

    ポテパンダの一言メモ

    HTML5で廃止されたタグや属性は、互換性のために多くのブラウザーで動作ますが、HTMLの仕様から削除された以上、いつブラウザで動作しなくなってもおかしくありません。
    今後は利用せず、CSSで中央寄せを行いましょう。

    まとめ

    htmlで中央寄せにする方法を解説してきました。文字や要素の中央寄せは頻繁に使うため、是非とも覚えておきましょう。

    この記事のまとめ
    • インライン要素の中央寄せは「text-align: center 」
    • ブロック要素は「margin: auto」や「Flexbox」で中央寄せ
    • HTML5では「center」タグ、「align」属性は廃止された


    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE