エスエムティの愉快な仲間たち

こんばんはばさっちです。
今日はIllustratorでできる手書き風テキストを作り方をご紹介します。

まずは「効果」→「スタイライズ」→「落書き」を選ぶ

次にオプションを選びます。
—————————–
角度：30°
アウトラインとの重なり：1px
変位：1px
線幅：1px
角の丸み：0％
変位：30％
間隔：2px
変位：0px
—————————–
だいたいこんな感じでOKです。

後はプレビューを見ながら微調整してもOK!!


最後に線を入れたら完成です!


色変えたり色々アレンジもできます!!

優しい感じのテキストに出来上がりました!!
覚えておくとこういったテキストが似合うサイト作成なんかに役に立つんじゃないでしょうか？

こんばんはーばさっちです。
皆さんはSVGを記述する時ってインラインSVGですか?imgタグでしょうか？

できればインラインで書いてCSSで色の変更ができるのが一番いいんですが、
インラインSVGってコードが長くてなんか分かりづらいですよね…

どうせならimgタグみたいに簡単に記述して色の変更してみたいですよね？
そんなことを可能にしたのが、「deSVG」です。

この「deSVG」を使うのimgタグで記述したSVGがインラインSVGに変換することができちゃいます。

1、まずは本体をダウンロードしたら「desvg.js」というファイルを読み込みましょう!!
2、次に下記のように記述し準備はOK!!

<script>
window.addEventListener(‘load’, function(){
deSVG(‘.svg’, true);
});
</script>

3、後はsvgファイルを読み込むこの時に指定したclass（今回はsvg）を記述します!!

<img src=”images/test.svg” alt=”” class=”svg”>

これで完了です!!

色の変更は下記のようにクラス+pathでOK

.svg path{
fill: #000;
}

imgタグで書ければ記述も簡単だしコードもシンプルでいいですよね!!

こんばんはばさっちです。
先日Sublimetextでコーディング中にブラウザプレビュー（FireFox）しようと思ったらできていたはずのプレビューができない…

再起動しても治らず…Chromeではプレビューできたので（見れないけど）FireFoxの問題かな～と思って色々調べたらSublimetextの「View in Browser」設定が変わってました…

解決法がわかったのでご紹介します。

まず基本設定→PackageSettings→Setteings-Userを開く


下記画像の部分を変更


私の場合は「C:\\Program Files」を「C:\\Program Files (x86)」に変更したら無事に治りました!

アプデ等で変更になったのかな？
原因は分かりませんが無事プレビューすることができました!!

こんばんはばさっちです。
コーディングしたサイトをChromeで見るとぼやけてる時ってありませんか？（FireFox派）
レスポンシブデザインだったりすると、多少画像を大きく書き出すと思うんですが、PCサイズに縮小表示するとこんな感じで多少ぼやけてることありますよね?



きちんと整数で割り切れすサイズにリサイズできればよいのですが、そうは行かないこともしばしば…そんな時に便利な対処法をご案内したいと思います。

画像のcssに1行追加するだけで簡単に解消できます!!
-webkit-backface-visibility:hidden;を追加するだけ



今回見やすいようにフォントサイズの大きい画像でお見せしているので若干ジャキって見えますが、イラストや通常のテキストであれば目立つことはありません。

どうしてもリサイズできない場合に試してみてはいかがでしょうか?

こんばんはばさっちです。
コーディング後のバリデーションってどうしてますか？

昔だったらhttps://validator.w3.org/とかhttp://www.htmllint.net/で行っていたと思うのですが、今はChromeなどのブラウザで簡単にできちゃいます!!!

まずはここからChromeにインストールします。
■HTML Validator

開発者ツールを出して下記のHTML validatorをクリック!!


あとは右側に表示されるので注意文に従って修正していけばOK!!


別ウィンドウで表示してやると更にやりやすいですよ!!