フロントエンド/ Category

フロントエンド

canvasで作るお絵描きツール

HTML5で追加されたcanvasを使用したお絵かきツールの作成方法のまとめです。 機能としては ペンで描画 消しゴム 色の変更 太さの変更 全て削除 の6つの機...

フロントエンド

HTMLファイルでPHPを使って共通部分を管理する

.phpファイルだともろにデータを扱っていますと言っているような感じがして個人的にはとても嫌なので、CMSを使わずに作業する場合には.htmlファイルでphpを使...

フロントエンド

2地点間のルートの表示方法 - Google maps API -

ルート検索してマップ上に表示するための方法です。今回はフォームに【出発地点】と【到着地点】を入力してボタンを押したときにルートの検索結果を表示しま...

フロントエンド

吹き出しの情報ウィンドウをクリックで表示する - Google maps API -

マーカーをクリックで【ポップアップウィンドウ（吹き出し）】を表示を3つの手順で紹介します。Google maps APIを使って前回まではマーカーを立てるところま...

フロントエンド

schema.orgで検索エンジンに正確にイベント情報を伝える

schema.orgを使ってイベント情報を使ってマークアップする際に使うタイプやプロパティのまとめです。 今回は10/15にある「マカベン」の情報をお借りしました...

フロントエンド

ブログで使えるschema.orgの構造化データマークアップまとめ

以前schema.orgの基本的な書き方の記事を書きましたが、今回はそれをしようしてブログを構造化データマークアップする場合の書き方です。プロパティはたくさ...

フロントエンド

今後のSEO対策！schema.orgで構造化データマークアップの基本！

今回「構造化データマークアップ」について意識してブログをつくってみました。構造化データマークアップをするとGoogleが検索結果をリッチスニペット表示し...

フロントエンド

jQueryで文字列を分割したり、特定の文字以降を削除する

jQueryを使用して特定の文字で区切る方法です。 また、、特定の文字列から後ろを削除したり、特定の文字以外の文字列の取得方法もご紹介します。 文字列の分...

フロントエンド

mapに複数のマーカーを立てる - Google maps API -

Google maps APIを使ってmap上にマーカーを立てる方法です。 mapを表示するまでは前回の記事をみてください。 今回マーカーを立てるやりかたとして、テンプレ...

フロントエンド

mapを表示してみる - Google maps API -

Google maps APIの実相手順のAPIキーの取得から、mapを表示するまでです。 APIキーの取得 Goolge APIsにアクセス。 タイトル横の「▼」から【プロジェクト...

フロントエンド

インライン要素の中にブロックレベル要素を書いちゃダメな話

最近陥りました。なんでリンク反応しないの！？って思ったら【インライン要素の中にブロックレベル要素を書いちゃダメ】でした。なので見直しがてら勉強し直...

フロントエンド

案外難しくない！gulpのインストール方法 for Mac

難しい！エラーが出る！とか思ってたgulpのインストールですが、よくよくエラー見てみたらプロキシの問題でした。 gulpのインストールさくっと思ってたより簡...