• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

ハイファイブクリエイト

東京都を拠点にしたWebサイト制作。WordPress構築やシステム構築、ウェブコンサルティング

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / ホームページ制作無料講座 / CSS初心者 / 8.CSSで使う主要なプロパティと値を知ろう(1)

8.CSSで使う主要なプロパティと値を知ろう(1)

池田祐太郎 | 2013年10月19日 公開

css_property1
CSSの基本を知ったところでここではメインで使う「プロパティ」をピックアップして解説します。あくまでメインなので全部のプロパティは表記していません。

プロパティとは何でしょうか?

プロパティとは以下の赤い箇所のことです。

h1 {
font-size: 20px;
}

ちなみに青がセレクタ、緑が値です。この言葉は頻繁に出てくるので是非覚えてください。

プロパティは二部に分けます。第一部はテキストや文字に装飾をする系や余白のCSSプロパティを説明し、第二部は枠線、背景、回り込み、リスト、高さ、横幅…といったプロパティを説明します。
「CSSがまだ不安…」という方は前回の7.装飾をするためにCSSを使うを参考にしてください。

では早速いきましょう!

目次

  • 1 テキスト、文字にかけるCSS
    • 1.1 color
    • 1.2 font-size
    • 1.3 font-weight
    • 1.4 font-family
    • 1.5 text-decoration
    • 1.6 text-align
    • 1.7 line-height
    • 1.8 text-indent
  • 2 余白を指定するCSS
    • 2.1 margin
    • 2.2 padding

テキスト、文字にかけるCSS

color

文字色を定義するプロパティ。赤や青、緑など好きな色を指定することができます。

例:

p {
 color: #f00;
}

適用例:

色を赤くします

サンプル文字

値の部分はこのように#000;やred, blueなどの固有名詞等で指定できます。

font-size

文字のサイズを変更するプロパティ。大きくしたり小さくしたり、単位も様々です。

例:

ul {
 font-size: 1.5em;
}

適用例:

文字を1.5倍にします

サンプル文字

emとは「1文字分」なので基準サイズの1.5倍の大きさということになります。他に%, px, pt等、様々な単位で指定することができます。
簡単に説明するとpxやpt等の固定の単位を絶対指定、emや%の基準となるサイズによってかわる単位を相対指定といいます。
PCやスマホ、タブレットと様々な大きさのデバイスがあるので基本的にはemという相対指定で進めていくことをお勧めします。

font-weight

文字の太さを定義するプロパティ。

例:

div {
 font-weight: bold;
}

適用例:

文字を太くします

サンプル文字

100や200といった数値での指定もできますがboldを使うのが無難です。boldにしていたものを戻す場合は値にnormalを指定します。

font-family

ゴシックや明朝など、どのフォントを使うか定義するプロパティ。MS P ゴシックとかメイリオとか固有名詞で指定します。

例:

h2 {
 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
}

適用例:

文字を明朝体にします

サンプル文字

値がコンマで複数個指定されています。これは全部を指定するのではなく、「1つ目がなかったら2つ目、それもなかったら3つ目…」といったように優先順位をつけて指定しています。
なぜこんなことをするのかというとフォントというのは見ている人のパソコンにそのフォントが入っているかはわからないので、なかった時のためにいくつか予備で指定するのです。
この例だと一番優先させたいのはヒラギノ角ゴ Pro W3ですがこれはMacのフォントで一般的なWindowsコンピュータには入っていません。なのでこれはWindowsユーザーには無視されて次のフォントにいきます。

試しにどのフォントも入っていない場合(そんなことは基本的にないですが、海外などで日本語フォントが入っていない場合)、最後に設定したsans-serifというサンセリフ体(ゴシック体)の文字を使えという命令をしています。この指定にするとそのパソコンに入っている基本的なゴシック文字が使われ日本語も表示できるようです。

text-decoration

文字の装飾を定義するプロパティ。

例:

div {
 text-decoration: underline;
}

適用例:

文字に下線を引きます

サンプル文字

例ではunderline、つまり「下線」を引きました。他には上に線をひくoverline、取り消し線のline-through、何も指定しない場合や設定した値を戻したいばあいのnoneなど。一番使うのはunderlineでしょう。

text-align

行内での表示位置を定義するプロパティ。

例:

p {
 text-align: center;
}

適用例:

行内の文字位置を真ん中寄せにします

サンプル文字

結構使うプロパティの一つ。centerの他に右寄せにするright、基準値となるleftがあります。

line-height

行内におけるテキストの高さを定義するプロパティ。

例:

h4 {
 line-height: 500%;
}

適用例:

行内の文字の高さを5倍にします

サンプル文字

高さを指定する値は%の他にemやpxなどfont-sizeと同じように指定できます。ここもpx指定よりも相対指定のemや%がいいでしょう。line-heightは単位を省くと「倍」という意味になります。(例:1.5 = 1.5倍)
font-sizeの値より大きい場合は余った数を上下に割り振ります。

text-indent

文字を引っ込める(インデントする)プロパティ。

例:

p {
 text-indent: 1em;
}

適用例:

1行目の文字を1文字分下げます。2行目の文字は通常の位置から始まります。

サンプル文字
サンプル文字

インデントするというのは文字を下げる、という意味です。1emすると1文字分インデントされ2行目からはもともとの位置からスタートとなりよくある文章の形と思ってもらえればわかるかと思います。
もちろんpxや%等の数値での指定もできます。しかし実際にはemで「1文字分」としたほうが後々の管理がしやすいでしょう。

余白を指定するCSS

続いて余白を決めるCSSを学びます。これはよく使うプロパティなので是非覚えましょう。

margin

要素の外側の余白を決めるプロパティ。

例:

div {
 margin: 30px 50px;
}

適用例:

赤いエリア要素の外側の余白を上下30px, 左右50pxと設定します

サンプル文字

marginプロパティは外側の余白を設定します。要素自体の余白は全く関与しません。例では上下と左右に分けましたが、上だけ、下だけ、上下左右全部、上と左右は一緒で下だけ別などなど4方向細かく設定できます。

/*上下左右30px 例:*/
div {
 margin: 30px;
}
/*上30px 左右20px 下10px 例:*/
div {
 margin: 30px 20px 10px;
}
/*上30px 右50px 下10px 左20px 例:*/
div {
 margin: 30px 50px 10px 20px;
}
/*上だけ30px 例:*/
div {
 margin-top: 30px;
}
/*右だけ50px 例:*/
div {
 margin-right: 50px;
}
/*下だけ10px 例:*/
div {
 margin-bottom: 10px;
}
/*左だけ40px 例:*/
div {
 margin-left: 40px;
}

といった感じに細かく設定できます。このmarginプロパティは次に出てくるpaddingプロパティとセットで覚えるようにしましょう。

padding

要素の内側の余白を決めるプロパティ。

例:

div {
 padding: 15px 40px 5px;
}

適用例:

青いエリア要素の内側の余白を上15px, 左右40px 下5pxと設定します

サンプル文字

paddingプロパティはmarginと変わり要素の内側の余白を設定します。marginとごっちゃになりやすいところです。適用例を見ると分かる通り要素の内側なので青い部分が広がっているのがわかると思います。

marginと同じく、上下左右をそれぞれ細かくと上だけ左だけといったように個別にも設定できます。※marginと同じのため省略します。
最初はどこからが内側でどこからか外側なのかわからなくなりますが、次回で紹介するborderやbackgroudプロパティでわかりやすくなるので合わせて見てみましょう。

次の講座:9.CSSで使う主要なプロパティと値を知ろう(2)←目次に戻る
WordPress保守管理サービス

Filed Under: CSS初心者 関連タグ:css

池田祐太郎

WordPressをはじめとしたCMSの導入を10年以上にわたって手掛けており、中小企業から大企業までコーポレートサイト・ランディングページ・ECサイト・ブランドサイト等、幅広いWebサイトの企画・制作・開発・プロモーション業務などを行う。2012年にハイファイブクリエイトを創業し、現在はディレクションや開発業務などを担当している。 プロフィール詳細

この記事と関連する記事

8.その他のデベロッパーツールの紹介
2014年3月4日
タグ: css, HTML
カテゴリー: デベロッパーツール入門
7.デベロッパーツール応用編
2014年3月4日
タグ: css, HTML, jQuery
カテゴリー: デベロッパーツール入門
6.確認から制作まで即使えるCSSの機能(2/2)
2014年3月4日
タグ: css, HTML
カテゴリー: デベロッパーツール入門

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • WordPressの保守が必要な理由とチェックするべき9点
  • Contact Form 7 に見つかったファイルアップロードの脆弱性はどのくらい危険なのか?
  • 2020-2021年末年始の営業のご案内
  • [WordPressサイト向け支援キャンペーン] WordPress保守管理の無料コンサルティングを実施
  • お名前.com レンタルサーバーでSSH接続する方法

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC Chrome CMS css Fireworks Google+ HTML Illustrator iOS iPhone jQuery Mac mixi Photoshop初心者 php SEO SNS Webサイト高速化 WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 お知らせ アクセス解析 アプリ カスタマイズ カフェ クラウド サーバー スマホサイト スマートフォン ソーシャル ツール フラットデザイン ブログ プラグイン マーケティング ライフログ リニューアル 保守管理 制作のご依頼 最適化 集客するサイト構築 飲食店

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 特定商取引法に基づく表示
  • 転載・引用について
  • Facebook

© 2021 high five create All rights reserved.