サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
tonyo.design
BuefyのUIキット作りました! BuefyのUIキットです。無料ですので使ってください! 以前制作したBulmaのUIキットを元に、BuefyのUIキットを制作しました! 無料ですので、使いたい方はぜひダウンロードしてください! Buefyって何ぞ?って方は「BulmaとVue.jsでできたUIコンポーネント「Buefy」【紹介とチュートリアル】」の記事を読むことをオススメします。 下記のボタンからファイルをダウンロードできます。 ※ダウンロード前に下記の注意事項をお読みください。 Buefy-UIキットをダウンロードする 注意事項 みなさまが当Adobe XDファイルをダウンロードし、使用することによって、コンピュータやソフト、または業務に支障・障害が生じた場合、いかなる理由によるものでも一切責任を負いません。あらかじめご了承ください。 当データは、Adobe XDのバージョン(11
BulmaのUIキット作りました! BulmaのUIキットです。無料ですのでお使いください! Bulma好きが高じて、BulmaのパーツやコンポーネントなどのUI一式をまとめたAdobe XDファイル作ってしまいました(笑)。 せっかくですので、無料配布します。使ってみたい方はぜひダウンロードしてください。 BulmaのUIを一通り網羅していますので、これであらかたのデザインは作れると思います。 下記のボタンからファイルをダウンロードできます。 ※ダウンロード前に下記の注意事項をお読みください。 Bulma-UIキットをダウンロードする 注意事項 みなさまが当Adobe XDファイルをダウンロードし、使用することによって、コンピュータやソフト、または業務に支障・障害が生じた場合、いかなる理由によるものでも一切責任を負いません。あらかじめご了承ください。 当データは、Adobe XDのバージ
Bootstrap使いのためのBulma解説サイトがあります Bulmaの公式サイトを眺めていたところ、気になるページを見つけました。 それがこちら。> Coming from Bootstrap どうやらBootstrapを使っている人向けのBootstrapとBulmaの違いの解説ページのようですね。 BootstrapとBulmaのそれぞれの特徴・違いが、簡単にですが説明されています。 私もCSSフレームワークはBootstrapをメインで使っていましたが、現在はBootstrap・Bulmaをメインで使っています。BootstrapからBulmaに入った口です。 今回は自分の勉強・復習も兼ねてComing from Bootstrapを参考に、BootstrapとBulmaの違いを書いてみたいと思います。 ※英語がてんでダメなので間違っていたらごめんなさい。 Bulmaってなんぞ?
はい。とてつもなくシンプルですね(笑)。 タスクを識別するためのキー「id」。主キーで、オートインクリメント。 タスク名を入れる「title」。 ………以上!! …あ。バリデーションは面倒なのでナシで(汗)…。 開発環境について 本記事は下記の環境を想定して書いています。 お使いのPCの環境と異なる場合は、適宜調整してくださいませ。 macOS High Sierra ver.10.13.5 Composer – 1.6.5 npm – 5.6.0 Laravel – 5.5 Vue.js – 2.1.10 axios – 0.16.2 laravel-mix – 1.0 Laravel・Vue.js・axiosでTODOリストを構築する手順 変更があるかもしれませんが、流れとしてはだいたい下記のようなカタチになるかと。 Laravelのインストール・セットアップ Vue.jsとaxios
jQueryはいらない!? Webデザインをする方であれば、誰でもjQueryを使ったことがあると思います。 > jQuery-公式サイト 今更ですが、簡単にjQueryの説明をしますと▼こんな感じです。 ブラウザ間での違いを吸収しつつ、記述量を少なくして、リッチなサイトをつくるためのJavaScriptライブラリ jQueryを使うと、簡単かつ少ない記述量で様々なことをサイト上で表現できます。 生のJavaScriptは書けなくても、jQueryは書ける、なんて方も多いのではないでしょうか。 ちなみに、jQueryのキャッチコピーは「write less, do more」ですが、これは「少ない記述で、もっと多くのことをする」という意味です。 まさにこのキャッチを体現したJavaScriptライブラリなんですね。 さて、とっても便利なjQueryですが、昨今「もうjQueryなんていらな
Buefyいいよ!Buefy! Bulma + Vue.js = Buefy 今回はUIコンポーネント「Bue ...
Bulmaはいいぞ(2回目) やあ (´・ω・`) ようこそ、とんよー。ブログへ。 このプロテインはサービスだから、まず飲んで落ち着いて欲しい。 うん、「また」なんだ。済まない。 …というわけで前回の記事(知っておくと少し幸せになれるBulmaを使い方6選)では、紹介しきれなかった「知っておくと少し幸せになれるBulmaを使い方」をさらに5点紹介します。 ※本ブログのBulmaに関する記事はこちらです。 Bulmaってなんぞ?って方はまずこちらを見るのをおすすめします。 > 私的おすすめcssフレームワーク「Bulma」その1 > 私的おすすめcssフレームワーク「Bulma」その2 さて今回は以下の項目について紹介しますね。 ブレイクポイント Container レスポンシブヘルパー カラムサイズ カラムのOffset ブレイクポイント Bulmaには、デフォルトで5つのブレイクポイント
Bulmaはいいぞ 以前、本ブログで紹介したCSSフレームワーク「bulma」。 最近になってアップデートが行われ、バージョン0.7.1になったようですね。 サイトもキレイにリニューアルされています。 本ブログのBulmaに関する記事はこちらです。Bulmaってなんぞ?って方はまずこちらを見るのをおすすめします。 > 私的おすすめcssフレームワーク「Bulma」その1 > 私的おすすめcssフレームワーク「Bulma」その2 さて今回の記事ですが、Bulmaを使いはじめた方が知っておくと少し幸せになることを紹介します。 私がBulmaを初めて使った時に「ここどうするんだろう?」と疑問に思ったところを中心にまとめてみました。 Bulmaを使いはじめた方はぜひ本記事を読んできただければ、と思います。 知っておくと幸せになれるBulmaを使い方6選 複数行のカラム カラムのモバイル対応 カラム
CSSフレームワーク「Bulma」 私がよく使うCSSフレームワーク「Bulma」 学習コストも導入コストも低く、気軽に始めることができます! また少ないコードでありながら、シンプルで洗練されたWebデザインを組めるのが特徴的です! 私のお気に入りのCSSフレームワークでもあり、実はこのサイトもBulmaで構築されているのです。 2018/05時点でWordPressのテーマをSANGOに変更しました。 下記がBulmaの公式サイトとドキュメントです。 公式サイト:https://bulma.io/ 公式ドキュメント:https://bulma.io/documentation/overview/start/ Bulmaのすごいところ CSSファイルを1つ読み込むだけ! heroやcardなど、流行りのレイアウトも実装済み! Flexboxで構築されていて、レスポンシブデザインにも柔軟に対
このページを最初にブックマークしてみませんか?
『tonyo.design』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く