ご覧頂きましてまことにありがとうございます！Makkwyldeです。
今回は、HTMLをもっとカッコよくする「CSS」について解説します。CSSを使えば、ウェブページを自分好みにデザインできるんです
CSSって何？
CSSは「Cascading Style Sheets」の略で、ウェブページの見た目を整えるための言語です。HTMLが家の骨組みだとすれば、CSSは壁紙や家具、照明のようなものです。
CSSの基本
CSSは「セレクタ」と「プロパティ」を使って書きます。
セレクタ {
プロパティ: 値;
}
例えば：
p {
color: blue;
font-size: 16px;
}
これは「すべての段落（p）のテキストを青色にして、文字サイズを16ピクセルにする」という意味です。
CSSの適用方法
CSSをHTMLに適用する方法は主に3つあります：
① インラインスタイル : HTML要素に直接スタイルを書く
② 内部スタイルシート : HTML文書の`<head>`内に`<style>`タグを使って書く
③ 外部スタイルシート : 別のCSSファイルを作成し、HTMLにリンクする（最もおすすめ）
よく使うCSSプロパティ
① 色の変更 : `color: 色名;`
② 背景色の変更 : `background-color: 色名;`
③ フォントサイズの変更 : `font-size: サイズ;`
④ 余白の設定 :
・ 内側の余白: `padding: 値;`
・ 外側の余白: `margin: 値;`
⑤ ボーダーの設定 : `border: 太さ スタイル 色;`
CSSセレクタの種類
① 要素セレクタ : `p { }` （すべての段落に適用）
② クラスセレクタ : `.クラス名 { }` （特定のクラスに適用）
③ IDセレクタ : `#ID名 { }` （特定のIDに適用）
実践してみよう！
① 以下のHTMLコードを用意します：
<!DOCTYPE html>
<html>
<head>
<title>CSSを学ぼう</title>
<style>
/* ここにCSSを書きます */
</style>
</head>
<body>
<h1>こんにちは、CSS!</h1>
<p class="blue-text">これは青い文字の段落です。</p>
<p id="big-text">これは大きな文字の段落です。</p>
</body>
</html>
② `<style>`タグ内に以下のCSSを追加してみましょう：
h1 {
color: red;
}
.blue-text {
color: blue;
}
#big-text {
font-size: 24px;
}
③ このHTMLファイルをブラウザで開いてみてください。
まとめ
CSSを使えば、ウェブページを自分好みにデザインできます。色やサイズ、配置など、様々な要素を自由に変更できるんです。最初は難しく感じるかもしれませんが、少しずつ試していけば、きっと楽しくなってきますよ。
出品サービスのご案内
Bootstrap+WEBシステムを作成します
CSSフレームワークの「Bootstrap」を使用して綺麗なデザインのオリジナルWEBシステムを作成致します。
高クオリティなゆっくり動画を作成します
Adobe After Effectsで高クオリティなゆっくり動画を作成致します。
定型動画制作、編集、量産します
Adobe After Effectsで定型動画を制作、量産致します。
