Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introducing static site
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
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
sakakendo0321
June 20, 2019
Tweet
Share
More Decks by sakakendo0321
See All by sakakendo0321
meister chapter4
sakakendo0321
0
30
open source 2
sakakendo0321
0
53
inner study
sakakendo0321
1
68
pass the test
sakakendo0321
1
230
meister 2018 final
sakakendo0321
0
38
Other Decks in Technology
See All in Technology
日本の85%が使う公共SaaSは、どう育ったのか
taketakekaho
1
150
生成AI時代にこそ求められるSRE / SRE for Gen AI era
ymotongpoo
5
3.1k
Kiro IDEのドキュメントを全部読んだので地味だけどちょっと嬉しい機能を紹介する
khmoryz
0
180
生成AIを活用した音声文字起こしシステムの2つの構築パターンについて
miu_crescent
PRO
2
190
CDK対応したAWS DevOps Agentを試そう_20260201
masakiokuda
1
260
Digitization部 紹介資料
sansan33
PRO
1
6.8k
20260204_Midosuji_Tech
takuyay0ne
1
150
10Xにおける品質保証活動の全体像と改善 #no_more_wait_for_test
nihonbuson
PRO
2
240
顧客との商談議事録をみんなで読んで顧客解像度を上げよう
shibayu36
0
220
Ruby版 JSXのRuxが気になる
sansantech
PRO
0
150
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.3k
FinTech SREのAWSサービス活用/Leveraging AWS Services in FinTech SRE
maaaato
0
130
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
9
750
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
730
Crafting Experiences
bethany
1
48
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
Paper Plane
katiecoart
PRO
0
46k
How to Align SEO within the Product Triangle To Get Buy-In & Support - #RIMC
aleyda
1
1.4k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
320
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
440
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
410
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
94
Game over? The fight for quality and originality in the time of robots
wayneb77
1
120
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
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の代わりに表示できるようにしてくだ さい
JavaScriptの追加 JavaScriptを使用するとhtmlの更新やサーバーとの通信などのロジックを組むことができるようになります。 docs/index.htmlの<script>タグの内側に docuement.getElementById(‘greet’).text=”happy birthday 自分のニックネーム”; と書くことで表示が変わったことを確認してください
canvas javascriptを編集することでcanvas内に赤く塗りつぶされた円を表示してください
課題 以上の要素をすべて追加して動作を確認したら、 forkもとのrepositoryに対してプルリクエストを発行してくださ い