Google ドキュメントで譜面を書けるように出来るアドオン 「VexTab Music Notation」
最近Googleドキュメントでアドオンが使えるようになって図形とか色々なものがあるのですが、中でも特徴的なのが譜面を書けるアドオン VexTab Music Notation で譜面を書いてみ […]
MozillaのプロジェクトのJPEG画像圧縮「mozjpeg」とGoogle pagespeed でおすすめされている「jpegoptim」で圧縮率の違いを比べてみた
最近MozillaからJPEGの画像を劣化させずに圧縮する新しいプロジェクトが開始されてコードが一般公開されています、その「mozjpeg」とウェブサイトの最適化で有名なGoogleのPagespeedでおすすめしている […]
マウスオーバーによる、表示の切替とjQueryをつかってdataを読み込むテクニックを使ったデザイン
Pen By Arron Hunt プロフィールの下にあるアイコンをマウスオーバーすることで、スイッチが入りそれに関連した情報が表示されるようになっています、またマウスオーバーした後でもスイッチは有効のままで表示されたま […]
マウスと連動して背景が動くパララックス効果を使ったキュートなデザイン 『Simple Parallax with jQuery』
マウスを動かすことで、背景の一部が連投して動くパララックス効果を使った背景です。 また、背景もキュートでポップなデザインで完成度が高いです。
複数の違ったサイズの画像を決まったサイズのブロック内に最大の大きさで天地中央(上下、左右で中央)で表示するテクニック 『Vertical/Horizontal Centering』
画像をブロック内で天地中央表示するテクニック
真似したくなっちゃう良質なポートフォリオデザインとHoverアクション 『Portfolio Selector』
Hoverを使ったアクションで初期状態では見切れている画像の部分が中央へ移動するアクションです
バーガーボタンの作成とアニメーションのアイディア 『Starbucks Mobile Nav Hamburger』
バーガーボタンの三本線の方を作ったんではなくて、背景を緑にして、その上にbeforeとafterで棒線をつくりそれがアニメーションしてクロスするというものです
レスポンシブに画面幅が狭くなると簡素に変形していくアイコンが新しい 『Pure CSS Responsive icons (one div)』
色々なレスポンシブデザインがありますが、アイコンをレスポンシブにしちゃうんなんて驚き。全くもって私にはこんな発想がなかったので驚きと、新しいボキャブラリーというか、WEB制作での引出しが増えるわけで、喜びを感じます
Bootstrapを使ってWEBサイトを作ってみようぜ 第2回 「グリッドシステムって何？ グリッドシステムを学ぶ」
第1回 「CSSフレームワークって何？」 第2回 「グリッドシステムって何？ グリッドシステムを学ぶ」 第3回 「セットアップして利用開始できる環境を作ろう」 第4回 「制作事例をみてイメージを膨らまそう」 第5回 「全 […]
入力フォームにフォーカスすると鉛筆でカキカキするアニメーションを表示するアイディア 『Simple focus in/out input animation』
inputのフォーカスすることで、入力中であるアニメーションを表示させるアイディアです フォーカスするとPENが左から現れて、カキカキとアニメーションするのが入力中だというのがわかりやすくて良い
画像を右クリックでメニューを出現させるテクニック 『Radial context menu』
子猫の画像の上でマウスの右クリックをすることで、円盤のメニューが出現します 円盤にはなにか機能を付けたりSNSへの共有のリンクを付けたりして使えます
Googleドライブ(ドキュメント)のフォームを使って、無料でセキュアな問い合わせフォームを作る。
CGIやCMSの機能、Wordpressならプラグインを使って問い合わせフォームを作成することが出来ます、CGIやCMSが使えない環境で問い合わせフォームを使いたい場合にはGoogleドライブのフォームを使うのが操作が簡 […]
GIFアニメーションをHTML5のvideoに変換するとどうなるのか ウェブサービス「gfycat」を使ってみた
GIFアニメーションって手軽に使えて、便利な半面容量がとても大きくなります GIFアニメーションじゃなくて動画にしてしまったほうが良いケースもある。 そこでGIFアニメをHTML5のvideoに変換するサービスを使えばど […]
Ubuntu 14.04 LTS でWindowsの様にメニューやペケマークをウィンドウのところにする方法 グローバルメニューの停止
Ubuntuではグローバルメニューといって常に、Windowsでいうウィンドウの上部の部分が画面上部に表示されている状態でした Mac 風なので Mac に慣れている人はいいんですけど。私みたいにWindowsをずっと使 […]
【CSSのcalc()って知ってますか？】 パーセントでwidth、heightを指定して固定値のpaddingやmarginを使って100％にぴったり収める
CSSで高さや横幅の計算に使える calc() というものがあり、パーセントからピクセルを引いたりと柔軟な計算をする事ができる。
Paint.NET 4.0 beta(5226) 3つ目が登場。 図形の回転等を右クリックを押しながらの操作を追加
Paint.NET が最新版のベータテスト中で今回3つめのベータとなるバージョンが出ました 主な変更点は画像の回転をより操作しやすくなりました 他はバグの修正が主になります http://blog.getpaint.ne […]
画像、音声、ドキュメント、EBOOKのファイルをあらゆるタイプに変換(全56種)するウェブサービス 「I LOVE FILE 」 を使ってみた
I LOVE FILE http://ilovefile.com/ 画像からドキュメント、音声ファイルにEBOOKのファイルとそれぞれを色々なファイルタイプに変換できるサービスです。無料で使えます 対応しているファイル・ […]
Ubuntuにシンプルで使い勝手のいい動画プレイヤーを導入する 「SMPlayer」
SMPlayerはWindowsでいう、GOMplayerに近いソフトで軽くて使い勝手も良い動画プレイヤーです。シンプルに軽快に動作するのが気に入っています。とくに秒単位で動画のスキップが出来るのが好み U […]
CSSのコピペだけで出来る良質な5つのグラデーション 『Gradients By boltaway』
Gradients By boltaway いい感じのグラデーション5種です。コピペでそのまま使えちゃいます カラーコディネートとか、グラデーションの作成とか得意な方じゃないのでこういうのは助かりますね & […]
無料で使えるレスポンシブデザインのHTMLテンプレートのサイト 9ineBB Free Modern WebDesign Template をオープンしました
無料で使えるHTMLテンプレートのサイト 9ineBB -Free Modern WebDesign Template- をオープンしました。 このサイトは私が制作した、HTMLテンプレートを公開する場です。 さらに無料 […]
