VS Codeの拡張機能の追加
以下拡張機能を導入する。
- prettier
- コードを自動整形してくれる
- 設定方法: https://youtu.be/UZ4RE9VSQOo?t=154
- auto rename tag
- HTML要素の開始タグと閉じタグの変更を連動してくれる
- code spell checker
- 誤った英語表記を指摘してくれる
- material icon theme
- ファイルにアイコンをつけてくれる
- polacode
- コードの選択エリアの写真を撮ってくれる
- 撮影方法
- ctrl + shift + p -> polacodeを選択 -> 右エリアにサンプル写真が表示される
- スクショしたいコードエリアを選択して、右アリアにドロップ -> スクショ画像が表示される
- 右エリアしたのカメラ・レンズっぽいマークを押す -> 画像を保存できる
- css peek
- クラスのホバーでスタイル定義をプレビュー or 定義場所へジャンプできる
- 利用例: https://youtu.be/UZ4RE9VSQOo?t=724
- thunder client
- APIテストに使える
- とりあえず入れておく
- quokka.js
- jsやtsのちょいコードを試せる（devToolsのコンソールみたいなインターフェース）
- ctrl + shift + p
- chatgpt genie AI
- サイドメニューのランプマークをクリック
- https://platform.openai.com/account/api-keys でAPI KEYを作り設定する
ドットインストールの「初めてのweb制作」を試す
目次
#02
- タグの種類
- h1(heading1)：見出し
- p (paragraph)：文書
例としては次のように記述する。
<h1>山田太郎</h1> <p>UI/UXデザイナー見習いです。日々の勉強、がんばっています。</p>
#03
- 字下げ：Tabキーを押す
#04
- 背景用の画像：background.pngのような画像ファイルを準備する（ファイル名は何でも良い）
- 画像を表現するには：img を使う
- imgにaltという属性を設定し画像の説明をするのが一般的
例としては次のように記述する。
<img src="./assets/images/icon.png" alt="太郎のアイコン画像です">
#05
- 文書の見た目を整えるための言語：css
#06
style、border-radiusを使うことで画像の形を変えたりできる
例としては次のように記述する
img {
border-radius: 50%;
}
#07
vscodeの外観を変える方法
- ファイルを開く
- ユーザー設定をクリック
- 配色テーマから変更
HTML要素に枠線をつけるには、以下のようにCSSのborder-xxxを使う。
section {
border-width: 1px;
border-color: gray;
border-style: solid;
border-radius: 8px;
}
#08
section：文書の章や節の役割をする
footer：文書ページの下部に表示されるもの
例としては次のように記述する。
<section>
<img src="./assets/images/icon.png" alt="太郎のアイコン画像です">
<h1>山田太郎</h1>
<p>UI/UXデザイナー見習いです。日々の勉強、がんばっています。</p>
</section>
<footer>(c) dotinstall.com</footer>
#09
padding：要素と境界の内側に余白を設定するCSSプロパティ
margin-bottom：要素の外側かつ、下側の余白を調整するプロパティ
例としては次のように記述する。
padding: 16px; margin-bottom: 8px;
#10
text-align：画像やテキストを揃える役割
例としては次のように記述する。
body {
text-align: center;
}
#11
bacgound-image：背景画像の配置
例としては次のように記述する。
background-image:url(./assets/images/background.png) ;
成果物
https://yutamorisk8.github.io/first-repo/dotinstall/1st-lesson/index.html
GitHub Pageでサイトを公開する方法
- https://github.com/yutamorisk8/first-repo/settings/pages へ移動
- branchで公開したbranch名を選択
例えば test.htmlやindex.htmlというファイルがあるなら、次のURLでアクセスできる。
開発環境の準備
プログラム知識０の高校生が、現役プログラマーからのライトな指示のみで、どの程度プログラミングを習得できるかを検証したいという話があり、 このブログを書いている。まずは、コミュニケーションと知見のまとめのために以下を導入してみた。
- slack導入
- はてなブログの開設
実際のプログラミングと、ソースコード（プログラミングした内容）の管理には以下のソフトウェアとサービスを利用するとよいとのこと。
VS Codeは以前入れたことがあるので、まずはGihHubのアカウントを作ってみる。
こんな感じでログインできた。次にsshキーの登録が必要なのだが、面倒なのでGitHub Desktopをインストールする。
具体的な手順はGitHub DesktopのUIにしたがってぽちぽちした感じだが、以下の作業をした。
最後に、github.comにアクセスして変更内容が反映されていることを確認。
