室内で遊べる砂「キネティックサンド」がすごかった!!!!

ひさしぶりにおもちゃ売り場を通りかかったら
「室内用お砂遊び キネティックサンド」
なるものを見つけました。

なんかひさしぶりにおもちゃで感動したのでブログ記事にしてみます!

ひさしぶりにおもちゃ売り場を通りかかったら
「室内用お砂遊び キネティックサンド」
なるものを見つけました。


[tmkm-amazon]B00CO5AQ12[/tmkm-amazon]

ぱっと見みると、まぁふつうの砂なんですが…。

なんかドロッとしているのです。

ラングスジャパン (RANGS) 室内用お砂遊び キネティックサンド 1kg

そして力を加えるとちゃんと固まるのです!!!!

ラングスジャパン (RANGS) 室内用お砂遊び キネティックサンド 1kg

水を入れたりする必要がなくて常に湿った状態を維持するとのこと。

一応動画もあったので貼っておきます。

調べてみると、98%の砂と2%のシリコン素材でできているらしい。
(シリコン素材も元は小麦でグルテンは入っていないとありました)

思いついた人すごい…!!!

これがあれば間違いなくきれいな砂のお城が作れます…!!!!w
大人ですが、なんか久しぶりに砂遊びがしたくなりました(笑)

最近日本でも販売がはじまった商品らしいです。

文章と写真じゃほんとにあんまり伝わらないのですが、
さわってみると結構感動な質感なので、おもちゃコーナーに行く機会があったらぜひ触ってみてください!

↓ラングスジャパンの楽天サイトでも買えるみたいです。

キネティックサンド公式サイト

「偶数月は初心者向けのおそらく3.7 回目くらいのWordBench 福岡」で発表してきました!

WordBench福岡の勉強会、「偶数月は初心者向けのおそらく3.7 回目くらいのWordBench 福岡」で発表してきました!

当日のスライドです。

今回、先日ABC Words 2013で発表させていただいた内容を再編集して発表してきました。

具体的なやり方は調べてばいくらでも出てくるのですが、
なにができるのかわからなければ具体的なやり方も調べようがないので
こういうことができる!というのを簡単にまとめて発表してみました。

機会があればまたなにかまとめて発表したいなと思います!
主催の@tekapoさんはじめ、みなさんありがとうございましたー!

↓当日のツイートなどはこちら
http://togetter.com/li/578231

Bootstrap3を使ってアイコンフォントのダウンロードサイトを作ったのでまとめ

Bootstrapを使って新しいサイトを作ってみました!

案件で検討する前に一度テストしておきたかったので
今回Bootstrapを使ってサイトを作成してみました。

イラストフォント配布サイト作りました!

Bootstrapを使って新しいサイトを作ってみました!

案件で検討する前に一度テストしておきたかったので
今回Bootstrapを使ってサイトを作成してみました。

スタンプフォント! -スタンプみたいに使えるかわいいイラストのフリーフォント-

スタンプフォント! -スタンプみたいに使えるかわいいイラストのフリーフォント-

イラストをフォント化したTTFフォントの配布サイトです。

Windows、Mac OS X以降で使えます。
Webフォント用のファイルも準備予定です。

個人、商用ともにフリーです。
ご自由にお使いください^^

自分で好きなものだけWebフォント化していただいても大丈夫◎

デザインの一部や、ワイヤーフレーム作成時などにお役立ていただけると嬉しいです。

こういうのがあると便利ー!などのご意見もお待ちしています!!

Font用のSVGファイルはFireworksで

ちなみにサイトのデザイン、アニメーションGIFの作成、フォントの元になったSVGファイルの作成はFireworksで。

詳しい手順などは以下のサイトがとっても参考になりますのでぜひ見てみてください♪

Bootstrap下調べ

bootstrap

というわけでBootstrapを使うにあたって、いろいろ調べ事をしたのでメモしておきます。

Bootstrap 3でレスポンシブを無効にできるか?

Bootstrap 2系は要素を追加してレスポンシブを実現するようになっていたそうなのですが、3系は標準でレスポンシブ対応とのこと。

今回のサイトはPC用のフォント配布サイトということもあって、レスポンシブである必要もあまりなかったのでレスポンシブを無効にする方法を調べました。
以下の手順で簡単にできました。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>を削除する。
<link rel=”stylesheet” href=”css/bootstrap.min.css” media=”screen”>の下に、
<link rel=”stylesheet” href=”css/non-responsive.css” media=”screen”>を追加する。
<script src=”js/respond.min.js”></script>を削除する。
グリッドシステムを使用するときはカラムの設定は必ずcol-xs-*にする。

引用:Bootstrap移行ガイド レスポンシブの無効化

英語ですが、公式サイトにも手順がのっています。

公式:http://getbootstrap.com/examples/non-responsive/

段組はどういう仕組み?

bootstrapでは12カラムのグリッドシステムが採用されています。
トップページは4:4:4、下層ページは8:4で割って使うことにしました。

画像はどのサイズで作る?

%で指定されているグリッドシステムなので、このときこのカラムが○pxというのがいまいちわかりにくいです。なので全体的に画像は大きめに作って、グリッドに対してwidth:100%で貼り付ける必要があるのかなー?という印象。

フォームのスタイリング

classを適切に指定してあげれば、使いやすいフォームに簡単にスタイリングできます。
Contact Form 7だったらこんな感じ。

デザインの調整

以前、2系をさわろうとしたとき、なかなか複雑すぎて
必要な物だけ自分で書いたほうが早そう…と思ってしまって挫折したことがあったのですが
3系は見た目もすごくシンプルになっていて、その分CSSの装飾もシンプルなので追加のCSSで上書きがしやすい感じでした。

その他参考にしたサイトなど

全体的な感想

どっちかというと画像少なめなティザーサイトとか、管理画面とかそういうものをさくさくっと作るのによいのかなーという印象を受けました。

いろんな仕様があって、その仕様にすべて対応できるのか?とかを調べて使うにはちょっと大変かもしれませんが自分に決定権のあるこういう個人サイトをパパっと作るにはものすごく便利です!

なんとなく勝手がわかってきたので、今度はレスポンシブで作ってみたいと思います☆