p1 {
font-size: 数字px;
}
</style>
文章を以下のように書くと文字の大きさを変更できます。
<p1>文章</p1>
※「数字」には文字の大きさを表す数字を入力してください（例：10）
p1 {
color: 色;
}
</style>
文章を以下のように書くと文字の色を変更できます。
<p1>文章</p1>
※「色」には文字の大きさを表す数字を入力してください（例：10）
※色のスペル一覧
red
blue
green
yellow
pink
purple
brown
black
white
……等々
p1 {
font-weight: bold;
}
</style>
文章を以下のように書くと文字を太くできます。
<p1>文章</p1>
p1 {
font-style: italic;
}
</style>
文章を以下のように書くと文字を細くできます。
<p1>文章</p1>
p1 {
text-decoration: line-through
}
</style>
文章を以下のように書くと文字に取り消し線を引くことができます。
<p1>文章</p1>
p1 {
background: linear-gradient(transparent パーセント%, 色);
}
</style>
文章を以下のように書くとアンダーラインが引かれます。
<p1>文章</p1>
※「パーセント」にはアンダーラインの濃さを表すパーセントの数字を入力してください（例：10）
※「色」にはアンダーラインの色のスペルやコードを入力してください（例：yellow）
.ichi {
text-align:位置;
}
</style>
以下のように書くと文章や画像の位置が変わります。
<p class="ichi">文章や画像</p>
※「位置」にcenter, left, rightのいずれかを入力してください。
center : 中央
left : 左
right : 右
.waku {
border: 太さpx 形 色;
width: 横幅px;
height: 縦幅px;
}
</style>
以下のように書くと文章や画像が枠で囲まれます。
<div class="waku">文章や画像</div>
※「太さ」には枠の太さを表す数字を入力してください（例：1）
※「色」には枠の色のスペルやコードを入力してください（例：red）
※「横幅」には枠の横幅を表す数字を入力してください（例：250）
※「縦幅」には枠の縦幅を表す数字を入力してください（例：60）
※「形」には枠の形を表す文字を入力してください
例）solid
dotted
dashed
double
groove
ridge
inset
outset
body {
background: 色のスペルやコード;
}
</style>
.back {
background-color: 色のスペルやコード;
}
</style>
以下のように書くと文章や画像の背景の色が変わります。
<div class="back">文章や画像</div>
body {
background-image: url(画像のファイル名);
}
</style>
body {
background: linear-gradient(方向, 色①, 色②);
}
</style>
※「方向」にはグラデーションさせる向きのスペルを入力してください
to bottom：上から下
to top：下から上
to right：左から右
to left：右から左
※「色①」「色②」には表示したい色のスペルやコードを入力してください
a:link {
color: 色①;
background-color: 色②;
}
</style>
※「色①」にはリンクの文字の色のスペルやコードを入力してください
※「色②」にはリンクの背景の色のスペルやコードを入力してください
a:visited {
color: 色①;
background-color: 色②;
}
</style>
※「色①」にはリンクの文字の色のスペルやコードを入力してください
※「色②」にはリンクの背景の色のスペルやコードを入力してください
a:hover {
color: 色①;
background-color: 色②;
}
</style>
※「色①」にはリンクの文字の色のスペルやコードを入力してください
※「色②」にはリンクの背景の色のスペルやコードを入力してください
body {
cursor: カーソルの形;
}
</style>
※「カーソルの形」には表示させたい形に対応した単語を入力してください。
default：
pointer：
crosshair：
move：
text：
.btn1 {
padding: 10px 30px;
text-decoration: none;
width: ボタンの横幅px;
height: ボタンの縦幅px;
color: ボタンの文字の色;
background-color: ボタンの背景の色;
border-radius: ボタンの丸みpx;
}
</style>
リンクを以下のように書くとリンクがボタンに変わります。
<a href="リンク先のアドレス" class="btn1">コメント</a>
※「ボタンの横幅」には横幅の長さを表す数字を入力してください。（例：200）
※「ボタンの縦幅」には縦幅の長さを表す数字を入力してください（例：30）
※「ボタンの文字の色」には文字の色のスペルやコードを入力してください。（例：black）
※「ボタンの背景の色」には背景の色のスペルやコードを入力してください。（例：lightgreen）
※「ボタンの丸み」には丸みを表す数字を入力してください（例：0）
ボタンのデザインは以下のサイトから見つけることもできます。
cssbuttons.app
②「埋め込む」をクリックする。
③表示されたタグをコピーする。
④コピーしたタグをページの好きな場所に貼り付ける。