My Portfolio

HTML / CSS / JavaScript の基本を学ぶ

Web開発を始めるにあたって、HTML・CSS・JavaScriptの基本を押さえることはとても重要です。本記事では、それぞれの役割や基本的な記述方法について解説します。

🏗 HTML（HyperText Markup Language）

HTMLはWebページの骨組みを作るための言語です。基本的な要素として、以下のようなタグを使用します。

📌 基本のHTML構造

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMLの基本</title>
</head>
<body>
    <h1>こんにちは、世界！</h1>
    <p>HTMLはWebページの構造を作るための言語です。</p>
</body>
</html>

🔹 よく使うタグ

タグ説明
<h1> 〜 <h6>見出しタグ
<p>段落（文章）
<a>リンク
<img>画像表示
<ul> / <li>箇条書きリスト

🎨 CSS（Cascading Style Sheets）

CSSはWebページのデザインを設定するための言語です。色やレイアウト、フォントなどを指定できます。

🎨 基本のCSS記述

body {
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;
    color: #333;
}

h1 {
    color: #007bff;
    text-align: center;
}

🔹 よく使うプロパティ

プロパティ説明
color文字の色を変更
background-color背景色を変更
font-sizeフォントサイズを指定
margin外側の余白を設定
padding内側の余白を設定

⚡ JavaScript（JS）

JavaScriptはWebページに動的な動きを追加するプログラミング言語です。ボタンのクリックイベントや、データの取得・更新などが可能です。

⚡ 簡単なJavaScriptコード

document.addEventListener("DOMContentLoaded", function() {
    const button = document.querySelector("#clickMe");
    button.addEventListener("click", function() {
        alert("ボタンがクリックされました！");
    });
});

🔹 よく使う機能

機能説明
document.querySelector()要素を取得
addEventListener()イベントを追加
console.log()デバッグ用出力
setTimeout()指定時間後に処理を実行
fetch()APIからデータを取得

🌟 まとめ

これらを組み合わせることで、魅力的なWebサイトを作ることができます。まずは基本を理解し、実際に手を動かしてみましょう！

最後まで読んでいただき、ありがとうございました！😊