CSS2.1で初心者マークを描く

HTML5から導入されるcanvasタグを使わずとも、初心者マークならCSS2.1で描けます。

実際に初心者マークを描いたサンプル

  1. 大きさを割りと自由に変えられます。CSSを調整すればピクセル単位で大きさを微調整できます。下の初心者マークはサンプル画像なので、CSSで作成したものではありません。CSSで初心者マークを描くサンプルページをご覧いただきますと、CSSで描いた実際の初心者マークの表示を確認できます。

    css-beginner-mark-1.png

HTML記述例

  1. HTMLの構造は単純です。次のコードをコピペするだけです。後述するJavaScriptを使えばもっとシンプルにできます。なお、クラス名のbmはBeginner Markに由来します。

    <div class="bm">
    <span class="bm1"><span>.</span></span>
    <span class="bm2"><span>.</span></span>
    <span class="bm3"><span>.</span></span>
    <span class="bm4"><span>.</span></span>
    </div>

  2. 上のコード内のdivのクラスに次のクラスを追加すると大きさを調整できます。

    • xl
    • l
    • (何も追加しなければ基準サイズ)
    • s
    • xs

CSS記述例

  1. 初心者マークの構造と色合いを先に定義しました。大きさのパターンをいくつか用意しましたが、これらの限られず自由に調整できます。

    /¶構造と色合い/
    .bm1,.bm2,.bm3,.bm4{
    width:0;height:0;
    border:0 solid #fff;
    display:block;
    border-color:transparent;
    /
    ※ ie6はtransparent非対応なので、
    ※ ie6にも対応させる場合はborder-colorを調整するとよいでしょう
    /
    }
    .bm1{border-right-color:#3c3;border-left-color:#ff3;}/上部/
    .bm2{border-right-color:#3c3;background-color:#ff3;}/中部/
    .bm3{border-top-color:#3c3;}/下部右 緑/
    .bm4{border-top-color:#ff3;position:relative;}/下部左 黄/
    .bm span span{display:none;}


    /¶大きさ / 注：基本サイズ以外にはclassにbmと同時にxlなどを設定すること/

    /基準サイズ{横幅:40px;高さ:64px;}/
    .bm1,.bm2,.bm3,.bm4{font-size:20px;}
    .bm .bm1{border-width:1em 1em 0 1em;}
    .bm .bm2{border-right-width:1em;padding-left:1em;height:1em;}
    .bm .bm3{border-width:1.2em 1em 0 1em;}
    .bm .bm4{border-width:1.2em 0 0 1em;top:-1.2em;margin-bottom:-1.2em;}

    /X-Large 特大{横幅:80px;高さ:128px;}/
    .xl .bm1,.xl .bm2,.xl .bm3,.xl .bm4{font-size:40px;}

    /Large 大{横幅:60px;高さ:96px;}/
    .l .bm1,.l .bm2,.l .bm3,.l .bm4{font-size:30px;}

    /Small 小{横幅:20px;高さ:32px;}/
    .s .bm1,.s .bm2,.s .bm3,.s .bm4{font-size:10px;}

    /X-Small 特小{横幅:10px;高さ:16px;}/
    .xs .bm1{border-width:5px 5px 0 5px;}
    .xs .bm2{border-right-width:5px;padding-left:5px;height:5px;}
    .xs .bm3{border-width:6px 5px 0 5px;}
    .xs .bm4{border-width:6px 0 0 5px;top:-6px;margin-bottom:-6px;}

JavaScript記述例

上述のHTMLコードを描きたいところにコピペする方法よりもスマートな描き方だと思います。JSその1(標準タイプ)とJSその2(後方支援タイプ)の両方を使う必要はなく、どちらか一方だけで初心者マークを描けるようになります。

JSその1(標準タイプ)

  1. 次のJavaScriptコードは＜head＞内などHTMLの上の方に記述します。

    <script type="text/javascript">
    <!--
    function bm(str){
    document.write('<div class="bm '+str+'">');
    for (i=1;i<=4;i++){
    document.write('\
    <span class="bm'+i+'">\
    <span>.</span>\
    </span>\
    ');
    };
    document.write('</div>');
    };
    // -->
    </script>

  2. 初心者マークを出したいところに下のJSコードを記入します。赤のsの部分を次のいずれかに変更することでサイズを調整できます。

    • xl
    • l
    • (空白にすれば基準サイズ)
    • s
    • xs
    <script type="text/javascript">
    <!--
    bm("s");
    // -->
    </script>

JSその2(後方支援タイプ)

  1. 次のJavaScriptコードは＜/body＞付近などのHTMLの下の方に記述します。なお、上述のJSコードと両方設定する必要はありません。

    <script type="text/javascript">
    <!--
    var el=document.getElementsByTagName('*');
     for (var i=0;i<el.length;i++){
     if(el[i].className=='bmjs'){
    el[i].innerHTML='\
    <div class="bm">\
    <span class="bm1">\
    <span>.</span>\
    </span>\
    <span class="bm2">\
    <span>.</span>\
    </span>\
    <span class="bm3">\
    <span>.</span>\
    </span>\
    <span class="bm4">\
    <span>.</span>\
    </span>\
    </div>\
    ';
    };
    };
    // -->
    </script>

  2. 初心者マークを表示したいところに次のHTMLコードを記入します。

    <div class="bmjs">.</div>

  3. サイズを調整する場合は、次のようにサイズ調整用クラス付きのdivの中に入れます。

    <div class="s">
    <div class="bmjs">.</div>
    </div>