宝の地図風も!凹凸のある背景でコンテンツを彩れます

まめわざの最大の特徴の1つである装飾機能で、手書き風・紙風・古地図風など直線以外の境界が利用できるようになりました。
使い勝手もこれまでと変わらず、色や模様の組合せも無限大。今まで以上に多様な表現が出来ます。

新しい「境界の形」とは

新しい境界の表現は、装飾ウィンドウ内で「境界の形」という名称で表示されます。
今回追加した「境界の形」は以下です。

手書き風

古地図

膨張

収縮

ビスケット

トゲトゲ

鈎付き

ギザギザ

見出し・文章・箇条書き・テーブル(表)・画像・動画など、殆どのブロックで利用できます。

使い方

まずは、ブロックの「装飾」ボタンを押し装飾ウィンドウを開きます。
背景を設定するタブを押すと、「境界の形」という名称で表示されますので、ここで選択します。尚、標準は「ノーマル(四角)」です。

これまで「角丸」という設定欄で提供してきた角を丸くする効果は、この「境界の形」に統合され、「角丸(小)・角丸(中)・角丸(大)・円/楕円」という名称で設定できます。

また、境界の形を使った雛形も多数追加しましたので、パパっと装飾からワンクリックで利用可能です。

効果的な使い方1)模様と組み合わせる

「境界の形」を利用する際は、色の設定欄の「模様」タブで模様を設定し併用すると効果的です。
手書き風・紙・古地図に紙っぽい模様を追加して質感を出したり、ビスケットに水玉やチェックを合わせるなど、色々な使い方出来ます。

模様なし

模様あり

模様なし

模様あり

効果的な使い方2)塗り重ねて境界を強調する

「境界の形」はその名の通り境界を工夫する表現なので、境界が目立つと強調されます。
「境界の形」を使った領域(前面)と背景(背面)との色の落差(コントラスト)が大きいほど、境界を目立たせることが可能です。
背景色を設定したり、加えて影を併用すると、効果的に境界を強調できます。

背景・影なし

背景・影あり

注意点

古いブラウザは未対応だが99%はカバー

ホームページのデザインの多くは直線で構成されますが、ホームページ言語は直線以外を表現するのが苦手です。
今回、ホームページ言語の比較的新しい規格を採用し、直線以外の表現を実現しました。
そのため、IE10以下やAndroid4.0以下の標準ブラウザなど一部の古いブラウザでは境界の形が表示されません。
一方で、最新ブラウザやスマートフォンのブラウザは対応しており、弊社のブラウザシェア調査の結果から計算するとそのシェアは97.6~99%をカバーします。
また、未対応ブラウザであっても、中身の判読性が下がるなど致命的な影響がないので、安心してご利用いただけます。

線との併用は出来ません

角丸・円/楕円以外の境界と線は併用が出来ません。
併用できない「境界の形」と線の両方を選んだ場合、後に選んだ方だけが適用され、前に選んだ方は自動で無効化されます。

グラデーションや凹凸との併用には向きません

境界にはグラデーションが反映されません。そのため、色にグラデーションを組み合わせると、境界が枠のように浮き上がってしまいます。
また、凹凸は境界に沿って適用されず、内側の四角形に適用されます。そのため、内側の四角形と境界が分離されてしまいます。
以上から、狙って使わないのであれば、グラデーションや凹凸との組合せは避けた方が無難です。

グラデーションと併用した例

凹凸と併用した例

フキダシの自由度もアップ

今回の更新では、フキダシも更に使いやすくなりました。
フキダシはこれまで四方を選ぶだけでしたが、今回の更新により左右に設置する場合の上下位置、上下に設置する場合の左右位置を3ヶ所で、4方向×3ヶ所=計12ヶ所に設置できるようになりました。
また、サイズも高さと幅をスライダーで調整できるので、希望通りのフキダシが作れます。

装飾ウィンドウのフキダシ設定欄12ヶ所から位置を選び、スライダーで幅と高さを設定

技術的な説明)border-image+SVGで表現力アップ

今回の「境界の形」では、border-imageにSVGを利用しています。
色を自由に設定できる機能が必要な場合はこの組合せがベストという判断となりました。
SVGであれば、スマホやマックブックなどの高解像度環境でもキレイに表示できます。
一方で、色の設定が不要であれば、PNGなどの画像を使った方が表現の幅は広がります。

border-image用のSVGを用意し、CSSに直書きする

border-imageは、1つの画像を9つのパーツに分け、上下左右と4つ角の8ヶ所に配置するのが基本的な使い方です。
これを前提にSVGを設計し、border-image-sliceで分割位置を指定して配置します(30x30の画像を9個の10x10に分ける、など分かりやすい設計にしましょう)。
border-imageもbackground-imageと同様、下記のようにurl()の中にURLエンコードしたSVGを設置することで、外部ファイル化することなく利用できます。尚、border-imageで参照だけを行うプロパティはborder-image-sourceです。

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

背景色とborder-imageが被らないようにするためにはborder-image-outsetを使います。領域の外側にborder-imageを配置されるため、borderの幅は狭めにしています(広くすると領域が広がってしまいます)。

2017/1/24