【便利サイト】
カラーネーム  タイトルデザイン  図デザイン  文字デザイン 

フリーイラストサイト
 いらすとや イラストレイン ガーリー素材(かわいいイラスト)
 Print Out Factory(総合)  みさきのイラスト素材

フリー写真サイト
 ぱくたそ Pixabay GIRLY DROP(美容) Foodiesfeed(食物)
      <検索> タダピク   O-DAN

フリー音楽サイト
 甘茶の音楽工房 H/MIX GALLERY DOVA-SYNDROME

フリー映像サイト
 NHKクリエイティブ     Pexels

HTML&CSS マニュアルサンプル
 HTMLクイックリファレンス TAG index   


カラーネーム    ピンク  オレンジ               

便利色
pink tomato orange plum tan

赤系 Top↑
indianred lightcoral salmon darksalmon lightsalmon
crimson red firebrick darkred

ピンク系 Top↑
pink lightpink hotpink deeppink mediumvioletred
palevioletred

オレンジ系 Top↑
lightsalmon coral tomato orangered darkorange
orange

黄系 Top↑
gold yellow lightyellow lemonchiffon lightgoldenrodyellow
papayawhip moccasin peachpuff palegoldenrod khaki
darkkhaki

緑系 Top↑
greenyellow chartreuse lawngreen lime limegreen
palegreen lightgreen mediumspringgreen springgreen mediumseagreen
seagreen forestgreen green darkgreen yellowgreen
olivedrab olive darkolivegreen mediumaquamarine darkseagreen
lightseagreen darkcyan teal

青系 Top↑
aqua cyan lightcyan paleturquoise aquamarine
turquoise mediumturquoise darkturquoise cadetblue steelblue
lightsteelblue powderblue lightblue skyblue lightskyblue
deepskyblue dodgerblue cornflowerblue mediumslateblue royalblue
blue mediumblue darkblue navy midnightblue

紫系 Top↑
lavender thistle plum violet
orchid fuchsia magenta mediumorchid mediumpurple
rebeccapurple blueviolet darkviolet darkorchid darkmagenta
purple indigo slateblue darkslateblue mediumslateblue

茶系 Top↑
cornsilk blanchedalmond bisque navajowhite wheat
burlywood tan rosybrown sandybrown goldenrod
darkgoldenrod peru chocolate saddlebrown sienna
brown maroon

白系 Top↑
white snow honeydew mintcream azure
aliceblue ghostwhite whitesmoke seashell beige
oldlace floralwhite ivory antiquewhite linen
lavenderblush mistyrose

黒系 Top↑
gainsboro lightgray silver darkgray gray
dimgray lightslategray slategray darkslategray black


タイトルデザイン Top↑
【変更方法】 <div class = "T0*" >で Tpx0* の部分を変更する。

 【class = "T01" のサンプル】
 
これはサンプル T01 です 

 【class = "T02" のサンプル】
 
サンプルT02です

 【class = "T03" のサンプル】
 
これはサンプル T03 です 


 【class = "T04" のサンプル】
 
これはサンプル T04 です 


図デザイン Top↑

【変更方法】 <img src="ファイル名" class = "S**" >で S*** の部分を変更する。
【class = "S11" の画像】
  
【class = "S12" の画像】
  
【class = "S13" の画像】
  
【class = "S14" の画像】
  
【class = "S01" の画像】
  
【class = "S02" の画像】
  
【class = "S05" の画像】
  
【class = "S04" の画像】 二つの画像のスライド
【class = "S03" の画像】 横にスクロール  
記述例 <img src="chick.png" class = "S01" width=100 height =100>

文字デザイン Top↑

  
【囲み文字】
<span class="F11">**</span>

 F11サンプル
【影文字】
<span class="F12">**</span>

 F12サンプル
【縁取り】
<span class="F13">**</span>

 F13サンプル
【浮き上がった文字】
<span class="F14">**</span>

 F14サンプル
【下線】
<span class="F15">**</span>

 F15サンプル
【マーカ】
<span class="F16">**</span>

 F16サンプル
【反転文字】
<span class="F17">**</span>

 F17サンプル
【点滅】
<span class="F21">**</span>

 F21サンプル
【横軸回転】
<span class="F22">**</span>

 F22サンプル
【縦軸回転】
<span class="F23">**</span>

 F23サンプル
【3D回転】
<span class="F24">**</span>

 F24サンプル
【横移動】
<span class="F25">**</span>

 F25サンプル
【マーカ】
<span class="F26">**<span></span></span>

 F26サンプル
【踊り】
<span class="F28"><span>*</span><span>*</span></span>

 
                     ** は表示する文字