知らなかった…CSSでテキストの両端揃えが普通にできた | スターフィールド株式会社
しか、方法がないと思っていました。 この方法を使った場合、テキストの右側は文章によって がたがたになってしまったり、 中途半端なところで折り返してしまったりして、 あまり美しくない場合が多いのが悩みでした。 しかし、とあるサイトのCSSを調べていると、 たまたま、以下の様な記述を見つけました。
CSSアニメーションでinputに動きをつける ｜ スターフィールド株式会社
昨今CSS3やjQueryによって簡単に動きを付けられるようになっているので、 マテリアルデザインでも提唱していますが、インタラクティブな動きつける傾向が強まっています。 傾向があるというか色々付けたがっているという感じもしますが・・・（僕もそんな一人です・・・） ということで、今回は、 今まであまり動きをつけることのなかったフォームのinputに動きをつけてみました。 こういうサイトを見つけたので、 マネしてやってみました。 Awesome input focus effects – Usingcss3 試したデモは以下からご覧ください。 DEMO html <div class="inputBox"> <input type="text" class="style1"/><label>名前</label><span class="border"></span> </div> <div
10秒止まってしまうことも…jQueryのセレクタの使い方に気をつけよう ｜ スターフィールド株式会社
先日、とあるサイトの管理画面をコーディングしていたとき、 特別大きな処理をしているわけでもないのに、 ページをブラウザで表示してから操作できるようになるまでに、 20秒近くかかってしまうという問題に直面しました。 １つずつ処理にかかっている時間を計測してみたところ、 以下の様なコードで時間がかかっていることが判りました。 $(function() { … if($(":checkbox[name='ids[]']").size() > 0) { $("td :checkbox[name='ids[]'], th:first-child :checkbox").on("click", function(e) { e.stopPropagation(); }); $("td:has(:checkbox[name='ids[]']), th:first-child:has(:checkbox)"
Google Maps Geocoding APIを利用して郵便番号から住所を取得する ｜ スターフィールド株式会社
郵便番号から住所を取得するAPIは多く存在しますが、今回はGoogle Maps Geocoding APIを利用して取得してみました。 特徴 Google Maps Geocoding APIを使用すると、日本の住所だけでなく、日本以外の国の住所も取得できます。特定の国の住所だけを取得したい場合は、 2文字のISO 3166-1国コードも一緒に送られてきているので、それで限定すればいいかもしれません。 サポートされているものに限られますが、住所を返してくれるときの言語も指定できます。ただし、すべて網羅してその言語に対応しているわけではなく、対応していない部分は英語で返ってきます（サポートされるドメイン言語のリスト）。 日本の郵便番号はハイフンが入っていますが、Google Maps Geocoding APIはハイフンあり、なし両方対応してくれます。 LaunchCartは、海外発送や多
css3のflexboxを使うとすごい簡単になるレイアウトを試してみた | スターフィールド株式会社
css3で登場したflexboxですが、そろそろ使える頃合いがくるんじゃなかろうかということでflexboxを使ったら簡単だったなぁと思うレイアウトを実際に試してみました。 flexboxについてのそもそも解説はいろんなブログにあるので、ここでは割愛させて頂きます。 どんなものか理解するためのサイトとしては以下をお薦めします。 Visual Guide to CSS3 Flexbox: Flexbox Playground | 簡単にいうと、cssの新しいレイアウト方法になります。これまでの方法と比べると、グッと簡単に様々なレイアウトができるようになります。 DEMOを作りましたのでそちらをご覧ください。 DEMO flexboxのサンプル ツーカラム よくあるツーカラムのコンテンツですね。 今までだとfloatを使って…という感じでしたが、 flexboxを使うとこんな感じになります。
アクセス解析レポートはbrickの費用対効果が最高！ ｜ スターフィールド株式会社
GoogleAnalyticsを拡張するサービス今回は「brick」を紹介したいと思います。 一ヶ月ほど前に「dotmetrix」というサービスを紹介しましたが、オンライン上だけでなく、レポートとして出力してくれるサービスを探していたところ、「brick」のお試し期間を登録してみて、非常に感動したので紹介です。 他にも月数万円かかる解析レポートサービスもありますが、高度な分析やリッチなグラフなど不要だが、とりあえず、オフラインで出力してほしい、最低限の編集を加えられるようにしたいなどというライト寄りのユーザーにとって、月4320円なら費用対効果が一番高いんじゃないかと考えられます。 使い方 https://www.brick.tools/applications/autoreport-excel/ こちらからメールアドレスの登録かGoogleアカウントの認証で登録が出来ます。 メールアドレ
スターフィールドホームページをAMP対応 ｜ スターフィールド株式会社
まず、AMPって聞き慣れないですよね。 購読しているRSSの中で、AMPについての言及がよくされていましたが、まだ実施前だしいいか〜なんて思っていたのですが、去る2016年2月24日に日本でも若干前倒しで実装がされたようですので、本サイトも対応してみました。 AMPについて まず、AMPとは、Accelerated Mobile Pagesの略で、スマートフォンから閲覧するページを高速化させましょうプロジェクトで、原則HTML＋CSSで遅くなるJSは禁止というAMPフレームワークを作ったので準拠して下さいというのが超簡単な解釈です。 オフィシャルのページはこちらで詳しく知りたい方は、海外SEO情報ブログさんのこちらの記事が詳しく解説されています。 AMPに対応するためのWordpressプラグイン この情報も海外SEO情報ブログさんの記事を参考にさせて頂きました。 一つ目はその名もAMP。
MathJaxを利用して数式をページ内に記述する | スターフィールド株式会社
LaTeXという数式等を綺麗に記述してくれる組版システムがあるのですが、それをHTML内で使用できないのかと思い調べたところ、MathJaxというJavaScriptのライブラリがあったので紹介致します。 使い方 使い方はとても簡単で、下記のスクリプトをヘッダーに記載するだけで、HTML内でLaTeXの数式記述が可能になります。 <script type="text/x-mathjax-config"> MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}}); </script> <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML
【jQuery】IE9でページ遷移せずにファイルをPOSTしてJSONを受け取る | スターフィールド株式会社
Ajaxを使ってフォームをPOSTすると、ページ遷移しないため、 管理画面などで連続して処理を行いたい場合、 こうすることでユーザのストレスを減らすことができます。 また、そのときのデータの受け渡しをJSONで行うことで、 HTMLの書き換えなどを柔軟に行うことができます。 フォームの種類にはいくつかありテキストボックスやチェックボックスなど、 ほとんどのフォーム要素は以下の様なコードを記述することにより、 Ajaxで問題なくPOSTを行うことができます。 $(function() { $("form").submit(function(event) { var $form = $(this); var $button = $form.find(":submit"); event.preventDefault(); $.ajax({ type: "post", url: "example.
html5で増えたinput関係で実際使ってみたいもの | スターフィールド株式会社
html5では、inputのtype属性がいろいろ追加されました。 今までは、javascript等で制御してた部分をhtmlだけで対応できてしまうというものです。 これは便利！ なのですが、まだまだブラウザの対応が追いついてません。。。 特にIE・・・ なので、案件等ではまだ使えませんが、 使える時になったらぜひ使いたいものを紹介します。 type属性 color値 カラーパレットを表示します。 これだけで、カラーパレットが出てくるなんて・・・ IE非対応…
File Apiを使ってアップロードした画像を表示させる | スターフィールド株式会社
HTML5から登場したFile Apiを利用すると、画像をinput[type=file]でアップロードしたものをすぐサイトに反映させることができます。 そもそもの話になってしまう、かつ、だいぶ前の話ですが、HTML5から新しいAPIが追加されました。 localstorage、Geolocation API、canvas、svg、等々です。 詳しくは、下記リンクをご覧ください。 HTML5のAPI、および、関連仕様 今回ご紹介するFile Apiを使うと、ローカル環境に保存されているファイルを扱えるようになるそうです。 DEMOを作りましたのでご覧下さい。 DEMO DEMOはちょっとfileのボタンをオリジナルにしているのと、 ドラッグ＆ドロップでアップロード出来るようになっております。 これもHTML5からできたAPIになります。 jQueryで実装しています。 $(".fi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVGでレーティングしてくれるjQueryプラグイン ｜ スターフィールド株式会社
多言語翻訳用jQuery【translate.js】 ｜ スターフィールド株式会社
CSS3のtransform3dを使った奥行きの効果 ｜ スターフィールド株式会社
jQeuryで横にはみ出させた要素をフリックでスライドさせる ｜ スターフィールド株式会社
目が見る色と頭が見る色 ｜ スターフィールド株式会社
検索結果のソートについて考える | スターフィールド株式会社
画像やページをデスクトップに残しておけるChrome拡張「DashNotes」 | スターフィールド株式会社
animationなグラフが描けるChartist.js使ってみました | スターフィールド株式会社
HTML上にPDFを表示させる方法 | スターフィールド株式会社