基礎講座(前編)

スタイルシートとは

CSS (Cascading Style Sheets)

スタイルシートは、CSS(シーエスエス)とよばれています。
HTMLにスタイル機能を提供し表示を制御するための言語です。CSSを使用すると、ウェブページのレイアウトを整えることができます。ウェブページの余白や文字の大きさ、色などを指定することもできるので、Webサイトの見栄えが大きく変わります。ウェブデザインには欠かせないファイルです。拡張子は、「css」(半角小文字)となります。【例：style.css】

CSSの役割

HTMLでは、「見出し」や「段落」などの文章構造を表していますが、「文字の大きさや色」「余白」「背景」など見た目についての指定ができません。「見た目」を装飾するには、CSSを使います。見た目だけでなく、配置や動きを制御することができます。

CSSの注意点

CSSを記述する際には、次のような点に注意します。

  • 半角英数で入力する(「ＭＳ」など例外を除く)
  • 英数字(半角)・大文字小文字の区別・使用可(かな不可)
  • ブラウザやOSのバージョン、メディアによって見え方が異なる。

CSSの記述場所

CSSの記述場所は、主に次の３つがありますが、基本的に外部シートに記述するようにします。

  • HTMLのhead内に記述する(head内に、<style></style>を追加して記述する方法)
  • 要素に直接style属性に記述する( p style=”color:red;”などの方法)
  • 外部CSSファイルに記述する

外部CSSファイルに記述する

HTMLファイルとCSSファイルを関連付けることにより、Webページ全体にスタイルが適用されます。本来スタイルシートは別ファイル(style.css)に記述するようにしましょう。

CSSの記述

エディタの冒頭に以下の記述をし、style.cssと命名して「css」フォルダーへ保存します。(文字コードを指定する以下の「utf-8」は、大文字でも小文字でもよい)

@charset "utf-8";

HTMLファイルにリンクする

以下の一文を、HTMLの<head></head>内に記述し、スタイルシートを読み込みます。

<link rel="stylesheet" href="css/style.css">
/*上下どちらでもよい*/
<link href="css/style.css" rel="stylesheet">

コメントの書き方

CSSドキュメントにコメントを残すことができます。コメント文は、メモ書き(注意書き)のような役割をします。/**/内に書かれたコメントは、CSSスタイルとは認識されず、表示に影響を与えません。それぞれのスタイルが混乱しないよう整理するために、コメントを残します。

/*この中にコメントを入れます。*/
/*
コメント中に改行をしても問題ありません。
*/

スタイルシートをインポート

ファイルが増えてきて、レイアウトが複雑化になるとCSSファイルを複数分散する手法もあります。必要に応じて、スタイルシートから、スタイルシートをインポートする手法もあります。

@import "layout.css";
@import "main.css";

スタイルシートの書式

セレクタ { プロパティ [属性]: 値 [プロパティ値]；}

スタイルシートの基本

上記は、h1の文字の色を「赤」にする、といったスタイルの記述です。セレクタは、「どこの」という意味を持ち、プロパティは「何を」値は「どうする」という意味合いをそれぞれ持っています。プロパティと値は「:(コロン)」で区切り、ひとつのスタイルが終了するごとに「;（セミコロン）」で区切ります。

スタイルは、セミコロン(;)を仕切ることで、複数宣言することが可能。

/*--- h1の文字の色は、赤色。背景色は、黄色です。-----*/
h1{
color:#ff0000;
background-color:#ffff00;
}

01.練習素材

テキスト素材を使って、学習してみましょう。

わくわくパン屋さん 当店の人気のメニューを紹介します。 ふわふわ食パン ふんわりもっちりとした柔らかい生地がたまらなく美味しい食パンは、モーニングやサンドイッチなどに大活躍です。 クロワッサン バターをパン生地に練りこんで焼き上げるパン。サクサクした食感と甘みが特徴的で朝食やおやつにも人気です。フランス発祥であり、「三日月」を意味しています。 バゲット 生地が細長く伸ばされていることから、パリッとした焼き上がりが特徴です。フランス語で「棒」や「杖」を意味しています。 メロンパン 日本発祥の人気菓子パン。パン生地の上に甘いビスケット生地をのせて焼いたパンです。 ビスケット生地による表面のすじや格子状の模様がマスクメロンに似ているからと言われています。 お店のホームページはこちらです。 Copyright ©わくわくパン屋さん All Rights Reserved.

TOP