cssフレームワークbulmaでwebデザイン:index.html

差分

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

この比較画面へのリンク

--- cssフレームワークbulmaでwebデザイン:index.html [2018/12/06] – [1.GitHubアカウントは作成済みとします] 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上で操作を行ってください。
@@ 行 76: / 行 81: @@
 GitHubアカウントの作成方法については、[[:index.html|このサイトについて]]をご覧下さい。
-===== 2.Githubで新規リポジトリを作成（新しいファイルの置き場所を作る） ===
+==== 2.Githubで新規リポジトリを作成（新しいファイルの置き場所を作る） ====
-==
 GitHubにアカウント登録をすると、ログイン後の画面になりますので、画面右上の「＋」ボタンをクリックして、さらに、New repository をクリック。
@@ 行 156: / 行 160: @@
 {{: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}}
+簡単な割には、それっぽいデザインになっているのではないでしょうか？