ホームページ作成支援ベーシックな素材

ホームページ制作やブログのカスタマイズに使える、グラフィック素材を掲載しています。ごくオーソドックスな、ベーシックなものを中心に取り上げていきますので、活用していただけるとうれしいです。壁紙、ボタン(cssで利用できるように文字の入っていないボタンベースが中心です)、hタグと組み合わせて使えるタイトルバック、マーカー・リストマーク・アイコンといろいろに呼ばれていますが小型の行頭用のマーク類がございます。それぞれカテゴリーに分けておりますので、右のサイドメニューから探してみてください。

ホームページ作成支援ベーシックな素材≫メニュー項目一覧

ご利用に当たって

■ ご利用に当たってのお願い

壁紙

■ 無料素材≫壁紙:リングノート(ルーズリーフ) ■ 無料素材≫壁紙:ノート罫24ライトカラー ■ 無料素材≫壁紙:ノート罫20ライトカラー ■ 無料素材≫壁紙:ノート罫16ライトカラー ■ 無料素材≫壁紙:ノート罫24 ■ 無料素材≫壁紙:ノート罫20 ■ 無料素材≫壁紙:ノート罫16 ■ 無料素材≫壁紙:市松模様ライトカラー24 ■ 無料素材≫壁紙:市松ライトカラー20 ■ 無料素材≫壁紙:市松ライトカラー16 ■ 無料素材≫壁紙:ギンガムチェック・ライト色16px ■ 無料素材≫壁紙:ギンガムチェック・ライト色20px ■ 無料素材≫壁紙:ギンガムチェック・ライト色24px ■ 無料素材≫壁紙:ギンガムチェック20 ■ 無料素材≫壁紙:ギンガムチェック16 ■ 無料素材≫壁紙:ギンガムチェック ■ 無料壁紙:水玉 ■ 無料壁紙:ストライプ ■ 無料壁紙:セクションペーパー(方眼紙)

リストマーク

■ 無料素材≫リストマーク:メタリックボール10px~20px ■ 無料素材≫リストマーク:○矢印ボタン6 12px ■ 無料素材≫リストマーク:○矢印ボタン5 14px ■ 無料素材≫リストマーク:○矢印ボタン4 16px ■ 無料素材≫リストマーク:○矢印ボタン3 18px ■ 無料素材≫リストマーク:○矢印ボタン2 20px ■ 無料素材≫リストマーク:○矢印ボタン1 20px ■ 無料素材≫リストマーク:矢印ボタン2 18・20px ■ 無料素材≫リストマーク:矢印ボタン2 12・14・16px ■ 無料素材≫リストマーク:矢印ボタン1 16・18・20px ■ 無料素材≫リストマーク:矢印ボタン1 12px・14px ■ 無料素材≫マーク:★その2 ■ 無料素材≫マーク:★その1 ■ 無料マーク:はっぱコレクション ■ 無料マーク:ボール & スクエア

ボタン

■ 無料素材≫ボタン:スリムボタン・ライトカラー20×140px ■ 無料素材≫ボタン:スリム・ライトカラー20×160 ■ 無料素材≫ボタン:スリム・ライトカラー16 ■ 無料素材≫ボタン:タイプ10 吊り下げメタルプレート ■ 無料素材≫ボタン:タイプ9 メタリック風 ■ 無料素材≫ボタン:タイプ8 ■ 無料素材》ボタン:タイプ7 ■ 無料ボタン:タイプ6 ■ 無料ボタン:タイプ5 ■ 無料ボタン:タイプ1-4 ■ 無料ボタン:タイプ1-3 ■ 無料ボタン:タイプ1-2 ■ 無料ボタン:タイプ1

タイトルバック

■ 無料素材≫タイトルバック:カラーグラデーションバー ■ 無料素材≫タイトルバック:炎 ■ 無料素材≫タイトルバック:グラデーションバー砂目 ■ 無料素材≫タイトルバック:グラデーションバー1

Contact me

■ ご意見・お問い合わせは

最新記事 20件


無料素材≫リストマーク:メタリックボール10px~20px

無料マーク:メタリックボール

メタリックな感じのボールマークに挑んでみました。普通にグラデーションだけではおもしろくないので、反射を少し入れてあります。サイズは10px角、12px角、14px角、16px角そして20px角の5種類です。色はシルバー(銀)、ゴールド(金)、ブロンズ(銅)の3種類です。

透過処理をしていますので少しギザついて見えますが背景色に関わらずご利用いただけます。



無料素材≫壁紙:リングノート(ルーズリーフ)

無料壁紙:リングノート サンプル

ノート罫に続いて、リングノートの画像をお届けします。柄部分のサイズはW50ピクセルです。高さは上部に透明部分を含んでWリングタイプが24ピクセル、シングルリングタイプが28ピクセルになっています。ご提供は3柄2色(シルバーとゴールド)ですが、位置指定が厄介ですので、それぞれに左に160ピクセルの透明部分をつけて、合計210ピクセルにした画像を用意しています。これによって左に寄せてリピートは縦方向だけにすると、ひだりに160ピクセルのサイドバースペースを確保することができます。
リングの通る穴、用紙の隙間、リング以外の部分は透過処理をしています。背景色を指定することによって、お好きな色のノートを作ることができます。



無料素材≫壁紙:ノート罫24ライトカラー

無料壁紙:ノート罫24サンプル

無料壁紙:ノート罫24ピクセルのライトカラーバージョンです。23ピクセルの透明の下に1ピクセルのカラー罫が入っています。背景色と組み合わせてツートーンの背景を作ることができます。

全16色をひとつのファイルに圧縮しています。(lzhファイル)ダウンロードの上解凍してご利用ください。



無料素材≫壁紙:ノート罫20ライトカラー

無料壁紙:ノート罫ライトカラー20サンプル

無料壁紙:ノート罫ライトカラーバージョン、20ピクセルタイプです。サンプルはまた同系色の2トーンにしてみましたが、データは19ピクセルの透明の下に1ピクセルのラインです。サンプルのように背景色と組み合わせてのご利用がお勧めです。

全16色をひとつの圧縮ファイルにまとめています。お手数ですがダウンロードの上解凍してご利用ください。



無料素材≫壁紙:ノート罫16ライトカラー

無料壁紙:ノート罫16サンプル

無料壁紙:ノート罫のライトカラー(パステルカラー)バージョンです。左のサンプルはバックに色をつけていますが、データは基本色タイプと同じ15ピクセルの透明の下に1ピクセルのカラー罫です。お好きな背景色と組み合わせて、ツートーンの背景を作ることができます。

全16色を圧縮してひとつにまとめています。下のサンプル画像、またはテキストリンクをクリックして、ダウンロードの上解凍してご利用ください。



無料素材≫壁紙:ノート罫24

無料壁紙:ノート罫24ピクセル サンプル

無料壁紙、今回のノート罫は透明23ピクセルの下に1ピクセルのカラーラインを置いた24ピクセルバージョンです。ライン以外は透過処理されていますから、背景色と組み合わせてツートーンの背景を作ることができます。下のサンプルでは、白とライトグレーの部分に背景色を乗せていますが、データでは同じ透明となっています。

全20色をまとめて圧縮しています。ダウンロードの上解凍してご利用ください。



無料素材≫壁紙:ノート罫20

無料壁紙:ノート罫20サンプル

無料壁紙、今回はノート罫の20ピクセルです。少し太めのノート罫。太目といっても罫線の間のことで、罫線そのものは同じ1ピクセル巾。19ピクセルの透明の下に色の1ピクセルが入っています。罫線の間は透過処理ですので、背景色との組み合わせでツートーンのバックができます。

20色のデータをひとつのファイルにまとめて圧縮しています。(lzh)下のカラーサンプル画像、またはテキストリンクをクリックしてファイルを保存の上、解凍してご利用ください。



無料素材≫壁紙:ノート罫16

無料壁紙:ノート罫16サンプル

無料壁紙、今回はノート罫です。ストライプといってもいいのかもしれませんが、ノート罫というのが一番わかりやすいと思います。高さ12ピクセルの画像のうち一番下の1ピクセルだけに色がついています。上部は透過処理です。背景色に関わらずご利用いただけます。 下のサンプル画像、ライトグレーと白にだけ背景色をつけていますが、データは他と同じ11ピクセルの透明の下に1ピクセルの色が入っています。

全20色をひとつの圧縮ファイルにまとめています。下のサンプル画像、またはテキストリンクをクリックして保存の上、解凍してご利用ください。



無料素材≫タイトルバック:カラーグラデーションバー

カラーグラデーションバー

たくさんダウンロードいただきましたグラデーションバーのカラー版を作りました。他のものとは違い、見た目だけで色を決めましたのでここに掲載されている他のデータ類とは、カラーマッチしていないデータが含まれています。

左の列は白文字を乗せることを考慮して、最高明度を押さえてあります。中央列はベースカラーが同じで白までのグラデーションになっています。右の列はベースカラーの明度だけを上げております。タイトルバックだけでなく、ロールオーバーボタンのベースとしてもお使いいただけるようにしたつもりです。カラーバーの高さは30ピクセルとなっています。

10色3パターンを圧縮ファイルにまとめておりますので、ダウンロードの上解凍してご利用ください。



無料素材≫壁紙:市松模様ライトカラー24

無料壁紙:市松模様ライトカラー24

市松模様・チェッカーボード柄24ピクセルサイズです。小さい正方形が12ピクセル角、データのサイズが24ピクセル角です。白い部分は透過処理されていますので、背景色と組み合わせてツートーンの背景を作ることができます。20ピクセルの紹介ページにサンプルを掲載していますのでご覧ください。

16色のgifファイルを圧縮しています。ダウンロードの上解凍してご利用ください。



無料素材≫壁紙:市松ライトカラー20

無料壁紙:市松模様20ピクセル

市松模様、チェッカーボード柄20ピクセル版です。小さい四角が10×10ピクセル、データの大きさとしては20×20ピクセルとなっています。白く見える部分は透過処理をしていますので、背景色と組み合わせることによりツートーンの背景を作ることができます。
≪例≫

無料壁紙:市松模様20ピクセルと背景色を組み合わせ
無料壁紙:市松模様20ピクセルと背景色を組み合わせ

同じサイズのデータ16色を圧縮ファイルでまとめています。(lzh)ダウンロードの上解凍してご利用ください。解凍ソフトをお持ちで無い方は「ご利用に当たって」のページでご紹介しておりますのでご参照ください。



無料素材≫壁紙:市松ライトカラー16

無料壁紙:市松ライトカラー16

市松模様、チェッカーボードの壁紙です。このページでは小さい正方形が8ピクセル角、データの大きさとしては16ピクセル角の16色を掲載しています。何気なく白バックで作っていたのですが、ファイルを保存してから思い当たり、白い部分は透過処理にしました。2色のチェッカーボード模様はかなり使いにくいと思いますのでお勧めはできませんが、背景色の上に背景画像を指定することでまったく違った印象の背景を作ることができます。

16色のファイルを圧縮ファイルのまとめておりますので、ダウンロードの上解凍してご利用ください。



無料素材≫ボタン:スリムボタン・ライトカラー20×140px

slim_light20_or.gif

スリムボタン・ライトカラーのサイズ違いです。高さは20ピクセル、巾は140ピクセルになっています。ロールオーバーで色を変える、1~2ピクセル下、または右下に動かすなど、工夫してご利用ください。

全色をひとつの圧縮ファイルにまとめていますので、下のサンプル画像またはテキストリンクをクリックして、ファイルをダウンロードの上解凍してご利用ください。



無料素材≫ボタン:スリム・ライトカラー20×160

スリムボタン・ライトカラー

スリムタイプのライトカラー(パステルカラー)ボタン、サイズ違いでH20×W160ピクセルとなっています。 ロールオーバーで色を変化させる、少し動かすなど、お好みに合わせてご利用ください。Wを少し広くしましたので、文字数の多いメニューにも対応できます。外周はアンチエイリアスなし、透過処理をしていますので背景色を選びません。

20色のデータをひとつのファイルに圧縮しています。下のサンプルまたはテキストリンクをクリックして保存、解凍してお使いください。



無料素材≫壁紙:ギンガムチェック・ライト色16px

無料壁紙:ギンガムチェック・ライト色16

ライトカラー(パステルカラー)のギンガムチェック、16ピクセルです。小さい正方形が8×8ピクセル、ファイルの大きさが16×16ピクセルになります。白い部分は『白』で透過ではありません。かわいい雰囲気がこれだけで出せるので、手軽に使っていただきたいですが、明度差の大きい色が混在する場合、上に載せた文字が読みにくくなることがありますのでご注意ください。

16色をまとめて圧縮ファイルにしています。形式はLZH。下のカラーサンプルまたはテキストリンクをクリックしてダウンロードの上解凍してご利用ください。



無料素材≫ボタン:スリム・ライトカラー16

スリムボタン・ライトカラー16px

高さ16ピクセル×巾140ピクセルのスリムなボタンベースです。ライトカラーなどといいながら黒が混じってたりしますがご容赦ください。
ゼリービーンズのような長円形で少し膨らんだ感じを持たせています。ここにはなぜ四角いボタンベースが無いの?とお思いの方もおられるかもしれませんが、四角のべた色のボタンはcssだけでできますので、画像ファイルを作る必要が無いからです。

外形のアンチエイリアスはオフ、透過処理をしていますので背景色の上でもご利用いただけます。
20色のファイルをまとめて圧縮していますので、ダウンロードの上解凍してご利用ください。圧縮ファイルはLZHです。



無料素材≫壁紙:ギンガムチェック・ライト色20px

無料壁紙:ギンガムチェックライト20 サンプル

ギンガムチェックライト色、サイズは小さい正方形が10ピクセル×10ピクセル、ファイルの大きさが20×20ピクセル、左上の白い部分は透過ではなくて白です。

16色のデータを圧縮しております。ダウンロードの上解凍してご利用ください。圧縮ファイルはLZHファイルとなっています。



無料素材≫壁紙:ギンガムチェック・ライト色24px

壁紙:ギンガムチェック・ライト色24

今までのデータの中で、意外だったのはギンガムチェックの検索・ダウンロード件数が多かったことです。正直言いまして作るのもそれほど難しいわけでもありませんし、それこそどこにでもありそうな感じがしていました。前回はわたしが基本色としている色をそのまま流しただけだったので、かなり使いづらい、というより使えないものも含んでいました。そこで、わたしの基本色のうちライト色を基準に、さらに明度の高い色と組み合わせて作ってみました。

大きさは前回と同じものを用意しました。このページのデータは小さい正方形が12ピクセル角、データのサイズが24ピクセル角です。透過処理はしていません。白い部分は白です。16色のデータを圧縮しています。



無料素材≫リストマーク:○矢印ボタン6 12px

mk0612_dg_u.gif   mk0612_dg_d.gif

無料リストマーク:○矢印ボタン5 12px このシリーズ最小をこの12ピクセルにしようと思います。これ以上小さくすると、中の三角の判別がつきにくくなってしまいますので。リストマークとして、GOボタンやこのページのトップへのボタンの代わりとして、階層のあるメニュー表示になど、ご利用ください。

画像ファイルは8色づつ2つのファイルに圧縮していますので、ダウンロードの上解凍してご利用ください。円はアンチエイリアスなし、外周は透過処理、三角は白です。背景色に関わらず利用することができます。



無料素材≫リストマーク:○矢印ボタン5 14px

mk0614_cb_l.gif  mk0614_fr_r.gif

無料リストマーク:○矢印ボタン5は 14pxサイズです。ようやくリストマークらしくなってきました。GOボタンにも使えますし、メニューをリスト形式で作りロールオーバーで色を変えることもできます。工夫してご利用いただけるとうれしく思います。

例によって8色づつの圧縮ファイルにしています。アンチエイリアスはオフ、周囲は透過処理、三角は白です。