CDN版Vue.js + axios でさくっとAjaxしてみる
CDN版Vue.js + axios でさくっとAjaxしてみる Vue.jsはBabelなどを導入しなくても、scriptタグで読み込んで、わりと気軽に扱えるところも売りだったりします。 今回はVue.jsとaxiosを使用して、簡単なjsonファイルを読み込んで表示するということをしてみます。 投稿日2018年12月14日 更新日2021年06月27日 Vue.js v2.5.21 axios v0.18.0 を使用します。 index.html ベースとなるhtmlです。 https://cdn.jsdelivr.net からVue.jsとaxiosを読み込みます。 IEに対応するためにPromiseも読み込んでおきます。 メインとなるソースコードはsrc.jsに書きます。 後に作成するpriceコンポーネントを配置します。 index.html <!DOCTYPE html> <h
CSS3メディアクエリでテーブル組のカレンダーをレスポンシブで縦型に切り替える
CSS3メディアクエリでテーブル組のカレンダーをレスポンシブで縦型に切り替える HTMLでカレンダーを作成するときテーブルタグで作る事が多いと思いますが、レスポンシブでスマホサイズにした時は縦組みにする方法をご紹介いたします。 投稿日2017年04月28日 更新日2017年05月01日 HTML HTMLはこんな感じです。 html <div id="mini-calendar"> <div class="calendar-head"><p class="calendar-year-month">2017年5月</p></div> <table> <thead> <tr> <th class="calendar-sun">日</th> <th>月</th> <th>火</th> <th>水</th> <th>木</th> <th>金</th> <th class="calendar-sat
VagrantでローカルにPHP開発環境を構築してみた
Posted: 2013.11.13 / Category: 開発環境 / Tag: Laravel Vagrantとかいうのを使うと仮想サーバーが簡単に構築できるらしいのでやってみました。 VirtualBoxのダウンロード Vagrantを使うにはVirtualBoxが必要なので最初にインストールしておきます。 下記からWindowsやMac版などありますので、それぞれの環境にあったものをダウンロードします。 ここでは「VirtualBox 4.2.18 for OS X hosts」を使用します。 Downloads – Oracle VM VirtualBox Vagrantのダウンロード Vagrantをインストールします。 下記からダウンロードしましょう。ここでは「v1.3.4」を使用します。 Vagrant Downloads インストールが完了したらターミナルなどで下記コマ
jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種
jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種 ちょっと前まではマウスオーバーといえば画像の切り替えくらいでしたけど、最近ではアニメーションで切り替わるマウスオーバーも増えてきましたね。 ということでこの記事ではjQueryを使用して、わりと簡単に作れるマウスオーバーアクションをご紹介します。 投稿日2010年10月24日 更新日2012年03月05日 ナビゲーションはテキストにしないとseo的にあれだよとか言われていますが、コーポレートサイトではまだまだ画像を使用されていることが多いと思います。なので、今回は画像ナビゲーション限定です。（テキストでもあまり変わらないと思いますが……） 縦型+テキストタイプのナビゲーションはこちらの記事をご覧ください。 「jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種」 htmlと画像の準
jQueryでテーブル（table）を操作する小回り系コード5種
jQueryでテーブル（table）を操作する小回り系コード5種 テーブルを操作するのに大掛かりなことはプラグインがいろいろありますのでそちらを使うとして。 ここでは、わりと細かいことをjQueryでやってみます。 投稿日2011年08月31日 更新日2011年08月31日 html 始めに操作するべきテーブルを用意します。 ごくごく普通のテーブルですね。 html <table class="table01"> <tr> <th>商品名</th> <th>入荷日</th> <th>価格</th> </tr> <tr> <td>椅子</td> <td>2011-08-01</td> <td>¥ 2,800</td> </tr> <tr> <td>机</td> <td>2011-08-08</td> <td>¥ 6,800</td> </tr> <tr> <td>本棚</td
jQueryでjsonデータを扱ってみる【入門編】
jQueryでjsonデータを扱ってみる【入門編】 javascriptで外部のWebサービスを利用するデータ形式はjsonを使うことが基本なようです。 似たようなフォーマットとしてXMLがありますが、こちらはHTMLと同じマークアップ言語なのですんなり入っていける反面、jsonは少々わかりずらいといった先入観があったりするんじゃないでしょうか。 そこで入門編と題して（入門編しかない!）改めて基礎から勉強していけたらと思います。 投稿日2010年07月25日 更新日2016年04月26日 とにかくシンプルなjson jsonデータは基本は外部から読み込むことになりますが、練習なのでとりあえずjavascript内の変数内に直に書きます。 「:（コロン）」で区切ったキーと値を一組として、２組目を「,（コンマ）」で区切って記述していきます。 それらを{}で囲むことで一つのオブジェクトとして扱い
AjaxでもURLを更新して履歴を作れるHTML5のpushState試してみた
Posted: 2011.06.20 / Category: javascript / Tag: Ajax, HTML5 高速なWebアプリケーションを作成するにはAjaxがなくてはならないものとなりました。AjaxにはURLが更新されず、そのためブラウザの戻るも使用でません。 このような問題を解決するためにHTML5で追加されたのが「pushState」です。 pushStateを使用していないサンプル jQueryのloadメソッドを使用したコンテンツ切り替えの簡単なサンプルです。 page1.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>page1</title> <link rel="stylesheet" href="style.css"> <script type="text
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
可変グリッドレイアウトなWebデザイン集めてみました