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

The State of CSS 2022

■ はじめに https://dk521123.hatenablog.com/entry/2018/05/26/005948 で、マテリアル デザイン フレームワーク について調べたが 4年以上経ったので、調べ直してみたら、 CSSに関する2022年次調査「The State of CSS 2022」があったので 最近のCSSフレーム…

【Materialize】Materialize ~ 入門編 ~

■ はじめに https://dk521123.hatenablog.com/entry/2018/05/26/005948 の続き。 友人がWebサイトを作るそうなので、ちょっと マテリアル デザイン フレームワークを調べ直してみた。 今回は、いくつかの候補の内、Materialize について取り上げる 目次 【1…

【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…

【Bootstrap】Bootstrap 4 ~ Tooltip / Popovers 編 ~

■ はじめに フロントエンドライブラリ Bootstrap 4 で Tooltip / Popoversを実装してみた。 【1】サンプル <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 ~ 初期設定編 ~

■ はじめに https://dk521123.hatenablog.com/entry/2018/05/26/005948 の続き。 Polymer の 初期設定を行う。 目次 【1】Polymer 【2】公式サイト 【3】初期設定 (Linux / CentOS7) 1)Gitをインストールする 2)Node.jsをインストールする 3)Polyme…

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

■ はじめに マテリアル デザインを、少しずつ勉強していく... 今回は、マテリアル デザインに準拠したフレームワークを調べてみた。 => デザインは流行り廃りがあるから、 どうせ直ぐに使えない技術になるだろーが... => 現状(2022~2023年)は、以下の関連記…

【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/…

【Bootstrap】Bootstrap ~ 入門編 ~

■ はじめに Bootstrap についてまとめる。 目次 【1】特徴 1)動画 【2】用語整理 1)グリッドシステム 2)バッジ 3)ジャンボトロン 4)コンテナ (container) 【3】環境設定 1)入手先 2)設置方法 3)テンプレート 【4】サンプル 1)補足 【…