グーグルマップ+ストリートビューが連動する地図の設置方法

今まで、自分が受け持つ案件では<iframe>で埋め込む事が多かった「グーグルマップ」。地図を表示させるだけならそれで良かったのですが、カーソルがグーグルマップ上にあると、こっちはページの下を閲覧したいのにMAPの中身が動いてしまい、少しユーザビリティが下がってしまっていました。「Google Maps API」を利用すればこの現象を回避出来る事は知っていたのですが、たかだか地...
READ MORE →


HTMLの文法を改めて見直し、まとめてみました。

春になり、ニワカソフトにも新卒の社員が入社してきました。頑張ってHTML・CSSの勉強をしている所を見ると、初々しくて羨ましくなります。長いことWEB制作の世界に身を置いていても「あれ?<dl>の中って<dd>だけでも文法的にOKなんだ!」とかの色々な発見があると思います。そんなこんなで、少しHTMLの基礎に立ち返ってみようかと思いHTMLの文法やその他諸々を記事に...
READ MORE →


Googleが推奨しているHTML/CSSコーディングガイドラインをまとめてみました。

webサイトを作るにあたり、HTMLをどう記述するのがBESTなのか?CSSはどう記述するのがBESTなのか?悩むことが多々あるのではないかと思います。今回はGoogleが推奨しているHTML/CSSコーディングルールを抜粋してご紹介していこうと思います。既に数多のwebサイトで紹介されてしまっていますので個人的に「そうだったの!?」と思った項目に焦点を合わせようと思います。 ち...
READ MORE →


クリッカブルマップを正確な座標点で作成する方法

不動産系のサイトや、求人媒体系のサイトでよく見かける、地図画像上の県や地域毎にリンクを設定して、オンマウスで該当範囲が切り替わるアニメーションを今回は作成して行こうと思います。※今回の記事はアドビの画像編集ソフトをフル活用いたします。主にフォトショップ(イラストレーター・ファイヤーワークスでも可)を使用致しますので該当ソフトが無い方は申し訳ありません。 まずは下のサンプルを御覧ください、...
READ MORE →


webフォントとjquery.typist.jsを使ってRPG風のテキスト効果を作成する方法

先週の記事のサンプルで作っていたRPG風のテキスト効果を作成する方法をご紹介いたします。 作成準備 使用するファイルを下記からダウンロードされて下さい。 使用するフォント:8×8 ドット日本語フォント「美咲フォント」 使用するJQueryプラグイン:jquery.typist.js webフォントの使用方法は先週の記事を参考にされて下さい。...
READ MORE →


日本語フリーフォントをwebフォント化してwebサイトに使用する方法

最近webサイトでグーグルwebフォントを使用して画像を使用せずに魅力的なテキスト装飾をされているサイト(最近といっても2,3年前から普通に見かけますが・・・)をよく見かけます。ただ、グーグルのwebフォントは日本語が今のところ一種類しか無いので、フリーで公開されている日本語フォントをwebフォントに変換してサイトに使用する方法を今回はお届けします。 使用したいフォントのライ...
READ MORE →


Animate.cssとwow.jsで簡単にリッチなサイトを作る方法

先週に引き続き「Animate.css」を使った要素が動きまくりなwebの作成方法です。前回は「Animate.css」と「Ani.JS」を組み合わせることでアニメーションのトリガーを設定し「オンマウス時」や「クリック時」にアニメーションを発動させる方法をお伝えいたしましたが、今回は「Animate.css」と「wow.js」を組み合わせることによりアニメーションのトリガーを「スク...
READ MORE →


手軽で簡単!!CSS3とJSで様々なアニメーション効果を付ける方法

.site_box01 ul li, .site_box02 ul li { width:238px; padding:10px 0; text-align:center; float:left; background: -moz-linear-gradient(top, #BFD9E5, #3D95B7 50%, #0080B3 50%, #0099CC); b...
READ MORE →


別のワードプレスでは動作したのに、今はJQueryが動かないという時の対処法

「あれ!?前に別のワードプレスに組み込んだ時は動作したのに、今回はJQueryが動かない」という時の対処法!!ほぼ同じ環境下のWPサイトで、全く同じ記述してるのに片方は動いて片方は動かない・・・という時の対処法です。ケースバイケースだとは思いますが、この記事が皆さんのお役に立てたら嬉しい限りです。 念の為にワードプレスでJQueryを使用するときの注意点 ワードプレス内でJ...
READ MORE →


JQueryを使用して色々な図形で画像にマスクをかける方法

a.item{ position:relative; display:block; height:310px; width:310px; margin:0 auto; } a.item .gallery-shadow{ display:block; position:absolute; top:0%; left:0%; width:310px; height:310p...
READ MORE →