テストの見出し

【１】取消線
<p><del>取消線をつけたい文字</del></p>

25,000円 → 20,000円

【２】ルビをふる

<p><ruby>jimdoカフェ<rt>じんどぅかふぇ</rt></ruby>で勉強中</p>

jimdoカフェじんどぅかふぇで勉強中

【３】文字の色を赤にする
<p>今日は<span style="color: #ff0000;">天気</span>です</p>

今日は天気です。

【４】文字のサイズを24PXにする
<p>文字のサイズを<span style="font-size:24px;>大きく</span>する</p>

文字のサイズを大きくする

【5】文字のサイズをdivタグで24pxにする

※divタグを使うと勝手に改行されてしまいます
<p>文字のサイズを<div style="font-size:24px;>大きく</div>する</p>

文字のサイズを

する

【6】背景色をつける
<p><span style="background-color: pink;">美味しいトマト</span>をいただいた</p>

おいしいトマトをいただいた。

【7】マーカーでラインを引く
<p>ピンクのマーカーでは<span style="background: linear-gradient(transparent 30%,pink 30%);">こんな感じになります。</span></p>

ピンクのマーカーでラインを引くとこんな感じになります。

<p>黄色のマーカーで半分位の厚さは<span style="background: linear-gradient(transparent 60%,yellow 30%);">こんな感じになります。</span></p>

黄色のマーカーで半分位の厚さはこんな感じになります。

【8】枠をつくる
<div style="padding: 10px; margin-bottom: 10px; border: 5px double pink; border-radius: 10px;") 二重線の枠に入れる（角丸つき）</div>

<div style="padding: 10px; margin-bottom: 10px; border: 5px double green; border-radius: 25px; background-color: #cccccc;" div="">ここに文字を入れる</div>

【9】影付きの枠をつくる
<div style="padding: 10px; margin: 15px auto; color: #333333; background: #ffffff none repeat scroll 0% 0%; border: 1px solid #cccccc; box-shadow: 4px 4px 8px #dddddd;"> 影もつけてみましょう。 </div> 

<div style="padding: 20px; margin: 15px auto; color: #333333; background: #ffffff none repeat scroll 0% 0%; border: 1px solid #cccccc; box-shadow: 4px 4px 8px #dddddd; width: 50%;">枠幅50%で影もつけてみましょう。</div>  

【10】タイトル付きの枠をつくる
<fieldset style="border: 3px dotted pink; padding: 10px;"><legend style="background-color: violet; padding: 3px 10px; border-radius: 5px; color: #ffffff;">タイトル付き枠</legend>人気のタイトル付き。</fieldset>

<fieldset style="border: 3px dotted pink; padding: 10px;"><legend style="background-color: violet; padding: 3px 10px; border-radius: 5px; color: #000000;">タイトル付き枠</legend>人気のタイトル付き。</fieldset>

【12】class説明
■基本設定＞ヘッダ編集に設定する部分
.item1{
    padding:10px;
    border-left:20px solid pink;
    border-bottom:1px solid pink;
    width:50%;
}

■コンテンツを追加＞文章を追加して設定する部分
<div class="item1">こんな風になります。</div>

【13】背景をつける
■基本設定＞ヘッダ編集に設定する部分
.item1{
    padding:30px;
 background:url(https://u.jimcdn.com/e/o/s3d1071d29381552e/userlayout/img/3837659.jpg?t=1490583318) no-repeat left top;
}
■コンテンツを追加＞文章を追加して設定する部分
<div class="item1">こんな風になります。</div>

【14】オンマウスで画像透過
■基本設定＞ヘッダ編集に設定する部分
a:hover img {
        opacity: 0.5;
        filter: alpha(opacity=50);
        -ms-filter: "alpha( opacity=50 )";
}

【15】大見出しのデザイン設定
■基本設定＞ヘッダ編集に設定する部分
H1{
background:url(https://u.jimcdn.com/www59/o/s3d1071d29381552e/img/i743fa3ba1e53aed7/1393249004/std/image.jpg) no-repeat left center; 
color:white; 
padding:7px 10px 5px 50px;
font-size:140%;
margin-bottom:20px;
}