cssフレームワークbulmaでwebデザイン:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン次のリビジョン両方とも次のリビジョン | ||
cssフレームワークbulmaでwebデザイン:index.html [2018/12/06] – [Bulmaを利用したホームページの作成] adash333 | cssフレームワークbulmaでwebデザイン:index.html [2018/12/06] – [4. GitHubでindex.htmlをホームページとして公開] adash333 | ||
---|---|---|---|
行 73: | 行 73: | ||
Windowsパソコンでも、Macでも、できれば、Chromeというブラウザをインストールして、Chrome上で操作を行ってください。 | Windowsパソコンでも、Macでも、できれば、Chromeというブラウザをインストールして、Chrome上で操作を行ってください。 | ||
- | ===== 1.GitHubアカウントは作成済みとします | + | ==== 1.GitHubアカウントは作成済みとします ==== |
GitHubアカウントの作成方法については、[[: | GitHubアカウントの作成方法については、[[: | ||
- | ===== 2.Githubで新規リポジトリを作成(新しいファイルの置き場所を作る) === | + | ==== 2.Githubで新規リポジトリを作成(新しいファイルの置き場所を作る) ==== |
- | == | + | |
GitHubにアカウント登録をすると、ログイン後の画面になりますので、画面右上の「+」ボタンをクリックして、さらに、New repository をクリック。 | GitHubにアカウント登録をすると、ログイン後の画面になりますので、画面右上の「+」ボタンをクリックして、さらに、New repository をクリック。 | ||
行 103: | 行 102: | ||
< | < | ||
- | |||
< | < | ||
< | < | ||
- | | + | < |
- | <meta charset=" | + | <meta charset=" |
- | <meta name=" | + | <meta name=" |
- | < | + | < |
- | <link rel=" | + | <link rel=" |
- | <script defer src=" | + | <script defer src=" |
- | </ | + | </ |
- | <body> | + | < |
- | + | ||
- | <section class=" | + | |
- | <div class=" | + | |
- | <h1 class=" | + | |
- | Hello World | + | |
- | </ | + | |
- | <h2 class=" | + | |
- | My first website with < | + | |
- | </ | + | |
- | </ | + | |
- | </ | + | |
| | ||
+ | <section class=" | ||
+ | <div class=" | ||
+ | <h1 class=" | ||
+ | Hello World | ||
+ | </h1> | ||
+ | <h2 class=" | ||
+ | My first website with < | ||
+ | </h2> | ||
+ | </ | ||
+ | </ | ||
+ | | ||
<section class=" | <section class=" | ||
<div class=" | <div class=" | ||
- | | + | |
- | <div class=" | + | <div class=" |
- | <p class=" | + | <p class=" |
- | </ | + | </ |
- | <div class=" | + | <div class=" |
- | <p class=" | + | <p class=" |
- | </ | + | </ |
- | <div class=" | + | <div class=" |
- | <p class=" | + | <p class=" |
+ | </div> | ||
</ | </ | ||
- | </ | ||
</ | </ | ||
</ | </ | ||
- | | + | |
<footer class=" | <footer 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:// | ||
+ | |||
+ | {{: | ||
+ | |||
+ | スマホでは、以下のように表示されます。 | ||
+ | {{: | ||
+ | 簡単な割には、それっぽいデザインになっているのではないでしょうか? | ||