<div style='position:relative;height:200px;'>
<div id="target" style='position:absolute;left:0;top:0'></div>
<div style='position:absolute;left:0;top:0;padding:15px'>
<b style='color:#ff0000'>★ 角丸の DIV を CSS3 で実装せずに、Canvas で実装</b><br><br>
<b style='color:#0000ff'>この文章の下側で、角丸BOX が描かれています</b>
</div>
</div>
<script type="text/javascript">
// CANVAS を作成
var canvas = document.createElement("canvas");
// 幅と高さを設定
canvas.setAttribute("width", "500");
canvas.setAttribute("height", "200");
// 初期化
if ( ! canvas || ! canvas.getContext ) {
G_vmlCanvasManager.initElement(canvas);
}
// CANVAS を ターゲットの Child として追加
document.getElementById("target").appendChild(canvas)
// 2D 処理の準備
var ctx = canvas.getContext('2d');
box( ctx, 0, 0, 500, 200, 5, 15 )
function box( c, x, y, w, h, lw, sz ) {
// c : コンテキスト
// x : 基準位置
// y : 基準位置
// w : 幅
// h : 高さ
// lw : 線の太さ
// sz : 角丸半径
// ライン用ストローク開始
c.beginPath();
// 開始位置へ移動
c.moveTo(x+(lw/2)+sz, y+(lw/2)); // 左上直線開始部分
c.lineTo(x-(lw/2)+w-sz, y+(lw/2)); // 上部分の直線( 右上に向けて )
c.moveTo(x-(lw/2)+w, y+(lw/2)+sz); // 右上直線開始部分
c.lineTo(x-(lw/2)+w, y-(lw/2)+h-sz); // 右部分の直線( 右下に向けて )
c.moveTo(x-(lw/2)+w-sz, y-(lw/2)+h); // 右下直線開始部分
c.lineTo(x+(lw/2)+sz, y-(lw/2)+h); // 下部分の直線( 左下に向けて )
// 左下直線開始部分
if ( sz == 0 ) {
c.moveTo(x+(lw/2), y+h-sz);
}
else {
c.moveTo(x+(lw/2), y-(lw/2)+h-sz);
}
// 左部分の直線( 左上に向けて )
c.lineTo(x+(lw/2), y+(lw/2)+sz);
// 四隅の角丸
c.arc(x+(lw/2)+sz, y+(lw/2)+sz, sz, 180*Math.PI/180, 270*Math.PI/180, false );
c.arc(x-(lw/2)+w-sz, y+(lw/2)+sz, sz, 270*Math.PI/180, 360*Math.PI/180, false );
c.arc(x-(lw/2)+w-sz, y-(lw/2)+h-sz, sz, 0*Math.PI/180, 90*Math.PI/180, false );
c.arc(x+(lw/2)+sz, y-(lw/2)+h-sz, sz, 90*Math.PI/180, 180*Math.PI/180, false );
// 線幅で全て描画
c.lineWidth = lw;
c.stroke();
}
</script>
Word や Excel でリボンの最初にある「フォント」に対する装飾ですが、
( この画像は Word です )
特定の装飾を「解除」するのには、その装飾を設定した時の逆を実行する
必要があります。でも、Wordを勉強する為のテキスト等では、どんどん機
能が増えて行くのに、「解除」方法を頭の中で整理するのは結構大変です。
フォントは比較的簡単です。多くの装飾がありますが、たいていリボンの
ホームの一番左で設定および解除ができます。しかし、ダイアログを表示
してから設定や解除する方法も、多くの機能を使いこなすにはとても重要
になります。
これ以外にも、「
いざと言う時のプロパティダイアログ。すぐ表示できるように「プロパティ」にチェックしておきます。
このメニューの表示は、言語バーの右下の小さな ▼ をクリックします
--------------------------------------------------------------
アプリケーションによってメニューの形は違うかもしれませんが、漢字入力可能な状態でCTRL+変換すると以下のようなメニューを表示させてから「プロパティ」を選択する事によってプロパティダイアログを表示する方法もあります
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
