差分

このページの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を用いる方法 ====
@@ 行 69: / 行 74: @@
-===== 開発環境 =====
+==== 0.用意するもの（開発環境） ====
 パソコン\\
 Windowsパソコンでも、Macでも、できれば、Chromeというブラウザをインストールして、Chrome上で操作を行ってください。
-===== 1.GitHubアカウントは作成済みとします =====
+==== 1.GitHubアカウントは作成済みとします ====
 GitHubアカウントの作成方法については、[[:index.html|このサイトについて]]をご覧下さい。
-===== 2.Githubで新規リポジトリを作成（新しいファイルの置き場所を作る） ===
+==== 2.Githubで新規リポジトリを作成（新しいファイルの置き場所を作る） ====
-==
 GitHubにアカウント登録をすると、ログイン後の画面になりますので、画面右上の「＋」ボタンをクリックして、さらに、New repository をクリック。
@@ 行 103: / 行 107: @@
 <code>
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
-    <meta charset="utf-8">
+  <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Hello Bulma!</title>
+  <title>Hello Bulma!</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
+  <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>
+  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
-  </head>
+</head>
-  <body>
+<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="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="columns">
-      <div class="column">
+        <div class="column">
-        <p class="notification is-info">このページはCSSフレームワークBulmaを利用して作成したサンプルページです。</p>
+          <p class="notification is-info">このページはCSSフレームワークBulmaを利用して作成したサンプルページです。</p>
-      </div>
+        </div>
-      <div class="column">
+        <div class="column">
-        <p class="notification is-success">パソコンでは3つのカラムが横並びに表示されます。</p>
+          <p class="notification is-success">パソコンでは3つのカラムが横並びに表示されます。</p>
-      </div>
+        </div>
-      <div class="column">
+        <div class="column">
-        <p class="notification is-warning">スマホでは3つのカラムが縦並びに表示されます。</p>
+          <p class="notification is-warning">スマホでは3つのカラムが縦並びに表示されます。</p>
+        </div>
       </div>
-    </div>
     </div>
   </section>
   <footer class="footer">
-  <div class="content has-text-centered">
+    <div class="content has-text-centered">
-    <p>
+      <p>
-      このサイトは<a href="https://bulma.io">Bulma</a>を利用しています。
+        このサイトは<a href="https://bulma.io">Bulma</a>を利用しています。
-    </p>
+      </p>
-  </div>
+    </div>
   </footer>
-  </body>
+</body>
 </html>
+</code>
+{{:pasted:20181202-201514.png}}
+{{:pasted:20181202-201647.png}}
+==== 4. GitHubでindex.htmlをホームページとして公開 ====
+以下のような画面になるので、画面右上の方にある、「Settings」をクリック。
+{{:pasted:20181202-202255.png}}
-</code>
+  -Settingsページが表示されるので、下の方へ行き、
-{{:pasted:20181202-201514.png}}
+{{:pasted:20181202-202339.png}}
-{{:pasted:20181202-201647.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}}
+簡単な割には、それっぽいデザインになっているのではないでしょうか？