2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-04-19

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

  1. HTML
  2. CSS
  3. vscodeの使い方
  4. 拡張機能  
  5. 素材やテンプレサイト

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に

拡張機能

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

便利なフリー素材サイト

2
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
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?