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

Introducing static site

Avatar for sakakendo0321 sakakendo0321
June 20, 2019
Technology
0
34

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
48
inner study
Avatar for sakakendo0321 sakakendo0321
1
64
pass the test
Avatar for sakakendo0321 sakakendo0321
1
220
meister 2018 final
Avatar for sakakendo0321 sakakendo0321
0
38

Other Decks in Technology

See All in Technology
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
Avatar for Kento Kimura aoto
PRO
0
370
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
Avatar for TomoyaIwata iwatatomoya
1
910
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
Avatar for Logy nologyance
1
390
バイブスに「型」を！Kent Beckに学ぶ、AI時代のテスト駆動開発
Avatar for amixedcolor amixedcolor
2
540
Firestore → Spanner 移行 を成功させた段階的移行プロセス
Avatar for a-thug athug
1
460
ガチな登山用デバイスからこんにちは
Avatar for halka halka
1
240
品質視点から考える組織デザイン/Organizational Design from Quality
Avatar for miisan mii3king
0
200
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
Avatar for shinaps shinaps
2
430
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
Avatar for Yuto Osawa osawa
1
270
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
Avatar for Sansan R&D sansan_randd
1
150
5分でカオスエンジニアリングを分かった気になろう
Avatar for Aja9tochin pandayumi
0
240
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
Avatar for wanda ganota
2
210

Featured

See All Featured
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.9k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
87
4.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
31
2.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.9k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
268
13k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.8k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
2
40
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
55
6.5k
Docker and Python
Avatar for Tania Allard trallard
45
3.6k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.4k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.6k

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