CSS入門:基本知識をシンプルに解説します

 2023.05.27  株式会社システムインテグレータ

 

CSSとは?

CSSCascading Style Sheets:カスケーディングスタイルシート)は、ウェブページのデザインやレイアウトを制御する言語です。HTMLでマークアップされたコンテンツに対して、スタイルを適用し、見た目を整える役割があります。

 ウェブページのデザインやレイアウトの制御は、HTMLでも可能です。しかし、デザインやレイアウトを統一したい場合、HTMLの場合は個別に設定しなければならず、制作するときも、修正するときも大変手間がかかります。

 CSSでデザインやレイアウトを一括して制御することで、複数のHTMLにも同一の設定を適用できることから、デザインやレイアウトを簡単に統一できるため、一般的なウェブサイトではHTMLCSSは併用して使われます。
Attractive casual woman holding laptop with exploding data and numers

CSSでできること

①レイアウトの調整
CSSを使って、ウェブページ内の要素の位置や大きさを調整できます。FlexboxGridのような機能を使って、柔軟で効率的なレイアウトが実現できます。

 ②見た目のスタイリング
テキストの色やフォント、背景色、枠線などのデザイン要素を調整することができます。これにより、ウェブページのデザインを統一し、見やすくすることができます。

 ③アニメーションやトランジションの実装
CSSを使って、ウェブページ内の要素にアニメーションやトランジション効果(視覚効果の一種)を追加できます。これにより、ユーザーエクスペリエンスが向上します。

ビッグデータ時代の必須科目 SQLの教科書
教養としてのプログラミング入門BOOK

CSSの基本構造

基本構造を以下の例を挙げて説明します。

/* セレクタ: <h1>要素にスタイルを適用する要素セレクタ */
h1 {
  /* プロパティ: color, : green のスタイルを指定 */
  color: green;
  /* プロパティ: font-size, : 20px のスタイルを指定 */
  font-size: 20px;
}

 ①セレクタ
セレクタは、HTMLの要素に対してスタイルを適用するための指定子です。タグ名、クラス名、ID名などを使って特定の要素を選択できます。

②プロパティ
プロパティは、スタイルを適用する対象の属性を表します。例えば、テキストの色を変更する場合、「color」プロパティを使用します。

 ③値
値は、プロパティに適用する具体的な設定です。例えば、「color」プロパティに「green」という値を設定することで、テキストの色を緑に変更できます。

HTMLへの適用方法

CSSHTMLファイルに適用するには、3通りの方法があります。

 ①外部スタイルシート
外部スタイルシートは、CSSを別のファイルに記述し、HTMLファイルからリンクして読み込む方法です。これにより、複数のHTMLファイルで共通のスタイルを適用でき、メンテナンスが容易になります。

②内部スタイルシート
内部スタイルシートは、HTMLファイル内の<head>タグ内に<style>タグを使用してCSSを記述する方法です。これは、特定のHTMLファイルにのみ適用されるスタイルがある場合に便利です。

 ③インラインスタイル
インラインスタイルは、HTMLタグの属性として直接スタイルを記述する方法です。style属性を使用して、特定の要素に直接スタイルを適用できます。ただし、この方法は、スタイルがHTMLに混在するため、メンテナンスが困難になる可能性があります。

具体例

①テキストスタイリング
以下の例では、段落(<p>)のテキスト色を赤にし、フォントサイズを16px、フォントファミリーをArialまたはsans-serifに設定しています。

p {
    color: red;
    font-size: 16px;
    font-family: Arial, sans-serif;
}

②背景・枠線の装飾
以下の例では、<div>要素の背景色を薄い青にし、枠線を黒の2pxの太さで囲み、内側の余白(padding)を10px、外側の余白(margin)を20pxに設定しています。

div {
    background-color: lightblue;
    border: 2px solid black;
    padding: 10px;
    margin: 20px;
}

③レイアウト調整
この例では、.containerというクラス名が付与された要素に、Flexboxを適用し、子要素を水平方向(justify-content)と垂直方向(align-items)の両方で中央寄せに配置しています。

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

CSSとJavaScriptの連携

CSSJavaScriptを連携させることで、さらにインタラクティブなウェブページを作成することができます。JavaScriptを使用して、イベント(クリックやマウスオーバーなど)に応じてCSSのスタイルを動的に変更することができます

注意点:Webブラウザの互換性

異なるWebブラウザやバージョンによって、CSSのサポート状況が異なります。そのため、ウェブページをクロスブラウザ対応にする際には、対応ブラウザを確認し、必要に応じてベンダープレフィックスやポリフィル(ウェブ開発においてブラウザ間の互換性を向上させるために使用される技術)を使用して互換性を向上させましょう。

まとめ

CSSにはさまざまなプロパティが存在し、その数は膨大です。しかし、基本的なプロパティや構文をマスターすれば、より高度なスタイル設定も自在に行えるようになります。

また、基本を学んだあとは、フレームワークやライブラリ(Bootstrapなど)を使った開発にも取り組んでみると良いでしょう。

教養としてのプログラミング入門BOOK

RELATED POST関連記事


RECENT POST「プログラミング」の最新記事


プログラミング

【初心者向け】JSONとは?データ形式の基礎や書き方、使用例などを解説

プログラミング

サーバーサイドエンジニアとは? 仕事内容や年収、必要なスキル・知識を解説

プログラミング

Pythonで機械学習| AI開発でPythonが使用される理由や学び方を解説

プログラミング

COBOL入門|言語の特徴や、書き方、勉強方法、難易度について解説

CSS入門:基本知識をシンプルに解説します

TOPSIC TOPへ

新規CTA

TOPSIC-SQL4コマ漫画

RANKING人気資料ランキング

RANKING人気記事ランキング

RECENT POST 最新記事