Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introducing static site

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for sakakendo0321 sakakendo0321
June 20, 2019
Technology
38
0

Introducing static site

mesiter 2019 python/iot class chapter three
introduce for HTML, CSS, JavaScript and static site

Avatar for sakakendo0321

sakakendo0321

June 20, 2019

More Decks by sakakendo0321

See All by sakakendo0321
meister chapter4
Avatar for sakakendo0321 sakakendo0321
0
32
open source 2
Avatar for sakakendo0321 sakakendo0321
0
54
inner study
Avatar for sakakendo0321 sakakendo0321
1
69
pass the test
Avatar for sakakendo0321 sakakendo0321
1
240
meister 2018 final
Avatar for sakakendo0321 sakakendo0321
0
39

Other Decks in Technology

See All in Technology
ハーネスエンジニアリングの概要と設計思想
Avatar for sergicalsix sergicalsix
9
4.5k
Azure PortalなどにみるWebアクセシビリティ
Avatar for tomokusaba tomokusaba
0
390
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
6
74k
AWS Agent Registry の基礎・概要を理解する/aws-agent-registry-intro
Avatar for Renya Kujirada ren8k
3
360
AzureのIaC管理からログ調査まで、​随所に役立つ​SkillsとCustom-Instructions​ / Boosting IaC and Log Analysis with Skills
Avatar for AEON aeonpeople
0
200
みんなで作るAWS Tips 100連発 (FinOps編)
Avatar for Ai Hayakawa schwrzktz
1
280
AIが書いたコードを信じられない問題 〜レビュー負荷を下げるために変えたこと〜 / The AI Code Trust Gap: Reducing the Review Burden
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
6
1.1k
みんなの「データ活用」を支えるストレージ担当から持ち込むAWS活用/コミュニティー設計TIPS 10選~「作れる」より、「続けられる」設計へ~
Avatar for Yoshiki Fujiwara yoshiki0705
0
230
Amazon S3 Filesについて
Avatar for Yuuki Yamashita yama3133
2
200
自立を加速させる神器 - EMOasis #11
Avatar for スタンバイ stanby_inc
0
130
Snowflake Intelligence導入で 分かった活用のコツ
Avatar for wonohe wonohe
0
130
#jawsugyokohama 100 LT11, "My AWS Journey 2011-2026 - kwntravel"
Avatar for Shinichiro Kawano shinichirokawano
0
340

Featured

See All Featured
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
150
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.5k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
900
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
10k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.4k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k

Transcript

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

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

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

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

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

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

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

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

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

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

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