LoginSignup
4
1

More than 3 years have passed since last update.

はじめてのWebページ!Githubで公開~☆

Last updated at Posted at 2020-09-23

超ハイパースペシャル初心者の“ぴおにあ”でーす:v:

今日は初めてのWebページを作ってGithubで公開してみました:clap:
稚拙すぎて笑わないでね~:laughing:

公開したサイト :  はじめてのWebページ

目標

MDN Web Doc の「JavaScript オブジェクトの基本」を参考に
 ・CSSを軽く意識しつつ
 ・クリックイベントを使ったページを
 ・Githubで公開
を目標としました。

HTML/CSS

画像
挿入の仕方やサイズ(画素数)の感覚を覚える

装飾はまだあまり学んでいないので、まずは、
・文字の色、フォント、影
 
・背景色
 
・width, margin, border, padding

を使って慣れてゆくことを主題としました。

JavaScript

わろ先生から「イベント」を学ぶようにご教示いただいたので、今回はMDN にあった、
 ・画像をクリックすると絵が変更される
 ・アクセスしたときに名前を入れ、それが画面トップに反映される。
 ・上記名前がページ内のボタンで変更できる。
という機能を使ってみました。

Githubでの公開

これはわろ先生が動画で丁寧に解説してくださっているので、それを参考にしました。
参考資料:GitHub Pagesでのホームページ公開方法(Windows)

先生の動画ではアップロードが「index.html」ファイルひとつだけでした。
今回は画像が複数あり、.jsや.css ファイルもある場合のアップロードはどうなるのか少々心配でしたが、何事も大雑把な私はフォルダ3つと「index.html」のファイルを纏めてドラッグアンドドロップ! えいやっ!

Githubは優秀で、無事に読み込みされました。:joy:

おわりに

初めてのWebページ、とても楽しみながら作成できました。
この一か月半は、本当に全く意味が分からず、説明の言葉をひとつひとつ調べながら基礎情報を何度も読んでいました。

最近はやっと自分が何をやっているかが分かってきたような?(いや分かっていないような?)そして、もっといろいろな機能を知りたいなぁと思えてきました。

最終ゴールはSmart Contractですので、引き続きWeb App とJavaScriptの勉強を続けたいと思います。

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1