Introducing static site

#3 GitHub Pagesを用いた静的サイトの作成 HTML,CSS,JavaScript入門

GitHub Pagesとは? GitHub Pagesとはgithubによる静的サイトのホスティングサービスで、 HTML,CSS,JavaScriptなどのサーバサイドのコードを含まないサイトを手軽に公開することができます。

repositoryのfork https://github.com/nittc-meister/chapter3をforkしてください

GitHub Pagesの公開設定 forkしたrepositoryのsettingsタブにGitHub Pages に関する設定で、Sourceをmaster branch/docs folder に設定してください

アクセス https://username.github.io/repositoryから作成した index.htmlファイルにアクセスできることを確認してください

段落の追加 <p>タグを使用することで文書の段落を分けることができます。 docs/index.htmlの<body>タグの内部<p>タグの下に <p id=”greet”>こんにちは “自分のニックネーム” </p> という要素を追加してください。

CSSの追加 CSSを使用することでサイトを装飾してデザインすることができます。 docs/index.htmlの<style>タグ内にcssを追加して先程編集した<p>タグの文字サイズと文字色を編集してください。

画像の表示 imgタグを使用することで指定した urlの画像をhtml内部で表示することができます。 docs/imgフォルダに好きな画像を追加し、すでに表示されている lenna.jpegの代わりに表示できるようにしてください

JavaScriptの追加 JavaScriptを使用するとhtmlの更新やサーバーとの通信などのロジックを組むことができるようになります。 docs/index.htmlの<script>タグの内側に docuement.getElementById(‘greet’).text=”happy birthday 自分のニックネーム”; と書くことで表示が変わったことを確認してください

canvas javascriptを編集することでcanvas内に赤く塗りつぶされた円を表示してください

課題以上の要素をすべて追加して動作を確認したら、 forkもとのrepositoryに対してプルリクエストを発行してください

Introducing static site

Introducing static site

sakakendo0321

More Decks by sakakendo0321

Other Decks in Technology

Featured

Transcript

#3 GitHub Pagesを用いた静的サイトの作成 HTML,CSS,JavaScript入門

GitHub Pagesとは? GitHub Pagesとはgithubによる静的サイトのホスティングサービスで、 HTML,CSS,JavaScriptなどのサーバサイドのコードを含まないサイトを手軽に公開することができます。

repositoryのfork https://github.com/nittc-meister/chapter3をforkしてください

GitHub Pagesの公開設定 forkしたrepositoryのsettingsタブにGitHub Pages に関する設定で、Sourceをmaster branch/docs folder に設定してください

アクセス https://username.github.io/repositoryから作成した index.htmlファイルにアクセスできることを確認してください

段落の追加 <p>タグを使用することで文書の段落を分けることができます。 docs/index.htmlの<body>タグの内部<p>タグの下に <p id=”greet”>こんにちは “自分のニックネーム” </p> という要素を追加してください。

CSSの追加 CSSを使用することでサイトを装飾してデザインすることができます。 docs/index.htmlの<style>タグ内にcssを追加して先程編集した<p>タグの文字サイズと文字色を編集してください。

画像の表示 imgタグを使用することで指定した urlの画像をhtml内部で表示することができます。 docs/imgフォルダに好きな画像を追加し、すでに表示されている lenna.jpegの代わりに表示できるようにしてください

canvas javascriptを編集することでcanvas内に赤く塗りつぶされた円を表示してください

課題以上の要素をすべて追加して動作を確認したら、 forkもとのrepositoryに対してプルリクエストを発行してください