HTML / CSS / JavaScript メモ

1. HTML

Web制作の基本となるHTML、CSS、JavaScriptの個人的な備忘録です。よく使うものを中心にまとめています。

1-1. head

<!-- 文字コード指定 -->
<meta charset="UTF-8">

<!-- 画面サイズの指定
width=device-width: デバイスの画面幅に合わせる
initial-scale=1.0: ズーム倍率設定 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- ファイル指定
rel="stylesheet: 指定したファイルがstlesheetであることを示す
href="style.css: ファイルのパスを示す -->
<link rel="stylesheet" href="style.css">

<!-- Webフォント読み込み 
family=Noto+Sans+JP: Noto Sans JPフォントを指定
display=swap: フォントが読み込みされるまではPCの標準フォント -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700$display=swap" rel="stylesheet">

1-2. body

<!-- divは要素の箱
id="" : 要素につける固有の名前(html内で同じIDを使うことはできない
class="" : 要素を分類するためのグループ名(同じクラス名を複数回使うことはできる -->
<div id="" class="">

<!-- spanはdivと同様に汎用的なタグ
しかし、インライン要素を持ち、spanは文章中の単語のように改行されず
そのまま表示される
用途としては、文章の一部の色を変えたいときや今回の0のように
後からJSで書き換えたいときに便利-->
<span id="" class="">0</span>

<!-- ページの動きや操作を担当するJavaScriptを読み込むためのタグ
ボタンが押された処理、サーバーが受け取った情報を書き換えるなど動的な処理をする。
bodyタグの直前に置くのが一般的
ブラウザはhtmlから上から順に読み込むため、先にhtmlからすべて読み込んでから最後にjavascriptを読み込ませることでスクリプト要素を見つけられずエラーになるのを防ぐ-->
<script src="script.js"></script>

2. CSS

2-1. 色と背景(Color & Background)

/*要素の背景色を透明にする。*/
background-color: transparent;

/*文字の基本色指定*/
color: #f0f0f0;

/*rgbaは色を透明度付きで指定する方法*/
back-ground-color: rgba(18, 18, 18, 0.85);

2-2. 配置とレイアウト(Positioning & Layout)

/*要素を通常の配置ルールから切り離して、絶対位置にする。*/
position: absolute;

/*これはposition: absolite;とセットで使い、要素の画面のど真ん中に配置するための定番*/
top: 50%; left 50%; transform: translate(-50%, -50%);

/*要素を効率的に並べるための、２つのモダンなレイアウト機能
grid(格子状) : 2次元レイアウト(行と列)を作るのに適している
flex(Flexboxと呼ばれる) 一次元(横一列、または縦一列)のレイアウトを作るのに非常に強力*/
display: grid;
display: flex;

/*幅を均等に2分割した列を作る*/
grid-template-columns: 1fr 1fr;

/*要素を縦一列に並べる*/
flex-direction: column;

/*主軸方向(横並びの場合)の配置を指定する*/
justify-content: space-between;

/*交差軸方向(横並びの場合は垂直方向)のい中央揃えを指定する。*/
align-items: center;

2-3. ボックス関連(Box Model)

/*要素の内側で余白*/
padding: 20px;

/*右側に5pxの余白*/
padding-right: 5px;

/*要素の外側の余白*/
margin-top: 0; / margin-bottom: 20px;

/*要素の枠線をまとめて指定する書き方 (太さ、スタイル、色の順番で書く)*/
border: 1px solid rgba(255, 255, 255, 0.1);

/*要素の角の丸みを指定。値が大きいほど丸くなる*/
border-radius: 8px;

/*要素に影を付ける。　UIに立体感を与える
0: X軸のoffset
4px: Y軸のoffset
12px: ぼかしの半径
rgba(...): 影の色*/
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);

/*要素の最大の高さを画面の高さの50%に制限する*/
max-height: 50vh;

/*縦方向に内容がはみ出した時だけスクロールバーを表示*/
overflow-y: auto;

2-4. テキストとフォント

/*要素のサイズが内容からはみ出した時にその溢れた部分を隠す設定*/
overflow: hidden;

/*文字の大きさ*/
font-size: 18px;

/*文字の太さ　400が標準*/
font-weight: 700;

/*ブロック要素内のテキストやインライン要素を中央揃えにする*/
text-align: center;

2-5. スクロールバーのスタイル

/*スクロールバー全体の幅*/
::-webkit-scrollbar {
    width: 8px;
}

/*スクロールバーの背景*/
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

/*スクロールバーのつまみ*/
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

/*つまみにマウスを乗せた時の色*/
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

3. JavaScript

3-1. 要素の取得と操作

// IDを指定して要素を取得する
const container = document.getElementById('main-container');

// 要素のテキスト内容を書き換える
const titleElement = document.getElementById('title');
titleElement.textContent = '新しいタイトル';

// 要素のクラスを操作
// 'hidden'クラスを追加して非表示にする(CSSで .hidden { display: none; }が定義されている想定)
container.classList.add('hidden');

// 'hidden'クラスを削除して表示する
container.classList.remove('hidden');

// クラスの有無を切り替える(あれば削除、なければ追加)
container.classList.toggle('active');

3-2. イベント処理

// 'my-button' というIDを持つボタン要素を取得
const button = document.getElementById('my-button');

// ボタンがクリックされたら、アロー関数の中の処理を実行する
button.addEventListener('click', () => {
    console.log('ボタンがクリックされました');
    //コンテナの表示/非表示を切り替える
    container.classList.toggle('hidden');
});

// ほかのウィンドウや拡張機能からデータを受け取るmessageイベント
window.addEventListner('message', (event) => {
    const messageData = event.data;
    console.log('メッセージを受信しました:', messageData);

    // 受け取ったデータに応じて処理を分岐
    if (messageData.action === 'show') {
        container.classList.remove('hidden');
    }
});

3-3. 要素を動的に作成・追加する

// リストを表示するための親要素を取得
const listContainer = document.getElementById('list-container');

// 表示したいデータの配列(例)
const data = [
    { id: 1, name: 'アイテムA', status: 'available' },
    { id: 2, name: 'アイテムB', status: 'unavailable' },
    { id: 3, name: 'アイテムC', status: 'available' }
];

// 最初にリストの中身を空にする(更新時に古い項目が残らないようにするため)
listContainer.innerHTML = '';

// データの配列をループ処理で一つずつ取り出す
data.forEach(item => {
    // <div>要素を新しく作成
    const listItem = document.createElement('div');
    listItem.className = 'list-item'; // CSSのためのクラスを設定

    //<span>要素 (名前用)を作成
    const nameSpan = document.createElement('span');
    nameSpan.className = 'item-name';
    nameSpan.textContent = item.name; // データから名前を変更

    // <span>要素 (ステータス用) を作成
    const statusSpan = document.createElement('span');
    statusSpan.className = 'item-status';
    statusSpan.textContent = item.status === 'available' ? '利用可能' : '利用不可';
    // ステータスに応じてクラスも変更
    statusSpan.classList.add(item.status);

    // listItem(div)の中に、nameSpanとstatusSpanを追加
    listItem.appendChild(nameSpan);
    listItem.appendChild(statusSpana);

    //　listItemを親要素(listContainer)に追加
    listContainer.appendChild(listItem);
});