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

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

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

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

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

css_property2

目次

  • 1 ボーダーと背景を決めるCSS
    • 1.1 border
    • 1.2 background
  • 2 要素の回り込みと解除を定義するCSS
    • 2.1 float
    • 2.2 clear
  • 3 リストに対するCSS
    • 3.1 list-style
  • 4 高さ、横幅を定義するCSS
    • 4.1 height
    • 4.2 width
  • 5 CSSプロパティまとめ

ボーダーと背景を決めるCSS

次は枠線を引くプロパティと背景の色や画像などを決めるプロパティの紹介です。まずはボーダーからいきましょう。

border

要素の枠線を引くプロパティ。罫線や点線、破線など数種類有り。

例:

div {
 border: 1px solid #f00;
}

適用例:

グレーのエリア要素に枠線を設定します。枠線は1pxの罫線とし色は赤くします。

サンプル文字

borderプロパティはこのように要素の全方向(上下左右)とすることもできますが、marginやpaddingのように上だけ、右だけといったように個別に設定することができます。また今回はborderプロパティを使って3種類(線の太さ、線の種類、線の色)を設定しましたがそれぞれ個別に設定することもできます。(こちらはあまり使う機会はないかもしれません)

一例:

/*上方向だけボーダー 例:*/
div {
 border-top: 1px solid #f00;
}

このborderプロパティ、borderを境目に内側がpaddingエリア、外側がmarginエリアとなっています。このborderプロパティを利用して「こっから先が内側、逆が外側」と理解するのに役立ちます。marginとpaddingで困ったら試しにborderをかけてみるというのはお勧めです。

background

要素の背景に関する情報を定義するプロパティ。

例:

p {
 background: url(apple.jpg) no-repeat;
}

適用例:

要素の背景にりんごの画像を表示させます。

サンプル文字

backgroundプロパティは複数の値を設定できます。今回サンプルでは「画像」と「設定した画像のリピート」を指定しました。これは個別にプロパティが存在もしているし、今回のようにbackgroundプロパティをつかって複数指定も可能です。
他に設定できる値としては以下。

/*背景色を黒に変更 例:*/
div {
 background-color: black;
}
/*背景に指定した画像を表示 例:*/
div {
 background-image: url(../images/coffee.png);
}
/*背景画像のリピートを横方向だけに指定 例:*/
div {
 background-repeat: repeat-x;
}
/*背景画像の位置を左から100px, 縦方向中央に指定 例:*/
div {
 background-position: 100px center;
}
/*まとめて指定する (背景色グレー、sample.gif画像を縦方向にリピート表示、位置は横方向中央 例:*/
div {
 background: #ccc url(../../sample.gif) repeat-y center;
}

backgroundプロパティも使用頻度が高いプロパティです。まとめて指定すると行の節約にもなるので是非覚えておきましょう。

要素の回り込みと解除を定義するCSS

次に続く要素を回りこませて横並びにしたり、回りこませた要素を解除する方法があります。最初の内は理解するのが大変ですが重要なプロパティなので頑張って覚えましょう。

float

要素を浮かせ、次に続く要素を空いた部分に回りこませるプロパティ。

例:

div {
 float: left;
}

適用例:

最初の要素を左に浮かせ、次に続く要素を空いた右側に回りこませる

サンプル文字(ここにfloatをかけている)

次に続く要素(空いている右側に勝手に回り込む)

適用例では、「サンプル文字」というのにfloatがかかっていて、この要素を「浮かせて→左に寄せる」という作業をしています。その後、floatに依って空いた「右側」に次に続く要素であるテキストが回りこんできているのがわかるかとおもいます。
floatプロパティの値はleftの他に右に寄せる「right」、floatを元に戻す「none」等があります。

/*右にfloat 例:*/
div {
 float: right;
}
/*floatしたものを元に戻す 例:*/
div {
 float: none;
}

floatプロパティは次に出てくるclearプロパティと一緒にセットで覚えておきましょう。

clear

floatして回りこんできている状態を解除するプロパティ。

例:

h3 {
 clear: both;
}

適用例:

floatしている状態を解除する

サンプル文字(ここにfloatをかけている)

次に続く要素(空いている右側に勝手に回り込む)

ここにclearをかけてfloatしていた状態を解除しています

先ほどのfloatの適用例と同じ状態にclearの一行を追加しました。わかりやすくするためにボックスを大きくしました。floatしている状態を解除しているので最後の一行がグレーのボックスの下に表示されていますね。
bothという値の他に「left」「right」などがありました、これは「どっちの方向を解除するか?」と聞かれているので右や左と限定して解除することはほぼなく、「both」を指定し両方解除するのが間違いがなく便利です。

リストに対するCSS

次はHTMLのul, ol, liといったリストに対するCSSを定義します。

list-style

リストに対する様々な定義をするプロパティ。

例:

ul li {
 list-style: square inside;
}

適用例:

liを四角いリストにしてリストの位置を内側に入れる

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

squareの他にcircleで白丸、noneで無し、decimalで数字など、他にもいろいろと設定できます。
insideは内側でしたが、outsideで外側に設定することも可能。通常はoutside。

list-styleを使うとまとめてリストのスタイルを設定できますが細かいプロパティも存在します。backgroundプロパティのように。

/*listの種類を定義する 例:*/
ul li {
 list-style-type: circle;
}
/*listのマークの位置を指定する 例:*/
ul li {
 list-style-position: inside;
}
/*listに画像を設定する 例:*/
ul li {
 list-style-image: url(images/soda.jpg);
}

このように個別に指定することはできますが、一つでも複数でも基本的に「list-style」で設定してしまうことが多いです。個別に設定できるよ、というくらいでOKでしょう。

高さ、横幅を定義するCSS

最後に要素の高さや横幅を設定するCSS。これもよく使います。

height

要素の高さを定義するプロパティ。ヘイトと読みたくなりますが正しい発音は「ハイト」です。

例:

p {
 height: 100px;
}

適用例:

pの高さを100pxに設定する(わかりやすいよう背景色を適用)

サンプル文字

高さを変えたいときに使うプロパティですが、要素の中の文字がはみ出しても高さを指定している場合は文字がはみ出したままです。heightプロパティはどうしても高さを指定したいときにとどめ基本的には指定しないほうが崩れの少ないウェブページが作成できます。

width

要素の横幅を定義するプロパティ。読み方はウィドゥスというのが一般的ですがウィドスやウィズと言う方もいるようです。あまり気にしなくてOK。

例:

p {
 width: 300px;
}

適用例:

pの横幅を300pxに設定する(わかりやすいよう背景色を適用)

サンプル文字

heightプロパティと同じで指定しないと100%表示となり、そのブロック内において最大値まで伸びます。
「この要素の横幅はどのくらいなんだろう?」と思ったらbackground-color等のプロパティをかけてみて目で確認してもいいでしょう。

高さや横幅というのはブロックレベル要素に適用が出来、インライン要素には適用ができません。
「ブロック?インライン?」聞きなれない言葉ですが、CSSを理解する上で大事な概念になるので次回移行学んでいきましょう。

CSSプロパティまとめ

お疲れ様でした。主要なCSSプロパティの説明でしたがいかがでしたか?
「たくさん覚えて大変…」
「そこまで難しくなかった」
感じることは様々でしょうが、CSSは書いていると規則性が自分なりにわかってきて、「このプロパティにはこういう値が入るんじゃないか?」といったことが感覚でわかるようになってきます。
そして何より、CSSの書き方がわかるようになるとHTMLやCSSではできなかったプログラミング言語のフレームワーク、jQueryの理解が早まります。jQueryはCSSの書き方で書いていくのでいきなり知識がない状態で挑むよりか遥かにラクに覚えることができます。

次回はプロパティを定義する際に知っておくべきブロックレベル要素とインライン要素について学びましょう。

次の講座:10.ブロックレベル要素とインライン要素について←目次に戻る
メールコンサルティング
WordPress保守管理サービス

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

池田祐太郎

WordPressの導入を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在はWordPressの保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

この記事と関連する記事

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

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  4. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  5. WordPress において PHP 8.1 に更新していいかどうか検証
  6. [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた
  • WordPress のクロスサイト・スクリプティング被害にあった事例を共有します
  • メール作業の生産性を向上させる最低限覚えておくべき Gmail のショートカットキー
  • タブ固定とタブ一発アクセスのショートカットキーの組み合わせでブラウザ作業の生産性を向上
  • メールフォームプラグイン MW WP Form を使いながら WP Rocket を使う場合にエラー回避する設定

カテゴリー

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

タグ

Android BtoC CMS css elementor git google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS ssh SSL Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウド クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール ブログ プラグイン マーケティング リニューアル 保守管理 改ざん 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.