無料ホームページのサンプルcss最新版
当サイトの無料ホームページのスタイルシートサンプルはけっこう以前のものでしたので、最新版のcssを更新しておこうと思います。
現在この無料ホームページで使っているスタイルシートはグラデーション素材を利用しての作り方になっていますが、具体的なグラデーション素材の作り方についてはわたしのブログを参照してみてください。
ここでは簡単に最新のホームページスタイルシートの設定方法について書いておきます。現在のこのサイトとまったく同じサンプルなのですが、グラデーション素材は自分で作成して違う感じにしてみるといいかと思います。
【追記:】グラデーション無料HP素材も。
グラデーション素材を組み込んだcssの設定手順
最新版のサンプルスタイルシートですが、次のグラデーション素材を「右クリック - 画像を保存」で、あなたのパソコンにダウンロードし、さらにあなたの無料ホームページスペースにアップロードして使用してください。
![]()
![]()
実際のスタイルシートの設定方法は「初心者簡単な無料HPの作り方」の箇所とまったく同じです。こちらは、今現在の当ホームページのスタイルシートとほとんど同じものです。
このスタイルシートに、あなたの無料ホームページスペースにアップロードしたグラデーション素材の URL を指定して設定するのですが、設定する箇所は次の2箇所となります。

【例:】アップロードした素材が、あなたのホームページスペースの http://example.com/image/kin.bmp の場所にあるとすると、こんな感じで指定してください。
background-image: url("http://example.com/image/kin.bmp");
当サイトのグラデーション素材は若干色がまだらになっている部分がありますので、ブログを参考にご自分で作成してみるとけっこう楽しいと思います。
ちなみに、素材を作成するのが面倒くさかったり、商用サイトなどでクオリティーが必要な際は、素材サイトで購入するのがおすすめです。
膨大な数があるので、素材などで検索して絞り込んで探すといいかと思います。リピート素材は、派手な素材だとコンテンツのじゃまになってしまうので、素朴でシンプルな方が使いやすいです。