自己紹介サイト作成で学んだこと

# 自己紹介サイト制作で学んだこと
1. HTML
1. CSS
1. vscodeの使い方
1. 拡張機能　　
1. 素材やテンプレサイト

___

# HTML


- 画像挿入方法  
- 
htmlファイルと同じところにimagesフォルダがある場合

```html
<img src="/images/ロゴ.png" alt="ロゴ画像" width="111" height="20" />
```
- 構成の提案（自分がやりやすいのが一番ですが）
- 
```html
<html lang="ja">
<head>
    
</head>
<body>
    <header>
        <div class="header-container">
            /*上バナー:/
        </div>
        <div class="header-content">
            /*大きなタイトル*/
        </div>
    </header>
    <main>
        <section class="comment">
            
        </section>
        <section class="profile">
            
        </section>
        <section class="target">

        </section>
    </main>
    <footer></footer>
</body>
</html>
```
___

# CSS

- 感覚的にdivのサイズを整える方法  
- 
paddingとborderを変更してもwidth50%をちゃんと画面の半分としてくれる  
下のをccsファイルに貼り付けるだけ

```css
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}
```
[【CSS】box-sizing:border-boxの使い方｜効かない時は？](https://saruwakakun.com/html-css/reference/box-sizing#ichi2)

- 便利なbodyの設定
- 
```css
body {
  margin: 0;    /*ページ左や上のスペースをなくす*/
  display: flex;    
  flex-direction: column;  
  min-height: 100vh;
  /*3行で直下のdivをタテにきれいに並べる*/
}
```

[HTMLとCSSだけでフッターの隙間を解消する方法](https://sake-log.website/footer-nonspace)
- タイトルの背景画像設定
- 
```css
header {
  margin: 0;
  height: 400px;
  background-image: url("./images/背景用画像.jpg"); /*画像の指定*/
  background-size: cover;   /*スペースを画像で埋める*/
  background-repeat: no-repeat; /*画像の繰り返しなし*/
  background-color: rgba(255, 255, 255, 0.5);   /*0.5をいじって濃さ変更できます*/
  background-blend-mode: lighten;   /*2行で画像をうすくする*/
}
```

- divを上手く配置する
- 

```css
.horizontal {
  display: flex;    /*直下のdivをflex-boxにする*/
  flex-wrap: wrap; /*flex-boxの横幅に応じて新しい行を追加*/
                    /*width:50%;を4つなら2列2行で配置*/
}
.horizontal div{     
  width: 50%;       /*2つ綺麗に並ぶ*、border-boxと併用すると〇*/
  height: 300px;    /*高さご自由に*/
}
```

- 画像の挿入
- 
divに入れるとわかりやすい

```css
.horizontal img {
  width: auto; 
  height: 100%; /*縦横比そのまま高さがdivの100%逆もしかり*/
}
```
___
# vscode

- 1ウィンドウにつき1フォルダーを開きましょう
左上のfileからnew windowで新しいwindow開けます
- mdファイル作ってみましょう
file→new fileから作成、名前変更で拡張しを.mdに
    - [参考動画](https://www.youtube.com/watch?v=tjygVZLLeYc)
    - [vscodeでのマークダウンの使い方](https://www.whizz-tech.co.jp/6026/#VSCode)
___

# 拡張機能
   1. コードを綺麗に整えたい「prettier」  
   [prettier onSave vscode 動かない時の対処法](https://qiita.com/KKKKK/items/3b9dba55653cb7993bf5)
   1. 上のタグを変えたら下も変わってほしい「Auto Rename Tag」
   1. いいクラス名考えてほしい「codic」  
    [変数のネーミングに悩む方にお勧め！プログラマーのためのネーミング辞書「codic」](https://tonari-it.com/codic-english-naming-programing/)
   1. ここを一気にdivタグでくくりたい「htmltagwrap」  
    [Visual Studio Codeでhtmltagwrapを使って選択した文字列をタグで囲む](https://monoxa.net/2018/02/visual-studio-code%E3%81%A7htmltagwrap%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%9F%E6%96%87%E5%AD%97%E5%88%97%E3%82%92%E3%82%BF%E3%82%B0%E3%81%A7%E5%9B%B2%E3%82%80/)
   1. インデントをわかりやすくしてほしい「indent-rainbow」
   1. 一度使ったクラス名を簡単に入力したい「IntelliSense for CSS class... 」

___

# 便利なフリー素材サイト
- アイコンサイト  
[FLAT ICON DESIGN](http://flat-icon-design.com/?p=794)
- 写真サイト  
[O-DAN](https://o-dan.net/ja/)
- プロフィールテンプレ  
[WiX-プロフィールテンプレート](https://ja.wix.com/website/templates/html/portfolio-cv/personal)