jquery UI datepicker の基本vol2 – 前後月の日付表示、今日より前の日を選択不可などの日付カスタマイズ編 | Stronghold Archive
こんにちはToshikuraです。今回のTipsは【jquery UI datepicker の基本vol2 – 前後月の日付表示、今日より前の日を選択不可などの日付カスタマイズ編】です。すこし期間をあけてしまいましたが前回のjquery UI datepicker の基本vol1 – 設置方法から日本語化対応などからの続編です。ここでは何回かに分けて基本から少し発展したカスタマイズまでをメモしていこうかと思います。 アーカイブ vol1.設置方法から日本語化対応など vol2.前後月の日付表示、今日より前の日を選択不可などの日付カスタマイズ編 vol3.月の複数表示や選択日付の期間指定などの実装方法 vol4.カレンダーのインライン表示とインライン状態での期間選択 vol5.インライン状態での期間選択と選択期間のハイライトの実装 前後月の日付表示はカレンダー上に表示される前と後の月からま
【5パターン】画像を使わず CSS3 のみで作れる吹き出しを作ってみた – Pure CSS3 Balloons | Stronghold Archive
どうもこんにちは、Honma です。今回の Tips は CSS のみで作れる吹き出しのデモです。簡単なツールチップなどにも利用できるかと思います。 CSSのみの吹き出し 5パターン×4方向 CSS は長くなるので全てデモページに記載してあります。 吹き出しの仕組み自体は :before :after 要素に三角形や円を作ることで表現しています。 Balloon 4 がうまく表示されない場合は z-index による可能性が高いので、吹き出しを囲う container の 値を 1 にするなど各自調節してみてください。 また、簡単に吹き出しを作るジェネレーター もありますので参考までに！ 以上になります。
Google Map api v3 スクロールでの拡大縮小の無効やドラッグの無効等の実施方法 | Stronghold Archive
どうもこんにちは。Toshikuraです。今回のTipsは【Google Map api v3 スクロールでの拡大縮小の無効やドラッグの無効等の実施方法】です。Googleマップをウィンドウ幅に合わて使う際、地味に困るのがスクロールで地図が反応してしまう事です。今回はマウススクロールでの反応を禁止する方法〜その他たまに禁止させる項目をまとめておきます。 実装方法 マウススクロールでの拡大縮小を無効化 実装方法はmapOptionsの指定に禁止したい項目を追加するだけと至ってシンプルです。マウススクロールの禁止は【scrollwheel: false,】にて実装されています。 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="
便利ツールいろいろ – ブログにHTMLを貼付けるための変換、文字数カウント、CSS3アニメーションコピペ用、正規表現表 | Stronghold Archive
便利ツールいろいろ – ブログにHTMLを貼付けるための変換、文字数カウント、CSS3アニメーションコピペ用、正規表現表 どうもこんにちは。今回のTipsは【便利ツールいろいろ – ブログにHTMLを貼付けるための変換、文字数カウント、CSS3アニメーションコピペ用、正規表現表 】です。今まで「ブログにHTMLを貼付けるための変換」等はブックマークで色々なサイトへ訪問していました…少し前からそれ自体面倒になってしまい…個人的にまとめていました。自分専用にとっておいたのですがチーム内での共有の機会もありましたので公開です。 ブログにHTMLを貼付けるための変換 – リンク よくあるHTMLの実体参照変換です。HTMLのコードをブログやメール、解説ページに貼れるように変換します。一応双方向に変換できるようにしてあります。 文字数カウント – リンク 文字数カウントです。スペースのあり/なし、改
SEO基礎 ソーシャルメディアでシェアされたとき思い通りの表示をさせる OGP (Open Graph Protocol) のおさらい | Stronghold Archive
SEO基礎 ソーシャルメディアでシェアされたとき思い通りの表示をさせる OGP (Open Graph Protocol) のおさらい こんにちは Honma です。今回の Tips は最近では常識となった OGP (Open Graph Protocol) のおさらいです。 OGP とはOpen Graph Protocol の略で、各種ソーシャルメディアにシェアされた際のタイトルや説明、サムネイルなどをあらかじめ指定しておけるプロトコルです。 head 内に metaタグを打つだけで実装できるので、面倒くさがらず設定しておくといいかと思います。 OGP 基本項目 <meta property=”og:title” content=”現在のページ名” /> <meta property=”og:type” content=”オブジェクトのタイプ” /> <meta property=”o
Modernizrの基本的な使い方 – ブラウザの機能にあわせて簡単にJS,CSSで分岐させる方法 | Stronghold Archive
どうもこんにちは。Toshikuraです。今回のTipsは【Modernizrの基本的な使い方 – ブラウザの機能にあわせて簡単にJS,CSSで分岐させる方法】です。つい先日公開した「jQuery CSS3 transform及びtransitionが動作するかどうかの判別方法 – CSS3アニメーションとjQueryアニメーションの使い分け」という記事でも少し書きましたが、Modernizrはブラウザの機能に併せてJSやCSSを簡単に分岐させる事ができる便利なライブラリです。いまさら!?と言われてしまえばそうなんですが…汗。復習の意味をこめて改めて基本的な部分からメモしていきます。個人的にはHTML5のCANVASが使用できるかの判別やSVGが使えるかの判別で使用する事があります。 はじめに まずは公式ページでライブラリをダウンロードしてきましょう。どの判別/分岐を利用したいか選択する事
意外と知られていない Google Fonts の便利な小技 – Tricks of Google Fonts | Stronghold Archive
こんにちは Honma です。今回は人気の Google Fonts で使える意外と知られていない便利な小技の紹介です。 1行で複数のフォントをインポートする書き方 書き方はとても簡単で | (Vertical bar) でフォント名を区切るだけです。例えば Tangerine と Inconsolata を利用したい場合以下のような 書き方になります。 <link href=’https://fonts.googleapis.com/css?family=Tangerine|Inconsolata’ rel=’stylesheet’ type=’text/css’> また、CSS3 の @import で使う場合も同様です。 @import url(https://fonts.googleapis.com/css?family=Tangerine|Inconsolata); 詳しくは こ
javascript基礎 条件式の復習 3項演算子、if文 – （補足）jQuery isを使った便利な分岐例 | Stronghold Archive
javascript基礎 条件式の復習 3項演算子、if文 – （補足）jQuery isを使った便利な分岐例 どうもこんにちは。Toshikuraです。今回のTipsは【javascript基礎 条件式の復習 3項演算子、if文 – （補足）jQuery isを使った便利な分岐例】です。何を今更と言われてしまいそうですが…復習の意味も込めて改めて書いておきます。一部蛇足ですがjQuery isを用いたif文例もメモしておきます。 条件式（if） 一番見慣れているだろうif文です。例ではAが80以下の時とそうでない時の分岐をしていきます。 if(A <= 80){ // 80以下の場合実行}else{ // それ以外の場合実行}[/js]jQuery isを使う場合上の例ではAが特定の値だった場合○○するという式でしたが、もう少し具体的に特定要素にclass名【on】が付いていた場合を条件
jQuery 配列の中に特定の値や文字が存在するかを判別する方法（IE7以降でも動作） – javascript、array.indexOf()の代替として | Stronghold Archive
jQuery 配列の中に特定の値や文字が存在するかを判別する方法（IE7以降でも動作） – javascript、array.indexOf()の代替として どうもこんにちは。Toshikuraです。今回のTipsは【jQuery 配列の中に特定の値や文字が存在するかを判別する方法（IE7以降でも動作） – javascript、array.indexOf()の代替として】です。Arrayの中に指定・特定した値や文字が存在するかを判別し、そのインデックス番号を返します。 コード var a = new Array(‘1′,’いち’,’html’,’jQuery’,’JQUERY’,’red’,’red’,’green’); console.log($.inArray(‘html’, a)); 例ではコンソールに【2】が出力されます。配列内に該当がない場合は【-1】となります。不要かとは思い
CSS3でradioボタン＆checkboxにオリジナルデザインを適用する方法（スマートフォン用） | Stronghold Archive
こうなります。（Chromeあたりでご覧下さい） CSS 指定したスタイルはこんな感じです。 input[type=”radio”]{ -webkit-appearance: none; width:15px; height:15px; border:2px solid #19283C; border-radius:15px; background:transparent; opacity:0.5; width:100%; } input[type=”radio”]:checked{ background:#19283C; opacity:1; } input[type=”checkbox”]{ -webkit-appearance: none; width:15px; height:15px; border:2px solid #19283C; border-radius:2px; ba
jQuery 兄弟要素の取得と操作 – 自分以外の兄弟、自分以降の兄弟、自分以前の兄弟等 | Stronghold Archive
どうもこんばんは。今回のTipは【jQuery 兄弟要素の取得と操作 – 自分以外の兄弟、自分以降の兄弟、自分以前の兄弟等】です。兄弟関係は出現頻度が高いのでメモしておきますね。他にも色々実装する方法がありますが以下の方法が一番シンプルかと思います。 まずは自分以外の兄弟要素を操作する方法です。兄弟関係の中から一つクリックで実行としています。自分以外を対象とする場合【siblings()】を使用します。 HTML（共通） <ul id="ex"> <li>list</li> …. <li>list</li> <li>list</li> </ul> JS $(‘#ex’).children().click(function(){ $(this).siblings().css({‘background’:’#007374′}); $(this).css({‘background’:’none’
jQuery 特定文字列や特定要素の削除及び置換方法 | Stronghold Archive
どうもこんにちは。今回のtipは【jQuery 特定テキストや特定要素の削除方法】です。ちょっとした時に使える方法ですので覚えておいても損は無いかもしれません。 要素の削除 jQueryを使った要素の削除方法、jQueryの読み込みをお忘れなく。 <script src="js/jquery-1.X.X.min.js"></script> 以下の例では【target】というIDを持っている要素を削除します。 $(function(){ $(‘#target’).remove() }); 特定テキストの削除及び置換 jQueryを使った特定テキストの削除方法。以下の例では【target】というclassを持っている要素の中にある【rainbow】というテキストを削除します。 $(function(){ $(‘.target’).each(function(){ var txt = $(thi
css基礎 レスポンシブデザインについて | Stronghold Archive
はじめまして、こんにちは。新メンバーのLanともうします。まだまだ、デザイン・技術ともに未熟なのですが勉強・復習もかね書かせていただきますのでよろしくおねがいいたします！ 早速ですが、今回のtips題名の通り・・・ 今更感漂います【レスポンシブデザイン】についてです。 私も、結構前からその存在は知ってはいたのですが、なんとなーくしか理解していませんでしたので、復習という意味も込めて執筆させていただきたいと思います！！ レスポンシブデザインとは、１つのファイルでどんなデバイスにも対応できる手段のことをいいます。 初めは、リキッドデザインと似ていると思いますが、違いはこちらになります。 なお、レスポンシブデザインについて分かりましたので早速構築方法に移りたいと思います。構築方法は、主に３種類です。 ①CSS3のMedia queryを使う 以前のmedia queryについての記事はこちら ②
iPhoneサイトでフォーム送信ボタンにオリジナルデザインを適用する方法 – CSS3 appearanceプロパティ | Stronghold Archive
こんにちは。お久しぶりです。daikuharaです。今回は【iPhoneで送信ボタンにオリジナルデザインを適用する方法】についてです。 フォームをスマホ対応しているとき、ばっちりsubmitボタンのデザインも設定したはずのに、あれれ・・・？ iPhone実機で確認すると、角丸のグラデーションのかかったボタンに変更されてしまいますよね。 ↓↓↓ ？？？ これをキャンセルしてオリジナルの送信ボタンを適用する方法がこちら。 input[type=”submit”] { -webkit-appearance: none; } これでiPhoneで見ても、上のsubmitボタンはくっきりオレンジ一色で表示されているはずです。 -webkit-appearanceとは何なのかというと、ブラウザが標準で設定している振る舞いを指定できるCSS3のプロパティのようです。 フォームまわりの設定が色々指定できる
jQuery テキストをタイピング風に一文字ずつ表示したり文字ごとに色を変える方法。文字列を一文字ごとにspanで囲む | Stronghold Archive
jQuery テキストをタイピング風に一文字ずつ表示したり文字ごとに色を変える方法。文字列を一文字ごとにspanで囲む どうもこんにちは。Toshikuraです。今回のTipsは【jQuery テキストをタイピング風に一文字ずつ表示したり文字ごとに色を変える方法。文字列を一文字ごとにspanで囲む】です。タイピング風に一文字ずつ表示したり…文字ごとに色を変えたりといった動作はまれに使いたくなるのでメモしておきます。 文字列を一文字ずつ<span>で囲む 基本概念は至ってシンプルです。一文字ごとに<span>で挟んでいき、全て透過0%に設定。その後最初の<span>からだんだんとフェードアニメーションを掛けていきます。 共通HTML <p class="tgt">abcdefgh…..</p> CSS .tgt {opacity: 0;} .tgt span{opacity: 0;} JS（
jQuery 文字間スペースを置換して特定要素で囲んでテキストデザイン + テキストをフリップアニメーションさせてみる。 | Stronghold Archive
jQuery 文字間スペースを置換して特定要素で囲んでテキストデザイン + テキストをフリップアニメーションさせてみる。 どうもこんにちは。Toshikuraです。今回のTipsは【jQuery 文字間スペースを置換して特定要素で囲んでテキストデザイン + テキストをフリップアニメーションさせてみる。】です。ちょっとタイトルだと想像できないとは思いますが…結構面白い効果及びデザインができるので記事化しておきます。ちなみにNYに行った際、TVCMでこの表現が使われていました。もしかしたら今後役に立つかもしれません。 実装方法 HTML <p class="flipping">Grumpy wizards make toxic brew for the evil Queen and Jack.</p> JS $(function(){ $(‘.flipping’).each(function(
jQuery 外部ページでもスムーズスクロールを実装する方法 – 遷移先ページの任意IDへスムーズスクロール | Stronghold Archive
どうもこんばんは。Toshikuraです。今回のTipsは【jQuery 外部ページでもスムーズスクロールを実装する方法 – 遷移先ページの任意IDへスムーズスクロール】です。通常のスムーズスクロールですとページ内にアンカーを設定しjQueryにて高さ取得&スクロールという手順ですが、本記事ではページ遷移と組み合わせ遷移後に特定箇所へスムーズスクロールさせます。基本的な部分のみですのでこのままでは微妙です、参考程度にご活用ください。 実装方法 実装方法は至ってシンプルです。まずは遷移後にスクロールするサイト（ここではB.html）へのリンクをA.htmlに記述します。 HTML（A.html） <a href="B.html?id=white">LINK</a> <a href="B.html?id=black">LINK</a> <a href="B.html?id=red">LINK<
38選（5872個）PSD,EPS等のフリーアイコン素材のまとめ【Part1】37(5872+) Free PSD,EPS,PNG Icons | Stronghold Archive
38選（5872個）PSD,EPS等のフリーアイコン素材のまとめ【Part1】37(5872+) Free PSD,EPS,PNG Icons どうもこんばんは。Toshikuraです。今回のtipsは【38選（5872個）PSD,EPS等のフリーアイコン素材のまとめ Part1 】です。5872個!?ちょっと面食らってしまう量ですが…これだけあればもう困らなそうです。+αはカウントしていませんので実際は5872個以上あるかと思います（ごめんなさい…土曜に何やってるんだと心が折れました）。さすがに量が量なので2回に分けて記事化しました。 350 Pixel Perfect Icons Download Site FileType : PSD [350 icons] The Entypo Pictogram Suite Download Site FileType : EPS,PDF,PSD
簡単！CSS3でアニメーションを実装する方法【vol.1】 – とりあえずはじめの一歩。 | Stronghold Archive
どうもこんばんは。Toshikuraです。今回のTipsは【簡単！CSS3でアニメーションを実装する方法【 vol.1 】 – とりあえずはじめの一歩。】です。CSS3アニメーションは、jQueryアニメーションよりも描写が美しくかつ記述も簡単ですので、全5回に分けてステップアップ式にメモしておきます。すこし長いですがお付き合い頂けましたら幸いです。 【vol.1】- とりあえずはじめの一歩。 【vol.2】- ホバーでアニメーション実行 & 複数アニメーションの組み合わせ方法 【vol.3】- イージングを生成してくれる便利なジェネレーター 【vol.4】- クリックでアニメーションを実行させる方法（複数同時実行例含む） 【vol.5】- ちょっと複雑なアニメーションを作ってみる。 【vol.6】- CSS3アニメーションで動作するjQueryスライダーを作ってみる 【vol.7】- j
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPress リビジョン機能を無効にしたりリビジョン数に制限を付ける方法 | Stronghold Archive