波・花柄・中華・ひし形・星など色々な区切り線が使えます

ページ内で領域や境界を表現する時、まめわざでは色々な方法がとれますが、「空白・区切り」ブロックが最も手軽です。
このブロックで設定できる区切り線の種類を、実線・点線・二重線の3種から大幅に増やしました。
ここでは、新しい区切り線の種類と使い方を紹介します。

区切り線の種類

丸や四角の基本図形と直線・曲線の組合せの他、複雑な図形も用意しました。
ここではグループごとに色付けしていますが、利用時には全ての線の色を自由に設定できます。

矩形を使った表現

波線

複雑な図形

ひし形

星(六芒星)

その他

利用例

境界として使う

段落と段落の間に区切り線を挿入し、コンテンツの領域を分割する使い方です。

注目させるために使う

上下に区切り線を設置し、間に挟んだコンテンツを目立たせる使い方です。

使い方

使い方はとてもシンプルで、「空白・区切り」ブロックの「装飾」から区切り線の種類や色を選択するだけです。

手順

任意の場所の「+」をクリックし、「空白・区切り」を選択して
「空白・区切り」ブロックを挿入します。

「空白・区切り」ブロックの装飾ボタンをクリックします。
このブロックには編集ボタンがなく、区切り線や高さの設定は装飾メニューで行います。

「区切り線・高さ」タブをクリックし、「区切り線の種類」と「区切り線の色」を選択します。
高さを帰る場合は、「高さ」を設定します。

「パパっと装飾」タブでは、新しい区切り線を使った雛形も多数用意しています。

注意点

IE9以下では表示されない区切り線があります。
Android2以下など、古いWebkitブラウザでは、線の見た目が変わる場合があります。

技術的な解説

上で紹介した線はCSSを使って表現していますが、borderやborder-imageではなくbackground-imageを利用しています。
「複雑な図形」はSVGを利用しています。SVGは次の方法でCSSに直書きできます。

background-image:url("data:image/svg+xml,***");

***には、decodeURIComponentでデコードしたsvgの文字列が入ります。

これ以外は、background-image:gradientとbackground-sizeで表現をしています。
矩形の場合はlinear-gradientを使い

background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 1)), color-stop(0.33, rgba(0, 0, 0, 1)), color-stop(0.33, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)) );
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 4px, rgba(0, 0, 0, 0) 4px);
background-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 4px, rgba(0, 0, 0, 0) 4px);

として塗り部分の横幅と色を定義し、

background-repeat: repeat-x;
background-size: 12px 4px;

として間隔と高さを定義しています。
円の場合は、

background-image: -webkit-gradient(radial,center center,0,center center,3,from(rgba(0, 0, 0, 1)),color-stop(0.5,rgba(0, 0, 0, 1)),color-stop(0.9,rgba(0, 0, 0, 0)),to(rgba(0, 0, 0, 0)));
background-image: -webkit-radial-gradient(center center, 3px 3px, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0));
background-image: radial-gradient(3px 3px at center center, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0));

として円のサイズと色を設定し、linear-gradientと同様にbackground-sizeで間隔と高さを設定します。

repeating-linear-gradientの使い所

repeating-linear-gradientは、linear-gradientとbackground-sizeの組合せをrepeatすることで補えるため使い所が多くはありませんが、今回の区切り線の中では、斜線に使うと次のようにシンプルになります。

background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 3px, rgba(0, 0, 0, 0) 3px, rgba(0, 0, 0, 0) 8px);

三角形を2つ繋げて平行四辺形を作るlienar-gradientに比べるととてもシンプルで、サイズの調整も容易です。

2017/1/17