カテゴリー別アーカイブ: webサービス

[web]無料の動画素材

先日、スクールのメールマガジンをご購読いただいてる方を対象に「ホームページをHTML5に変更しよう」という特別講座を実施しました。

アンケートでも高い評価をいただくことができ、また久しぶりにスクールにいらっしゃっていただいた方に修了後のお話を伺ったところ「学んだ内容を生かして仕事しています!」といううれしいお言葉もいただけました。

インストラクターとして一番うれしい言葉です。

こんにちは。スタッフ「ほ」です。

講習の中で、動画をホームページに組み込んだり、動画をページの背景にしたりするテクニックをご紹介しました。

▼こちらで完成のサンプルが見られます。

movielesson完成サンプル

ぜひ、受講生の皆様には、ご自身で練習をしていただきたいと思いますが、動画のファイルが気軽に用意できない方もいらっしゃるかと思います。

そんなときに便利なのが、インターネットで動画ファイルがダウンロードできるサイトです。

NHKクリエイティブライブラリー

名前の通り、NHKが運営しているサイトです。
NHKアーカイブスの番組や番組素材から切り出した映像や音声が「創作用素材」として提供されています。

とても個人では用意できなさそうな貴重な映像もたくさん公開されています。

営利目的での利用はできませんが、個人の練習用であれば問題ありませんし、ファイル形式も最初からmp4という嬉しい仕様。変換無しでそのまま利用することができます。
ユーザー登録やログイン作業も不要です。

今回、上記でリンクした完成見本のデモページも、このNHKクリエイティブライブラリーからダウンロードした動画に差し換えてあります。

とても美しい映像素材だらけですので、一度時間があるときに覗いてみてください。


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

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

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

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

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

バンフートレーニングスクールは 最短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. お問合せ

[web]Google map のこと

クリスマスも、もう終わりですね。
皆様は、どんなクリスマスを過ごされましたか?

我が家では、手作りケーキが思いのほか上手にできて家族で盛り上がりました。
こんばんは。スタッフ「ほ」です。

スクールの年末年始のお知らせがあります。
こちらのエントリーをご覧ください。

さて、本日のネタです。

Dreamweaver講座のレッスンでページ内にGoogleマップを埋め込む方法をご紹介しております。

ざっくりと手順を説明すると、Googleマップにアクセスして、住所を入力して位置検索をします。

地図の縮尺と座標を整えます。

地図の左上にある鎖のマークをクリックします。

表示されたボックスから「ウェブサイトへの地図埋め込み用 HTML コード」をコピーします。

自分のWebページにコードを貼り付けることで、ページ内にGoogleマップが表示されるようになります。

サンプル1

ただ、この時に、地図内のポップアップには、住所が出てしまうので、できればお店や会社の名前を入れたいところです。

こういう時は、Googleマップに住所を入れずに、店舗名や会社名を入力して検索してみましょう。

Googleマップに店舗名や会社名の吹き出しが出るようであれば、この地図の状態で、鎖のマークから埋め込み用のコードをコピーします。

そのコードをページに埋め込んだサンプルがこちらです。

サンプル2

また、地図が小さいと、この吹き出しが邪魔になることもあるので、非表示にすることも可能です。

コピーしてきたコードから、ちょっと大変なんですけど「(省略)…iwloc=A&amp…(省略)」と書いてある部分を見つけ出し、この「A」を削除すると、吹き出しが出なくなります。

サンプル3

「そもそも、うちのお店がGoogleマップに出ないんだけど…」という方は、Googleプレイスに登録しにいきましょう。

さて、今回が2013年最後のエントリーとなります。

皆様、どうぞよいお年をお迎えください。


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

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

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

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

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

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

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