自己紹介サイト制作で学んだこと
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-プロフィールテンプレート
↧