ホームへ
MENU
CSS

💻 Web開発を始めたい人へ！「CSS」って何かをざっくり解説！

勉強ちゃん

Web開発をするには、いろいろな技術（スキル）を学ぶ必要があります。

たとえば（Java向けの場合）：

  • HTML（画面）
  • CSS（画面）
  • JavaScript（JS）（画面）
  • Java（バックエンド）
  • SQL（データベースを操作するための言語）

今回は**画面のデザイン「CSS」**について、わかりやすく説明します！

🔍 CSSってなに？

CSS（Cascading Style Sheets）は、Webページの見た目（デザイン）を整えるための言語です。

HTMLは「文章の内容（骨組み）」を作るものでしたが、CSSは「色・大きさ・レイアウトなどの見た目」を担当します。

たとえば…

  • 文字の色を赤くする
  • 背景を青にする
  • 文字サイズを大きくする
  • 余白を作る
    → これらはぜんぶCSSの役割です！

CSSの書き方：内部CSSと外部CSS

CSSは、主に2つの方法で使います：

✅ 1. 内部CSS（HTMLの中に直接書く）

HTMLの<head>タグの中に <style> を使って書きます。

<!DOCTYPE html>
<html>
    <head>
         <script>
         </script>
         <style>
            h1 {
                color: red;
               }
         </style>
    </head>
    <body>
       <h1>hello html!</h1>
    </body>
</html>
上記のコードはブラウザで下記のような表示されます

内部CSSは、特定のHTMLページのデザインをカスタマイズするときに便利です。

✅ 2. 外部CSS（別のファイルに書く）

.cssファイルを作って、HTMLからリンクします。

sample.css

h1 {
    color: red;
}

sample.html

<!DOCTYPE html>
<html>
    <head>
         <script>
         </script>
         <link rel="stylesheet" href="sample.css">
    </head>
    <body>
       <h1>hello html!</h1>
    </body>
</html>

上記のコードはブラウザで下記のような表示されます

外部CSSは、複数ページで同じデザインを使うときに便利です。大規模なサイトではこの方法が一般的！

🎯 CSSの役割まとめ

機能説明
色を変える文字・背景の色を自由に設定できる
サイズを変えるフォントサイズ・画像サイズなど調整できる
レイアウト調整余白・位置・並び方などを細かく調整できる
レスポンシブ対応スマホ・PCに合わせて見た目を変えることができる

🧾 よく使うCSSプロパティ一覧（ざっくり）

プロパティ意味・使い方例
color文字の色 → color: blue;
font-size文字の大きさ → font-size: 20px;
background-color背景色 → background-color: yellow;
margin外側の余白 → margin: 10px;
padding内側の余白 → padding: 5px;
border枠線 → border: 1px solid black;

📝まとめ：CSSは見た目担当！

  • CSSはWebページのデザイン・装飾を担当します。
  • HTMLだけではシンプルすぎる見た目を、CSSできれいに整えます。
  • 書き方には内部CSSと外部CSSの2種類あります。
  • 文字の色・大きさ・レイアウトなど、CSSで自由にカスタマイズできます。

次はJavaScript（JS）の知識を、お役に立てればうれしいです。

ABOUT ME
自己紹介
自己紹介
職業：Web開発エンジニア
こんにちは！
このブログでは、ITのお仕事で学んだ知識や、 日本での生活で学んだ知識を紹介しています。
お役に立てればうれしいです 😊
記事URLをコピーしました