知らなかった…CSSでテキストの両端揃えが普通にできた | スターフィールド株式会社
しか、方法がないと思っていました。 この方法を使った場合、テキストの右側は文章によって がたがたになってしまったり、 中途半端なところで折り返してしまったりして、 あまり美しくない場合が多いのが悩みでした。 しかし、とあるサイトのCSSを調べていると、 たまたま、以下の様な記述を見つけました。
iOS10からiPhoneのSafariでHTML5のVideoをインラインで再生可能&無音なら自動再生も！ | スターフィールド株式会社
前回、iPhoneでウェブページ上でVideoをインライン再生する方法を紹介いたしましたが、 iOS10から、正式に、SafariでHTML5のVideoをインラインで再生できるようになりました。 また、無音の設定をすれば、自動再生も許可されるようになりました。 ↓参考記事 モバイルブラウザのビデオ再生がいろいろ変わるので確かめてみた – Qiita iOS10のiPhoneのmobile Safariではビデオ要素（videoタグ）をインラインで再生できるようになったし、無音のビデオなら自動で再生できるようになった模様 – みかづきブログ その3 HTML5からVideoタグが利用できるようになり、動画を使ったサイトが作りやすくなりました。 しかし、iPhoneでの操作の制限(自動再生できない、再生するときに強制的に全画面になる)の問題で、 スマホ向けサイトでは、HTML5でのVideo
クールでカッコイイいろんな機能満載のスライダー「Slider Pro」jqueryプラグイン | スターフィールド株式会社
jQueryプラグインのスライダーの紹介は久しぶりになります。 いつもbxsliderを使っているのですが、それに勝るかもしれないプラグインを発見いたしましたので、 ご紹介させていただきます。 その名も「Slider Pro」公式サイトはこちらSlider Pro サイト自体もけっこうかっこいいですね！ 一応僕が試してみたDEMOもあります。 DEMO 簡単ですが、特徴としては、 ・レスポンシブ対応 ・スワイプ対応 ・ブレークポイントの設定(画像自体を変更、サムネイルのサイズを変更等) ・高さ自動対応 ・サムネイルの設定(縦横サイズ、位置、スワイプ設定)ができる ・フルスクリーンモードにできる ・上記からいろんなレイアウトに簡単に変更できる！ 「Slider Pro」の使い方 まずは公式サイトからダウンロードをお願いします！ まずCSSを読み込み、
CSS3のtransform3dとjQueryを使って、ひっくり返すアニメーション ｜ スターフィールド株式会社
対応する必要のあるブラウザがどんどん新しい物に移り変わっていく今、 CSS3ならではの表現も利用しやすくなってきています。 今回はCSS3を使った表現の中でも、 ひっくり返すことでコンテンツが切り替わるようなアニメーションの方法について、 考えてみました。 ↓作ってみたもの DEMO 方法 1. 要素を配置する 回転の対象となるコンテンツを重ねて同じ位置に配置し、 それらを少なくとも２つの要素で囲みます。 <main> <div class="wrapper"> <section id="page1" class="active"> <div> <h2>PAGE1</h2> <figure><img src="images/about.jpg"></figure> <p>彼らはこの向うの事実で精神が楽しむられれると時分を考えるせがったり、影響に投げから、一般にしがいるとするて役に立つれると
スマホに適したlightbox系javascriptプラグイン「PhotoSwipe」 | スターフィールド株式会社
var initPhotoSwipeFromDOM = function(gallerySelector) { var parseThumbnailElements = function(el) { var thumbElements = el.childNodes, numNodes = thumbElements.length, items = [], figureEl, linkEl, size, item; for(var i = 0; i < numNodes; i++) { figureEl = thumbElements[i]; // <figure> element // include only element nodes if(figureEl.nodeType !== 1) { continue; } linkEl = figureEl.children[0]; //
クールでカッコイイいろんな機能満載のスライダー「Slider Pro」jqueryプラグイン | スターフィールド株式会社
jQueryプラグインのスライダーの紹介は久しぶりになります。 いつもbxsliderを使っているのですが、それに勝るかもしれないプラグインを発見いたしましたので、 ご紹介させていただきます。 その名も「Slider Pro」公式サイトはこちらSlider Pro サイト自体もけっこうかっこいいですね！ 一応僕が試してみたDEMOもあります。 DEMO 簡単ですが、特徴としては、 ・レスポンシブ対応 ・スワイプ対応 ・ブレークポイントの設定(画像自体を変更、サムネイルのサイズを変更等) ・高さ自動対応 ・サムネイルの設定(縦横サイズ、位置、スワイプ設定)ができる ・フルスクリーンモードにできる ・上記からいろんなレイアウトに簡単に変更できる！ 「Slider Pro」の使い方 まずは公式サイトからダウンロードをお願いします！ まずCSSを読み込み、
camera demoサイト
DEMO 高機能なスライドショー 通常のタイプ サムネイル有り、ローダー違うver、キャプション有り キャプションがここに入ります。classで設定変更できます。 キャプションがここに入ります。classで設定変更できます。 キャプションがここに入ります。classで設定変更できます。 キャプションがここに入ります。classで設定変更できます。 サムネイル表示、ローダーの位置を上に、ナビゲーション無し、ホバー無効
今までで一番高機能かもしれないjQueryプラグインのスライドショー「camera」 | ECサイト｜システム開発会社｜スターフィールド
タイトル通り、今まで見てきた中で、一番高機能なスライドショーかもしれません。 機能が豊富で、その設定もそこまで難しくないということで、 使いやすいプラグインです。 レスポンシブにも対応しており、 動画を組み込んだり、フルスクリーンにもできたりします。 簡単に特徴をあげると、 ・スライドアニメーションのエフェクトが豊富 ・スキン(カラー)が豊富にある ・サムネイル、ナビゲーション、ページング等の設定がいろんなパターンに対応 ・レスポンシブ対応 ・スライドのローダーが付いている ・キャプションが付けられる といったところでしょうか。 ローダーが付いているのは、今までにほとんど見たことなかったので、 けっこういいですね。 ただ、html5なので、ieはそこまで対応していないかもしれません。 （いけてie8くらいまでかな） デモを作成したので、ぜひ見てみてください。 DEMO
instagramのウィジェットを生成してくれるサービス「SnapWidget」 ｜ スターフィールド株式会社
twitterやfacebookはいろんなタイプのウィジェットを生成することが出来ますが、 instagramでは投稿を埋め込むことくらいしか出来ません。 自分のアカウントの写真を表示して埋め込みたい、みたいな時があると思います。 そんな時に、この「SnapWidget」を使うと、便利なウィジェットを生成してくれます！ SnapWidget 使い方 使い方といっても、下記の画面にて、必要項目を記入し、「Get Widget」を押すと、 iframeのソースが生成されますので、それをサイトに貼り付ければOKです！ ただ、もっと自由に扱いたいという場合は、 APIを利用する必要がありそうですね。 下記のブログがすごい良くまとめられているので、自分も必要になったら参考にしたいと思います。 Instagram APIでwebサービスを作りたい全ての人に向けて書きました
jQuery を使ってランダムで要素を表示する | スターフィールド株式会社
<div id="wrapper"> <p>ランダムで画像表示</p> <div id="random"> <div><img src="images/img01.jpg" alt="花" /></div> <div><img src="images/img02.jpg" alt="花" /></div> <div><img src="images/img03.jpg" alt="花" /></div> <div><img src="images/img04.jpg" alt="花" /></div> <div><img src="images/img05.jpg" alt="花" /></div> <div><img src="images/img06.jpg" alt="花" /></div> <div><img src="images/img07.jpg" alt="花" /></d
Infinite Scrollを実装してみました | スターフィールド株式会社
Infinite Scrollとは、 ページャーの代わりに、ページ内で次のページのレコードを読む出すライブラリのことです。 http://www.infinite-scroll.com/ WordPressのプラグインもあって、jQueryのプラグインもあります。 下記のサイトで体験できます。 http://kachibito.net/sample/jquery-masonry/ 今回実装したのは、jQueryのプラグインです。 １、ライブラリをダウンロード https://github.com/paulirish/infinite-scroll ２、htmlソース <div id="container"> <ul> <li>hogehoge1</li> <li>hogehoge2</li> <li>hogehoge3</li> <li>hogehoge4</li> <li>hog
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
カーテン、というかシャッター？みたいにページが切り替わるJS | スターフィールド株式会社
ECサイトで使えそうなjQueryプラグイン elevatezoom ｜ スターフィールド株式会社