どうも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ヶ月本気でやればそこそこのものがつくれるようになります。 一番理想的なのは実務経験ですが、ある程度自己学習ができるなと判断してもらえたら雇ってくれる会社はあります。
なので、資格があったほうがいいかなと考える人も多いですが、資格は会社が必須といっていない限りは必要ないかなと私は考えています。
フロントエンジニアだからといって特別な才能が必要なわけではありません。 必要なのは好奇心や諦めずに続けられる継続力や、しっかりとした人生目標がある人はぜひ目指してください！
（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）
概要 前回、CSSでヘッダーメニューを上部に固定する方法を投稿しましたが、メニュー構造を多階層にしたい時もあるでしょう。 ということで、前回のコードを応用して多階層メニューの上部固定を行います。 この記事だけを見ても分かるように、前回と重複する説明ももう一度記載しておきます。 キーワード position: sticky; display: flex; サンプル See the Pen ヘッダーメニューを上部に固定（多階層メニュー） by Tamamotch (@tamamotch) on CodePen. 解説 前処理 * { margin: 0; padding: 0; } デフォルトCSSの関係であちこちに隙間ができてしまうので上書きする。 指定した覚えのない謎の隙間がある場合はデフォルトCSSを疑うべし。 header header { position: sticky; top: 0; z-index: 100; } position: sticky; header要素をスティッキーアイテムにする。 自動的に親要素であるbody要素がスティッキーコンテナになる。 これにより、header要素が貼り付く。 なお、スティッキーコンテナ内に兄弟要素がないときちんと貼り付かない仕様とのことなので、兄弟要素mainも用意する。 試しにmain要素を丸っと削除すると、スクロールと共にheader要素が流れていってしまうのが分かる。 top: 0; 貼り付く場所を最上部に固定する。 z-index: 100; スクロールした時に全要素の上に重なるよう、適当な大きさを指定しておく。 親メニュー、子メニュー共通 .ul-menu, .ul-submenu { list-style-type: none; text-align: center; } list-style-type: none; リストのマーカーを削除する。 text-align: center; テキストを左右中央寄せにする。 親メニュー .ul-menu { display: flex; } display: flex; ul要素をflexコンテナにし、子要素liをflexアイテムにする。 これにより、子要素liが横並びになる。 .li-menu { flex: 1; position: relative; } flex: 1; flexアイテムであるli要素の横幅を均等にする。 試しにこれを削除すると、li要素の横幅がそれぞれのテキスト幅になるのが分かる。 position: relative; 子メニューの位置決定のために設定しておく。 子メニュー .ul-submenu { position: absolute; width: 100%; visibility: hidden; } position: absolute; 親ボックスを基準に位置を決める。 そのためには、親ボックス(.li-menuクラス)にposition: relative;を設定しておく必要がある。 これにより、親メニューの真下に子メニューが配置される。 width: 100%; 親ボックスと同じ横幅にする。 visibility: hidden; 非表示にする。 親メニュー > 子メニュー .li-menu:hover > .ul-submenu { visibility: visible; } visibility: visible; li-menuクラス（li要素）にカーソルを合わせると、直下のul-submenuクラス（ul要素）を表示する。 クリック範囲 a { display: block; text-decoration: none; padding: 10px 0 10px 0; } display: block; 表示形式をblockにする。 これにより、a要素のクリック範囲が親要素liのサイズと同じになる。 text-decoration: none; 見栄えのために、テキストの装飾（リンクの下線）を行わない。 padding: 10px 0 10px 0; 見栄えのために、上下に10px太らせる。 .a-1 { background-color: pink; } .a-2 { background-color: moccasin; } .a-3 { background-color: lightblue; } .a-2_1 { background-color: orange; } .a-2_2 { background-color: gold; } .a-2_3 { background-color: yellow; } background-color: xxx; デモ時に分かりやすいように各範囲に色を付けておく。 main main { height: 500px; } height: 500px; ある程度スクロールできるよう、高さを持たせておく。
前回、CSSでヘッダーメニューを上部に固定する方法を投稿しましたが、メニュー構造を多階層にしたい時もあるでしょう。 ということで、前回のコードを応用して多階層メニューの上部固定を行います。 この記事だけを見ても分かるように、前回と重複する説明ももう一度記載しておきます。
キーワード position: sticky; display: flex;
See the Pen ヘッダーメニューを上部に固定（多階層メニュー） by Tamamotch (@tamamotch) on CodePen.
* { margin: 0; padding: 0; }
デフォルトCSSの関係であちこちに隙間ができてしまうので上書きする。 指定した覚えのない謎の隙間がある場合はデフォルトCSSを疑うべし。
header { position: sticky; top: 0; z-index: 100; }
position: sticky; header要素をスティッキーアイテムにする。 自動的に親要素であるbody要素がスティッキーコンテナになる。 これにより、header要素が貼り付く。 なお、スティッキーコンテナ内に兄弟要素がないときちんと貼り付かない仕様とのことなので、兄弟要素mainも用意する。 試しにmain要素を丸っと削除すると、スクロールと共にheader要素が流れていってしまうのが分かる。
position: sticky;
top: 0; 貼り付く場所を最上部に固定する。
top: 0;
z-index: 100; スクロールした時に全要素の上に重なるよう、適当な大きさを指定しておく。
z-index: 100;
.ul-menu, .ul-submenu { list-style-type: none; text-align: center; }
list-style-type: none; リストのマーカーを削除する。
list-style-type: none;
text-align: center; テキストを左右中央寄せにする。
text-align: center;
.ul-menu { display: flex; }
display: flex; ul要素をflexコンテナにし、子要素liをflexアイテムにする。 これにより、子要素liが横並びになる。
display: flex;
.li-menu { flex: 1; position: relative; }
flex: 1; flexアイテムであるli要素の横幅を均等にする。 試しにこれを削除すると、li要素の横幅がそれぞれのテキスト幅になるのが分かる。
flex: 1;
position: relative; 子メニューの位置決定のために設定しておく。
position: relative;
.ul-submenu { position: absolute; width: 100%; visibility: hidden; }
position: absolute; 親ボックスを基準に位置を決める。 そのためには、親ボックス(.li-menuクラス)にposition: relative;を設定しておく必要がある。 これにより、親メニューの真下に子メニューが配置される。
position: absolute;
width: 100%; 親ボックスと同じ横幅にする。
width: 100%;
visibility: hidden; 非表示にする。
visibility: hidden;
.li-menu:hover > .ul-submenu { visibility: visible; }
visibility: visible; li-menuクラス（li要素）にカーソルを合わせると、直下のul-submenuクラス（ul要素）を表示する。
visibility: visible;
a { display: block; text-decoration: none; padding: 10px 0 10px 0; }
display: block; 表示形式をblockにする。 これにより、a要素のクリック範囲が親要素liのサイズと同じになる。
display: block;
text-decoration: none; 見栄えのために、テキストの装飾（リンクの下線）を行わない。
text-decoration: none;
padding: 10px 0 10px 0; 見栄えのために、上下に10px太らせる。
padding: 10px 0 10px 0;
.a-1 { background-color: pink; } .a-2 { background-color: moccasin; } .a-3 { background-color: lightblue; } .a-2_1 { background-color: orange; } .a-2_2 { background-color: gold; } .a-2_3 { background-color: yellow; }
background-color: xxx; デモ時に分かりやすいように各範囲に色を付けておく。
background-color: xxx;
main { height: 500px; }
height: 500px; ある程度スクロールできるよう、高さを持たせておく。
height: 500px;
はじめに 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のようなところに乗せるには十分に思えます。
概要 ウェブサイトを作る上で欠かせないメニューですが、上部に固定する時に思いの外てこずったので、改めて調べたことをまとめて残しておきたいと思います。 これまで上部固定はposition: fixed;が多く使われていましたが、CSS3でより使い勝手の良いposition: sticky;が登場し、ブラウザ対応状況もだいぶ良くなってきたようなので、今回は後者で挑みます。 できるだけシンプルに実装したつもりです。誰かのお役に立ちますように。 キーワード position: sticky; display: flex; サンプル See the Pen ヘッダーメニューを上部に固定 by Tamamotch (@tamamotch) on CodePen. 解説 前処理 * { margin: 0; padding: 0; } デフォルトCSSの関係であちこちに隙間ができてしまうので上書きする。 指定した覚えのない謎の隙間がある場合はデフォルトCSSを疑うべし。 header header { position: sticky; top: 0; z-index: 100; } position: sticky; header要素をスティッキーアイテムにする。 自動的に親要素であるbody要素がスティッキーコンテナになる。 これにより、header要素が貼り付く。 なお、スティッキーコンテナ内に兄弟要素がないときちんと貼り付かない仕様とのことなので、兄弟要素mainも用意する。 試しにmain要素を丸っと削除すると、スクロールと共にheader要素が流れていってしまうのが分かる。 top: 0; 貼り付く場所を最上部に固定する。 z-index: 100; スクロールした時に全要素の上に重なるよう、適当な大きさを指定しておく。 ul .ul-menu { display: flex; list-style-type: none; text-align: center; } display: flex; ul要素をflexコンテナにし、子要素liをflexアイテムにする。 これにより、子要素liが横並びになる。 list-style-type: none; リストのマーカーを削除する。 text-align: center; テキストを左右中央寄せにする。 li .li-menu { flex: 1; } flex: 1; flexアイテムであるli要素の横幅を均等にする。 試しにこれを削除すると、li要素の横幅がそれぞれのテキスト幅になるのが分かる。 a a { display: block; text-decoration: none; padding: 10px 0 10px 0; } .a-1 { background-color: pink; } .a-2 { background-color: moccasin; } .a-3 { background-color: lightblue; } display: block; 表示形式をblockにする。 これにより、a要素のクリック範囲が親要素liのサイズと同じになる。 text-decoration: none; 見栄えのために、テキストの装飾（リンクの下線）を行わない。 padding: 10px 0 10px 0; 見栄えのために、上下に10px太らせる。 background-color: xxx; 分かりやすいように各範囲に色を付けておく。 main main { height: 500px; } height: 500px; ある程度スクロールできるよう、高さを持たせておく。 応用 応用技として、CSSでヘッダーメニューを上部に固定する方法（多階層メニュー）も公開しました。 サブメニューも持たせたい人はこちらも覗いてみてください。
ウェブサイトを作る上で欠かせないメニューですが、上部に固定する時に思いの外てこずったので、改めて調べたことをまとめて残しておきたいと思います。
これまで上部固定はposition: fixed;が多く使われていましたが、CSS3でより使い勝手の良いposition: sticky;が登場し、ブラウザ対応状況もだいぶ良くなってきたようなので、今回は後者で挑みます。 できるだけシンプルに実装したつもりです。誰かのお役に立ちますように。
position: fixed;
See the Pen ヘッダーメニューを上部に固定 by Tamamotch (@tamamotch) on CodePen.
.ul-menu { display: flex; list-style-type: none; text-align: center; }
.li-menu { flex: 1; }
a { display: block; text-decoration: none; padding: 10px 0 10px 0; } .a-1 { background-color: pink; } .a-2 { background-color: moccasin; } .a-3 { background-color: lightblue; }
background-color: xxx; 分かりやすいように各範囲に色を付けておく。
応用技として、CSSでヘッダーメニューを上部に固定する方法（多階層メニュー）も公開しました。 サブメニューも持たせたい人はこちらも覗いてみてください。
かなり前に、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 だからこそ，ワンポイント，アクセントを加えるだけで，デザインが引き締まったものになったり，エンドユーザにとって，理解しやすいものへと，昇華させることができる事例をご紹介しました。
ブラウザの向こうで，システムを操作しているユーザの顔を思い浮かべながら，分かりやすいデザインを考える時間って，エンジニアとしても，すごく楽しいひとときですよね。
今後も，いろんなアイデアがシェアできればと思います。
どうも エンジニア就職を目指している20代です 現在はTechCamp82期生として最終課題に取り組んでいます 就職までの学習を記録します 既存の内容も多く投稿することになると思います
どうも
エンジニア就職を目指している20代です
現在はTechCamp82期生として最終課題に取り組んでいます
就職までの学習を記録します
既存の内容も多く投稿することになると思います
