スポンサーサイト

記事タイトル枠
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
ページトップへ戻る

[JavaScript]bxSliderとlightBoxを組み合わせて、コンパクトなギャラリーページを作る

記事タイトル枠

こんにちは!初心者のためのWEBデザイン教室、第19回目の授業です。

サイト制作中の生徒さんから、

サムネイルをクリックすると画像が拡大するギャラリーページを作りたい。
◆その際、たくさんのサムネイル画像を一覧で全て表示させるのではなく、縦スクロールが必要ないよう横にスライドさせたい

との要望がありました。

なるほど、拡大画像はlightBox、スライダーはbxSliderというjQueryの有名プラグインでできそうですね。

ニーズにぴったりなプラグインを新たに探すというのも一つの手ですが、使い慣れたプラグインで実装できれば、それも良いですよね!

ということで、今回は既知のプラグインを組み合わせて、コンパクトなギャラリーページを作ってみましょう!

完成イメージはこんな感じ。

bxSliderとlightBoxを組み合わせて、コンパクトなギャラリーページを作る

サンプルページはこちらです。

続きを読む

このエントリーをはてなブックマークに追加

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

ページトップへ戻る

Internet Explorer9で、IE8やIE7の表示を確認する

記事タイトル枠

こんにちは!初心者のためのWEBデザイン教室、第18回目の授業です。

コーディングをしていると、必ずぶつかるIEの壁。
色んなブラウザで表示確認しましょうねと学習したとおり、Internet Explorer(IE)、Chrome、Firefoxあたりの見え方は確認しながらコーディングを進めていることと思います。

IEでもちゃんと見えてるからヨシヨシ大丈夫、と安心するのはまだ早い!
そのIE、バージョンは何ですか?

IEというのは、同じブラウザでもバージョンの違いによってかなり挙動が違うのです。
IE9で正しく表示されていても、8や7ではずるっとずれているかもしれません。

自分のPCにはIE9しかないのに、じゃあどうやって確認したらいいの?
と思いますね。ということで、今日はIEの表示確認に役立つツールを紹介します。
特別なソフトは要りません!

続きを読む

このエントリーをはてなブックマークに追加

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

ページトップへ戻る

初心者必見!情報デザインの基礎的テクニックから「伝わる」デザインを学ぶ

記事タイトル枠

こんにちは!初心者のためのWEBデザイン教室、第17回目の授業です。

2012年はたった7回しか記事を更新できませんでした。。2013年はもう少し、月1くらいでは更新したいなーと、1月も終わろうとしている今ごろ思っている次第です。
みなさんはどんな目標を立てられましたか?

さて今日は、デザインのテクニックについてのお話です。

テクニックというと、人をおおっと言わせるようなスゴ技のことを思うかもしれませんが、今回はそうではなく、ごく基礎的な内容です。

料理の初心者がまずはレシピに忠実に作ってみるように、デザインの初心者であるみなさんは、今回紹介するサイトのテクニックをそのまま、まずは忠実に守って作ってみましょう!

続きを読む

このエントリーをはてなブックマークに追加

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

ページトップへ戻る

横並びのボックスの左右を親ボックスの幅ピッタリに収める

記事タイトル枠

こんにちは!初心者のためのWEBデザイン教室、第16回目の授業です。

今日は、コーディングの際のちょっとした小技を紹介します。

幅を決めたdivの中に、いくつかのボックスを横並びにします。
その際、並んだボックスの左右を、親divの幅ぴったりにしたいという条件です。

横並びのボックスの左右を親ボックスの幅ピッタリに収める

それでは見てみましょう!

続きを読む

このエントリーをはてなブックマークに追加

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

ページトップへ戻る

グーグルマップをサイトに埋め込む

記事タイトル枠

こんにちは!初心者のためのWEBデザイン教室、第15回目の授業です。

企業やお店のサイトの概要ページやアクセスページに、よくグーグルマップが表示されているのを見かけますね。

グーグルマップをサイトに埋め込む

グーグルマップを埋め込むと、そのページで地図内をドラッグで移動できたり拡大縮小したり、もっと大きな画面で見たければGoogleMapサイトにジャンプできたりと、とっても便利です。

これ、とっても簡単に実装できますので、是非覚えましょう!

続きを読む

このエントリーをはてなブックマークに追加

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。