自己紹介サイト制作で学んだこと
- 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をタテにきれいに並べる*/
}
- タイトルの背景画像設定
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に
拡張機能
- コードを綺麗に整えたい「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-プロフィールテンプレート