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

HTML
CSS
vscodeの使い方
拡張機能　　
素材やテンプレサイト

HTML

画像挿入方法

htmlファイルと同じところにimagesフォルダがある場合

<img src="/images/ロゴ.png" alt="ロゴ画像" width="111" height="20" />

構成の提案（自分がやりやすいのが一番ですが）

<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ファイルに貼り付けるだけ

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

【CSS】box-sizing:border-boxの使い方｜効かない時は？

便利なbodyの設定

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

HTMLと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を上手く配置する

.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に入れるとわかりやすい

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

vscode

1ウィンドウにつき1フォルダーを開きましょう
左上のfileからnew windowで新しいwindow開けます
mdファイル作ってみましょう
file→new fileから作成、名前変更で拡張しを.mdに
- 参考動画
- vscodeでのマークダウンの使い方

拡張機能

コードを綺麗に整えたい「prettier」
prettier onSave vscode 動かない時の対処法
上のタグを変えたら下も変わってほしい「Auto Rename Tag」
いいクラス名考えてほしい「codic」
変数のネーミングに悩む方にお勧め！プログラマーのためのネーミング辞書「codic」
ここを一気にdivタグでくくりたい「htmltagwrap」
Visual Studio Codeでhtmltagwrapを使って選択した文字列をタグで囲む
インデントをわかりやすくしてほしい「indent-rainbow」
一度使ったクラス名を簡単に入力したい「IntelliSense for CSS class... 」

便利なフリー素材サイト

アイコンサイト
FLAT ICON DESIGN
写真サイト
O-DAN
プロフィールテンプレ
WiX-プロフィールテンプレート