ウェブ学のすすめ

Study of Web Design & Programing

Flashもiframeも動画もlightboxにできる!jQueryプラグイン「prettyPhoto」の使い方

ポートフォリオサイトでも使用したjQueryプラグイン「prettyPhoto」をいろいろ試してみました。このプラグインは写真の他にFlashやiframe、動画もlightboxにすることができます。

はてなダイアリーにFacebookのLike Boxを表示させる方法

ステップ1:Like Box生成ページにアクセスLike Box - Facebook開発者ステップ2:URLをコピーする http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2F%25E3%2582%25A6%25E3%2582%25A7%25E3%2583%2596%25E5%25AD%2…

はてなダイアリーにiframeを表示させることができるGoogle Gadget コンバータ

はてなダイアリーにiframeを表示させることができるツールを紹介します。iframe → Google Gadget コンバータ ↓iframeタグ、またはURLを貼り付けます。 ↓幅、高さを調節します。 ↓出力されているHTMLソースをはてなダイアリーに貼り付けます。

検索上位を目指して知っておきたい検索・SEO用語5つ

SEO SEO(Search Engine Optimization)とは ある特定の検索エンジンを対象として検索結果でより上位に現れるようにウェブページを書き換えること。または、その技術のこと。 ※SEM(Search Engine Marketing):検索エンジンから自社Webサイトへの訪問者を増やす…

自動返信機能付きお問い合わせフォーム

PHP

プレビュー ↓別ウィンドウを開いて見る http://webgaku.biz/form3/

隠しフォームを使ってPHPの入力フォームを作る方法

PHP

プレビュー↓別ウィンドウを開いて見る http://webgaku.biz/form2/

REQUESTを使ってPHPの入力フォームを作る

PHP

プレビュー↓別ウィンドウを開いて見る form

PHPで現在の時刻を表示する方法

PHP

プレビュー↓別ウィンドウを開いて見る http://webgaku.biz/time/

WordPressのテーマを適用させるスタイルシートの書き方

現在、ポートフォリオをWordPressで構築しているので復習してみました。

ポートフォリオ作成の道のり4【WordPressのテンプレート配布サイト集】

今回のポートフォリオサイトはWordPressで構築するつもりですが、1からは時間的に厳しいので既存のテンプレートをカスタマイズしていこうと思っています。そこでWordPressのテンプレートを配布しているサイトを探してみました。日本語、英語合わせて12の配布…

ポートフォリオ作成の道のり3【ポートフォリオサイト10選】

第3回目は【他の人が作った多くのポートフォリオを見る】です。他のWebデザイナーの方が作ったポートフォリオサイトを見て、イメージを固めていこうと思います。数あるポートフォリオサイトの中から気になったサイトをご紹介します。主に日本人Webデザイナー…

ポートフォリオ作成の道のり2【ワイヤーフレーム】

第2回目はCacooを利用してワイヤーフレームを作ってみました。まだ草案の状態ですが、形にすることで改善点、製作したい理想のサイトの形が見えてきました。

ポートフォリオ作成の道のり1【目的・構想】

ポートフォリオサイトのプレゼンまであと14日!これからポートフォリオ作成の道のりを残していきたいと思います。第1回目は、目的と構想を書き出してみます。目的 When(いつ):就職活動の書類選考時、または面接時に Where(どこで):就職したい会社で Who(誰…

ソースコードを美しく見せるフォント『Source Code Pro』をAdobeが無料で公開!

API

このブログでも多くのソースコードを載せてきましたが、Adobeがソースコードを表示する目的で開発したフォント『Source Code Pro』を無料で公開しています。

いいねボタンを設置する方法

プレビュー ↓別ウィンドウを開いて見る いいねボタン - js do it ↓QRコード ※おすすめQRコード読み取りアプリ 最速QR カテゴリ: ユーティリティ サイズ: 1.5 MB 価格: 無料 ポイント ↓facebookにログインし、 http://developers.facebook.com/docs/referenc…

ツイートボタンを設置する方法

プレビュー ↓別ウィンドウを開いて見る ツイートボタン - js do it ↓QRコード ※おすすめQRコード読み取りアプリ 最速QR カテゴリ: ユーティリティ サイズ: 1.5 MB 価格: 無料 ポイント ↓Twitterにログインし、「素材」リンクをクリックします ↓「Twitterボ…

JavaScript for Twitter Bootstrapの使い方

CSS

Twitter Bootstrapを使って新しいサイトを制作しようと思い、今回は動きの部分のデモを作ってみました。Twitter Bootstrapを使えばjavascriptを多く書かなくても多彩な動きを表現することができます。

Twitter Bootstrapのサンプル盛り合わせ

CSS

Twitter社が作ったCSSフレームワーク「Bootstrap」をいろいろ試してみました。用意されたCSSを指定してあげれば簡単にPCサイト、スマートフォンサイトに可変で対応するレスポンシブデザインを構築することができます。

SPIを学習できるサイト・アプリ・参考書まとめ

ひさしぶりにSPIに挑戦したら予想以上に解けなかったので(汗)、勉強するために役立つWebサイト、スマートフォン用アプリ、参考書を探してみました。

iPhone 5をsoftbank とauのどちらで買えばいいか比較してみました

iphone 5 mockups / methodshop.com9月14日(金)に予約が開始されたiPhone 5ですが、softbankとauのどちらで購入しようか迷っている方も多いと思います。そこで現在2社が出している情報をもとに料金、サービスの違いをまとめてみました。ただし発売日までに変…

CSS3メディアクエリを使った可変レイアウト+固定レイアウト

PC用、タブレット用は固定レイアウトですが、スマートフォンでは可変レイアウトになるデザインを作成しました。広告の部分はAmazon アソシエイトからお買い得のスマホ用品を表示しています。※現在はIE対策をしていないのでIE8以下で見るとスタイルシートが利…

CSS3メディアクエリを使った固定レイアウト(コンパクトメニュー版)

先日作成した「CSS3メディアクエリを使った固定レイアウト - ウェブ学のすすめ」のメニューをコンパクトにしたバーションです。CSS3のtransitionとtargetを使用し、メニューを折りたたみタップすることで内容が見えるようになっています。※現在はIE対策をし…

iPhone5発表か!?Appleイベントを実況してくれるサイト5選

新しいiPhoneが発表されるかもしれないイベントが日本時間9月13日、午前2時から始まります。イベントの様子を実況してくれるサイトを紹介したいと思います。あと1時間!どんな新商品が発表されるのか楽しみです。

CSS3メディアクエリを使った固定レイアウト

昨日はパーセント指定でウィンドウサイズを変更するにつれて可変するレイアウトを作りましたが、今日は画面サイズによって固定したレイアウトが表示されるデモサイトを作成しました。※現在はIE対策をしていないのでIE8以下で見るとスタイルシートが利いてい…

可変レイアウトデモサイト「PICKUP STREAM」

CSS

CSS3のメディアクエリを使用して可変レイアウトのデモサイトを作りました。外部スタイルシートに記述するのではなく、スタイルシートの中に@media規則でメディアクエリを記述してします。※現在はIE対策をしていないのでIE8以下で見るとスタイルシートが利い…

Dreamweaverでオリジナルブログシステムを構築する方法

Dreamweaverの機能を使ってオリジナルの簡易ブログシステムを構築してみました。PHPが書けなくてもDreamweaverを使えば簡単にブログシステムを作ることができます(1から作るよりはWordPressなどのCMSをカスタマイズしたほうがいいかもしれませんが...)。

GPSで指定した場所周辺のTwitterのツイートを表示する

API

プレビュー ↓別ウィンドウを開いて見る GPS機能とTwitterの連携 - js do it

取得した位置情報を地図に表示

API

プレビュー ↓別ウィンドウを開いて見る 取得した位置情報を地図に表示 - js do it

Google Maps APIで始点と終点からルート検索

API

プレビュー ↓別ウィンドウを開いて見る Google Mapsで始点と終点からルート検索 - js do it

Google Maps JavaScript APIを使ったルート検索

プレビュー ↓別ウィンドウを開いて見る ルート検索マップ(詳細)

Google Static Maps APIのパラメーターの指定方法

API

JavaScriptなしで簡単にGoogle マップの画像をウェブページに埋め込むことができる『Google Static Maps API』のパラメーターを色々変えて試してみました

QRコード作成サイト(jQueryMobile版)

jQueryMobileでQRコード作成サイトを作ってみました。大きさ、色を変更できるようになっています。

Google Chart ToolsでQRコードを表示する方法

API

Google Chart ToolsのAPIを利用してQRコードを表示しました。またカラーQRコードも表示できるようになりました。

将棋ポータルサイト|SHOGI FUN

9月1日、学校にてプレゼンしたサイト「将棋ポータルサイト|SHOGI FUN」の概要をまとめてみました。

はてなダイアリーのサイドバーにTwitterのウィジェットを貼り付ける方法

随分前にこのブログのサイドバーにTwitterのウィジェットを貼り付けましたが記事にしていなかったためやり方を忘れてしまったので(汗)もう1度調べ直してみました。 公式のウィジェットを貼り付けただけでははてなダイアリーに表示されません。コードの1部分…

機能別にまとめたCSS3ジェネレーター28選

スマートフォンサイトでCSS3を使うことが多くなりますが、今までのCSSに比べブラウザごとにベンダープレフィックスを記述するなど作業量が増えてしまいます。そこで少しでも作業量を減らすためにジェネレーターを活用することをおすすめします。今回は簡単に…

Illustrator CS6で画像トレースする方法

Illustrator CS6で画像トレースする方法をご紹介します。CS6以前の場合、ライブトレースという名前でしたがCS6からは「画像トレース」という名称に変更されました。 ステップ1:新規作成 ↓「ファイル」>「新規」から新規ドキュメントを作成します ステップ…

PHPのsimplexmlで複数のブログのRSSを読み込み新着順に表示する方法

PHP

PHPのsimplexmlを使って複数のブログのRSSを取得し、新着順に表示するRSSリーダーを作ってみました。またJavaScriptでCSSを切り替えられる「styleswitch.js」を使って背景を自分の好きな色に変更できるような設定ページも設けてみました。ただ複数のRSSを読…

PHPを使ってTwitterのタイムラインを取得する

PHP

PHPのsimplexml_load_fileモジュールを利用してTwitterのタイムラインを取得し、jQuery Mobileで表示してみました。プレビューjQueryMobileとPHPのsimplexml↓QRコード ※おすすめQRコード読み取りアプリ お父さんQR カテゴリ: ユーティリティ サイズ: 2.3 MB …

PHPを利用してRSSを取得&表示する

PHP

PHPを利用してRSS・xmlファイルを取得し、ブログの最新記事一覧を表示してみました。jQuery Mobileを使用したのでスマートフォンからでも快適に見れるようになっています。プレビューjQueryMobileとPHPのsimplexml↓QRコード ※おすすめQRコード読み取りアプリ…

お問い合わせメールフォームver2

PHP

「PHPで作るお問い合わせメールフォーム(自動返信機能付き) - ウェブ学のすすめ」のお問い合わせメールフォームを改良してみました。プレビュー↓お問い合わせメールフォーム(入力された項目はデータベースに書き込まないように設定しています。) ↓管理画…

サイトにパスワードをかける方法(.htaccessでBasic認証)

サイトにパスワードをかける方法として.htaccessファイルを使ったBasic(ベーシック)認証があります。 実際にレンタルサーバー「freeweb」にアップロードしたサイトにBasic認証を設定する手順を残します。↓Basic認証を設定するとこのようなユーザー名&パス…

PHPで作るお問い合わせメールフォーム(自動返信機能付き)

PHP

自動返信機能付きのお問い合わせメールフォームをPHPで制作しました。またブラウザー上でデータベース内の情報を見ることができる管理メニューページも作成。この管理メニューページには.httaccessを使ったBasic認証でIDとパスワードを入れないとページが見…

無料で2GBのストレージが使える!Dropboxの始め方

Dropboxを始めてみたのでその手順を残しておきたいと思います。 ステップ1:アカウントの作成 Dropbox - Simplify your lifeにアクセスします。↓「サインイン」>「アカウント作成」をクリック ↓氏名、メールアドレス、パスワードを入力し、規約に同意し、…

スマートフォン対応デモサイト【4】フォーム

「HTML5+CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応」を参考にChapter_6のサンプルサイトをカスタマイズしてみました。プレビュー ↓別ウィンドウを開いて見る スマートフォン対応デモサイト【4】フォーム ↓QRコード ※おすすめQRコード読み…

スマートフォン対応デモサイト【3】フラワーショップ

「HTML5+CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応」を参考にChapter_5のサンプルサイトをカスタマイズしてみました。プレビュー ↓別ウィンドウを開いて見る スマートフォン対応デモサイト【3】フラワーショップ ↓QRコード ※おすすめQRコ…

CSS3 animation transformの動きデモ

CSS

要素を変化させるtransformの実際の動き方を見るためにデモを作ってみました。プレビュー ↓別ウィンドウを開いて見る CSS3 animation transformの動きデモ - js do it ポイント transform 値内容scale拡大・縮小rotate回転translate距離skew歪み animationの…

CSS3のtransition-timing-function動きデモ

CSS

CSS3のtransitionやanimationでアニメーションの動きを指定するtiming-functionの実際の動き方を見るためにデモを作ってみました。プレビュー ↓別ウィンドウを開いて見る transition-timing-functionの動きデモ - js do it コード HTML <div id="transition"> <div id="ease">ease</div> <div id="linear">linear</div> <div id="ease-in">ease-in</div> <div id="ease-out"></div></div>…

EclipseでAndroidエミュレーターを起動させるまでの手順【Windows 7 64bit版】

自宅のWindows7(64bit版)に入っているEclipseにおいてAndroidエミュレーターを起動させるまでの手順を残しておきたいと思います。<前提条件> XAMPPがインストールされていること→Windows 7 64bitにXAMMPをインストールする方法 - ウェブ学のすすめ Eclip…

スマートフォン対応デモサイト【2】

「HTML5+CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応」を参考にChapter_4のサンプルサイトをカスタマイズしてみました。 イラストはAI・EPSの無料イラストレーター素材なら無料イラスト素材.comから入手し、Photoshopでサイズ変更 プレビュ…