ドロップダウンメニューのアニメーション覚書
ドロップダウンメニューのアニメーションについての覚書です。
上記のサイトの「SIMPLE PURE CSS DROPDOWN MENU1」のCSSについて考察
・transform(translate(X軸,Y軸))
要素をX軸、Y軸にずらすことができる。これでドロップダウン要素を予めビュー外にずらしておいて、hoverしたときに元の位置に戻すといい感じのアニメーションになる。
例
transform(translate(0,-100%)) 画面の上の方にずらしておく
↓
transform(translate(0,0)) 元の位置に戻す
・overflow hidden
transformと一緒に使うことで、ずらした要素を非表示にできる。
・~
以下のサイトがわかりやすかった
セレクタの次に「~」を入れセレクタを指定することで、指定の要素の後にある同じ階層の要素に装飾が適用可能。
これを使って、メニュー要素にhoverしているところにマーカーが移動する表現を実現。
BEMについて
この記事は自分の理解を確認するためのアウトプット
全ては書籍「CSS設計完全ガイド」に書かれているのでそちらで。
BEMの基本
Block
・特定のコンテンツに依存しない、どこでも使い回せるパーツ
・見た目を表す命名ではなく、「それが何なのか」を表すようにする
（例）赤いテキストにするクラス
red-text → 見た目を表すのでNG
error-text → それが何なのかを表すのでOK
Element
・Blockを構成し、Blockの外では独立して使用できない物
・Blockの名前を継承し、アンダースコアふたつを記述し、Elemmentの名前を付ける
block__elemment
（例）menu__item
・Elemmentのネストは原則禁止
Modifier
・BlockもしくはElemmentの見た目や状態、振る舞いを定義する物
・BlockまたはElemmentの名前を継承し、アンダースコアひとつを記述した後にModifierの名前を付けます。
block___elemment_midifier
（例）menu__item_actived
（例）menu__item_text_large
ボタンの大きさ、色をmidiferで定義するときはきちんと分ける
以下はサイズの小さな赤いボタンの例です。
html
<a class="button button_size_s button_theme_caution" href="#">ボタン</a>
css
.button_size_s { width: 160px; } .button_size_m { width: 200px; } .button_theme_caution { background-color: red; color: #fff; }
Mix
・ひとつのHTML要素に、役割の異なる複数のクラスがついている状態
以下のようなシチュエーションで威力を発揮する
余白の設定はBlockではなくMixで行う
html
<header class="header"> <div class="logo header__logo">・・・</div> <form class="search header__search">・・・</form> </header>
css
.logo { ブロック内で完結するスタイリングを定義 width: 200px; height: 100px; } .header__logo { 他の要素との位置関係を調整するスタイリングを定義 margin-right: 30px; }
＠が打てなくなったときの対処方法
正確に言うとshift+2で＠になっていると思います。
原因はキーボードのタイプがJIS配列からUS配列に変わったから。
なぜ変わったか。。。ナゾ！！！
対処方法は結論から書くと
・Karabiner-Elementsをインストール
・環境設定→キーボード→キーボードの種類変更でJISに変更
これで行けました。
まずKarabiner-Elementsは以下のとおりインストール
ちなみにプライバシーの設定→入力監視でkarabiner-grabberとkarabiner-observerを許可してあげないとダメなんですが、私の場合なぜか設定に現れなくて、再インストールしました。
これだけでも行けるかなと思ったけどダメでした。
次に以下の方法を試す。
これで、キーボードの種類変更でJISに変更してうまく行きました。
ちなみに
Karabiner-Elementsを起動しているとキーボード設定画面にキーボードの種類が選べるんですが
起動していないと左下のボタンがなくなります。
以下のパスでキーボードの種類は変更できるんですが、なんか気持ち悪い…
/System/Library/CoreServices/KeyboardSetupAssistant.app
あとがき
Karabiner-Elementsはインストールしなくても行けるかもしれませんが、私はいろいろ試していたので、インストールしちゃってます。
意思決定について
仕事は大なり小なり意思決定の連続ですよね。
私はシステム開発の要件定義を取りまとめいるんですが、毎日意思決定しています。
・機能を実装するか、しないか
・実装するなら案１～３にどれにするか
みたいなことを決めるのが仕事です。
この意思決定が難しい。
各案の比較検討を詳細に作って持ってくる人もいれば
根拠無しでこの機能は絶対必要なので開発してくださいという人もいます。
いずれにせよ期限までやるか、やらないか判断しなければなりません。
今回は私が日々の意思決定する上で気にする観点を紹介したいと思います。
上から順番に優先順位の高い観点です。
①要望している人が誰か
費用対効果があろうがなかろうが本社組織で影響力がある人が
実現したいこと最終的に実現してしまいます。
なので、意味のない機能だと思っても、機能実装の判断を行います。
ただし、部外者から機能の必要性を問われた時にそれっぽいストーリーが語れるような
準備をします。
このストーリーを考えるというのがとても大事で、多くの関係者とシステム開発を行うときはたとえ建前だったとしても、納得感のあるストーリーがないとプロジェクトがうまく前に進みません。
②現場がどれくらい求めているか
本社組織の人間でなくても、現場が絶対に実現したい機能も実装判断となります。
現場に本社の正論（事業計画方針）は通用しません。
現場の有力者（＝本社を退職して子会社の役員になった人）がやりたいことは
本社で否定することはできません。
本社でできるのはストーリーを考えることだけです。
③上司を説得できる材料を揃えられるか
私レベルで判断できない機能追加は、上司に判断を仰ぎますが
上司の判断ポイントを考慮して、ＯＫがもらえる材料がそろっていれば
相談して、意思決定をしてもらいます。
材料が無ければ、準備してもらいます。
私基準で素晴らしい機能追加で開発に進みたいと思ったときに
上司に「うん」と言わせる材料を最小にできるかが腕の見せどころ。
最小稼働で意思決定できるように知恵をしぼります。
④私基準で判断
費用対効果のある機能追加か、短中期事業計画に一致した機能追加か
短期的にはマイナスでも将来的に有用な機能となるか否か
ざっとこれくらいの判断基準で機能追加を決めます。
昔は自分で判断した決定を押し通すことが大事だと思っていた時期もあったのですが最近は影響力のある人の判断に逆らわないことを第一としています。
押し通したかったら、偉くなって影響力を持てばいいというのが今の考えです。
有料テーマの導入（２）
前の記事の続編です。
文字サイズの変更
AFFINGER5管理 → デザイン → PC閲覧時の基本サイズ 15→17px
表のカスタマイズ
ヘッダーの背景色を付ける
初めてAdobe XDを使い始めた まずは操作方法から
Adobe XDを使い始めました。
とりあえず基本的な使い方をメモしておきます。
よく使うショートカット
デザインで使うやつ
選択・・・V
長方形・・・R (rectangle)
楕円・・・E (ellipse)
多角形・・・Y (？)
線・・・L (line)
ぺん・・・P (pen)
テキスト・・・T (text)
特にVはよく使う
メニューを出す
control + クリック
ここからコピーしたり、ペーストしたり、アピアランスをペースト（属性をペーストって感じ）したりいろいろできる。
この辺りはショートカットを覚えた方が良さそう。
パワポ愛用者が便利だなーと思ったこと
オブジェクトを複数選んで、境界線を消しつつ結合できるやつ。
↓
テキストエリアをぴったりさせるのと、折り返しさせるのを簡単に切り替えできる
↓
まだまだ簡単な操作しかやってないけど、さくっと格好いいデザインのサイトが作れそう。
