ツールEX

▼アイコンやボタン、バナー、カウンターなどのホームページ素材と写真素材を2000点以上を無料配布しています!

 

 

htmlタグ辞典

 ▼色見本

 ▼Head系

 ▼Body系

 ▼文字系

 ▼見出し・段落

 ▼画像系

 ▼リンク系

 ▼テーブル系

 ▼フォーム系

 ▼フレーム系

 

PHPが動作するサーバー

 

はじめてのHP | タグ辞典 | CSSガイドEX | PHPを学ぼう! | ツールEX

ホームページ制作に役立つ、PHPプログラム・テンプレートを無料で提供してます!

 

▼素材EXとは、

ホームページ制作に役立つ、アイコンやボタン、 バナー、バー、gif アニメーション、イラスト、写真などの素材を2000点以上を無料で配布しています。
利用規約を満たしていただければ特に制限を設けておりません。
お気軽にご利用ください!

 

▼新着情報、

 


 

 

▼配布素材

ホームページ素材

ボタン

壁紙

バナー

ナンバー

アイコン

ライン

カウンター

カット

 

写真素材

ボタン

準備中...

 

 

Webサービス

カントダウン

 

 

 

▼Webサービス

イベント日までをカウントする表示をあなたのホームページやブログなどで簡単に設定することができます。 設置はとても簡単、"iframe" でリンクを張るだけ。必要な因数を渡すことで日付のカウントダウンや画像の切り替えができます!
結婚までのカウントダウン、記念日までのカウントダウン、大会や競技までのカウントダウンなど用途は工夫次第!
下記は、2020年の東京オリンピックのカウントダウンのサンプルです。
あなたのホームページやブログをアクティブなものにしましょう!

 

【サイズ:横468×縦60】

【サイズ:横125×縦125】

 

"iframe" で利用したい方は、こちら

 

▼制作Tip!

スタイルシート(CSS)を利用すると、画像に文字を載せることができ一見、 タイトル風画像にすることができます。縦横のマージンや文字サイズの調整ができるので、わざわざ画像ソフトで文字を追加する必要もありません。 また <h1>~<h3> や <p> <div> などのタグを利用すれば SEO対策 にもなります。

 

【元の画像】

元の画像

左の画像は、ボタン<セット4> の緑の画像です。

 

【CSSを設定したタイトル風画像】

素材EXについて

左の画像は、以下のCSSを設定し、「素材について」の文字を表示させています。
  font-size:9pt;    //文字のサイズ
  font-weight:bold;    //文字の太さ
  color:green;    //文字色
  background-image: url("./****/MARK0106.gif");    //画像の指定
  background-repeat: no-repeat;  //画像のリピート
  text-align:center;    //文字位置
  margin-top:0px;    //マージン上
  margin-bottom:0px;    //マージン下
  margin-left:0px;    //マージン左
  margin-right:0px;    //マージン右
  padding-top:6px;    //内マージン上
  padding-bottom:6px;    //内マージン下
  padding-left:0px;    //左マージン右
  padding-right:0px;    //内マージン右

 

また壁紙など小さな素材を利用してタイトル風画像を作成することもできます。

 

【元の画像】

元の画像

左の画像は、壁紙 斜線 の赤の画像です。

 

【CSSを設定したタイトル風画像】

素材EXについて

左の画像は、以下のCSSを設定し、「素材について」の文字を表示させています。
  font-size:9pt;    //文字のサイズ
  font-weight:bold;    //文字の太さ
  color:green;    //文字色
  background-image: url("./****/BAK0100.gif");    //画像の指定
  background-repeat: repeat;  //画像のリピート
  text-align:center;    //文字位置
  margin-top:0px;    //マージン上
  margin-bottom:0px;    //マージン下
  margin-left:0px;    //マージン左
  margin-right:0px;    //マージン右
  padding-top:2px;    //内マージン上
  padding-bottom:2px;    //内マージン下
  padding-left:0px;    //左マージン右
  padding-right:0px;    //内マージン右

 

素材EXについて

上記にボーダーの設定を使いますと左の画像になります。
  border: solid 1px; border-color:#F26D7D;  //ボーダーサイズとボダーカラー

 

スタイルの設定には、外部に読込みファイルを用意する方法と直接設定する方法があります。

 

【外部ファイルを読込む場合】

任意のファイル名で作成し、拡張子は、cssで作成します。
以下はサンプル例です。

<style>
<!--
/* サンプル詳細 */
p.img_title2{
  font-size:9pt;
  font-weight:bold;
  color:blue;
  background-image: url("./img/BAK0100.gif");
  background-repeat: repeat;
  border: solid 1px;
  border-color:#F26D7D;
  text-align:center;
  margin-top:0px;
  margin-bottom:0px;
  margin-left:0px;
  margin-right:0px;
  padding-top:2px;
  padding-right:0px;
  padding-bottom:2px;
}
-->
</style>

 

読込みたい html の head に以下のソースを設定します。
<link rel="stylesheet" href="任意のスタイルシート.css" type="text/css">

画像を表示させたい箇所に
<p class="img_title2">素材EX</p>

 

【直接スタイルを設定する場合】

以下は直接スタイルを設定する場合のサンプル例です。

 

画像を表示させたい箇所に
<p style="font-size:9pt; font-weight:bold; color:blue; background-image: url("./img/BAK0100.gif"); background-repeat: repeat; border: solid 1px; border-color:#F26D7D; text-align:center; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; padding-top:2px; padding-right:0px; padding-bottom:2px; ">素材EX</p>

 

文字の位置は、padding-top、padding-bottom、padding-left、padding-right で調整します。

ex-mode.net | ツールEX | アフィモール | 初級者向 初めてのホームページ作り | Htmlタグ辞典 | 初めてのプランター菜園 | リンク・ボード | 気のみ気のままなブログ
PHPを学ぼう! | CSSガイドEX | ホビ★コレ | 班長日記!

▲UP

Copyright (C) ex-mode.net 2017. All Rights Reserved.