早速やっていきましょう。
Adobe XDをどう使う？
コーディング業務に必要なWebカンプを作るのに使います。
Webカンプは「コーディングの設計図」のようなもので、見た目だけではなく、そこからコーディングに必要な数値を拾うことができるものです。
もちろん、できることはそれだけではないのですが。
コーダーの視点でのお話ということですね。
AdobeXDの操作感
以前、IllustlatorやPhotoshopを触ったことがあるので、
あまり違和感はなかったです。
難しいという印象は特になく、便利だなと感じたのが
Altキーを押すことで選択中の要素から別の要素までの距離を
pixelで確認できるというところです。
あとは、コンポーネント
デザイン上でよく使う「かたまり」を登録して、
再利用できる仕組みです。
例えば、ボタンなど複数出てくる部品の「ベース」を作り、
それをコンポーネントとして登録して、再利用する。
さらにスゴイのはコンポーネントは、各種設定値も共有されています。
例えば、コンポーネントの背景色を変更すると、
再利用して作られた部品も同様に背景色が変更されるのです。
具体例をあげると、メインのサイトカラーが変更になった場合などですね。
ボタンの色を全て変える必要が出てきたとしても、
事前に登録したコンポーネントの色を変更する。
これだけで再利用して作った派生ボタンの色が「すべて変わる。」
これは素敵機能ですよね。
ただし、再利用して作った要素の設定を
個別に変更した箇所については共有されないので注意が必要です。
jQueryの復習
しばらくSassに触れていたので殆ど触っていませんでした。
HTMLとCSSは何をやっていたとしても触りますが、
それ以外は意識して使わないと学習中は忘れてしまいますね。
ということで、改めて基本を復習。
基本の書き方から、サクサク確認していきます。
$(function(){
//ここに処理を書く
});
$マークをつけて、function(){ }を括弧でくくります。
この中に処理を書いていきます。
処理部分の基本的な形は
$("主語").動詞("補語")
具体例をあげると
$("#test").text("テスト終了");
この様な形ですね。
idは「 # 」を先頭につける
クラスは「 . 」を先頭につける
タグは「 a 」そのまま書く
よく使う機能をおさらい
先程の基本の形で言うところの動詞の部分にあたります。
俗に言うメソッドですね。
いまさらですが、引数を指定するかしないか、
また、引数の指定数によってメソッドの挙動が変わってますよね？
これ、調べたら他の言語ではオーバーロードっていうらしんですが、
JavaScript、jQueryではサクッと情報が出てきませんでした。
ご存じの方いらしたら教えてほしいです。
では気を取り直して、よく使うメソッド見ていきます。
- .text() テキストの取得
- .text('変更したいテキスト') テキストを引数の値に変更する
- .attr('属性') 引数に指定した属性の値を取得する
- .attr('属性', '値') 引数に指定した属性の値を変更する
- .addClass('クラス名') 引数に指定したクラスを要素に追加する
- .removeClass('クラス名') 引数で指定されたクラスを要素から削除する
イベント監視
イベントは「状態変化」のことでしたね。
例えばクリックされたら、カーソルが乗ったらとかです。
クリックされたときに処理を行う
$("セレクタ").click(function(){
-----処理を書く-----
});
カーソルが乗ったら処理を行う
$("セレクタ").hover(
function(){
-----乗った時の処理を書く-----
} ,
function(){
-----外れた時の処理を書く-----
}
);
今日のまとめ
今日はjQueryの復習とAdobe XDについて学習しました。
やらないとホント忘れてしまいますね。
では、また。