◇センタリング・メモ
HTMLでのセンタリング
制御画面をWEBで実装する場合センタリングは極めて重要なものとなります。
● 基本は<center>
HTML5ではCSSで左マージン右マージンを設定する極めて原始的なやり方が推奨されています。
こういう反動主義は時々巻き起こりますが、無視し、基本は<center>を用いるべきです。
HTML5となっても<center>が無効にされてしまうことはあり得ません。
定義:
<center>
<p>-センター配置試験-</p>
<p>Pタブによる文字列</p>
<p><input type='button' onClick='alert("試験")' value='試験ボタン'></p>
<p><a class=A1 href='#' onClick='alert("試験")' >試験リンク</a></p>
<p>試験チェックボックス:<input type='checkbox'></p>
</center>
表示:
-センター配置試験-
Pタブによる文字列
試験チェックボックス:
なお<A>のclass=A1は本ブログでリンク文字列の形式を定義しているクラスで 今回の本質ではありません。
● 仕方なくCSSを使うなら
CSSで実装するには次の様にします。
定義:
<style>
.center{margin-left:auto;margin-right:auto;text-align:center}
</style>
<div class=center>
<p>-センター配置試験-</p>
<p>Pタブによる文字列</p>
<p><input type='button' onClick='alert("試験")' value='試験ボタン'></p>
<p><a class=A1 href='#' onClick='alert("試験")' >試験リンク</a></p>
<p>試験チェックボックス:<input type='checkbox'></p>
</div>
表示:
これを突き詰めると<div>の嵐となりますので避けた方が無難です。
制御用画面のHTMLには<center>や<table>を推奨します。
CANVASのセンタリング,DOMを用いたセンタリング
canvasのtext要素と、canvas上に置くHTMLのボタンやリンクをセンタリング法です。
● textのセンタリング
context.textAlignに"center"を指定します。
fillText()で与えるx位置は中心位置と解釈されます
● HTML要素のセンタリング
基本的にはcanvasとは無関係ですが、canvasにはUI機能要素が用意されていませんので、 HTMLの要素を汚らしい<div>内に配置して使用します。
中央寄せ指定はstyle.textAlignに"center"を指定します。
注意しなくてはいけないのが、位置を示すstyle.leftはあくまで左端の位置だと
いうことです。
記述例を示します。
<div id='area1' style='position:relative;width:480px;height:140px'>
<canvas id="canvas1" width="498" height="140"
style="background-color:black"></canvas>
</div>
<script>
function $E(id){return document.getElementById(id);}
function draw(){
var context= $E('canvas1').getContext('2d');
var area= $E('area1');
//
context.fillStyle="#F0F0FF";
context.fillRect(0,0,498,140);
var center_x = 249;
var y = 30;
var step = 30;
context.font = "16px 'ＭＳ Ｐゴシック'";
context.textAlign="center";
context.fillStyle="#000000";
context.fillText("-センター配置試験-",center_x,y);
context.fillText("fillTextによる文字列",center_x,y+=step);
// ボタン
var B= document.createElement("input");
B.type = "button";
B.value = "試験ボタン";
B.onclick = new Function("alert('試験');");
B.style.width = "120px";
B.style.textAlign = "center";
B.style.position = "absolute";
B.style.left = (center_x-60)+"px"; // left->center位置
B.style.top = ((y+=step)-15)+"px";// base->top位置
area.appendChild(B);
// リンク
var A= document.createElement("A");
A.style.fontFamily = "ＭＳ Ｐゴシック"
A.style.fontSize = "16px";
A.herf = "#";
A.innerHTML = "試験リンク";
A.onclick = new Function("alert('試験');");
A.style.width = "120px";
A.style.height = "20px";
A.className = "A1";
A.style.textAlign = "center";
A.style.position = "absolute";
A.style.left = (center_x-60)+"px"; // left->center位置
A.style.top = ((y+=step)-10)+"px";// base->top位置
area.appendChild(A);
}
draw();
</script>
表示:
Graphic2Dでのセンタリング(補足)
JavaのGraphic2Dの文字列描写関数はセンタリングの機能を持ちません。
表示される文字列の長さを取得し、自力で位置シフトを行う必要があります。
サンプルコードを示します。(説明、実行例は省きます）
// X方向のみセンタリング
static void drawStringAtCenterX(Graphics2D g2d,String text,int x,int y){
FontMetrics fm = g2d.getFontMetrics();
int len= fm.stringWidth(text);
g2d.drawString(text,x-len/2,y);
}
// X方向,Y方向センタリング
static void drawStringAtCenterXY(Graphics2D g2d,String text,int x,int y){
FontMetrics fm = g2d.getFontMetrics();
Rectangle rect= fm.getStringBounds(text,g2d).getBounds();
g2d.drawString(text,
x-rect.width/2,
y-rect.height/2+fm.getMaxAscent());
}
文字列の表示サイズの半分を引き、半分の長さだけシフトすることによりセンタリング しています。