サンプルページ
最新情報（リストタグを使ったシンプルなパターン）
-
2012年12月31日
サイトリニューアルしました！ -
2012年12月31日
サイトリニューアルしました！ -
2012年12月31日
サイトリニューアルしました！
最新情報（定義タグとアイコンを使ったパターン）
- 2012年12月31日
- ニュース
- テキストが1行の時に日付部分を2行にすると崩れます。
また、カテゴリの文字数は5文字程度しか表示されませんので、文字数が多くなる場合は、CSS内の「/*カテゴリの文字数が多い場合*/」以下の指定を有効にしてください。 - 2010年12月12日
- PR
- ここにテキストが入ります。
- 2012年12月31日
- 新商品
- ここにテキストが入ります。
- 2012年12月31日
- 新商品
- ここにテキストが入ります。
- 2012年12月31日
- 新商品
- ここにテキストが入ります。
- 2012年12月31日
- 新商品
- ここにテキストが入ります。
最新情報2（定義タグとアイコンを使ったパターン）
- 2012年12月31日
-
- 新商品
- キャンペーン
- ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。 - 2012年12月31日
-
- 新商品
- キャンペーン
- お得情報
- 期間限定
- キャンペーン
- お得情報
- ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。 - 2012年12月31日
-
- PR
- ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
最新情報（定義タグを使ったパターン）
- 2012年12月31日
- ここにテキストが入ります。ここにテキストが入ります。
- 2012年12月31日
- ここにテキストが入ります。ここにテキストが入ります。
- 2012年12月31日
- ここにテキストが入ります。ここにテキストが入ります。
- 2012年12月31日
- ここにテキストが入ります。ここにテキストが入ります。
- 2012年12月31日
- ここにテキストが入ります。ここにテキストが入ります。
H2用のテキストが入ります。
2002×2002
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
H3用のテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
H4用のテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
H5用のテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります
。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。
ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。
「divタグ（boxクラス）」を使って左右に並べた例
サイト制作が楽になるソフト一覧
-
フリーのテキストエディタ。
「F7」を押せばHTMLのエラーチェックができる他、タグを自動的に予測入力してくれる機能もある。 -
全ページのタイトル等を一括で変更したいときにオススメ。
-
作成したホームページファイルをサーバへアップ（転送）するFTPソフトです。
-
ドラッグ＆ドロップだけでファイルの文字コードを変換することができます。
ただし、HTMLソース内の文字コード表記も変更するようにしてください。 -
お使いのPCにインストールすることで、疑似サーバ環境を作成できます。PHPやMySQLなどのテストが可能になります。
「リストタグ（checklist）を使った例
- ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
- ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
- ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
「テーブルタグ」を使った例
| おすすめのサービス | 評価（5段階） | 詳細 |
|---|---|---|
 |
★★★★★ | ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。 |
|
★★★★☆ | ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。 |
|
★★☆☆☆ | ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。 |
「テーブルタグ」を使った例(2)
| 商品名：サンプルA1-001 | ★★★★★ | ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。 |
|---|---|---|
| 商品名：サンプルA2-001 | ★★★★☆ | ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。 |
| 商品名：サンプルA3-001 | ★★☆☆☆ | ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。 |
本テンプレートでは「advanced.css」の中に便利なCSSの設定をご用意しています。
1、文字色を変える
- 文字色を黒色に変更することができます。
- 文字色を赤色に変更することができます。
- 文字色を青色に変更することができます。
- 文字色を緑色に変更することができます。
- 文字色を黄色く変更することができます。
- 文字色を灰色に変更することができます。
- 文字色をオレンジに変更することができます。
- 文字色をピンクに変更することができます。
- 文字色を紫色に変更することができます。
- 文字色を黄土色に変更することができます。
- 文字色を黄緑に変更することができます。
- 文字色を水色に変更することができます。
2、文字の大きさを変える
- 文字を太字にすることができます。
- 文字を「120％」の大きさにすることができます。
- 文字を「150％」の大きさにすることができます。
- 文字を「180％」の大きさにすることができます。
- 文字を「80％」の大きさにすることができます。
3、下線や取消線を引く
- 文字に下線を引くことができます。
- 文字に取り消し線を引くことができます。
4、文字列を「蛍光ペンのようなボックス」で囲む
- 文字を黄色いボックスで囲むことができます。
- 文字を水色のボックスで囲むことができます。
- 文字を灰色のボックスで囲むことができます。
- 文字を赤色のボックスで囲むことができます。
5、文字列の前にアイコンを付ける。
先頭にCHECK！という画像が付いた状態で表示されます。
先頭にCHECK！という画像が付いた状態で表示されます。
先頭にPOINT！という画像が付いた状態で表示されます。
先頭にPOINT！という画像が付いた状態で表示されます。
先頭にCHECK！という画像が付いた状態で表示されます。
先頭にPOINT！という画像が付いた状態で表示されます。
先頭に注意！という画像が付いた状態で表示されます。
先頭に注意！という画像が付いた状態で表示されます。
先頭に初心者マークが付いた状態で表示されます。
先頭にメール画像が付いた状態で表示されます。
先頭にPDF画像が付いた状態で表示されます。
先頭にZIP画像が付いた状態で表示されます。
先頭にRSS画像が付いた状態で表示されます。
先頭にRSS画像が付いた状態で表示されます。
一行なら文章の終わりにも使えます。
一行なら文章の終わりにも使えます。
一行なら文章の終わりにも使えます。
一行なら文章の終わりにも使えます。
取り扱い商品一覧
- 商品名1
-
商品名1に関する説明文が入ります。商品名1に関する説明文が入ります。商品名1に関する説明文が入ります。商品名1に関する説明文が入ります。商品名1に関する説明文が入ります。
- 商品名2
-
商品名2に関する説明文が入ります。商品名2に関する説明文が入ります。商品名2に関する説明文が入ります。商品名2に関する説明文が入ります。商品名2に関する説明文が入ります。
- 商品名3
-
商品名3に関する説明文が入ります。商品名3に関する説明文が入ります。商品名3に関する説明文が入ります。商品名3に関する説明文が入ります。商品名3に関する説明文が入ります。
最近のコメント