2017年2月27日月曜日

SVG画像がFlexBox内に収まらなかった話

SVGに対してmin-heightプロパティを設定した時、FireFoxとChromeで挙動が異なったので覚書。

下の結果は二つのブラウザで挙動が異なる。タイプミスとか微調整で手間取ってインデックスが多くなってしまった。

同じ挙動にするにはSVGに設定しているmin-heightをコンテナに対して設定する。

.container {
  min-height : 200px;
}

svg {
  width: 100%;
}

上記で横方向は同じ挙動になる。しかし、今度は縦方向で挙動が変わってしまう。SVGをさらにラップするとか、flexにmin-heightを設定するとかで何とかできるが、それぞれに挙動が違って悩ましい。

2017年2月15日水曜日

またmarginが悪戯した話

当ブログのCSSを編集している際に謎の横スクロールが発生した。一応レスポンシブにしているのでスマホでの表示を確認しようとして発見。ページ内のすべての要素は収まっていてはみ出している要素は見つからないのに横スクロールバーが出てしまう。原因は世のウェブデザイナーを悩ませているmargin。

Bloggerで画像を挿入する際に一部の画像を中央に配置しているが、その画像に対して(勝手に)挿入されていた

  style="margin-left: 1em; margin-right: 1em;"

が悪さをしていた。画像をすべて調べて消すべきだが手間なので

.separator a {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

で退治(多分出来ているはず)。.separatorが他で利用されていると問題が再発するかもしれない。

ここで嘆いている人がいるが、本当にmargin-boxが欲しい。

2017年2月8日水曜日

妄想雑誌の表紙

※この表紙は架空の雑誌のものであり、実在材する人物・団体とは関係ありません。

InkscapeでDTPをしてみたいと思ったが勉強不足でままならない。オリジナルファイルは見せられないレベルで汚い。ガイドをたくさん引いたのだがあんなに必要だったのか?現場の作業を見てみたい。

素材(敬称略)

2017年2月6日月曜日

Inkscapeで漫画用枠線を作ってみる

普通に枠線を引くのであれば漫画用アプリで十分な機能は備わっていますが、

少し変わり種を使いたい場合、ドローツールの自由度には敵わないと思います。

新しい表現を模索していてInkscapeにたどり着いた方に向けて、まずは普通の枠線を引く手順を解説していきたいと思います。

2017年2月3日金曜日

paint-order...もう少し早ければ...

概要

Inkscape独自命令ではなくSVGに追加されたものなのでWebサイトでもそのまま使えるのがGood。

paint-orderがなかった頃は上図のような太めの縁取りをしたい場合にひと手間必要だった。単に縁取りをすると下図のように文字がつぶれてしまったからだ。

以前までは下図のように縁取りオブジェクトにフォントオブジェクトなどを重ねる必要があった。

この方法だと手間がかかる上に画像サイズが2倍になってしまう。両方解決できて一石二鳥。フィルストロークダイアログのストロークのタブの順番の項目にあるコレ。このアイコンをクリックするだけで簡単。

グループには無効

残念ながら左図のようになる。古の手法で乗り切るしかない。ただし、色が同じならパスを結合で解決(右図)。単調ならグラデーションでがんばれる。

サイズ

うっかりするかもしれないストロークの幅に関して。

  • 左...ストロークの幅は設定どおりだがオブジェクトがストロークの幅分小さくなる。
  • 中...オブジェクトはそのままだがストローク幅が半分になる。

となるので、オブジェクトをそのままで表示したくてストローク幅が決められている場合は右のようにストローク幅を2倍に設定する必要がある。

以前描いていた系統のイラストなら多用していてたであろう機能。今はこれでは物足りない。あと、某イラレみたく一つのパスに複数のストロークや塗りを適用できるようにすればよかったのにと思う。Inkscape独自でなくSVGの規格として。