差分

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

--- cssフレームワークbulmaでwebデザイン:index.html [2018/12/06] – [4. GitHubでindex.htmlをホームページとして公開] adash333
+++ cssフレームワークbulmaでwebデザイン:index.html [2018/12/07] (現在) – 削除 adash333
@@ 行 1: / 行 1: @@
-===== CSSフレームワークBulmaでWEBデザイン =====
-==== CDNを用いてBulmaを用いる方法 ====
-CSSフレームワークBulmaを用いる方法として一番簡単なのは、CDN（Content Delivery Network）を利用する方法です。
-具体的には、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-warning has-text-centered">Third column</p>
-      </div>
-      <div class="column">
-        <p class="notification is-danger has-text-centered">Fourth 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を利用したホームページの作成 =====
-以下のような1ページのみからなるホームページを作成してみます。
-https://adash333.github.io/bulma-test/
-===== 開発環境 =====
-パソコン\\
-Windowsパソコンでも、Macでも、できれば、Chromeというブラウザをインストールして、Chrome上で操作を行ってください。
-==== 1.GitHubアカウントは作成済みとします ====
-GitHubアカウントの作成方法については、[[:index.html|このサイトについて]]をご覧下さい。
-==== 2.Githubで新規リポジトリを作成（新しいファイルの置き場所を作る） ====
-GitHubにアカウント登録をすると、ログイン後の画面になりますので、画面右上の「＋」ボタンをクリックして、さらに、New repository をクリック。
-{{:pasted:20181202-200027.png}}
-  -「Repository name」のところに、「bulma-test」と入力し、
-  -「Create repository」ボタンをクリックします。
-{{:pasted:20181202-200406.png}}
-==== 3. index.htmlファイル（HTMLファイル、ホームページのファイル）を作成 ====
-すると、以下のような画面になるので、「creating a new file」をクリックします。
-{{:pasted:20181202-200811.png}}
-以下のような真っ白な画面が出てきます。
-{{:pasted:20181202-200844.png}}
-  -name your file... のところに、index.html と記入し、
-  -下の方に、以下のコードをがんばって打ちこみます（<head></head>で囲まれた部分はコピべがお勧めですが、<body>以下の部分は、キーボードで打ち込んでみるのがお勧めです。）
-  -入力し終わったら、下の方へ移動して、
-  -Commit new file をクリック
-<code>
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Hello Bulma!</title>
-  <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>
-  <section class="hero is-primary is-bold">
-    <div class="hero-body">
-      <h1 class="title is-size-2">
-        Hello World
-      </h1>
-      <h2 class="subtitle is-size-4">
-        My first website with <strong>Bulma</strong>!
-      </h2>
-    </div>
-  </section>
-  <section class="section">
-    <div class="container">
-      <div class="columns">
-        <div class="column">
-          <p class="notification is-info">このページはCSSフレームワークBulmaを利用して作成したサンプルページです。</p>
-        </div>
-        <div class="column">
-          <p class="notification is-success">パソコンでは3つのカラムが横並びに表示されます。</p>
-        </div>
-        <div class="column">
-          <p class="notification is-warning">スマホでは3つのカラムが縦並びに表示されます。</p>
-        </div>
-      </div>
-    </div>
-  </section>
-  <footer class="footer">
-    <div class="content has-text-centered">
-      <p>
-        このサイトは<a href="https://bulma.io">Bulma</a>を利用しています。
-      </p>
-    </div>
-  </footer>
-</body>
-</html>
-</code>
-{{:pasted:20181202-201514.png}}
-{{:pasted:20181202-201647.png}}
-==== 4. GitHubでindex.htmlをホームページとして公開 ====
-以下のような画面になるので、画面右上の方にある、「Settings」をクリック。
-{{:pasted:20181202-202255.png}}
-  -Settingsページが表示されるので、下の方へ行き、
-{{:pasted:20181202-202339.png}}
-  -GitHub Pagesのところの、Source のところの、None をクリック
-  -master branch をクリック
-{{:pasted:20181202-202800.png}}
-  -Save をクリック
-{{:pasted:20181202-202914.png}}
-==== 5. 公開されたホームページを確認する ====
-公開されているホームページアドレス（URLといいます）は、Settings画面から確認することができます。
-{{:pasted:20181202-203329.png}}
-  -Settingsの画面になっていますので、そのまま下の方へ行き、
-  -GitHub Pagesの下にある、Your site is ready to be published at の右側のリンクをクリック
-{{:pasted:20181202-203644.png}}
-私の場合は、https://adash333.github.io/bulma-test/　がリンクとなり、実際、以下のようになりました。
-{{:cssフレームワークbulmaでwebデザイン:pasted:20181207-005258.png}}
-スマホでは、以下のように表示されます。
-{{:cssフレームワークbulmaでwebデザイン:pasted:20181207-005329.png}}
-簡単な割には、それっぽいデザインになっているのではないでしょうか？
-===== 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/