ホームページ作成 Note

よく使うCSSプロパティ

スタイルシートのプロパティは、数が多いですが中学生ぐらいの英語力で十分理解できるものです。省略形ではなくそのまんまです。また、よく使うプロパティは限られています。

このサイトでご紹介する HTML エディタは、「HTML/CSS のタグ入力支援機能」がありカーソルをあてスペースキー押すと、候補となる CSS プロパティがポップアップ表示されて教えて くれます。度忘れやタイプミスなどの心配ありません。手元に「HTML タグ・スタイルシート辞典」など一冊持っておかれたら、いろいろ試してみるのも楽しいですよ。

ここでは、「よく使うCSS プロパティ」の記述例と、表示例、そして「HTMLの基礎」でマークアップしたサンプルの、「CSSで飾った例 」をご紹介します。

よく使うCSS プロパティ一覧

フォント関連

color: *

テキストの文字色（前景色）を設定します。背景色は、background-color: * で設定します。普通の HTML エディタや、WYSIWYG ソフトでは、カラーパレットで好みの色を設定できますが、 「基本１６色」と、「Web セーフカラー 216色」を使用すれば、ほとんどのブラウザで安心して表示されます。 色のカラーコードについては、「カラーチャート」を参照してください。

<p style="color: #ffffff; background-color: #3366ff;">
文字色と背景色は見やすい関係の色にします。</p>

文字色（前景色）と背景色の組み合わせが決まったら、健常者や色覚障害者にも適合した色彩かどうか下記のアクセシビリティチェックツールで確認されることをお勧めいたします。

カラー・コントラスト・アナライザー 2013J

font-size: *

フォントサイズの指定は、「%」、「em」や、絶対数値の「px（ピクセル）、pt（ポイント）」などで指定します。 Windows IE の表示メニューから大中小と閲覧者がサイズ変更できる「%」や、「em」をお勧めします。下記は文字サイズの例です。

【 文字サイズの例 】

文字サイズ 10px 情報技術の品格

文字サイズ 11px 情報技術の品格

文字サイズ 12px 情報技術の品格

文字サイズ 13px 情報技術の品格

文字サイズ 14px 情報技術の品格

文字サイズ 15px 情報技術の品格

文字サイズ 16px 情報技術の品格

文字サイズ 17px 情報技術の品格

文字サイズ 18px 情報技術の品格

文字サイズ 20px 情報技術の品格

文字サイズ 70% 情報技術の品格

文字サイズ 75% 情報技術の品格

文字サイズ 80% 情報技術の品格

文字サイズ 85% 情報技術の品格

文字サイズ 90% 情報技術の品格

文字サイズ 95% 情報技術の品格

文字サイズ 100% 情報技術の品格

文字サイズ 110% 情報技術の品格

文字サイズ 120% 情報技術の品格

文字サイズ 130% 情報技術の品格

キーワード値には、「xx-small、x-small、small、medium、large、x-large、xx-large 」などがあります。設定されている文字サイズに対して、 約1.2倍ぐらいずつ変化していきます。ブラウザやフォントの種類でも異なることがあります。

font-weight: *

文字の太さを設定します。100〜900 の 9段階で太さを指定することができますが、一般的なフォントでは 9 種類の太さすべては用意されていません。標準の太さを 400 とし数値が大きくなればより太く設定されます。 通常は、「bold」や「bolder」で強調区別しています。

font-weight: 100

font-weight: 200

font-weight: 300

font-weight: 400

font-weight: 500

font-weight: 600

font-weight: normal

font-weight: bold

font-weight: lighter

font-weight: bolder

font-family: *

Webページの文字書体となるフォントを指定します。値には「フォント名」、または「総称ファミリー名」を指定します。フォント名の指定はカンマ「, 」 で区切り複数指定できます。複数指定した場合は、ユーザーの利用している環境にインストールされているフォントが指定順に優先して反映されます。

「総称ファミリー名」の場合は、その特徴から下記の５種類に分類され、ユーザ環境に応じてブラウザがそれぞれの特徴に類似したフォントを表示します。

フォントファミリー指定は、指定したフォントすべてが使えなかった場合にも対処できるように、値の最後には上の５種類の「総称ファミリー」 の中から適当な書体を指定しておきます。

body { font-family: Arial, "ＭＳ Ｐゴシック", sans-serif }

例えば、上記の指定の場合、英数字の欧文フォント対象部分には、Windows/ Macintoshの両プラットフォームともに、「Arial」 が適用されます。 和文フォント対象部分は Windows では、「ＭＳ　Ｐゴシック」が適用され、Macintosh では総称ファミリーの、「sans-serif」系統のフォントの中から ユーザー環境のフォントが自動的に選択されて表示されます。

ここで、「ＭＳ　Ｐゴシック」のように文字間にスペースが入る場合は、「"」か、「'」で囲んで記述します。因みに、代表的ポータルサイトを見てみると 下記のようでした。

body{font-family:"MS PGothic", Osaka, Arial, sans-serif}

body{font-family:"MS PGothic", Verdana, Arial,"ヒラギノ角ゴ Pro W3", 
"Hiragino Kaku Gothic Pro", Osaka, sans-serif}

Windows Vista 以降からゴシック系に「Meiryo」フォントが追加されました。高密度画面にも見やすくしたもので最近はよく使われています。字幅や高さが少し異なります。好みもありますので優先したいほうを先に指定します。

Top ↑

テキスト関連

text-align: *

ブロックレベル要素の中で行揃えを設定します。left（左寄せ）、right（右寄せ）、center（中央揃え）、justify（均等割付）があります。何も指定しないと初期値の left（左寄せ）になります。

text-decoration: *

文字にoverline（上線）、underline（下線）、line-through（取消線）、blink（点滅、NN のみ）といった装飾を設定します。半角スペースで区切れば複数の値を同時に指定できます。 ブロックレベル要素に設定すれば、その要素内のすべてのインライン要素に適用、インライン要素に設定すればその要素に設定されます。

line-height: *

行間の高さを設定します。その要素の高さに対し数値、％、em　で指定します。負の値は指定できません。

letter-spacing: *

文字間隔を設定します。数値に単位をつけて指定。負の値も指定できます。

text-indent: *

文章の１行目の字下げ（インデント）を設定します。数値に単位 em をつけて指定。％は親ボックスの幅に対する割合で指定。負の値も指定できます。

Top ↑

リスト関連

ul 要素や ol 要素の内容である li 要素に適用されます。

list-style-type: *・・・リストマークの種類を指定

リストマークの種類として、よく使われる値（キーワード）は次のとおりです。

list-style-position: *・・・リストマークの位置を指定

リストマークを文章よりも左側の位置に表示する初期値の外側（outside）と、リストマークを文章と同じインデント位置に表示する内側（inside）があります。

<ul style="list-style-position:
           outside;">
<li>外側は初期値なので省略できる</li>
<li>外側のリストマークは文章の左に表示</li>
<li>内側はリストマークと同じ位置に改行</li>
</ul>

<ul style="list-style-position:
           inside;">
<li>外側は初期値なので省略できる</li>
<li>外側のリストマークは文章の左に表示</li>
<li>内側はリストマークと同じ位置に改行</li>
</ul>

list-style-image: *・・・リストマークに画像を指定

リスト項目のマークとして、マークの代わりに表示させる画像を URI で指定します。ul 要素や ol 要素の内容である li 要素に適用されます。

.sample li {
  list-style-image:
      url('./img/g04.gif');
  list-style-position: outside;
  vertical-align: middle;
  margin-left: 2em;
  padding-left: 10px;
}

list-style-type プロパティが同時に指定された場合は、list-style-image プロパティが優先され、指定された画像が見つからなかった場合に list-style-type プロパティが適用されます。指定しなくても list-style-type プロパティ初期値のdisc（・）マークが表示されます。

※list-style-image プロパティは、リストマーク画像の配置位置がブラウザにより異なるのと、vertical-align プロパティが適切に動作 しないので細かい調整が難しいです。それで、細かい位置調整ができる background-image プロパティを、li 要素に適用できます。 また、ブラウザによる、ばらつきもほとんどありません。この場合、list-style-type: none; 指定が必要です。下記はその例です。

.sample li {
  list-style-type: none;
  background-image: 
       url('./img/g04.gif'); 
  background-repeat: no-repeat;
  background-position: left;
  margin-left: 2em;
  padding: 5px 1.6em;
}

Top ↑

イメージ関連

画像の配置には、position、floatプロパティも使われます。 また、背景画像としては、background- * : * プロパティもあり、比較的に幅広く自由度のある使い方ができます。

background-image: *・・・背景画像を URI で指定

その要素の背景画像をURIで設定します。指定された画像が表示できない場合もあるので背景色も同時に指定しましょう。

.img-bk {
  background-image: url('./img/back2.gif');
  background-color: #ffffcc;
}

background-position: *・・・背景画像の表示開始位置を指定

背景画像の表示位置を設定します。background-repeat: *　と同時に使われます。
基点は適用する要素が形成するボックスのパディング左上です。 水平方向と垂直方向の位置を、半角スペースで区切って指定します。

値は「実数値」、「％」または、「top、right、left、bottom、center」などのキーワードで指定します。 また、top right（右上）、top left（左上）、bottom right（右下）、bottom left（左下）でも指定できます。 実数値や％と、キーワードを組み合わせて指定することはできません。下図はボックスのパディング左上から水平方向90%、垂直方向80%の位置に画像を配置した例です。

.img-1 {
  background-image: url('./img/beas2.gif');
  background-repeat: no-repeat;
  background-position: 90% 80%;
}

background-repeat: *・・・背景画像の繰り返し表示のしかたを指定

背景画像が壁紙のような場合、一つの小さな画像を繰り返し表示することで画面一杯に高速表示させることができます。

• background-repeat: repeat-x;  横方向に繰り返す
• background-repeat: repeat-y;  縦方向に繰り返す
• background-repeat: repeat;  　タイル状に縦横に敷き詰める
• background-repeat: no-repeat;  １つだけ表示

.img-2 {
  background-image: url('./img/beads2.gif');
  background-position: top;
  background-repeat: repeat-x;
}

background-attachment: *・・・背景画像の固定、移動を指定

背景画像を固定するか、スクロールして他の文章とともに移動させるかを指定します。

• background-attachment: fixed;   背景画像を固定します。
• background-attachment: scroll; 背景画像もスクロールで移動します。

このプロパティを指定しなければ、背景画像も文章とともにスクロールで移動します。固定したいときに fixed を使用します。

vertical-align: *・・・縦方向の揃え位置を指定

vertical-align: は、テキストや画像の縦方向の位置を設定します。画像の場合、テキスト中に画像を置くときなど、 <img>タグの属性として指定する使い方をします。改行すると画像の下に回りこみます。

<p><img alt="ぶどう" src="./img/budou-1.gif" width="65"
height="50" style="vertical-align:top;">vertical-align:top</p>

※ Internet Explorer、Opera では、bottom が適切に動作しません。正しくは text-bottom とほぼ同じ表示になります。（IE8で解消されました）

Top ↑

ボックス関連

ボックス関連プロパティは、英語力だけでは少し理解しにくいプロパティです。

margin、padding

ボックスのマージン、パディングは、上下左右の寸法を、top（上）、right（右）、bottom（下）、left（左）を個別に指定する方法として、 margin-top、margin-right、margin-bottom、margin-left があります。これを一括して指定する下記のような方法がよく 使われます。

margin: 上　右　下　左 のように１行の表現でできます。時計周りと覚えます。サンプルを下に示します。 padding も同じです。

margin: 5px;  -------上下左右 5px 
margin: 5px 10px; ---上下5px 左右10px
margin: 5px 10px 3px;--上 5px 左右10px 下3px
margin: 5px 10px 3px 15px;上 5px 右10px 下3px 左15px

div { padding: 5px; background-color: #3366ff; color: #ffffff; }
div.sample1 { margin: 0px; }
div.sample2 { margin: 1em 8em; }
div.sample3 { margin: 5% 50% 0% 10%;}

<div class="sample1">margin:0px;</div>
<div class="sample2">margin:1em 8em;</div>
<div class="sample3">margin:5% 50% 0% 10%;</div>

border: *

上下左右のボーダーに対し、スタイル、幅、色を一括して設定します。順番は任意で半角スペースで区切って指定します。 ブラウザによって少し違って見えます。

Top ↑

CSSで飾ってみる

「HTMLの基礎」でマークアップしたサンプルを、CSSで飾ってみます。

爽やかタイプ例

マークアップした HTMLソースを装飾するため、コンテンツ全体と冒頭の紹介文を div 要素で囲んで1つのブロックにします。コンテンツ全体はクラス名 contents に、冒頭の紹介文をクラス名 intro にしています。最後の入手先文は、クラス名 getto にして右フロート配置にしています。

body {
  width: 100%;
  background-image: url('./image/tree_w_4.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;   /*背景を固定*/
  background-position: bottom left;
  background-color: #ffffff;
  color: #333333;     /*フォント色、書体を指定*/
  font-family: Verdana, 'ＭＳ Ｐゴシック', sans-serif;
}
.contents {    /* コンテンツ全体をブロック化 */
  background-image: url('./image/momiji-uye.gif');
  background-repeat:
    no-repeat;         /*背景画像を左上に配置*/
  background-position: top left;
  width: 70%;
  margin: 0 auto;   /* 幅 70%でセンタリング */
  font-size: 96%;
  text-indent: 1em;
  line-height: 1.3;
}
h1 {
  font-size: x-large;
  font-weight: bold;
  color: #CC0000;
  padding-top: 1em ;
  text-align: center;
}
h2 {
  margin-top: 2em;   /* h2 の文頭にマーク画像*/ 
  background-image: url('./image/momi2.gif'); 
  background-position: left;
  background-repeat: no-repeat;
  font-size: large;
  font-weight: bold;
  color: #336600;
  padding-left: 7px;
}
.intro {           /* 紹介部分をブロック化  */
  border: 2px dotted #CC0000;  /* 点線の枠線 */
  background-image: url('./image/ityo-1.gif');
  background-position: 90% 70%;   /*背景画像 */
  background-repeat: no-repeat;
  padding: 0 1em;
}
a:link {           /* 未訪問リンクスタイル */
  color: #336600;
  text-decoration: none;
}
a:visited {       /* 既訪問リンクスタイル */
  color: magenta;
  text-decoration: none;
}
a:hover {/*カーソルが重なっている時のスタイル*/
  color: red;
  background-color: orange;
  text-decoration: none;
}
ul { /* 機能説明リストブロックに背景画像の設定 */
  background-image: url('./image/momiji-ye.gif');
  background-repeat: no-repeat; 
  background-position: right bottom;
  line-height: 1.7;
  color: #660000;
}
li {          /* リスト部分にリストマーク画像 */
  list-style-image: url('./image/momi2.gif');
  list-style-position: outside;
  padding-left: 3px;
  text-indent: 0;
}
.getto { /* 入手先部分を枠線で囲み右フロート */
  width: 70%;
  float: right; 
  padding: 1em;
  border: 2px dotted #990000;
}

爽やかタイプ例

大人の雰囲気タイプ例

前記例と同じようにコンテンツ全体を div 要素で囲んでクラス名 contents にしています。このCSS は右クリック、「表示」→「ソース」で <style> 部分を参照してください。前記例よりシンプルです。

大人の雰囲気タイプ例

Next >>CSSでレイアウト >>Top↑