HOME LIB.ARTS HTML/CSS JQUERY ASP.NET ACCESS PYTHON ABOUT

HTML/CSS {Article008}

説明文の表示 ライブデモを見る▶
ようこそ「HTML/CSS」へ...

「かっこ」や『二重かっこ』を半角にできるフォントを使うには【YakuHanJP】

当サイトのようにHTML、CSS、JavaScript、jQuery、ASP.NET、C#などを解説するときに、 「かぎ括弧」『二重かぎ括弧』【すみつき括弧】などを頻繁に使います。 ちやみにこれらの文字は約物やくもの(punctuation mark)フォントと呼ばれます。 約物フォントは全角なので多用すると見た目もよくなく余分なスペースをとります。 ここで紹介する約物フォント(YakuHanJP)を使うと約物フォントを半角の幅に狭めることができます。 こんな感じになります。

YakuHanJP
ゴシック		 YakuHanMP
明朝体		 YakuHanRP
丸ゴシック		 Yu Gothic
遊ゴシック		 Yu Mincho
遊明朝体		 Yu Gothic UI
遊ゴシック UI
、。！？〈〉《》「」『』【】〔〕・（）：；［］｛｝ 、。！？〈〉《》「」『』【】〔〕・（）：；［］｛｝ 、。！？〈〉《》「」『』【】〔〕・（）：；［］｛｝ 、。！？〈〉《》「」『』【】〔〕・（）：；［］｛｝ 、。！？〈〉《》「」『』【】〔〕・（）：；［］｛｝ 、。！？〈〉《》「」『』【】〔〕・（）：；［］｛｝
「かぎ括弧」『二重かぎ括弧』【すみつき括弧】 「かぎ括弧」『二重かぎ括弧』【すみつき括弧】 「かぎ括弧」『二重かぎ括弧』【すみつき括弧】 「かぎ括弧」『二重かぎ括弧』【すみつき括弧】 「かぎ括弧」『二重かぎ括弧』【すみつき括弧】 「かぎ括弧」『二重かぎ括弧』【すみつき括弧】

click image to zoom!
図1: YakuHanJP
図1をクリックすると拡大表示します。

作成手順

  1. VS2019(Visual Studio 2019 or Visual Studio 2022)を起動したら新規のWebフォーム「Article008.aspx」を作成します。

  2. Webフォームのヘッダータグ内「<head>...</head>」にLINKタグを追加してCDN(Content Delivery Network)から約物フォントを取り込みます。 ここでは「3.4.1」を取り込んでいます。最新版は公式サイト「Yaku Han JP」で確認してください。 さらにSTYLEタグを追加したら以下のCSSを入力します。約物フォントは98行目、103行目、108行目で指定しています。 
    Article008.aspx:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanjp.min.css">
<style>
    /*Reset Default CSS*/
    pre {
        border: none;
        border-left: none;
        border-left-width: 0px;
        display: normal;
        padding: 0px;
    }  

    /* Default CSS */
    pre.Article008{
        color: white;
        background: rgba(0,0,0,0.8) none center left / cover no-repeat; 
        transition: 1.5s;           
        border: 1px solid #999;
        border-left-width: 8px;
        border-left-color: blueviolet;
        margin: 0 0 1em;
        padding: .5em 1em;  
        font-family:'Yu Gothic';    /* Defaut font-family */
        font-weight: 600;
        font-size: larger;          /* Default font-size */
    }

        /* backgroud-image */
        pre.Article008-background-image-yoake1 {
            background-image: url(../../LibArts/Article/img/ArticleBgImage2/yoake1.jpg);
            transform: scale(1); /* zoom in */
            transform-origin: right;
        }

        pre.Article008-background-image-yoake2 {
            background-image: url(../../LibArts/Article/img/ArticleBgImage2/yoake2.jpg);
            transform: scale(1); /* zoom in */
            transform-origin: right;
        }

        pre.Article008-background-image-yoake3 {
            background-image: url(../../LibArts/Article/img/ArticleBgImage2/yoake3.jpg);
            transform: scale(1); /* zoom in */
            transform-origin: right;
        }

        pre.Article008-background-image-yoake4 {
            background-image: url(../../LibArts/Article/img/ArticleBgImage2/yoake4.jpg);
            transform: scale(1); /* zoom in */
            transform-origin: right;
        }

        pre.Article008-background-image-yoake5 {
            background-image: url(../../LibArts/Article/img/ArticleBgImage2/yoake5.jpg);
            transform: scale(1); /* zoom in */
            transform-origin: right;
        }

        pre.Article008-background-image-yoake6 {
            background-image: url(../../LibArts/Article/img/ArticleBgImage2/yoake6.jpg);
            transform: scale(1); /* zoom in */
            transform-origin: right;
        }

        pre.Article008-background-image-uchu {
            background-image: url(../../LibArts/Article/img/ArticleBgImage2/uchu.jpg);
            transform: scale(1); /* zoom in */
            transform-origin: right;
        }

        pre.Article008-background-image-yakei {
            background-image: url(../../LibArts/Article/img/ArticleBgImage2/yakei.jpg);
            transform: scale(1); /* zoom in */
            transform-origin: right;
        }

        pre.Article008-background-image-umi {
            background-image: url(../../LibArts/Article/img/ArticleBgImage2/umi2.jpg);
            transform: scale(1); /* zoom in */
            transform-origin: right;
        }

        pre.Article008-background-image-yama {
            background-image: url(../../LibArts/Article/img/ArticleBgImage2/yama.jpg);
            transform: scale(1); /* zoom in */
            transform-origin: right;
        }

        pre.Article008-background-image-hana {
            background-image: url(../../LibArts/Article/img/ArticleBgImage2/hana.jpg);
            transform: scale(1); /* zoom in */
            transform-origin: right;
        }

        /* font-family */
        pre.Article008-font-family-YakuHanMincho {
            font-family: 'YakuHanMP';
            font-weight: 500;
        }

        pre.Article008-font-family-YakuhanGothic {
            font-family: 'YakuHanJP';
            font-weight: 500;
        }

        pre.Article008-font-family-YakuhanMaruGothic {
            font-family: 'YakuHanRP';
            font-weight: 500;
        }

        pre.Article008-font-family-YuMincho {
            font-family: 'Yu Mincho';
            font-weight: 500;
        }

        pre.Article008-font-family-YuGothic { /*Default*/
            font-family: 'Yu Gothic';
            font-weight: 500;
        }

        pre.Article008-font-family-YuGothicUI {
            font-family: 'Yu Gothic UI';
            font-weight: 500;
        }  
</style>
  3. Webフォームのヘッダータグ内「<head>...</head>」にSCRIPTタグを追加してjQueryの最新ライブラリーを取り込みます。 ここではjQuery 3.6.0のライブラリーを取り込んでいます。 さらにSCRIPTタグを追加して、次のようなJavaScript/jQueryのコードを入力します。 
    Article008.arpx:

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script type="text/javascript">
    // jQuery Document Ready Event...
    $(function () {

        // Font-Family DropDownList  (cssFontFamily)
        $('.cssFontFamily').on('change', function () {
            var cssFontFamily = this.value;

            $('pre#Article008').removeClass('Article008-font-family-YakuHanMincho');
            $('pre#Article008').removeClass('Article008-font-family-YakuhanGothic');
            $('pre#Article008').removeClass('Article008-font-family-YakuhanMaruGothic');

            $('pre#Article008').removeClass('Article008-font-family-YuMincho');
            $('pre#Article008').removeClass('Article008-font-family-YuGothic');
            $('pre#Article008').removeClass('Article008-font-family-YuGothicUI');

            $('pre#Article008').addClass(cssFontFamily);

        });

        // Background-Image DropDownList  (cssBgImage)
        $('.cssBgImage').on('change', function () {
            var cssBgImage = this.value;

            $('pre#Article008').removeClass('Article008-background-image-yoake1');
            $('pre#Article008').removeClass('Article008-background-image-yoake2');
            $('pre#Article008').removeClass('Article008-background-image-yoake3');
            $('pre#Article008').removeClass('Article008-background-image-yoake4');
            $('pre#Article008').removeClass('Article008-background-image-yoake5');
            $('pre#Article008').removeClass('Article008-background-image-yoake6');
            $('pre#Article008').removeClass('Article008-background-image-uchu');
            $('pre#Article008').removeClass('Article008-background-image-yakei');
            $('pre#Article008').removeClass('Article008-background-image-umi');
            $('pre#Article008').removeClass('Article008-background-image-yama');
            $('pre#Article008').removeClass('Article008-background-image-hana');

            $('pre#Article008').addClass(cssBgImage);

        });
 
</script>

操作手順と解説

  1. サンプルが表示されたら「フォント」のドロップダウンリストからフォントを選択します。 約物フォントは「YakuHanMP」「YakuHanJP」「YakuHanRP」です。デフォルトは「Yu Gothic」です。

  2. 次に「フォントサイズ」のドロップダウンリストからフォントのサイズを選択します。デフォルトは「larger」です。

  3. 最後に「背景画像」のドロップダウンリストから背景画像を選択します。デフォルトは「無なし」です。

Live DEMO

約物半角専用のWebフォント【YakuHanJP】を使ってみる！
フォント: 背景画像: 

「約物半角専用のWebフォント」を使うと、
テキストの日本語に含まれている約物を
半角にすることができます。

たとえば、
「かっこ」や『二重かっこ』、
【バッジに使いそうなかっこ】などを
半角にできます。
Go Top