差分

このページの2つのバージョン間の差分を表示します。

--- cssフレームワークbulmaでwebデザイン:index.html [2018/12/06] – [CDNを用いてBulmaを用いる方法] adash333
+++ cssフレームワークbulmaでwebデザイン:index.html [2018/12/07] (現在) – 削除 adash333
@@ 行 1: / 行 1: @@
-===== CSSフレームワークBulmaでWEBデザイン =====
-==== CDNを用いてBulmaを用いる方法 ====
-htmlファイルの<wrap hi><head></head></wrap>内に、以下のコードを埋め込むと、Bulmaが使えるようになると公式サイトに記載されています。
-<code>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
-</code>
-ちょっと面倒ですが、以下のように入力すると、パソコンではボタンが横並びに表示され、スマホでは縦並びにボタンが表示されます。
-<code>
-<!DOCTYPE html>
-<html>
-  <head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
-  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
-</head>
-<body>
-  <div class="section">
-    <div class="columns">
-      <div class="column">
-        <p class="notification is-primary has-text-centered">First column</p>
-      </div>
-      <div class="column">
-        <p class="notification is-info has-text-centered">Second column</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">Third column</p>
-      </div>
-    </div>
-  </div>
-</body>
-</html>
-</code>
-実際の表示
-https://adash333.github.io/bulma-test/column.html
-参考
-セクション:
-https://bulma.io/documentation/layout/section/
-カラム:
-https://bulma.io/documentation/columns/basics/
-ノーティフィケーション:
-https://bulma.io/documentation/elements/notification/
-文字のセンタリング:
-https://bulma.io/documentation/modifiers/typography-helpers/
-===== Bulma日本語リンク =====
-公式サイトも、日本語での紹介サイトも、結構不親切なものが多いと感じます。
-サンプルコードを写経しながら、[[https://bulma.io/documentation/|Bulma公式サイトのドキュメント]]を読んで、自分に必要な部分を一つずつ理解していくのが一番おすすめです。
-https://qiita.com/ochiochi/items/de1afd2d3fc8f6d3ea55
-@ochiochi
-年02月13日に更新
-CSSフレームワーク BULMA チュートリアル①
-https://misc.laboradian.com/bulma/sample1/
-===== Bulma英語解説リンク =====
-https://www.freecodecamp.org/forum/t/free-course-level-up-with-bulma-css/190635
-英語ですが、分かりやすいですし、Scrimbaというサイトを用いて、動画での解説と、ソースコードも公開されていて素晴らしいです。
-https://scrimba.com/g/gbulma\\
-Bulmaの使用方法について、動画での詳しい解説(Scrimbaの仕組みのおかげでソースコードも簡単にコピペできます。)
-Scrimba
-無料で、プログラミング解説動画を作成できるサイト
-解説：https://paiza.hatenablog.com/entry/2017/08/03/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%A0%E3%81%91%E3%81%A7%E7%B0%A1%E5%8D%98%E3%81%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%8B%95%E7%94%BB%E3%82%92%E4%BD%9C%E3%81%A3
-CodeSandbox
-無料でAngularやVue.jsのプログラミングができるサイト
-解説：https://paiza.hatenablog.com/entry/2018/03/29/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E4%B8%8A%E3%81%ABAngular%2CReact%2CVue%E7%AD%89%E3%81%AE%E7%92%B0%E5%A2%83%E3%82%92%E4%B8%80%E7%99%BA%E6%A7%8B%E7%AF%89%EF%BC%86%E9%96%8B%E7%99%BA%E3%81%A7%E3%81%8D
-===== Bulmaのサンプルソースコードのリンク =====
-https://www.sitepoint.com/a-css-framework-in-6-minutes-with-bulma/
-英語ですが、順番に説明があって、分かりやすいです。
-https://github.com/dansup/bulma-templates/blob/master/templates/kanban.html
-https://github.com/adash333/bulma-test/blob/master/index.html
-===== Vue.jsとBulmaに関するリンク =====
-http://www.art-side.com/archives/131
-Vue.js(nuxt.js)内でのBulma-extention(Bulma-carousel)の使い方
--10-10 投稿者: miho
-https://nulab-inc.com/ja/blog/backlog/vue-js-kanban-app/