ひとりでのアプリ開発 - fineの備忘録 -

ひとりでアプリ開発をするなかで起こったことや学んだことを書き溜めていきます

Web開発 - CSS：CSSの基本

Web開発

初めに

　本記事では、CSSとはどのようなものであるか、CSSの主な役割、CSSの基本構造などをまとめます。

Index

CSSとは

　CSS（Cascading Style Sheets）は、ウェブページやウェブアプリケーションのデザインやレイアウトを制御するためのスタイルシート言語です。HTMLがコンテンツの構造を定義するのに対し、CSSはそのコンテンツをどのように見せるかを指定します。

　例えば、次のHTMLのみで作成したウェブページをCSSを使うことでデザインやレイアウトを変更し、より見栄えのする画面にすることが可能です。

（HTMLのみ）

（HTML+CSS）

CSSの主な役割

　CSSは次のような役割を担います。

役割 説明
スタイルの指定 フォント、色、サイズ、余白、背景などのスタイルを指定して、ウェブページの外観をカスタマイズします。
レイアウトの制御 要素の配置や大きさ、位置、フローティング、レスポンシブデザインなどを管理します。複数のデバイスに対する適応: 異なるデバイスや画面サイズに合わせて、適切な表示を実現するためのスタイルの適用を可能にします。
再利用性とメンテナンス性 スタイルを別ファイルに記述し、複数のページで共有できるため、効率的なコーディングとメンテナンスが可能です。

CSSを使ってみる

　ウェブベースのIDE（統合開発環境）を使うことで、そのコードの結果をウェブサイトとして表示することができます。

　本記事では、CodePenというIDEを紹介します。

https://codepen.io/

　HTML、CSS（、JavaScript）を記述するとウェブページが表示されます。

　下に、先ほど "CSSとは" の説明で表示したウェブページのコードを載せておきます。試しにコピーし、CodePenにコードを張り付けてみると使用感が分かると思います。

（index.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初めてのCSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<header>
    <h1>初めてのCSSサンプルページ</h1>
    <nav>
        <ul>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">サービス</a></li>
            <li><a href="#">お問い合わせ</a></li>
        </ul>
    </nav>
</header>

<section class="main-content">
    <h2>ようこそ！</h2>
    <p>CSSを使ってページをスタイル付けしましょう。</p>
</section>

<footer>
    <p>&copy; 2023 サンプルページ</p>
</footer>

</body>
</html>

（styles.css）

/* ページ全体のスタイル */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

/* ヘッダーのスタイル */
header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

header nav ul {
    list-style: none;
    padding: 0;
}

header nav ul li {
    display: inline;
    margin-right: 20px;
}

header nav ul li a {
    text-decoration: none;
    color: #fff;
}

/* メインコンテンツのスタイル */
.main-content {
    width: 80%;
    margin: 20px auto;
    text-align: center;
}

/* フッターのスタイル */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

CSSの基本構造

　CSS全体の構造をルールセット（ルール）と呼びます。

　CSSはセレクター（Selector）と宣言（Declaration）で成り立っています。

/* セレクタ */
セレクタ {
    /* 宣言 */
    プロパティ: 値;
    プロパティ: 値;
    プロパティ: 値;
}
  • セレクター要素を指定し、中括弧内で宣言を行う。
  • プロパティと値はコロン（:）で区切る。
  • 各宣言はセミコロン（;）で区切る。

CSSで宣言できるプロパティの例

テキスト関連のプロパティ

プロパティ 説明
color テキストの色を指定します。
font-family テキストのフォントファミリーを指定します。
font-size / font-weight テキストのサイズや太さを指定します。
text-align / text-decoration テキストの配置や下線の有無を指定します。
line-height 行間の高さを調整します。

ボックスモデル関連のプロパティ

プロパティ 説明
width 要素の幅を指定します。
height 要素の高さを指定します。
margin 外側の余白を指定します。
padding 内側の余白を指定します。
border 境界線の指定をします。
box-shadow 要素に影をつけます。

背景関連のプロパティ

プロパティ 説明
background-color 要素の背景色を指定します。
background-image 背景画像の指定をします。
background-size 背景画像のサイズを調整します。
background-position 背景画像の位置を指定します。
background-repeat 背景画像の繰り返し方法を指定します。

プロパティ一覧

www.tagindex.com

参考

developer.mozilla.org
https://codepen.io/
www.tagindex.com