>>>HOME >>>CSSの基礎知識① >>>CSS基礎知識②:仕組み その1 >>>CSS基礎知識②:仕組み その2
ようこそ「HP-Knowledge」へ。このホームページは、「ホームページ作成・制作」におけるHTMLとCSS(スタイルシート)の基礎知識を紹介するホームページ作成初心者向けのページです。ホームページを作るために知っておくべきHTMLとCSS(スタイルシート)の基礎知識を身につけてホームページ作成に強くなろう!

スタイルシート基礎知識②:仕組み その2

このページでは、ホームページ作成におけるスタイルシートの作り方について説明します。 スタイルシートファイルの形式やスタイルシートをHTMLに読み込ませる方法を覚えておきましょう。 左側テキストではスタイルシートのプロパティ部分について解説します。

スタイルシート作成

スタイルシートの記述方法の基礎については前ページまでで説明したので、ここではスタイルシートの作り方を覚えることにしましょう。 スタイルシート作成方法は3種類ありますが、このページではよく使うであろう2つに絞って説明をします。

ファイルの1つとして作成する

まず最初に1つのファイルとしてスタイルシートを作成しておいて、それをHTMLファイルに読み込ませて適用させる方法を紹介します。 この形式のスタイルシートを「外部スタイルシート」と呼びます。この形式ならばスタイルシートのメリットを最大限に活かすことができるので、 基本的にはこの方法をお勧めします。実際の作成手順ですが、最初にメモ帳やHTMLエディタでスタイルシートを記述して、ファイル形式(拡張子)をcssにしてから再度保存すれば出来上がりです。「style.css」とか「layout-style.css」といった感じで使うページに合わせた名前をつけるいいでしょう。 スタイルシートができたらそれで完了ではなく、HTMLファイルにこのcssを読み込ませる必要があります。 読み込ませるためにはHTMLファイルの<head>タグ内に
<link rel="stylesheet" type="text/css" href="layout.css">
と書き込みます。上の書き込みではスタイルシートファイルの名前を「layout.css」にしています。このように書き込んで初めて使えるようになるので覚えておきましょう。 1つだけでなく、複数のスタイルシートを読み込ませたい場合はアドレス部分を変えて、 ソースを追加してください。基本的には何枚でもスタイルシートを読み込ませることができますが、あまり多すぎても管理が面倒なので2、3枚以下に抑えるほうが望ましいでしょう。

HTMLファイルに埋め込む形式

スタイルシートをHTMLファイルに書き込む方法を紹介します。使用したいスタイルが少ないときや、限られたページでしか使わないようなスタイルを作るときに使用することになります。この方法を乱用するとページファイルが重たくなってしまうので注意。 書き込む方法は、headタグ内に
<style type="text/css">
<!--スタイルシート名-->
</style>
と書きます。

pickup

Last update:2017/8/17

プロパティについて

前ページでも取り上げましたが、スタイルシートのプロパティ部分を紹介します。 ・・・とは言ってもプロパティを全種紹介するとなるとページが膨大になりますし、プロパティを紹介している専門サイトも豊富にあるので、このページでは接頭語に絞って紹介しようと思います。スタイルシートの接頭語だけでも覚えておけば、種類によってどのような効果が備わっているのか理解できるようになります。

background-

backgroundで始まるプロパティは背景に関することを設定できます。 調節できる項目には下記のものがあります。

  • 背景色の設定
  • 背景に表示される画像
  • 背景に表示させる画像の表示位置
  • 背景に表示させる画像の繰り返しパターン

font-

fontで始まるプロパティは文字に関する設定。 調節できることは、下記参照。

  • 文字フォント
  • フォントカラー
  • フォントサイズ
  • フォントの太さ(強調)

text-

textで始まるプロパティでは文章に関することが設定できます。 調節できる項目には以下のものがあります。

  • 文章の左/中央/右揃え
  • 段落の字下げ
  • 文章の下線の有無や取り消し線の除去

margin-padding-

margin(マージン)やpadding(パディング)で始まるプロパティでは、内側と外側の余白に関することを設定できます。 調節できる部分は、上/右/下/左の余白になります。

border-

borderで始まるプロパティは枠線に関することを設定できます。 調節できることは、以下の通り。

  • 枠線の色
  • 枠線の太さ
  • 枠線の表示パターン

list-

listで始まるプロパティはリストに関することを設定します。 調節できることには主に以下のものがあります。

  • マーカーの位置
  • マーカーの種類
  • マーカーの画像

配置に関わるプロパティ

配置にかかわるプロパティには以下のものがあります。

width/height

ボックスの幅と高さの指定

position

表示位置の計算方法

top/left/right/bottom

移動方向と量

float/clear

回り込みと回り込みの解除

overflow

配置場所からあふれた部分の処理の方法

z-index

重なった時の順序

覚えておくべきプロパティ

以下のプロパティは色々と役立つので是非覚えておきましょう。

color

フォントカラーの設定。これの前にbackgroud-が付けば背景色の変更になる。

line-height

行の縦幅の設定

vertical-align

文字の上下位置の設定

display

要素の表示方法の設定

Copyright(C)2008 HP-Knowledge. All Rights Reserved.