フロントエンドフレームワーク

【Vue】Vuetify ~ ローディング中の表示 ~

■ はじめに https://dk521123.hatenablog.com/entry/2020/12/26/000242 https://dk521123.hatenablog.com/entry/2021/02/14/180324 https://dk521123.hatenablog.com/entry/2021/02/21/162236 https://dk521123.hatenablog.com/entry/2021/02/20/000000 http…

【Vue】Vuetify ~ ユーザへの通知 ~

■ はじめに https://dk521123.hatenablog.com/entry/2020/12/26/000242 https://dk521123.hatenablog.com/entry/2021/02/14/180324 https://dk521123.hatenablog.com/entry/2021/02/21/162236 https://dk521123.hatenablog.com/entry/2021/02/20/000000 の続…

【Vue】Vuetify ~ 基本編 ~

■ はじめに https://dk521123.hatenablog.com/entry/2020/12/26/000242 https://dk521123.hatenablog.com/entry/2021/02/14/180324 の続き。 今回は、Vuetify でよく使う基本的なことをまとめておく。 目次 【1】空白スペース(margin / padding) 【1】空…

【Vue】Vuetify + TypeScript で トップに戻る 丸ボタンを作る

■ はじめに https://dk521123.hatenablog.com/entry/2020/12/26/000242 https://dk521123.hatenablog.com/entry/2021/02/14/180324 https://dk521123.hatenablog.com/entry/2021/02/21/162236 の続き。 今回は、Vuetify で「トップに戻る 」の丸ボタンを作っ…

【Vue】Vuetify ~ コンポーネント編 ~

■ はじめに https://dk521123.hatenablog.com/entry/2020/12/26/000242 の続き。 今回は、Vuetify の コンポーネント について取り上げる 目次 【0】始める前に 1)デザイン例 / テンプレート 2)App.vue の修正 【1】v-app 【2】v-content / v-main 【…

【Vue】Vuetify ~ 入門編 ~

■ はじめに Vuetify - A Material Design Framework for Vue.js っていうのを触れる機会があったので、メモ。 過去の記事を漁っていたら、以下の関連記事で少しだけ触れていた。。。 https://dk521123.hatenablog.com/entry/2018/05/26/005948 目次 【1】Vu…

【Bootstrap4】Bootstrap 4 ~ Tooltip / Popovers 編 ~

■ サンプル <html lang="jp"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </meta></meta></head></html>

【MDB】 Material Design for Bootstrap 4 ~ フローティングラベル ~

■ はじめに https://mdbootstrap.com/components/forms/ で、左(フリー版)・右(有料版?)とサンプルが載っており、 フローティングラベル は、右側にあったので、 色々と別の方法を探ってたら、以下のフリーサンプルの「SMALL」ボタンを押したら フロー…

【MDB】 Material Design for Bootstrap 4 ~ テンプレートについて ~

■ はじめに https://blogs.yahoo.co.jp/dk521123/37632575.html の続き。 即使える無料テンプレートが豊富なので、自分用に少し改変してみた。 フリーテンプレート https://mdbootstrap.com/freebies/ ■ テンプレートを改造する https://mdbootstrap.com/pre…

【Bootstrap4】 クライアントサイドの検証処理/バリデーション ~ Bootstrap4編 ~

■ 感想 * 作成してみて動いてはいるがたまに検証してくれない時がある(原因はよくわかってない) => 以下の関連記事で、別の方法を模索する https://blogs.yahoo.co.jp/dk521123/37668489.html ■ サンプル <html lang="jp"> <head> <meta charset="utf-8"> </meta></head></html>

【MDB】Material Design for Bootstrap 4 ~ 入門編 ~

■ はじめに https://dk521123.hatenablog.com/entry/2018/05/26/005948 で調査した中で「Material Design for Bootstrap 4 (MDB)」を掘り下げてみる ■ Material Design for Bootstrap 4 (MDB) * MIT License; 商用利用可能 https://mdbootstrap.com/license/…

【Polymer】 Polymer ~ Hello World編 ~

■ はじめに https://blogs.yahoo.co.jp/dk521123/37597605.html の続き。 Hello Worldとして、スタートキットを動かす ■ 前提条件 https://blogs.yahoo.co.jp/dk521123/37597605.html で、初期設定を行うこと。 ■ スタートキットを動かす https://www.polyme…

【Polymer】 Polymer ~ 初期設定編 ~

■ Polymer * Google製 * 凄く綺麗 * ZIPで解凍して使う方法もあるらしいが、基本インストールが必要 (もっと気軽なのが欲しい) ■ 公式サイト https://www.polymer-project.org/ ■ 初期設定 / Linux CentOS7 https://www.polymer-project.org/3.0/start/insta…

マテリアル デザイン フレームワーク の比較調査

■ はじめに * マテリアル デザインを、少しずつ勉強していく... => デザインは流行り廃りがあるから、どうせ直ぐに使えない技術になるだろーが... ■ マテリアル デザイン (Material Design) * Googleが提唱するデザイン指針 公式サイト https://material.io …

【Bootstrap4】Bootstrap 4 ~ ボタン / アイコン 編 ~

■ 公式サイト https://getbootstrap.com/docs/4.1/components/buttons/ https://getbootstrap.com/docs/4.1/components/button-group/ ■ サンプル <html lang="jp"> <head> <meta charset="utf-8"> </meta></head></html>

【Bootstrap4】Bootstrap 4 ~ Form 編 ~

■ 公式サイト https://getbootstrap.com/docs/4.1/components/forms/ ■ サンプル <html lang="jp"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </meta></meta></head></html>

【Bootstrap4】Bootstrap 4 ~ テーブル編 ~

■ 公式サイト https://getbootstrap.com/docs/4.1/content/tables/ ■ 構文 * table-striped : テーブルの1行間隔で背景色を変える * table-bordered : テーブルに枠線を追加 * table-hover : テーブルにマウスオーバーした時にその行の色が変わる * table-co…

【Bootstrap4】Bootstrap 4 ~ モーダルダイアログ編 ~

■ はじめに * Bootstrapを使ったモーダルダイアログ表示を扱う => これは便利... ■ 公式サイト https://getbootstrap.com/docs/4.1/components/modal/ ■ サンプル <html lang="jp"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </meta></meta></head></html>

【Bootstrap4】Bootstrap 4 ~ 基本編 / グリッドシステム ~

■ はじめに * Bootstrapの特徴をみていく ■ 前提知識:効果的なデザインの4原則 http://www.atmarkit.co.jp/ait/articles/1502/13/news014.html http://www.atmarkit.co.jp/ait/articles/1502/20/news012.html http://www.atmarkit.co.jp/ait/articles/1502/…

【Bootstrap4】Bootstrap 4 ~ 入門編 ~

■ はじめに 2018/08/04追記 * 記事が、Bootstrap3で古くなったので、徐々に書き直していく ■ 特徴 * 最新ブラウザのみの対応 * 文字コードは「UTF-8」(SJISだと文字化けした) 動画 * 以下が参考になる * Bootstrap 4入門 (全22回) https://dotinstall.com/le…