cssフレームワークbulmaでwebデザイン:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン次のリビジョン両方とも次のリビジョン | ||
cssフレームワークbulmaでwebデザイン:index.html [2018/12/06] – [CDNを用いてBulmaを用いる方法] adash333 | cssフレームワークbulmaでwebデザイン:index.html [2018/12/06] – [開発環境] adash333 | ||
---|---|---|---|
行 3: | 行 3: | ||
==== CDNを用いてBulmaを用いる方法 ==== | ==== CDNを用いてBulmaを用いる方法 ==== | ||
- | htmlファイルの< | + | CSSフレームワークBulmaを用いる方法として一番簡単なのは、CDN(Content Delivery Network)を利用する方法です。 |
+ | |||
+ | 具体的には、htmlファイルの< | ||
< | < | ||
行 58: | 行 60: | ||
文字のセンタリング: | 文字のセンタリング: | ||
https:// | https:// | ||
+ | |||
+ | ===== Bulmaを利用したホームページの作成 ===== | ||
+ | |||
+ | 以下のような1ページのみからなるホームページを作成してみます。 | ||
+ | |||
+ | |||
+ | https:// | ||
+ | |||
+ | |||
+ | ==== 0.用意するもの(開発環境) ==== | ||
+ | パソコン\\ | ||
+ | Windowsパソコンでも、Macでも、できれば、Chromeというブラウザをインストールして、Chrome上で操作を行ってください。 | ||
+ | |||
+ | ==== 1.GitHubアカウントは作成済みとします ==== | ||
+ | GitHubアカウントの作成方法については、[[: | ||
+ | |||
+ | ==== 2.Githubで新規リポジトリを作成(新しいファイルの置き場所を作る) ==== | ||
+ | |||
+ | GitHubにアカウント登録をすると、ログイン後の画面になりますので、画面右上の「+」ボタンをクリックして、さらに、New repository をクリック。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | -「Repository name」のところに、「bulma-test」と入力し、 | ||
+ | -「Create repository」ボタンをクリックします。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ==== 3. index.htmlファイル(HTMLファイル、ホームページのファイル)を作成 ==== | ||
+ | すると、以下のような画面になるので、「creating a new file」をクリックします。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | 以下のような真っ白な画面が出てきます。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | -name your file... のところに、index.html と記入し、 | ||
+ | -下の方に、以下のコードをがんばって打ちこみます(< | ||
+ | -入力し終わったら、下の方へ移動して、 | ||
+ | -Commit new file をクリック | ||
+ | |||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | <meta name=" | ||
+ | < | ||
+ | <link rel=" | ||
+ | <script defer src=" | ||
+ | </ | ||
+ | < | ||
+ | | ||
+ | <section class=" | ||
+ | <div class=" | ||
+ | <h1 class=" | ||
+ | Hello World | ||
+ | </h1> | ||
+ | <h2 class=" | ||
+ | My first website with < | ||
+ | </h2> | ||
+ | </ | ||
+ | </ | ||
+ | | ||
+ | <section class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <p class=" | ||
+ | </ | ||
+ | <div class=" | ||
+ | <p class=" | ||
+ | </ | ||
+ | <div class=" | ||
+ | <p class=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | | ||
+ | <footer class=" | ||
+ | <div class=" | ||
+ | <p> | ||
+ | このサイトは< | ||
+ | </p> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | ==== 4. GitHubでindex.htmlをホームページとして公開 ==== | ||
+ | 以下のような画面になるので、画面右上の方にある、「Settings」をクリック。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | -Settingsページが表示されるので、下の方へ行き、 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | -GitHub Pagesのところの、Source のところの、None をクリック | ||
+ | -master branch をクリック | ||
+ | |||
+ | {{: | ||
+ | |||
+ | -Save をクリック | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ==== 5. 公開されたホームページを確認する ==== | ||
+ | |||
+ | 公開されているホームページアドレス(URLといいます)は、Settings画面から確認することができます。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | -Settingsの画面になっていますので、そのまま下の方へ行き、 | ||
+ | -GitHub Pagesの下にある、Your site is ready to be published at の右側のリンクをクリック | ||
+ | |||
+ | {{: | ||
+ | |||
+ | 私の場合は、https:// | ||
+ | |||
+ | {{: | ||
+ | |||
+ | スマホでは、以下のように表示されます。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | 簡単な割には、それっぽいデザインになっているのではないでしょうか? | ||
+ | |||
+ | |||
+ | |||