# 【A講座】Webプログラミング講座1回目
## 初期準備
Teams上にアップロードした資料をシンクライアント上にダウンロードしてください。
Zipファイルですので解凍してデスクトップにフォルダを配置してください。

本日使う授業フォルダに入っているもの。

01_htmlフォルダ
01_sampleフォルダ
01_workフォルダ
講義資料PDF

今日の授業では主に01_htmlフォルダを利用します。
reset.cssはブラウザデフォルトのCSSを初期化してプレーンな状態にするためのCSSファイルです。実際のwebでは導入するのが一般的です。

## セクション１　開発環境の準備
### 1.Chromeのインストール
https://www.google.com/intl/ja_jp/chrome/

### 2.VisualStudioCodeのインストール
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

### 3.初期設定
#### 1.プラグインの導入
・Japanese Language Pack for Visual Studio Code
・EvilInspecto
・IntelliCode

#### 2.自動保存を設定
「command + ,」で設定を開き
一番上のAutoSaveをonFoucuschangeに変更
全て完了したらアプリケーションを落として再起動

## セクション２　HTMLに慣れてみよう
### 1.フォルダを開く
・01_htmlというフォルダをVscodeで開く
　ドラックアンドドロップまたは「command + O」で対象フォルダを選択

### 2.「command + N」で新規ファイル作成　
「index.html」というファイルを作成

### 3.index.htmlをVSCodeで開いた状態で記述
　「!　＋　tab」or 「html:5」と記述すると雛形が完成

### 4.bodyタグの中に`<h1></h1>`で自分の名前を記述
ブラウザで実行結果を確認

### 5.色々なタグを見てみよう

<p></p>
<a href=""></a>
<button></button>
<input type="button" value="">
<div></div>
<img src="">
<h1></h1>（1~6）

他にもあるのでちょっと検索してみよう

imgタグ
<img src="img/1.jpeg">
imgフォルダを作っておく
webからダウンロードして名前をつけてimgフォルダに保存
そこから読み出す

#### 6.自己紹介カード雛形

<div>
    <h1>About me</h1>
    <p><img src="images/about/my-image.jpg" alt=""></p>
    <h2>Your Name</h2>
    <p>転職支援のスタートアップ企業である株式会社eflyの取締役をする傍ら、複数のスタートアップのサービス立上げの為ファウンダーエンジニアとして参加。個人ではフリーランスクリエイターチームTECHCARAVANを立上げ同年代のクリエイター達と新しい表現を見つけ出す活動をしている。</p>
</div>

#### 7.CSSの描く準備
cssフォルダを作成してその中にstyle.cssを作成する
そしてindex.htmlのheadタグ内でlinkで呼び出す

## セクション３ CSSの書き方
### 1. 基本形

p {
    color:red;
    font-size:18px;
}

### 2.class指定

<p>テキストサンプル</p>//変更前
↓
<p class="title">テキストサンプル</p>//変更後

====CSSファイル内での書き方＝＝＝＝＝＝＝＝＝
.title {
    color:red;
    font-size:18px;
}

### 色々なCSSがあるのでちょっと調べてみよう

横幅指定
width:400px;
高さ指定
height:300px;
色指定
color:red;
中央揃え
text-align: center;
余白
margin: 10px;
文字の大きさ
font-size: 14px;
文字の太さ
font-weight: bold;
横並び
disply:flex
jsutfy-content:????

### 4.webでおしゃれなCSSとかで検索みましょう！

自己紹介カード作成タイム