はじめに ・自分自身の備忘録として書きます。 ・間違いなどあればご指摘いただけますと幸いです。 こんな感じ https://gyazo.com/a02da2706b969203c369281f69f251d6 コードはこんな感じ a { color: #707070; position: relative; text-decoration: none; } a:before{ content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: #555; transform: scale(0, 1); transform-origin: left; transition: 0.5s; } a:hover { color: #101010; } a:hover:before { transform: scale(1); } transform-origin: left;を指定しない場合、中心から左右に向かってアンダーラインが出ます height: 1px;はアンダーラインの太さです ※hoverした時に文字色が変わるようにしていますが、これはアンダーラインと関係ない部分です
・自分自身の備忘録として書きます。 ・間違いなどあればご指摘いただけますと幸いです。
https://gyazo.com/a02da2706b969203c369281f69f251d6
a { color: #707070; position: relative; text-decoration: none; } a:before{ content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: #555; transform: scale(0, 1); transform-origin: left; transition: 0.5s; } a:hover { color: #101010; } a:hover:before { transform: scale(1); }
transform-origin: left;を指定しない場合、中心から左右に向かってアンダーラインが出ます height: 1px;はアンダーラインの太さです ※hoverした時に文字色が変わるようにしていますが、これはアンダーラインと関係ない部分です
transform-origin: left;
height: 1px;
どうも7noteです。フロントエンジニアを目指す方に届け！ これからHTMLやCSSを勉強しようと思っている方へ。フロントエンジニアがどのようなものか参考になれば幸いです。 フロントエンジニアになるには フロントエンジニアといってもとても幅が広いです。とてもたくさんの技術がありますし、デザインからコーディング、マーケティングやディレクション業など多岐に渡ります。 先にはっきりいいます。HTMLとCSSだけできる仕事は「コーダー」と呼ばれる職種になります。 つまり、HTMLとCSSだけではフロントエンジニアというよりも、コーダーという方が正確です。 コーダーは給料や報酬が低い場合がほとんど コーダーの仕事は基本的に作業なので、いわばIT専門スキルが必要なだけで一般的には価値があまり高くない仕事です。 多くのフロントエンジニアは、HTMLとCSS以外にもデザインスキルやバックエンドのスキル、もしくは案件を回すのに重要なディレクターの仕事をしたり、販売戦略を考えるマーケティングの技術を持っている人です。 かといって、このような人もHTMLとCSSから始めたという方が多いとは思うので、コーダーが一概にダメといっているわけではありません。 まずはコーダーとして数年やって、その後興味のある方向へと歩みを勧めて行きフロントエンジニアを目指せば良いと思います。 フロントエンジニアになるために必要な心構え ※あくまで個人的見解としてお読みください。 ・新しい物好き デザインや技術の流行り廃りがあるから常に新しいことを勉強し続ける必要があります。 とくにWEB業界は流行り廃りのスピードがとても早いので仕事として成功するには常に新しいことを勉強しつづけていかなければなりません。 ・作業マンはいつか滅びると思う事 向こう5年くらいは大丈夫だと思いますが、コーダーの仕事だけはしんどくなるでしょう。 AIに仕事を取られるというよりは、TwitterとFacebookが名刺代わりみたいなもので、十分仕事がとれるのでホームページの重要性は下がる。今後ももっと便利なサービスができていく可能性を視野に入れなければならない。 ただ、個人が簡単にホームページを作れる時代になると、逆に業者でしっかりと作られたホームページを持ちたいという需要も必ず出てくるので、完全に0にはまだしばらくならないと思いますが・・・ ただ、その時に必要なのは唯一性のある希少価値のある物にしか価値が出ないので、どちらにしろただの作業マンは滅びていくだろう。 必要なのは0から1にできる人、もしくは1を100に膨らませる人なんてよく言われるが、0から1にする設計図が書ける人が今後生き延びていく時代だと考えます。。 そのため、作業だけのコーダーではなく、他のスキルも同時に身につける心構えでいましょう。 ・資格はなくても仕事はできる ちょっと現実的な話ばかりだったので、少し明るい話も。 資格はなくても雇ってもらえることもできるし、HTMLとCSSは取得が比較的安易なので、自己学習で1ヶ月〜2ヶ月本気でやればそこそこのものがつくれるようになります。 一番理想的なのは実務経験ですが、ある程度自己学習ができるなと判断してもらえたら雇ってくれる会社はあります。 なので、資格があったほうがいいかなと考える人も多いですが、資格は会社が必須といっていない限りは必要ないかなと私は考えています。 まとめ フロントエンジニアだからといって特別な才能が必要なわけではありません。 必要なのは好奇心や諦めずに続けられる継続力や、しっかりとした人生目標がある人はぜひ目指してください！ おそまつ！ （コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）
これからHTMLやCSSを勉強しようと思っている方へ。フロントエンジニアがどのようなものか参考になれば幸いです。
フロントエンジニアといってもとても幅が広いです。とてもたくさんの技術がありますし、デザインからコーディング、マーケティングやディレクション業など多岐に渡ります。
先にはっきりいいます。HTMLとCSSだけできる仕事は「コーダー」と呼ばれる職種になります。
つまり、HTMLとCSSだけではフロントエンジニアというよりも、コーダーという方が正確です。
コーダーの仕事は基本的に作業なので、いわばIT専門スキルが必要なだけで一般的には価値があまり高くない仕事です。 多くのフロントエンジニアは、HTMLとCSS以外にもデザインスキルやバックエンドのスキル、もしくは案件を回すのに重要なディレクターの仕事をしたり、販売戦略を考えるマーケティングの技術を持っている人です。
かといって、このような人もHTMLとCSSから始めたという方が多いとは思うので、コーダーが一概にダメといっているわけではありません。
まずはコーダーとして数年やって、その後興味のある方向へと歩みを勧めて行きフロントエンジニアを目指せば良いと思います。
※あくまで個人的見解としてお読みください。
デザインや技術の流行り廃りがあるから常に新しいことを勉強し続ける必要があります。 とくにWEB業界は流行り廃りのスピードがとても早いので仕事として成功するには常に新しいことを勉強しつづけていかなければなりません。
向こう5年くらいは大丈夫だと思いますが、コーダーの仕事だけはしんどくなるでしょう。 AIに仕事を取られるというよりは、TwitterとFacebookが名刺代わりみたいなもので、十分仕事がとれるのでホームページの重要性は下がる。今後ももっと便利なサービスができていく可能性を視野に入れなければならない。
ただ、個人が簡単にホームページを作れる時代になると、逆に業者でしっかりと作られたホームページを持ちたいという需要も必ず出てくるので、完全に0にはまだしばらくならないと思いますが・・・ ただ、その時に必要なのは唯一性のある希少価値のある物にしか価値が出ないので、どちらにしろただの作業マンは滅びていくだろう。 必要なのは0から1にできる人、もしくは1を100に膨らませる人なんてよく言われるが、0から1にする設計図が書ける人が今後生き延びていく時代だと考えます。。
そのため、作業だけのコーダーではなく、他のスキルも同時に身につける心構えでいましょう。
ちょっと現実的な話ばかりだったので、少し明るい話も。
資格はなくても雇ってもらえることもできるし、HTMLとCSSは取得が比較的安易なので、自己学習で1ヶ月〜2ヶ月本気でやればそこそこのものがつくれるようになります。 一番理想的なのは実務経験ですが、ある程度自己学習ができるなと判断してもらえたら雇ってくれる会社はあります。
なので、資格があったほうがいいかなと考える人も多いですが、資格は会社が必須といっていない限りは必要ないかなと私は考えています。
フロントエンジニアだからといって特別な才能が必要なわけではありません。 必要なのは好奇心や諦めずに続けられる継続力や、しっかりとした人生目標がある人はぜひ目指してください！
（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）
Vue には v-if などの条件付き描画を使ってコンポーネントを表示/非表示する際に CSS の transition や animation の動きを付与できる transition ラッパーコンポーネントというものがあります。今回は表示・非表示で非対称な動きをする Vue transition と CSS の実装についてメモします。 時間差でフェードイン、クリック時にフェードアウトするカード 次のようなカードの要素を作ってみます。なおカードの上にあるボタンは動作確認用のものなので、記事の本題とは関係ありません。 See the Pen vue-transition-asynchronously-fade-in/out-1 by hamakou108 (@hamakou108) on CodePen. このカードは Vue インスタンスがマウントされてから3秒後に表示され、クリックするとフェードアウトします。 実装を見ると分かる通り、 enter-active-class と leave-active-class に別々の CSS を当てることで非対称なトランジション・アニメーションを実現しています。 leave-active-class の方は transition を利用していますが、トランジション完了時の opacity の値を leave-to-class に指定することでフェードアウトを実現できます。 時間差でフェードインした後に時間差でフェードアウトするカード 次に少しひねったパターンとして、フェードインしてしばらく時間が経つと勝手に消えるカードを作ってみます。 クリック時にフェードアウトする動作も残しておきます。 See the Pen vue-transition-asynchronously-fade-in/out-2 by hamakou108 (@hamakou108) on CodePen. enter-active-class が利用する @keyframes を変更して自然にフェードアウトするようにしました。 ただ @keyframes の変更だけだと幾つか問題があります。 まず enter-active-class に指定したスタイルはアニメーション終了後に削除されます。 これにより、アニメーション終了後は .card に指定したスタイルがそのまま当たるため、 visibility: visible; opacity: 1 となってフェードアウトさせたカードが再表示されてしまいます。 これを避けるため .card には visibility: hidden; opacity: 0; を設定しています。 さらにこの設定によって今度は leave-active-class のトランジションの初期状態が visibility: hidden; opacity: 0; となるため、クリック時はフェードアウトではなく瞬時に消えてしまうような動きになってしまいます。 これを避けるため .fade-leave-active には visibility: visible; opacity: 1; を指定して、表示された状態からトランジションが開始するようにしています。 まとめ Vue transition を使って非対称なトランジション・アニメーションを行う際、少しの動作の変更が細かな部分に影響してきます。 特に entering 終了後および leaving 開始前の状態がどうなっているべきかを考慮して CSS を当てていくことが重要になりそうです。
Vue には v-if などの条件付き描画を使ってコンポーネントを表示/非表示する際に CSS の transition や animation の動きを付与できる transition ラッパーコンポーネントというものがあります。今回は表示・非表示で非対称な動きをする Vue transition と CSS の実装についてメモします。
v-if
次のようなカードの要素を作ってみます。なおカードの上にあるボタンは動作確認用のものなので、記事の本題とは関係ありません。
See the Pen vue-transition-asynchronously-fade-in/out-1 by hamakou108 (@hamakou108) on CodePen.
このカードは Vue インスタンスがマウントされてから3秒後に表示され、クリックするとフェードアウトします。
実装を見ると分かる通り、 enter-active-class と leave-active-class に別々の CSS を当てることで非対称なトランジション・アニメーションを実現しています。 leave-active-class の方は transition を利用していますが、トランジション完了時の opacity の値を leave-to-class に指定することでフェードアウトを実現できます。
次に少しひねったパターンとして、フェードインしてしばらく時間が経つと勝手に消えるカードを作ってみます。 クリック時にフェードアウトする動作も残しておきます。
See the Pen vue-transition-asynchronously-fade-in/out-2 by hamakou108 (@hamakou108) on CodePen.
enter-active-class が利用する @keyframes を変更して自然にフェードアウトするようにしました。 ただ @keyframes の変更だけだと幾つか問題があります。
@keyframes
まず enter-active-class に指定したスタイルはアニメーション終了後に削除されます。 これにより、アニメーション終了後は .card に指定したスタイルがそのまま当たるため、 visibility: visible; opacity: 1 となってフェードアウトさせたカードが再表示されてしまいます。 これを避けるため .card には visibility: hidden; opacity: 0; を設定しています。
.card
visibility: visible; opacity: 1
visibility: hidden; opacity: 0;
さらにこの設定によって今度は leave-active-class のトランジションの初期状態が visibility: hidden; opacity: 0; となるため、クリック時はフェードアウトではなく瞬時に消えてしまうような動きになってしまいます。 これを避けるため .fade-leave-active には visibility: visible; opacity: 1; を指定して、表示された状態からトランジションが開始するようにしています。
.fade-leave-active
visibility: visible; opacity: 1;
Vue transition を使って非対称なトランジション・アニメーションを行う際、少しの動作の変更が細かな部分に影響してきます。 特に entering 終了後および leaving 開始前の状態がどうなっているべきかを考慮して CSS を当てていくことが重要になりそうです。
はじめに Vue.jsやReactの使い方を試したいときに、Node.jsをインストールしたりVue.jsをインストールしたりと手間がかかります。CodePenというサイトを使用すると環境作成なしでWebブラウザ上で試せたり、他の人にそのコードを共有するなどが簡単にできます。 デフォルトではVue.jsとVuetifyを使用する設定になっていないため、その設定方法をまとめます。 手順 CodePenにログインしてPenを作成する Pen上でのVue.jsとVuetifyを有効にする Penの設定を開く Vue.jsとVuetifyをJavaScriptから呼び出す VuetifyをCSSから呼び出す Vuetifyを試す 1. CodePenにログインする CodePenにログインして、右上のユーザアイコンをクリックします。 表示されたウィンドウのNewPenをクリックして、Vue.jsを試す画面を表示します。 2. Vue.jsとVuetifyのJavaScriptを有効にする この状態でもhtml、CSS、JavaScriptを試すことはできますが![2.OpenSettings.png] Vue.jsとVuetifyを使用するためには、この2つのライブラリを呼び出すように設定する必要があります。 2. 1. Penの設定を開く Penの設定を開くには右上のSettingsをクリックしてPen Settingsウィンドウを開きます。 2. 2. Vue.jsとVuetifyをJavaScriptから呼び出す Pen SettingsウィンドウのJSをクリックして、JavaScript用の設定を開きます。 Add External Scripts/Pensの項目にvueを入力すると候補がでてくるので必要なVueとVuetifyをクリックします。 この時に候補になければ手でURLを入れることもできます。 2. 3. VuetifyをCSSから呼び出す この状態では、VuetifyのCSSがあたっていないためCSS用の設定をしていきます。 検索でVuetifyが出てこなかったのでAdd External Stylesheets/Pensの項目に手で以下のURLを入れて、Saveボタンを押します。 https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css Vuetifyを試す これで環境作成が完了したのでVuetifyを試してみます。 公式のVuetifyのメニューボタンとほとんど同じですが、公式だとCSSやJSのメソッドなどを使わないのでCSSとメソッドを使いためにクリック後のリストを縞々にしました。 See the Pen menu by mink0212 (@mink0212) on CodePen. 終わりに CodePenを使用してVuetifyを使用する方法をまとめました。JSの設定等は色々なサイトでやっているのですが、CSSは省略していることが多く注意が必要です。 これで面倒な環境作成から解放されてちょっとしたことを試すのが簡単になり、ソースとソースの結果を容易に他の人に共有できるため、共有相手に環境を作ってもらう必要もなく便利だなと感じました。 ソースの長さによっては読みやすさが変わってしまうため、大きいソースの共有には向いていませんが、簡単な勉強会やQiitaのようなところに乗せるには十分に思えます。
Vue.jsやReactの使い方を試したいときに、Node.jsをインストールしたりVue.jsをインストールしたりと手間がかかります。CodePenというサイトを使用すると環境作成なしでWebブラウザ上で試せたり、他の人にそのコードを共有するなどが簡単にできます。 デフォルトではVue.jsとVuetifyを使用する設定になっていないため、その設定方法をまとめます。
CodePenにログインして、右上のユーザアイコンをクリックします。 表示されたウィンドウのNewPenをクリックして、Vue.jsを試す画面を表示します。
この状態でもhtml、CSS、JavaScriptを試すことはできますが![2.OpenSettings.png] Vue.jsとVuetifyを使用するためには、この2つのライブラリを呼び出すように設定する必要があります。
Penの設定を開くには右上のSettingsをクリックしてPen Settingsウィンドウを開きます。
Pen SettingsウィンドウのJSをクリックして、JavaScript用の設定を開きます。 Add External Scripts/Pensの項目にvueを入力すると候補がでてくるので必要なVueとVuetifyをクリックします。 この時に候補になければ手でURLを入れることもできます。
この状態では、VuetifyのCSSがあたっていないためCSS用の設定をしていきます。 検索でVuetifyが出てこなかったのでAdd External Stylesheets/Pensの項目に手で以下のURLを入れて、Saveボタンを押します。
https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css
これで環境作成が完了したのでVuetifyを試してみます。 公式のVuetifyのメニューボタンとほとんど同じですが、公式だとCSSやJSのメソッドなどを使わないのでCSSとメソッドを使いためにクリック後のリストを縞々にしました。
See the Pen menu by mink0212 (@mink0212) on CodePen.
CodePenを使用してVuetifyを使用する方法をまとめました。JSの設定等は色々なサイトでやっているのですが、CSSは省略していることが多く注意が必要です。 これで面倒な環境作成から解放されてちょっとしたことを試すのが簡単になり、ソースとソースの結果を容易に他の人に共有できるため、共有相手に環境を作ってもらう必要もなく便利だなと感じました。 ソースの長さによっては読みやすさが変わってしまうため、大きいソースの共有には向いていませんが、簡単な勉強会やQiitaのようなところに乗せるには十分に思えます。
かなり前に、Androidっぽい見た目のトースト通知(数秒で消える通知メッセージ)のjsライブラリを作成して、投稿したのですが、がっつりJQueryを使っていたため、jQuery非依存に書き換えました。 またコードをGitHubに公開し、npmでinstallできるようにもしてみました。 今回作った物：a-toast Androidっぽい見た目のトースト通知なので、そのaです。 リポジトリ: https://github.com/negi141/a-toast ※先にメジャーなトースト通知ライブラリを紹介 Toaster ※jQuery必須 https://codeseven.github.io/toastr/ Bootstrap Notify http://bootstrap-notify.remabledesigns.com/ Bootstrap Toasts https://getbootstrap.com/docs/4.3/components/toasts/ iziToast https://izitoast.marcelodolza.com/ デモ GitHubリポジトリ: https://github.com/negi141/a-toast デモページ https://negi141.github.io/a-toast/ 使い方 npm install negi141/a-toastでインストール。 または、/build/内のjsとcssを手元に持ってくる。 html <link rel="stylesheet" href="a-toast.css" /> <script src="a-toast.js"></script> js var toast = new aToast(); // スピードや表示位置の設定 (任意) // speed : 表示時間. millisecond. default=4000. // position : 表示位置. 'top' or 'bottom'. default='top'. toast.setOption(speed, position); // 通知を表示 // message : 表示するテキスト // style : 通知の色. '' or 'success' or 'warn' or 'danger'. default=''. toast.show(message, style); toast.success(message); toast.warn(message); toast.danger(message); その他：jQuery⇒jQuery非依存にあたって fadeIn()はjQueryを使わない場合、どう書くのかなーと思いましたが、以下のようにCSSのtransition-（時間的変化）で書き換え可能でした。 js $('.a-toast').hide().fadeIn('fast'); ↓ ↓ ↓ js t.classList.add("a-toast-show"); css .a-toast { transition-property: opacity; transition-duration: 0.8s; opacity: 0; } .a-toast-show { opacity: 1; }
かなり前に、Androidっぽい見た目のトースト通知(数秒で消える通知メッセージ)のjsライブラリを作成して、投稿したのですが、がっつりJQueryを使っていたため、jQuery非依存に書き換えました。 またコードをGitHubに公開し、npmでinstallできるようにもしてみました。
Androidっぽい見た目のトースト通知なので、そのaです。 リポジトリ: https://github.com/negi141/a-toast
GitHubリポジトリ: https://github.com/negi141/a-toast
デモページ https://negi141.github.io/a-toast/
npm install negi141/a-toastでインストール。 または、/build/内のjsとcssを手元に持ってくる。
npm install negi141/a-toast
<link rel="stylesheet" href="a-toast.css" /> <script src="a-toast.js"></script>
var toast = new aToast(); // スピードや表示位置の設定 (任意) // speed : 表示時間. millisecond. default=4000. // position : 表示位置. 'top' or 'bottom'. default='top'. toast.setOption(speed, position); // 通知を表示 // message : 表示するテキスト // style : 通知の色. '' or 'success' or 'warn' or 'danger'. default=''. toast.show(message, style); toast.success(message); toast.warn(message); toast.danger(message);
fadeIn()はjQueryを使わない場合、どう書くのかなーと思いましたが、以下のようにCSSのtransition-（時間的変化）で書き換え可能でした。
$('.a-toast').hide().fadeIn('fast');
↓ ↓ ↓
t.classList.add("a-toast-show");
.a-toast { transition-property: opacity; transition-duration: 0.8s; opacity: 0; } .a-toast-show { opacity: 1; }
「見栄え」に対する期待ハードルは上昇傾向 見栄えを整るフレームワーク BootStrap のおかげで，フロントエンドの専門エンジニアがいないチームでも，かなり「それっぽい」見栄えのページを作れるようになりましたね。 見栄えがよければ，システム引き渡しのタイミングでも，発注サイドの心証がグーンとよくなり，スムーズにプロジェクトを完了させられる効果もあって，軽視できないものです。 一方，なんでもかんでも BootStrap が使われるようになってきているのも事実で，エンドユーザは，見栄えの良いページを当たり前のものとして考える潮流にあるのも事実。 そう遠くない将来，たんに見栄えが良いことでは，大きな「アピールポイント」にならないことを視野に入れて，より優れた UI を日々考案するのも，エンジニアに向けられた課題と言えます。 ワンポイントの工夫で印象が大きく変わる事例 BootStrap には，九つの見栄えが用意されています（そのうち一つは，<a href=""></a> のリンクみたいな外見をした，特殊な存在感のボタンであることは，意外と知られていないので，覚えておきましょう）。 そして，あまりにも多くの色を使いすぎると，エンドユーザにとって混乱の原因となるため，実際のシステム開発現場では，せいぜい二色，三色くらいの利用にとどめるのが，現実的なところではないでしょうか？ そんな中でも，ちょっとした工夫で，BootStrap に「＋α」を加えるアイデアをご紹介します。 事例１：Font Awesome との合わせ技 美しいフォントがそろった Font Awesome との合わせ技です。 単調になりがちな BootStrap のボタンでも，中に Font Awesome を一つ設置することで，いっきにイキイキとしませんか？ <button class="btn btn-secondary"> <span>登録</span> <i class="fas fa-external-link-alt ml-1"></i> </button> たとえば「新しいタブ」として開く画面のボタンがあれば，以下の２つあるボタンのうち，直感的にふさわしい UI はどちらだと思われますか？ ボタンを押す前から，エンドユーザに，押下結果を「予告」するデザインは，たった一行の Font Awesomeタグの挿入で，実現できます。 手間のかからない作業で，印象は，大きく変わりました。 事例２：BootStrap を，もっと使いこなす 先述した９種類のデザイン以外でも，input-group クラスでは，カーソールをマウスオーバーすると，ボタンの色が白・黒にトグルできるタイプのボタンを利用可能です。 二つのボタンが隣接しているケースなど，押し間違えの発生しやすいケースでは，押下前に，マウスの重なっているボタンが明確な（白・黒という，強烈なコントラストによって）ビジュアル効果として確認できる UI は，利用者に安心感を与えられると思います。 BootStrap - Button addons まとめ パーツが共通化され，コード製作者の「こだわり」が表にあらわれづらい BootStrap だからこそ，ワンポイント，アクセントを加えるだけで，デザインが引き締まったものになったり，エンドユーザにとって，理解しやすいものへと，昇華させることができる事例をご紹介しました。 ブラウザの向こうで，システムを操作しているユーザの顔を思い浮かべながら，分かりやすいデザインを考える時間って，エンジニアとしても，すごく楽しいひとときですよね。 今後も，いろんなアイデアがシェアできればと思います。
見栄えを整るフレームワーク BootStrap のおかげで，フロントエンドの専門エンジニアがいないチームでも，かなり「それっぽい」見栄えのページを作れるようになりましたね。
見栄えがよければ，システム引き渡しのタイミングでも，発注サイドの心証がグーンとよくなり，スムーズにプロジェクトを完了させられる効果もあって，軽視できないものです。
一方，なんでもかんでも BootStrap が使われるようになってきているのも事実で，エンドユーザは，見栄えの良いページを当たり前のものとして考える潮流にあるのも事実。
そう遠くない将来，たんに見栄えが良いことでは，大きな「アピールポイント」にならないことを視野に入れて，より優れた UI を日々考案するのも，エンジニアに向けられた課題と言えます。
BootStrap には，九つの見栄えが用意されています（そのうち一つは，<a href=""></a> のリンクみたいな外見をした，特殊な存在感のボタンであることは，意外と知られていないので，覚えておきましょう）。
<a href=""></a>
そして，あまりにも多くの色を使いすぎると，エンドユーザにとって混乱の原因となるため，実際のシステム開発現場では，せいぜい二色，三色くらいの利用にとどめるのが，現実的なところではないでしょうか？
そんな中でも，ちょっとした工夫で，BootStrap に「＋α」を加えるアイデアをご紹介します。
美しいフォントがそろった Font Awesome との合わせ技です。
単調になりがちな BootStrap のボタンでも，中に Font Awesome を一つ設置することで，いっきにイキイキとしませんか？
<button class="btn btn-secondary"> <span>登録</span> <i class="fas fa-external-link-alt ml-1"></i> </button>
たとえば「新しいタブ」として開く画面のボタンがあれば，以下の２つあるボタンのうち，直感的にふさわしい UI はどちらだと思われますか？
ボタンを押す前から，エンドユーザに，押下結果を「予告」するデザインは，たった一行の Font Awesomeタグの挿入で，実現できます。
手間のかからない作業で，印象は，大きく変わりました。
先述した９種類のデザイン以外でも，input-group クラスでは，カーソールをマウスオーバーすると，ボタンの色が白・黒にトグルできるタイプのボタンを利用可能です。
input-group
二つのボタンが隣接しているケースなど，押し間違えの発生しやすいケースでは，押下前に，マウスの重なっているボタンが明確な（白・黒という，強烈なコントラストによって）ビジュアル効果として確認できる UI は，利用者に安心感を与えられると思います。
BootStrap - Button addons
パーツが共通化され，コード製作者の「こだわり」が表にあらわれづらい BootStrap だからこそ，ワンポイント，アクセントを加えるだけで，デザインが引き締まったものになったり，エンドユーザにとって，理解しやすいものへと，昇華させることができる事例をご紹介しました。
ブラウザの向こうで，システムを操作しているユーザの顔を思い浮かべながら，分かりやすいデザインを考える時間って，エンジニアとしても，すごく楽しいひとときですよね。
今後も，いろんなアイデアがシェアできればと思います。
