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

Introducing static site

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for sakakendo0321 sakakendo0321
June 20, 2019
Technology
0
35

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
Tweet

More Decks by sakakendo0321

See All by sakakendo0321
meister chapter4
Avatar for sakakendo0321 sakakendo0321
0
30
open source 2
Avatar for sakakendo0321 sakakendo0321
0
53
inner study
Avatar for sakakendo0321 sakakendo0321
1
68
pass the test
Avatar for sakakendo0321 sakakendo0321
1
230
meister 2018 final
Avatar for sakakendo0321 sakakendo0321
0
38

Other Decks in Technology

See All in Technology
Context Engineeringの取り組み
Avatar for nutslove nutslove
0
340
生成AI時代にこそ求められるSRE / SRE for Gen AI era
Avatar for ymotongpoo ymotongpoo
5
3.1k
OCI Database Management サービス詳細
Avatar for oracle4engineer oracle4engineer
PRO
1
7.4k
CDK対応したAWS DevOps Agentを試そう_20260201
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
250
Kiro IDEのドキュメントを全部読んだので地味だけどちょっと嬉しい機能を紹介する
Avatar for khmoryz khmoryz
0
180
小さく始めるBCP ― 多プロダクト環境で始める最初の一歩
Avatar for kekke-n kekke_n
1
400
Amazon Bedrock Knowledge Basesチャンキング解説！
Avatar for 野口碧生 aoinoguchi
0
140
プロダクト成長を支える開発基盤とスケールに伴う課題
Avatar for yuu26 yuu26
4
1.3k
Context Engineeringが企業で不可欠になる理由
Avatar for Hirosato Gamo hirosatogamo
PRO
3
570
~Everything as Codeを諦めない~ 後からCDK
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
3
330
SREのプラクティスを用いた3領域同時 マネジメントへの挑戦 〜SRE・情シス・セキュリティを統合した チーム運営術〜
Avatar for coconala_engineer coconala_engineer
2
640
マーケットプレイス版Oracle WebCenter Content For OCI
Avatar for oracle4engineer oracle4engineer
PRO
5
1.6k

Featured

See All Featured
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.2k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
520
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.1k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.9k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
370
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
420
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
47
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
160
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.2k

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に対してプルリクエストを発行してくださ い