サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
Switch 2
www.gravity-works.jp
iOS 12までのiPadはユーザーエージェントに文字列"iPad"が含まれているかで判別できました。 しかしiOS 13以降のiPadのSafariには「デスクトップ用Webサイトを表示」という機能が実装されており、それがオンになっていると（デフォルト）ユーザーエージェントに"iPad"の文字が含まれなくなるようです。 そのためユーザーエージェントでの分岐に追加をする必要があります。 var ua = window.navigator.userAgent.toLowerCase(); if(ua.indexOf('ipad') > -1 || ua.indexOf('macintosh') > -1 && 'ontouchend' in document){ // iPad用の処理 }else{ // それ以外の端末用の処理 } "macintosh"という文字列が含まれており、タッチ操
ある条件でaタグを無効にする必要がありまして、 JavaScriptで出来そうだけど、さてどのようにしようかな・・ と考えつつ検索していたところ、なんとCSSで実現できるとの記事を発見。 YoheiM .NET [CSS] CSSでJavaScriptのClickイベントやリンククリック時の動作などを禁止する方法 --------------------------- pointer-events : none; --------------------------- 上記のスタイルを指定することで、 aタグの動作や JavaScript の onClick 等のイベントを無効にすることができます。 今回はレスポンシブなサイトで、 ・大画面の時はサムネ + LightBox ・スマホ等の小画面では画像100%表示でクリックなし という用途で使いました。 レスポンシブ案件が今後増えれば、さら
テキスト（複数行）のカスタムフィールドを出力するときの、 改行やpタグの制御についてです。 まず、テキストフィールドには下記のように入っているとします。 あいうえお かきくけこ さしすせそ これを改行を活かして出力するには、 下記のようにします。 ※本文の「改行を変換」と同様になります <$mt:customField convert_breaks="1"$> 出力 -------------------- <p>あいうえお<br /> かきくけこ<br /> さしすせそ</p> -------------------- 逆にpタグやbrタグが入らないようにするには、 convert_breaks="0" とします。 <$mt:customField convert_breaks="0"$> 出力 -------------------- あいうえお かきくけこ さしすせそ -------
複数並べる場合は float でもいいし、display:block; を指定して横幅を決めた div などで囲ってもいいと思います。
first-childは、IE8でもきくのですが、 nth-child(n)はきかないのですよねー。 これが使えたらすごく便利なのに。 ということで調べてみました。 いろいろ適応させる方法はあるようなのですが、使いたい部分がサイトの共通部分で その案件が、大きめの案件で既に納品しているページもあったので ヘッターの記述に新たに何か追加したくなかったことと、 はずかしながら、自分はjsの理解度が低いので、CSS内で解決という条件で探しました。 下記ページのハックが簡単でわかりやすかったです。 CSS: Internet Explorer 7-8 nth-child hack これを ------------ .test ul li:nth-child(3){ background: yellow; } ------------ こう書く ------------ .test ul > *:f
WEB制作にパララックス効果を取り入れるべく、いろいろなJSを試しています。 まだ種類は少ないですが、下記は弊社で制作したサンプルです。 ■Jarallax.js http://www.jarallax.com/ 要素を動かすのに特に強いJSです。 1つ1つの要素を細かく動かせて、記述もわかりやすい。 ただし、背景を動かしたりワイプするような動きは苦手なようです。 ・サンプル1 ・サンプル2 ・サンプル3 ■Parallax-JS https://github.com/razorfish/Parallax-JS http://razorfish.github.io/Parallax-JS/（デモ） 初期状態でパララックスの動きが設定されており、 背景が動くだけのような簡単なものならほぼクラスを当てるだけで作れる。 画像や文字などの要素も動かせるが、 動きを細かく設定するのは苦手。 ・サンプ
久しぶりにJavaScriptを書いていて少し迷ったところ。 setInterval()やsetTimeout()についてです。 var sample = setInterval( intervalEvent, 1000); 例えば上記のようなsetInterval関数で、 実行する関数「intervalEvent」に引数を渡したい場合、 var sample = setInterval( intervalEvent(data1), 1000); と普段通り書いても上手くいきません。 次のように書くことで引数を渡すことができます。 1.無名関数内で改めて関数実行 無名関数の中でなら普段通りの記述ができます。 var sample = setInterval( function(){ intervalEvent(data1); }, 1000); 2.文字列で指定 「'intervalEve
最近はIE6、7に対応させることが減ってきました。 IE8以上を基準に制作し、IE6、7では「できるだけ」再現するといった 対応をすることも多いです。 そういうとき、ie9.jsを良く使っています。 このJSがどういうものかというと、 旧IEでは本来使えない ・position:fixed; ・max-width などを再現し、IE9の挙動に近づけるというものです。 旧IE対応が前提の案件はもちろん、 手間をかけるほどではないけど、少しでも再現率を・・という場合にも すぐに実装できて便利です。 ■使い方 <head></head>内に以下を読み込むだけ。 ---------------------------- <!--[if lt IE 9]> <script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></sc
JSの実行タイミングとして「ページの読み込みが完了したとき」がありますが、 いまだに忘れて調べなおしてしまうのでメモです。 ■HTMLコードを読み込み終わった時点で実行 要jQuery。タイミング的によく使います。 ------------------------------------------------- $(function(){ // 処理 }); または $(document).ready(function(){ // 処理 }); ------------------------------------------------- ■すべて読み込んだ後に実行 画像などもすべて読み込んだ後に実行。 ------------------------------------------------- window.onload=function(){ // 処理 } -------
すべての画像が読み込まれた後にスクリプトを実行する場合は 前回のJS：ロード完了時に実行でほぼ足りてしまうのですが、 指定した画像が読み込まれたときに実行する場合や、 後から画像を読み込む場合には不十分です。 画像ありのRSSを読み込もうと思い、 -------------------------------------------------------------------- $("#rssList img").load(function(){ // 処理 }); -------------------------------------------------------------------- と書いたのですがブラウザによっては上手くいかず。。 ↓こちらのサイトでぴったりのことが記事にされていましたので 参考にさせていただきました。 jqueryで画像のロード完了後に実行 -
※14/10/8 追記 この記事で紹介している方法ですが、別ドメインのページを表示させようとすると 正しく動作しませんでした。 JavaScript自体が別ドメインのページ操作に対応しておらず、 高さが取得できないようです。 ただ、「JS クロスドメイン 高さ取得」等で検索すると多数ヒットしますので、 それらを上手く組み込めれば実装できるかもしれません。 よくお世話になっているFancybox。 画像と違い、type:iframeでHTMLを表示させるときはフレームサイズの自動調整ができません。 ただし表示完了時に関数を呼び出せるので、 それを利用してフレームサイズを変更する方法が紹介されていました。 jQuery and Fancybox: How to automatically set the height of an iframe lightbox $("#sample").fan
変数名を動的に指定できる、 Flashでは配列アクセス演算子と呼ばれるものがあるのですが、 JSでこれにあたるものはどれだろう？と思い 探してみるもなかなか見つかりません。 最終的に、eval() を使うことで似たようなことができたので 忘れないようにメモしておこうと思います。 eval() は中の式を評価するので、 例えば名前が連番になるような変数を作るなら for(i=1; i<=5; i++){ eval("var sample_"+ i +";"); } 上記のように書くことで 「sample_1」～「sample_5」の変数を作成することができます。
以前このグラビカでも「DD_belatedPNG」を紹介する記事を紹介していました、 pngをIE6に対応させるためのJS「DD_belatedPNG」について注意点です。 CSSでマウスオーバーを表現させたい場合、 通常時とオーバー時の画像をつなげて、aタグの背景に指定し、 hoverで画像をスライドさせる方法があります。 png画像を使用した場合、IE6で正しく表示されないため DD_belatedPNGを使用します。 が、、、、 上記のような場合、aタグの縦幅（height）が、奇数だと、 IE6で、オーバー画像が1px余分にスライドしてしまい、 画像がずれたような表現になってしまいます。 背景の位置指定では調節できないようです。 なんでか全くわかりませんが、 縦幅を偶数にすることで解決できます。 きみのために入れてるのにわがまま言うなよ。。。（;´_`;） ハァ・・
このページは、gravity-worksが2012年2月22日 10:23に書いたブログ記事です。 ひとつ前のブログ記事は「テキストをボックスの縦中央に揃える」です。 次のブログ記事は「上下中央揃えでの落とし穴」です。 最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。 株式会社グラビティワークス（gravity works inc.） 東京都新宿区西新宿4-29-2 ヴィエッティ西新宿 2階 TEL. 03-3375-8230 ALL RIGHTS RESERVED.
アンカーリンクを使って特定のIDまでスクロールさせるのは簡単に出来ますが、 この場合、リンク元で指定しなければなりません。 リンク元で指定できない場合でも、アクセス時に自動で移動する必要があり探しました。 検索では「window.scrollTo」などがよく出てきますが、 数値で指定するため移動させたい位置の上にテキストなどがあると使用できません。 なんとかCLASSやIDで指定できないか探して見つけました。 すごく簡単で使いやすいです。 下記の記事を参考にしています。 >リンク先ページの指定位置にスクロールで移動 --------------- <script type="text/javascript"> $(function() { var n = window.location.href.slice(window.location.href.indexOf('?') + 4); v
繁体字、簡体字をしようするようになってきたので、 使用可能なMac上のフォントのまとめ。 Mac OS X 繁体字、簡体字フォント 【地域】 繁体字‥‥台湾・香港・マカオ などで使用 簡体字‥‥北京・上海・シンガポール などで使用 【フォント】 繁体字‥‥ Apple LiGothic Medium.dfont Apple LiSung Light.dfont LiHei Pro.ttf BiauKai.dfont LiSong Pro.ttf 簡体字‥‥ Hei.dfont Kai.dfont STHeiti Light.ttf STHeiti Regular.ttf STFangsong.ttf STKaiti.ttf STSong.ttf ※上記のリストに含まれているフォントの一部には、非ローマ文字を含むファイル名が使用されています。これらのフォントは、Finder には次のようにフ
Dreamweaverのサイト管理で設定をしてしまうと HTMLデータの各フォルダに「_notes」というフォルダが作成されてしまいます。 出来てしまうものだとあきらめていましたが、 データを納品する場合に、ひとつひとつ消すのが結構手間でした。 サイトの管理の簡単な設定で、つくらないようにすることができます。 （1）サイト管理のデザインノートを開く。 （2）デザインノートの保持のチェックマークを外す。 ※初期設定ではチェックマークが入っています。 さらに既に出来てしまった「_notes」フォルダを消すこともできます。 （1）サイト管理のデザインノートを開く。 （2）「デザインノートのクリーンアップ」ボタンをクリック
webサイトで明朝を指定することはあまり多くないと思いますが、 それでもたまに明朝にしてほしいという希望がくるたびに なんとかアンチエイリアスのかかったフォントを使えないものかと思っていました。 Macはヒラギノ明朝がありますが、Windowsは標準があれなので・・ 他に標準搭載されている明朝フォントもないし・・と諦めかけていたところ、 こちらにとても参考になる記事がありました。 Creazy! http://creazy.net/2007/08/windows_anti_alias.html なんと、HG明朝E系は13pxからアンチエイリアスがかかるそうです。 OS標準ではありませんが、HG明朝はMicrosoft Officeが入っているPCならば インストールされていますので、ほとんどの場合で表示できます。 少なくとも、指定しておく価値はあります。 これで今後は、明朝フォントも多少気
↑のように、大枠となる div の中に複数の div を入れ、 float を使って並べるときの注意点です。 ★HTML ＜div id="C"＞ ＜div id="A"＞テキストなど＜/div＞ ＜div id="B"＞テキストなど＜/div＞ ＜/div＞ ★CSS #C{ width:300px; padding:20px; } #A{ width:140px; float:left; } #B{ width:140px; float:right; } このようにするとします。 height は中に入る要素に合わせて変化させたいので 指定しません。 しかし、これで実際にみてみると、 このようになってしまいます。 こういう場合どうすればいいかというと、 div:C に overflow:hidden; を指定することで解決することができます。 #C{ width:300px; padd
LightBox風に画像やswf、webページなどのコンテンツを表示できる jQuery Pluginの1つとしてFancyboxがありますが、 オプションを日本語でまとめているサイトが見当たらなかったので 自分用に翻訳してみたものをメモしておこうと思います。 (2016.7.19) 訳せてないものは原文入れました。 以下、すべてではないですが（おまけに空白もあります） このようなオプションがあります。
上図のような表をdlで作成する場合、 今まではdt、ddにきっちりwidthを指定し、 それぞれにborder-bottomを指定。 dtにfloat:left;、ddにfloat:right;を指定するという方法でやっていました。 でも、「う」の段のように、ddのテキストの行数がdlよりも多いと border-bottomがずれてしまいます。 ならborder-top指定すれば？と思いますが、 「え」の段のように、逆にdtのテキストの行数が多いと 「お」の段が回り込んでしまいます。 そうすると、一段ずつdlにするというような 何とも不細工なソースになってしまっていました。 調べてみると、下記の様にすればで崩れずソースもきれいなままです。 それは、dtにwidthとfloat:left;を指定border-bottomの指定はナシ。 ddには、dtのwidth分のpadding-leftと
ブラウザ毎のハックはCSSで簡単にできますが、 OSごとにスタイルを変えるのは、複数のCSSを用意して振り分けるしかないと 思っていました。 ですが今回はCSSの記述を増やしたくなく、 ダメもとで探してみたところ やたらと便利なJSが見つかりました。 CSS Browser Selector CSSに簡単な記述を追加するだけで、 ブラウザ、OSを指定して適用させることができるJSです。 具体的には、 .win body { background:#000; } で Windowsのみに、 .mac.ie7 body { background:#000; } で MacのIE7のみにスタイルを適用できます。 ダウンロードはこちらのサイトから。 http://rafael.adm.br/css_browser_selector/ 今回は試していませんが、 相当な数のOS、ブラウザに対応している
スクリーンセーバー／ブログパーツ企画制作『YOKAN CLOCK』 グラビティ・ワークスがスクリーンセーバーとブログパーツを作成しました。 その名も『YOKAN CLOCK』。 企画から始め、制作と撮影を含め、制作期間は1週間。 虎年の2010年に魂のこめて自社コンテンツとしてリリース！ 撮影時の羊羹ならではのトラブルを克服して作成した『YOKAN CLOCK』のスクリーンセーバー・バージョンとブログパーツ・バージョンをご自由にダウンロードしてお楽しみください。（もちろん価格は無料です）
JavaScript（jQuery）を使って画像をフェードさせていたところ、 フェード中のいくつかの画像に白い点々が出ているのを見つけました。 （ディスプレイのドット落ちのような・・） 調べてみたところIEのバグのようです。 いろいろな方の記事で書かれているのを見ると、 発生条件は以下のような感じ。 ・JavaScript の filter:alpha(opacity); を使用 ・JPEG画像を使用 ・#02050a の色を使用 要するに、#02050a を含むJPEG画像をJSで透過させると、 #02050a の箇所だけが完全に透過JPEGになってしまう、 というバグのようです。IEのみ。 解決策としては 1. PNG画像などにする 2. #02050a を使わない 3. 背景色を #02050a にする となりますが、 何故かPNG画像にしただけでは直らず・・ 結局、PNG画像 ＋
最近思わぬところで、Tween クラスというモノの存在を知りました。 クラスに関してはあまり使うことがなく、便利らしいと知りつつもスルーしていたのですが・・ MC の移動が簡単にできると知って、少し気になってきました。 この Tween クラスの何が便利なのかというと、たとえば、 通常 onEnterFrame を使って座標を変化させるところを、開始座標と終了座標を入れるだけで動かせたりします。 しかも、パラメーターで動作時間やイージングの設定などもできます。 ■使い方 まずは準備として、フレームに以下の2行を記入します。 import mx.transitions.Tween; import mx.transitions.easing.*; これで Tween クラスが使えるようになりました。 次に実際に MC を動かしてみます。 Tween クラスを使用する場合、以下のように書きます。
■MT4.x / MT5.x（2012/1/10確認） MTでのブログ内検索についてです。 ブログの検索フォームからキーワード検索を行った場合、検索の対象となるのは ・タイトル ・本文 ・続き ・キーワード の4つです。 書き出されたテキストが検索対象になるわけではありません。 検索対象を新しく増やしたい場合、下記のサイト様で配布されているプラグインを使用することで、カスタムフィールドを検索対象にすることができます。 ■Technology on Information MT > CustomFieldsSearch こちらで配布されている「CustomFieldsSearch」を使用します。 簡単に説明しますと、 1.ダウンロードしたデータをプラグインフォルダにアップします。 管理画面を開いている場合は再ログイン。 2.MT管理画面から「デザイン」＞「ウィジット」から「検索」テンプレート
前回の続きです。 2.データをMovable Type形式に整形する 登録するデータの準備ができたら、次はMTにインポートできるようにデータを整形します。 まずMT形式がどういうものかですが、適当な記事を作って「記事のエクスポート」をすると以下のような形で吐き出されます。 ---------------------------------------------------------------------- AUTHOR: gravity TITLE: 記事タイトル BASENAME: 01 STATUS: Publish ALLOW COMMENTS: 0 CONVERT BREAKS: 0 ALLOW PINGS: 0 PRIMARY CATEGORY: カテゴリー1 CATEGORY: カテゴリー1 CATEGORY: カテゴリー2 DATE: 11/25/2009 03:33:
SWF内に記述するパスは、デフォルトの状態だと そのSWFを貼りつけるHTMLからのパスにしなければなりません。 始めた頃はこれに相当悩まされました。。 もうすっかり慣れてしまったのですが、 SWFからの相対パスにするのは とても簡単だということを今更知りました＾＾； 方法は、SWFを読み込むためのソースにパラメータを追加するだけです。 たとえば以下のようなソースの場合、 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="300" height="200"> <param name="movie" value="mai
div 内の要素を下揃えにする方法です。 大枠の div を「A」、そのなかで下揃えにしたい要素を div で囲って「B」とします。 ■ divA の設定 ・height を指定する ・position:relative; と入れる ■ divB の設定 ・position:absolute; と入れる ・bottom:0; と入れる（ピクセルで下からの高さを指定できます） これで、divA 内で divB を下揃えにすることができます。
次のページ
このページを最初にブックマークしてみませんか？
『東京都新宿区のホームページ制作会社“グラビティ・ワークス”～gravity works inc.』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
