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

Sassとは、

「Syntactically Awesome StyleSheet」

の略で、「すごいCSS」的な意味らしいです。笑

コーダーさんなら聞いたことはあるけど、
なんとなく手を出していない方もいるのではないでしょうか。

導入については、

1.Rubyのインストール
2.Sassをインストール
3.Compassをインストール
4.必要に応じてコンパイルツール「Koala」等をダウンロード

といった手順になりますが、
ここに書くと長くなるのでググって下さい…！

Sassの中でも一番簡単に試せる記述方法。
それはやはり「変数」でしょう。

——————————
$Color: #000;

p{color=$Color;}
——————————

「$」に続いて変数名を指定することで使用することが出来ます。
あとは使いたい箇所で呼び出すだけ。

上記の例だと、「$Color」に黒色を設定しています。
文字色やリンクカラー等で必要な場合に
「color=$Color;」のように変数名で色を指定できます。

運用中に「黒ではなく青にしたい」といった要望があったとしても、
変数を設定している一か所だけを変更すれば良いですね。
管理がとても楽になります。

導入まではひと手間ありますが、
使ってみると便利な点が色々ありますよ。
モノは試しに是非どうぞ。

ぴの子

コロナウイルスの話題が尽きませんが
前回の記事で書いていた参加予定のイベントも延期になり
とりあえず計画していた全ての旅行を断念する形になりました。
事態が事態なので仕方ないですね。。

通っているジムは通常営業中なのですが、
不安があるので一応行かないようにしています。
休会制度はないので無駄金を払うことになりますが…。

あまり自粛ばかりなのもどうかとは思いますが
もう少し落ち着くまでは様子見しようかと思います。
休日は引きこもりが加速しますね！

そんな休日、Adobe XDの勉強でもいかがでしょうか。
アカウントさえ作れば無料で利用することが出来ます。

◆Adobe XD
https://www.adobe.com/jp/products/xd.html

無料プランの場合、共有できるプロトタイプ数や
ストレージの容量に少し制限がある程度で
ツールとしては機能制限等もありません。

公式のスターターキットで感触を確かめたら、
UIキット等も活用してみると面白いですよ。

◆UIキット集
https://www.adobe.com/jp/products/xd/ui-design-kits.html

デザインの勉強や、自身のホームページ制作なんかも捗ります。
やることのない休日にでも是非どうぞ。

ぴの子

何かとコロナウイルスの話題でもちきりですが、
私が参加予定だったイベントも中止になり
色々と予定をどうしようかと悩んでいる今日この頃です。

明後日金曜日、都内某所であるイベントにも参加予定なのですが
これは今のところ公式には発表がなく。。

規模的にはそこまで大きいイベントではない（？）ので
強行するのかな…参加するのもしないのも自己責任でしょうけど
中止なら中止で早めに決めて欲しいと思ったり。

そんな最近、営業さんがAdobe XDで指示書を作っているようで

『Fireworksでいう「キャンバスにフィット」が無い！』

と言っていました。

が、プラグインにありますよ！！

以前にもブログで紹介しましたが、

———————–

◆Resize Artboard to Fit Content
アートボードをコンテンツ内容でリサイズできるプラグイン。
Photoshopでいう「透明ピクセルをトリミング」みたいな機能です。

———————–

↑これで同じようなことができると思います。

私もわりとXDには触れているつもりですが、
まだまだ分からないことも多いので。。

情報交換しつつ、マスターしていきましょう。

ぴの子

ホームページにちょっとした動きを付けたい時によく使うこちら↓

◆Animate.css
https://daneden.github.io/animate.css/

使っている方も多いと思いますが、
CSSなので軽量ですし使い方も簡単ですし良い事づくめです。

「画面内に表示されたらアニメーションしつつ表示する」

ということをやりたい時に、こんなスクリプトを書いて実装します。

————————————-

$(window).on(‘scroll’, function (){

var animated = $(‘.animated’);
animated.each(function () {

var animatedOffset = $(this).offset().top;
var position = $(window).scrollTop();
var wh = $(window).height();

if(position > animatedOffset – wh + (wh / 2) && $(this).hasClass(‘up’)){
$(this).addClass(‘fadeInUp’);
}else{
$(this).removeClass(‘fadeInUp’);
}
});

});

————————————-

Animate.cssを使うためには
「animated」というクラス名が必須なので、
その位置を「offset」を使って取得します。

if文で「どの位置に来たら動かすか」を決め、
「hasClass」を使って「up」というクラスが付与されている場合に
「fadeInUp」の動きで表示を行う！

といったスクリプトになっています。

「hasClass」の辺りを派生させれば、
「down」が付いていれば「fadeInDown」で動かす！

なんてことも簡単に出来ますね。

さくっと動かしたい時にはAnimate.css、おすすめです！

ぴの子

2020年ももう約1ヵ月が過ぎようとしていますね。
そういえば今年の目標みたいなものを書いていませんでしたので
一応ブログに記しておこうかなーと…！

今年の目標はずばり「引きこもらない！！」

ということでしょうか。笑

いや、休日はずっと家にこもって
ダラダラしているというわけでは無いのですが（半分はそうですが。笑）
なんとなくいつもやることが決まっている感じはしていました。

今年は行きたい所、見てみたいものがあれば
あまり考えずに行ってみようかなーと思っています。

いつも

「今月はちょっとお金使い過ぎたからなー」

とか

「せっかく行くなら面白そうなところ全部周ろう！」

なんて思っているうちに考えが纏まらなくて
結局断念したりとかしているので。。

とりあえず2月は東京、3月は大阪、5月にも東京行きが決まっています。
（飛行機が苦手なのであまり遠くまで行けないのが欠点…）

行けばなんとかなるの精神で、楽しむ一年にしたいですね！

ぴの子