差分

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

--- cssフレームワークbulmaでwebデザイン:index.html [2018/12/06] – [Bulmaを利用したホームページの作成] adash333
+++ cssフレームワークbulmaでwebデザイン:index.html [2018/12/06] – [CSSフレームワークBulmaでWEBデザイン] adash333
@@ 行 1: / 行 1: @@
 ===== CSSフレームワークBulmaでWEBデザイン =====
+ホームページの本文やリンクや画像の配置は、HTMLというプログラミング言語で記載しますが、それだけでは白黒の味気ないサイトになってしまいます。
+ホームページに色をつけたりする言語として、CSSというプログラミング言語があります。
+しかし、これをそのまま勉強しても、初心者には難しすぎるので、Bulmaというものを使用して、サイトを作ってGitHubで公開していきたいと思います。
 ==== CDNを用いてBulmaを用いる方法 ====
@@ 行 65: / 行 70: @@
 以下のような1ページのみからなるホームページを作成してみます。
-作成中。
-===== 開発環境 =====
+https://adash333.github.io/bulma-test/
+==== 0.用意するもの（開発環境） ====
 パソコン\\
 Windowsパソコンでも、Macでも、できれば、Chromeというブラウザをインストールして、Chrome上で操作を行ってください。
-===== 1.GitHubアカウントは作成済みとします =====
+==== 1.GitHubアカウントは作成済みとします ====
 GitHubアカウントの作成方法については、[[:index.html|このサイトについて]]をご覧下さい。
-===== 2.Githubで新規リポジトリを作成（新しいファイルの置き場所を作る） ===
+==== 2.Githubで新規リポジトリを作成（新しいファイルの置き場所を作る） ====
-==
 GitHubにアカウント登録をすると、ログイン後の画面になりますので、画面右上の「＋」ボタンをクリックして、さらに、New repository をクリック。
@@ 行 86: / 行 92: @@
 {{:pasted:20181202-200406.png}}
-==== 3. index.htmlファイル（HTMLファイル、ホームページのファイル）を作成 =====
+==== 3. index.htmlファイル（HTMLファイル、ホームページのファイル）を作成 ====
 すると、以下のような画面になるので、「creating a new file」をクリックします。
@@ 行 101: / 行 107: @@
 <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ページが表示されるので、下の方へ行き、
-</code>
+{{:pasted:20181202-202339.png}}
-{{:pasted:20181202-201514.png}}
+  -GitHub Pagesのところの、Source のところの、None をクリック
+  -master branch をクリック
-{{:pasted:20181202-201647.png}}
+{{: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}}
+簡単な割には、それっぽいデザインになっているのではないでしょうか？