ウェブサイトを構築する際の画像、テキスト、ブロック要素を中心にする
あなたがウェブサイトを構築する方法を学んでいる場合、あなたが習得する必要がある最も一般的なトリックの1つは、ブラウザウィンドウにアイテムを集中させる方法です。 これは、ページ上にイメージをセンタリングすることを意味するか、デザインの一部として見出しのようなテキストを中央揃えにすることができます。
画像やテキスト、またはWebページ全体の視覚的な外観を実現する適切な方法は、 カスケーディングスタイルシート（CSS）を使用することです。 センタリングのプロパティのほとんどは、バージョン1.0からCSSに入っており、 CSS3や最新のWebブラウザでうまく機能します 。
ウェブデザインの多くの側面と同様に、CSSを使用してウェブページ内の要素をセンタリングする複数の方法があります。 この視覚的な外観を達成するためにCSSを使用するいくつかの異なる方法を見てみましょう。
CSSでHTML要素を中央揃えする方法の概要
この1つのビジュアルスタイルを実現するにはさまざまな方法があるため、CSSを中心にすることはWebデザイナーの初心者にとって難しいことです。 さまざまな方法が、すべてのテクニックがすべての要素で機能しているわけではないことを知っている素敵なWeb開発者かもしれませんが、新しいWeb専門家にとっては非常に難しいことです。 最も良いことは、いくつかのアプローチの理解を得ることです。 それらを使用し始めると、どの方法がどのインスタンスで最も効果的かを知ることができます。
高いレベルでは、CSSを使用して次のことができます。
- センターテキスト
- ブロックレベルの要素を区切りにします。
- 画像を中心にする
- ブロックまたは画像を垂直にセンタリングする
多くの（何年も）前に、ウェブデザイナーは
CSSによるテキストのセンタリング
ウェブページを中心にするのが最も簡単なのはテキストです。 これを行うために知る必要があるスタイルプロパティは、text-alignだけです。 以下のCSSスタイルを使用してください：
p.center {text-align：center; }
このCSSラインでは、センタークラスで書かれた各段落は、その親要素の内側に水平に配置されます。 たとえば、段落内に段落があった場合、その段落の子であることを意味するので、段落は
次に、このクラスの例をHTMLドキュメントに適用します。
このテキストは中央に配置されています。
text-alignプロパティでテキストをセンタリングする場合、その要素を含む要素の中央に配置され、必ずしもページ全体の中央に配置される必要はありません。 また、中央揃えのテキストは大きなコンテンツブロックでは読みにくい場合があるので、このスタイルは控えめに使用してください。 記事やその他のコンテンツのティーザーテキストのように、見出しや小さなブロックのテキストは、中央に配置すると読みやすく、細かいことがよくありますが、記事全体のような大きなテキストブロックは、コンテンツが完全に中央にある場合は消費するのが難しいでしょう正当化された。 覚えておいてください、ウェブサイトのテキストに関しては 、 読みやすさは常に重要です！
CSSを使用したコンテンツのセンタリング
ブロックとは、ページ上に定義された幅を持ち、ブロックレベルの要素として確立されている要素のことです。 多くの場合、これらのブロックはHTML
div.center {
マージン：0 auto;
幅：80em;
}
このCSSのマージンプロパティの短縮形は、上下の余白を0に設定し、左右には「自動」を使用します。 これは、基本的に、利用可能なスペースをすべて取り、ビューポートウィンドウの2つの側面の間で均等に分割し、効果的に要素をページの中央に配置します。
ここではHTMLで適用されます：
その内部のテキストは左揃えになります。
あなたのブロックが定義された幅を持つ限り、それは包含要素の中に集中します。 そのブロックに含まれるテキストは、その中にセンタリングされませんが、左詰めになります。 これは、Webブラウザではテキストがデフォルトで左揃えになっているためです。 テキストを中央揃えにしたい場合は、前に説明したtext-alignプロパティを使用して、このメソッドを中心にすることもできます。
CSSによる画像のセンタリング
ほとんどのブラウザでは、既に段落を調べたのと同じtext-alignプロパティを使用してイメージを表示していますが、W3Cで推奨されていないので、このテクニックに頼るのは良い考えではありません。 推奨されないので、将来のバージョンのブラウザではこの方法を無視する可能性が常にあります。
text-alignを使用して画像を中央揃えするのではなく、画像がブロックレベルの要素であることを明示的にブラウザに伝える必要があります。 この方法で、他のブロックと同じように中央に配置することができます。 これを実現させるCSSは次のとおりです。
img.center {
表示ブロック;
margin-left：auto;
margin-right：auto;
}
そして、ここに私たちが中心に置くことを望むイメージのためのHTMLがあります：
また、インラインCSSを使用してオブジェクトを配置することもできます（下記参照）。このアプローチは、HTMLマークアップにビジュアルスタイルを追加するのでお勧めできません。 覚えておいてください、私たちはスタイルと構造を分離したいので、あなたのHTMLコードにCSSスタイルを追加してください。できるだけ避けるべきです。
要素をCSSで垂直方向にセンタリングする
オブジェクトを垂直にセンタリングすることは、Webデザインでは常に困難でしたが、CSS3のCSS Flexible Box Layout Moduleがリリースされました。
垂直方向の配置は、上記の水平方向の配置と同様に機能します。 CSSプロパティは中間値と垂直に整列します。
.vcenter {
縦線：中央;
}
このアプローチの欠点は、CSS FlexBoxをすべてのブラウザがサポートしているわけではないことです。ただし、この新しいCSSレイアウト方法がますます増えています。 実際、現代のブラウザはすべて、現在このCSSスタイルをサポートしています。 つまり、Flexboxの唯一の懸念事項は、ブラウザのバージョンがずっと古いことです。
古いブラウザで問題が発生した場合は、次の方法を使用してテキストをコンテナに垂直に配置することをお勧めします。
- divのような要素を中心に配置する要素を配置します。
- 包含要素の最小高さを設定します。
- 要素を含む要素を表のセルとして宣言します。
- 垂直方向の配置を「中」に設定します。
たとえば、ここにCSSがあります：
.vcenter {
min-height：12em;
表示：テーブルセル;
縦線：中央;
}
ここにHTMLがあります：
このテキストは、ボックスの中央に垂直に配置されています。
垂直センタリングと古いバージョンのInternet Explorer
Internet Explorer（IE）を強制的に中央に置き、条件付きコメントを使用してIEだけがスタイルを見せるようにするにはいくつかの方法がありますが、少し冗長で醜いです。 マイクロソフトがIEの古いバージョンのサポートを中止するという最近の決定により、サポートされていないブラウザは間もなくリリースされるはずで、WebデザイナーがCSS FlexBoxのような最新のレイアウト手法を使用しやすくなり、センタリングだけでなく、すべてのWebデザイナーにとってより簡単です。