- ホーム/Home
- ホームページ素材
ホームページ素材
ホームページなどで使用していただける素材を掲載していますので、気に入ったモノが有れば自由にダウンロードしていただけます。
下記にある
をクリックするとサンプルの詳細がご覧になれます。（サンプルですので、導入される場合CSS等の変更は必要です）
ご利用になられた場合、当ホームページへのリンクを貼っていただけるようお願いします。（ＵＲＬ ：http://miyagawambbc.web.fc2.com/ ）
兵庫県芦屋市の宮川・打出浜・精道小学校の子供たちで活動しているミニバスケットボールクラブです☆ただいま部員募集中-芦屋市内在住の小学生の男子でしたらどなたでも体験練習に参加出来ます
メニュー
ホームページ制作には欠かせないメニューですが、横並びメニューと縦並びメニューを用意しました。
文字は、画像ではありませんので編集も可能です。また、項目を増やすことも簡単にできます。
HTML・画像・CSSをセットにしたファイルがダウンロードしていただけますので必要な方は、メニューにある“ダウンロード”をクリックしてください。
横並びタイプメニュー
縦並びタイプメニュー
メニューのベース画像
メニューのベースになる画像も用意しました。
ご利用は、ファイル名を上記のメニューの画像と同じファイル名にして置き換えしてもらえればＯＫです。
ダウンロードは、希望の画像の上で右クリック”名前を付けて画像を保存”を選択して保存してください。
 |
 |
 |
メニュー画像を利用して出来ること
メニューと同じ画像を利用するメリットは,読み込む画像は一枚ですので表示が早くなり、
同じ画像を利用するのでデザイン的にも統一感があり見た目も良くなります。
CSS の工夫しだいでいろいろな表現ができると思いますので是非挑戦してみてください。
メインタイトルなどの帯に！
メインタイトル
このソースを見る
HTML
<h1 class="m_title"><span>メインタイトル</span></h1>CSS
.m_title {
background-image: url(menu.png);
background-position: -15px top;
background-repeat: no-repeat;
height: 29px;
font-size: 16px;
line-height: 29px;
padding-left: 30px;
border: 1px solid #000;
}
.m_title span {
background-image: url(menu.png);
background-repeat: repeat-x;
background-position: -45px -90px;
display: block;
height: 29px;
color: #FFF;
}必要に応じて数値・プロパティは変更してください。
サイドバーの見出しに！
サイドバー用
説明文が入ります
このソースを見る
HTML
<h3 class="s_title"><span>サイドバー用</span></h3>
<div class="s_box">説明文が入ります</div>CSS
.s_title { background-image: url(menu.png);
background-repeat: no-repeat;
background-position: left top;
border: 1px solid #F00;
height: 29px;
width: 155px;
font-size: 12px;
font-weight: bold;
line-height: 29px;
padding-left: 45px;
margin-bottom: 0px;
}
.s_title span {
background-image: url(menu.png);
background-repeat: repeat-x;
background-position: right top; display: block;
height: 29px;
} .s_box {
height: 50px;
width: 180px; background-color: #FFD9D9;
border-right: 1px solid #F00;
border-bottomh: 1px solid #F00;
border-left: 1px solid #F00;
padding: 10px;
}
必要に応じて数値・プロパティは変更してください。
ボールのイラスト
ボールのイラストを用意しました。
ダウンロードは、希望の画像の上で右クリック”名前を付けて画像を保存”を選択して保存してください。
ボール単体のイラスト
背景が透明なPNGは背景に好きな色が使えますが注意が必要です。(下記注意参照）背景が透明なGIFは背景に好きな色が使えますがちょっとギザギザが目立ちます。
| 背景が白色 | 背景が透明なPNG | 背景が透明なGIF | ||||||
|
 |
 |
 |
 |
 |
 |
 |
 |
| 17X17 | 23X23 | 29X29 | 17X17 | 23X23 | 29X29 | 17X17 | 23X23 | 29X29 |
リスト項目などの頭に利用できます。
- ミニバスとは
- チームについて
- コーチたち
文章と文章の区切り線などに使えるライン
背景が白色
 |
 |
 |
 |
背景が透明なPNGは背景に好きな色が使えますが注意が必要です。
(下記注意参照）
 |
 |
 |
 |
タイトルとしても使えます
タイトル の内容がここに入ります
説明文などが入ります。
このソースを見る
HTML
<div class="title_box">
<h1 class="mm_tiitle">タイトル の内容がここに入ります</h1>
<p>説明文などが入ります。</p>
</div>CSS
.title_box {
background-image: url(ball-line.png);
background-repeat: no-repeat;
background-position: left 15px;
height: 100px;
padding: 10px;
border: 1px solid #963;
}
.mm_tiitle{
font-size: 14px;
font-weight: normal;
margin: 15px 0px 30px 30px;
}必要に応じて数値・プロパティは変更してください。
透過PNGの場合
タイトルの内容がここに入ります
説明文などが入ります
このソースを見る
HTML
<head>
<script src="iepngfix.js" charset="utf-8"
type="text/javascript">
</script>
</head>
<div class="title_box">
<img src="ball-line_a.png" width="900" height="35"
class="iepngfix"/>
<h1 class="tiitle_h">タイトルの内容がここに入ります</h1>
<div class="setsmei">説明文などが入ります</div>
</div>CSS
* html .iepngfix {
behavior: expression(IEPNGFIX.fix(this));
}
.title_box2 {
height: 100px;
overflow: hidden;
border: 1px solid #006;
background-color: #E8F0FF;
}
.tiitle_h {
font-size: 14px;
margin: -47px 0px 30px 45px;
position: static;
}
.title_box2 img {
margin:10px 0px;
}
.setsumei{
padding:0px 10px;
}必要に応じて数値・プロパティは変更してください。
透過PNGをIE6で表示する場合
ダウンロード
「iepngfix.js」と「blank.gif」ファイルを用意する
HTML
<head>
<script src="iepngfix.js" charset="utf-8"
type="text/javascript">
</script>
</head>
<body>
<img src="*****.png" width="***" height="***"
class="iepngfix" />
</body>CSS
* html .iepngfix {
behavior: expression(IEPNGFIX.fix(this));
}透過PNGの表示方法はこれ以外にもありますので調べてみてください
注意 |
※背景が透明なPNGはIE7以降で対応していますが、IE６では対応していないので、別途「iepngfix.js」を使った方法などで、IE６で透過PNGを扱えるようにする必要があります。
※著作権は、宮川ミニバスケットボールクラブに帰属します。
※本サイト内で掲載の記事・データ情報・画像・イラスト・ロゴ等の複製や無断転載を禁止いたします。
※CSS等の制作に関するご質問はお受けできませんのでご了承ください。 |
