usako1124のブックマーク - はてなブックマーク

初心者も分かる！レスポンシブ・デザインの作り方

レスポンシブサイトのHTML、CSSの作成方法を、初心者にも分かるように説明。サンプルコード、テクニックなど。

usako1124 2017/04/03

rwd

リンク

初心者でも分かる！な、jQueryの「TOPへ戻るボタン」の作り方

ページをスクロールすると右下に出てくる「TOPへ戻るボタン」の作り方を、jQuery初心者にも分かるよう説明しています。

usako1124 2016/02/26

jquery

リンク

初心者でも分かる！モーダルウィンドウの作り方

特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。

usako1124 2015/07/16

jquery
css

リンク

JavaScriptで位置情報を取得する方法(Geolocation API)

ユーザーの現在位置を取得現在位置を取得するサンプルデモを見るには、下記ページにアクセスして下さい。このブログがあなたの位置情報を取得してもいいか、という確認が表示されるので、許可すると、あなたの現在位置(緯度、経度の座標)の取得を開始、表示します。サンプルデモを見る現在位置を取得するには、ユーザーのブラウザが、Geolocation APIという機能に対応している必要があります。Geolocation APIとは、簡単に言うと、端末の位置情報をやり取りするシステムです。GPSに対応しているスマホだけでなく、現在位置を設定できるデスクトップPCでも利用可能です。判別方法は簡単です。Geolocation APIに対応している端末の場合、navigator.geolocationというオブジェクトが最初から存在するので、これの有無で判別すればいいだけです。 JavaScript // G

usako1124 2015/07/16

リンク

初心者でも分かる！なGoogle Analytics APIの使い方

プロジェクトを作成する続いて、プロジェクトを作成します。プロジェクトとは？プロジェクトとは、Googleが提供する様々なAPIを使った様々なアプリケーションの1つのまとまりです。ウェブサイトのことをイメージすると分かりやすいかもしれません。例えば、私の場合は「Syncer」というプロジェクトを作って、そのプロジェクトの中で、Google Analytics APIやGoogle Maps APIを利用するわけです。…ピンと来ない場合も、作業だと思って進みましょう。作成の流れ「プロジェクト」をクリックするそれでは、早速、プロジェクトを作成してみましょう。左上部分にある「プロジェクトを作成」というボタンをクリックして下さい。プロジェクト名を入力するプロジェクトの作成はとても簡単で、ただ、半角英数字と一部記号で名前を決めるだけです。「プロジェクト名」の項目に好きな名前を入力して下さい。通常

usako1124 2015/06/22

リンク

スマホのUI向上!?ニョローっとGoogle Mapsを広げるJavascriptを作ってみたよ！

スマホのUI向上!?ニョローっとGoogle Mapsを広げるJavascriptを作ってみたよ！ 2014.07.27(Sun) 18:30 WEB制作 PC、スマホで表示を分けるブログ(ホームページ)を作っている時に悩みの種になるのがGoogle Mapsの埋め込み地図。スマホで大きく表示させるとスクロールしにくくなるし、小さく表示させると地図が見えにくくなる…。けっこう厄介なんですよね。「結局、直接Google Maps見た方が早いや」というように、何かと形骸化しがちなページ内の埋め込み地図。少しでも実用的になったらなーと思い、ニョローッと表示範囲を広げることができるボタンを追加してみたので紹介します。 1ボタンをクリック(タッチ)すると地図が広がりますということで、サンプルはこんな感じです。地図の下にあるボタンをクリック(タッチ)すると、埋め込み地図が下にニョローっと広がります。