ホームページ

コピーして作る、ホームページ

web拍手

スタイルシート 基本形の改造


実際のCSSファイル
 下記のこのの部分を、書き換えます。
 表示するHTMLの基本形は、「HTMLファイルと、スタイルシート 基本形」にあります。
/*** ******************************************************** ***/
/*** body(全体) */
body {

/*** 内容の左右の位置 ***/
text-align:left; /* 左寄せ:left , 中央:center , 右寄せ:right */

/*** 行間 ***/
line-height:170%; /* 数値+単位 */

/*** 背景の色 ***/
background-color:#ffe0e0; /* 色名ないし、色コード */

/*** 文字の色 ***/
color:MAROON; /* 色名ないし、色コード */

/*** 文字の字体 ***/
font-family:hg創英角ポップ体; /* フォント名 */
/* ms pゴシック */
/* ms 明朝 */
/* hg創英角ポップ体 など */

} /*** body(全体)の定義 おわり ***/

内容の左右の位置を変える


left
左寄せ

center
中央

right
右寄せ
 下記のこのの部分を、書き換えます。
 leftなら、左寄せ。
 centerなら、中央。
 rightなら、右寄せです。
 表示するHTMLの基本形は、「HTMLファイルと、スタイルシート 基本形」にあります。
/*** ******************************************************** ***/
/*** body(全体) */
body {

/*** 内容の左右の位置 ***/
text-align:left; /* 左寄せ:left , 中央:center , 右寄せ:right */

/*** 行間 ***/
line-height:170%; /* 数値+単位 */

/*** 背景の色 ***/
background-color:#ffe0e0; /* 色名ないし、色コード */

/*** 文字の色 ***/
color:MAROON; /* 色名ないし、色コード */

/*** 文字の字体 ***/
font-family:hg創英角ポップ体; /* フォント名 */
/* ms pゴシック */
/* ms 明朝 */
/* hg創英角ポップ体 など */

} /*** body(全体)の定義 おわり ***/

背景の色を変える


WHITE
#ffffff

AQUA
#00ffff
水色

YELLOW
#ffff00
黄色
 下記のこのの部分を、書き換えます。
 色名と色コードの一覧表から、好きな色を選んでみましょう。
 表示するHTMLの基本形は、「HTMLファイルと、スタイルシート 基本形」にあります。
/*** ******************************************************** ***/
/*** body(全体) */
body {

/*** 内容の左右の位置 ***/
text-align:left; /* 左寄せ:left , 中央:center , 右寄せ:right */

/*** 行間 ***/
line-height:170%; /* 数値+単位 */

/*** 背景の色 ***/
background-color:#ffe0e0; /* 色名ないし、色コード */

/*** 文字の色 ***/
color:MAROON; /* 色名ないし、色コード */

/*** 文字の字体 ***/
font-family:hg創英角ポップ体; /* フォント名 */
/* ms pゴシック */
/* ms 明朝 */
/* hg創英角ポップ体 など */

} /*** body(全体)の定義 おわり ***/

文字の色を変える


BLACK
#000000

GREEN
#008800

RED
#ff0000
 下記のこのの部分を、書き換えます。
 色名と色コードの一覧表から、好きな色を選んでみましょう。
 表示するHTMLの基本形は、「HTMLファイルと、スタイルシート 基本形」にあります。
/*** ******************************************************** ***/
/*** body(全体) */
body {

/*** 内容の左右の位置 ***/
text-align:left; /* 左寄せ:left , 中央:center , 右寄せ:right */

/*** 行間 ***/
line-height:170%; /* 数値+単位 */

/*** 背景の色 ***/
background-color:#ffe0e0; /* 色名ないし、色コード */

/*** 文字の色 ***/
color:MAROON; /* 色名ないし、色コード */

/*** 文字の字体 ***/
font-family:hg創英角ポップ体; /* フォント名 */
/* ms pゴシック */
/* ms 明朝 */
/* hg創英角ポップ体 など */

} /*** body(全体)の定義 おわり ***/

文字のフォント(字体)を変える


ms pゴシック

ms 明朝

HG行書体
 下記のこのの部分を、書き換えます。
 主なフォントから、好きなフォントを選んでみましょう。
 表示するHTMLの基本形は、「HTMLファイルと、スタイルシート 基本形」にあります。
/*** ******************************************************** ***/
/*** body(全体) */
body {

/*** 内容の左右の位置 ***/
text-align:left; /* 左寄せ:left , 中央:center , 右寄せ:right */

/*** 行間 ***/
line-height:170%; /* 数値+単位 */

/*** 背景の色 ***/
background-color:#ffe0e0; /* 色名ないし、色コード */

/*** 文字の色 ***/
color:MAROON; /* 色名ないし、色コード */

/*** 文字の字体 ***/
font-family:hg創英角ポップ体; /* フォント名 */
/* ms pゴシック */
/* ms 明朝 */
/* hg創英角ポップ体 など */

} /*** body(全体)の定義 おわり ***/

文字の大きさを変える

文字の大きさを変えるには、この部分を、追加します。
/*** 文字の大きさ ***/
font-size:30pt; /* 数値+単位 */
パーセントで設定すると、その周囲の文字の大きさに対する大きさになります。
ですから、body には、パーセント以外の値で設定します。