6月のお楽しみ

こんにちは

すっかりかさ のデコメ絵文字梅雨梅雨だよ。カエル のデコメ絵文字本番ですね。

洗濯ファッションだよ。服だよ。ティーシャツ のデコメ絵文字のタイミングを天気予報とにらめっこしながら考えている

スタッフ 『 お 』 です。

 

そんな6月ですが、この時期限定のお楽しみがあります!

あの羊羹の老舗、『とらや』の 『 コーヒー羊羹 』 です!

 

「それ・・・美味しいの?」

と、お声が聞こえてきそうですが、コレがおいしいのです!!

羊羹なので、もちろん甘いですが、コーヒーコーヒー のデコメ絵文字のとても豊かな香りが口いっぱいに広がります。

 

 

じつはこのコーヒー羊羹、かつては期間限定ではなく通年のレギュラー商品だったのですが、

いつのまにか、「父の日」にあわせて5月中旬から6月下旬頃までの限定商品になりました。

 

『 お 』はこの羊羹が大好きで、ここ3年ほど毎年買っています。

先日も10個ほど買い込んできました!

週末はこれをお供にお家でのんびりの計画です(笑)

 

小型の羊羹なので、1つ 260円、全国のとらやで販売されているので、

手軽に手に入るのも魅力のひとつです。

 

老舗の変り種。

話題のお供や、もちろん甘いものが大好きなお父様、旦那様への

『父の日』プレゼントにいかがでしょうか

 

 

 

パソコン の画像【重要なお知らせ】講座名とコース・パック内容が一部変更になりました(2015/4/1)

2015年4月1日より、既存のコースおよびパックに含まれる講座が一部が変更になります。
それに伴い、価格の変更がありますのでご注意ください。

詳しいご案内は

http://www.vanfu-vts.jp/info.html#container2

こちらのページをご覧下さい。

 

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

★2015年6月マンスリーギフト★

真夏太陽 のデコメ絵文字のような暑さが続いた先週から一転、
今日は6月らしい雨の日になりましたね。
傘 の画像をそろそろ新調したいスタッフ『 お 』です。

 

今週のマンスリーギフトのご紹介です。

今週はこちら!

 

6月といえば梅雨、梅雨といえばてるてる坊主 のデコメ絵文字『 てるてる坊主 』てるてる坊主 のデコメ絵文字ですよね!

このてるてる坊主、じつは首のリボンを解くと・・・

 

 

ハンドタオルになるのです!

 

ハンドタオルからてるてる坊主へはすべて『お』が手作業で行いましたので、

リボンの色とあいまって、色々個性あふれる てるてる坊主たちとなっております。

ちょっと憂鬱な梅雨の楽しいお供となれば嬉しいです。すな のデコメ絵文字

 

マンスリーギフトは無料体験講座を受講いただいた方へ先着で

お渡ししておりますバイバイ のデコメ絵文字

 

ごめんね の画像ご参加お待ちしておりますごめんね の画像

 

 

パソコン の画像無料体験講座を受講してマンスリーギフトを貰っちゃいませんか?

ダイヤキラキラ*゜ の画像ポストカード制作体験講座ダイヤキラキラ*゜ の画像、パンフレット制作体験講座、ダイヤキラキラ*゜ の画像

ダイヤキラキラ*゜ の画像ホームページ制作体験講座ダイヤキラキラ*゜ の画像 からお好きな講座が選べます!

★無料体験講座お申込み★

http://www.vanfu-vts.jp/lesson_e/index.html

 

 

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Web]小さなアイコンを文字として扱う

6月になりました。蒸し暑い日が増えてきましたね。夏の気配がしておきております。

春と秋のような季節が好きなスタッフ「ほ」にとっては、ちょっとだけつらい季節の到来です。

さて、本日はとってもナイスなWebサービスをご紹介です。

——

例えば、ナビゲーションボタンに小さなアイコンを入れたい場合、みなさんならどうしますか?

グラフィックソフトなんかでGIFファイルを作成して利用する、もしくはボタンそのものを画像で作成する、なんてのが一般的かなと思います。

ただ、グラフィックで作成すると、フォントサイズが変わった時にまた画像をリサイズして作り直す必要がありますし、色を変えたい場合もまた作り直しってことになります。

そんな小さなアイコンをフォントとして表示できるWebフォントがあるんです。

Font AwesomeというWebフォントサービスです。
http://fortawesome.github.io/Font-Awesome/

使い方はとっても簡単。ユーザー登録なんかもいりません。

なかなか使い方は奥深いんですが、今回はカンタンに使えるさわりの部分だけご紹介してみます。

利用の手順

利用はカンタン、以下の2ステップです

  1. Font Awesomeを利用するためのタグを1行書く
  2. アイコンを利用したい場所に適当なインライン要素タグを書いてクラスを指定する

以上です。

では、1工程ずつやってみましょう。

ステップ1

最初のステップでは、Font Awesomeを利用するための準備をします。

Font Awesomeを利用するには、関連ファイルを一式ダウンロードして、自分のサイトに組み込んでしまう方法と、Font Awesomeのサーバーから呼び出して利用する方法の2つがあります。

後者の方がカンタンに利用できるので、そちらでやってみましょう。

HTMLファイルの<head>から</head>の間に以下のタグを貼り付けます。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

上記のタグはXHTMLを基準にしてありますので、HTMLのページで作っている場合は、最後の「 /」を外してください。

準備はこれだけです。さぁ使ってみましょう!

ステップ2

例えば、以下のようなソースがあったとして…

<p>ダウンロード</p>

この「ダウンロード」の文字の先頭にアイコンを入れたい場合、以下のように「ダウンロード」の文字の前に適当なインライン要素のタグを書きます。
ここでは<span>タグを使ってみます。

<p><span></span>ダウンロード</p>

さらに追加した<span>要素に以下のクラスを指定します。

<p><span class="fa fa-download"></span>ダウンロード</p>

以上です。ブラウザで確認してみましょう。

カンタンでしたねー。

アイコンの種類

上記のように、クラス名に「fa fa-(アイコン名)」と指定することで、任意のアイコンを指定することができます。

他にも以下のようなアイコンが呼び出せます。

アイコン クラスの指定
fa fa-shopping-cart
fa fa-sitemap
fa fa-tag
fa fa-search-plus
fa fa-thumbs-o-up
fa fa-trash
fa fa-truck
fa fa-user
fa fa-car
fa fa-bus
fa fa-subway
fa fa-file-o
fa fa-gear

上記は一例で、まだまだ種類はたくさんあります。

↓のページを参考にしてみてください。
http://fortawesome.github.io/Font-Awesome/icons/

装飾

ここで表示しているアイコンは、文字の扱いですから、CSSで文字として装飾を行うことができます。

ボタン作ってみましょう。

HTMLソースを用意します。

<ul id="fnav">
<li><a href="#"><span class="fa fa-sitemap"></span> サイトマップ</a></li>
<li><a href="#"><span class="fa fa-car"></span> 交通アクセス</a></li>
</ul>

では、CSSで装飾をしてみましょう。

#fnav {
	padding: 0px;/*リストのパディングをクリア*/
	margin: 0px;/*リストのマージンをクリア*/
	font-family: "Hiragino Kaku Gothic ProN", Meiryo,  sans-serif;/*フォントの指定*/
}
#fnav li {
	list-style: none;/*リストマーカーをなしに*/
	width: 10em;/*横幅の指定*/
	float: left;/*リストを横並びに*/
	text-align: center;/*文字を中央揃えに*/
	margin-right: 10px;/*ボタン間の隙間を指定*/
}
#fnav li a {
	display: block;/*幅を有効にするためブロックレベル要素に*/
	padding: 5px 10px 3px;/*ボタン内側の余白*/
	text-decoration: none;/*リンクの下線を消去*/
	color: #FFFFFF;/*文字の色を白に*/
	font-weight: bold;/*文字を太く*/
	border: 2px solid green;/*まわりの枠線を表示*/
	border-radius: 10px;/*角丸の指定*/
	background-image: -webkit-linear-gradient(270deg,rgba(177,218,177,1.00) 0%,rgba(0,130,0,1.00) 100%);/*背景のグラデ*/
	background-image: -moz-linear-gradient(270deg,rgba(177,218,177,1.00) 0%,rgba(0,130,0,1.00) 100%);/*背景のグラデ*/
	background-image: -o-linear-gradient(270deg,rgba(177,218,177,1.00) 0%,rgba(0,130,0,1.00) 100%);/*背景のグラデ*/
	background-image: linear-gradient(180deg,rgba(177,218,177,1.00) 0%,rgba(0,130,0,1.00) 100%);/*背景のグラデ*/
	background-color: #008700;/*グラデーション未対応ブラウザのための背景色*/
	-webkit-box-shadow: inset 1px 1px 0 #D0FBDE;/*ボックス内側の白いハイライト*/
	box-shadow: inset 1px 1px 0 #D0FBDE;/*ボックス内側の白いハイライト*/
	text-shadow: -1px -1px #025104;/*文字を立体的に見せる影の指定*/
}

ブラウザで確認すると、以下のようになります。

DEMOページ

どうでしょう?画像ファイルは一切使っていませんが、ここまでの表現が可能になります。

画像を使用していない分だけ、修正や変更も容易ですし、データの軽量化が見込めます。

かなり便利に使えるサービスです。ぜひチャンスがあったら利用してみてください!


バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎!Dreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ