HTML5で廃止された【center要素】
私のホームページではこのcenterタグが非常に多く使用されています。ホームページ全体のセンタリングから、<body>内の画像や表などのパーツに使用されています。
HTML4.1で作成されたホームページでは非常に多く使用されているcenter要素は中央表示をするためのタグですが、まだ他にも数種類の要素とその属性も含めるとかなりの数に上ります。
サポートが終れば機能しなくなる
今はまだサポートされていて正常に機能しますが、もし完全に廃止されたら今までのホームページに多大な影響を及ぼします。
個人でホームページを運営されている方にとってはページ数にも依りますが、直ぐに対応できる問題ではないので今から少しずつ編集していきたいと思います。
ホームページ全体を中央表示にするにはスタイルシートCSSでマージンを編集する
基本的な文字のセンタリングについては前回の投稿で取り上げています。以下のリンクです。
HTML5で廃止された要素タグ【center要素】があります。今はまだ使用しても機能します-HTML・CSSを学ぶ
今回は同じセンタリングでもホームページ全体のセンタリング方法について取り組んでみます。
ホームページ全体をセンタリングするには、マージンを使用します。マージン、ボーダー、パッティングについては下記のページで取り上げていますので参考にして下さい。
スタイルシートの基礎「文字を囲む枠線を使用する」「枠線と文字の間、枠線の外側に余白を設ける」記述方法‐HTML・CSSを学ぶ
ホームページの既存のスタイルシートを開きます。私のスタイルシートのファイルはトップページから直ぐ下のファルダ内にstyle.cssと言うファイル名で保存しています。このファイルをメモ帳などのテキストエディタで開きます。
前回の投稿で作成したstyle.cssファイルです。このスタイルシートにコードの追加、編集を行います。
このstyle.cssファイルにホームページ全体を中央表示にするためのコードを追加します。ここで大事なところは「margin-right」と「margin-left」を「: auto;」にすることです。
ここでボーダー、マージン、パッティングの関係が大事になってきます。上のリンクを参照してください。「auto」は中央寄りに動くイメージですね。
body{
color: #000000;
background-color: #beecfa;
background-image : url(../img/hpp01.gif);
margin-top : 2px; /*上側のマージン*/
margin-right : auto; /*右側のマージンをautoにする*/
margin-bottom : 2px; /*下側のマージン*/
margin-left : auto; /*左側のマージンをautoにする*/
text-align:center; /*センタリングを指示*/
width: 960px; /*幅を960にしています*/
font-size : 90%; /*フォントサイズ90%*/
background-position : center top;
background-repeat : no-repeat;
}
スタイルシートstyle.cssファイルは以下のようになります。
body{
color: #000000;
background-color: #beecfa;
background-image : url(../img/hpp01.gif);
margin-top : 2px; /*上側のマージン*/
margin-right : auto; /*右側のマージン*/
margin-bottom : 2px; /*下側のマージン*/
margin-left : auto; /*左側のマージン*/
text-align:center; /*センタリングを指示*/
width: 960px; /*幅を960にしています*/
font-size : 90%; /*フォントサイズ90%*/
background-position : center top;
background-repeat : no-repeat;
}
.center{ /*最初に保存していたcssコード*/
text aligh:center;
}
上記スタイルシートを呼びだす為のHTMLの記述方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<tytle>タイトルを入力します</tytle>
<link rel="stylesheet" type="text/css" href="style.css"> /*スタイルシートstyle.cssを指定*/
</head>
----------
<body>
<div class="center">文字を入力します。</div> /*スタイルシートのクラスcenterを指定*/
</body>
</html>
