ホームページ

コピーして作る、HTML+CSS

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


実際のＣＳＳファイル
　下記のこのの部分を、書き換えます。
　表示するＨＴＭＬの基本形は、「ＨＴＭＬファイルと、スタイルシート　基本形」にあります。
/*** ******************************************************** ***/
/*** ｂｏｄｙ（全体） */
body {

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

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

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

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

/*** 文字の字体 ***/
font-family:hg創英角ﾎﾟｯﾌﾟ体; /* フォント名 */
/* ｍｓ ｐゴシック */
/* ｍｓ 明朝 */
/* hg創英角ﾎﾟｯﾌﾟ体 など */

} /*** ｂｏｄｙ（全体）の定義 おわり ***/

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


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

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

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

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

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

/*** 文字の字体 ***/
font-family:hg創英角ﾎﾟｯﾌﾟ体; /* フォント名 */
/* ｍｓ ｐゴシック */
/* ｍｓ 明朝 */
/* hg創英角ﾎﾟｯﾌﾟ体 など */

} /*** ｂｏｄｙ（全体）の定義 おわり ***/

背景の色を変える


WHITE
#ffffff
白
AQUA
#00ffff
水色
YELLOW
#ffff00
黄色
　下記のこのの部分を、書き換えます。
　色名と色コードの一覧表から、好きな色を選んでみましょう。
　表示するＨＴＭＬの基本形は、「ＨＴＭＬファイルと、スタイルシート　基本形」にあります。
/*** ******************************************************** ***/
/*** ｂｏｄｙ（全体） */
body {

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

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

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

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

/*** 文字の字体 ***/
font-family:hg創英角ﾎﾟｯﾌﾟ体; /* フォント名 */
/* ｍｓ ｐゴシック */
/* ｍｓ 明朝 */
/* hg創英角ﾎﾟｯﾌﾟ体 など */

} /*** ｂｏｄｙ（全体）の定義 おわり ***/

文字の色を変える


BLACK
#000000
黒
GREEN
#008800
緑
RED
#ff0000
赤
　下記のこのの部分を、書き換えます。
　色名と色コードの一覧表から、好きな色を選んでみましょう。
　表示するＨＴＭＬの基本形は、「ＨＴＭＬファイルと、スタイルシート　基本形」にあります。
/*** ******************************************************** ***/
/*** ｂｏｄｙ（全体） */
body {

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

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

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

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

/*** 文字の字体 ***/
font-family:hg創英角ﾎﾟｯﾌﾟ体; /* フォント名 */
/* ｍｓ ｐゴシック */
/* ｍｓ 明朝 */
/* hg創英角ﾎﾟｯﾌﾟ体 など */

} /*** ｂｏｄｙ（全体）の定義 おわり ***/

文字のフォント（字体）を変える


ｍｓ ｐゴシック
ｍｓ 明朝
HG行書体
　下記のこのの部分を、書き換えます。
　主なフォントから、好きなフォントを選んでみましょう。
　表示するＨＴＭＬの基本形は、「ＨＴＭＬファイルと、スタイルシート　基本形」にあります。
/*** ******************************************************** ***/
/*** ｂｏｄｙ（全体） */
body {

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

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

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

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

/*** 文字の字体 ***/
font-family:hg創英角ﾎﾟｯﾌﾟ体; /* フォント名 */
/* ｍｓ ｐゴシック */
/* ｍｓ 明朝 */
/* hg創英角ﾎﾟｯﾌﾟ体 など */

} /*** ｂｏｄｙ（全体）の定義 おわり ***/

文字の大きさを変える

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