カメラのレンズの焦点距離や絞り、被写体・背景の距離を設定し、被写界深度とボケを計算して、その写真がどのように仕上がるかシミュレートしてくれる写真の勉強になるサイトを紹介します。 写真の被写界深度とボケのシミュレーター サイトはHTML5+CSS3で作成されているので、最新のモダンブラウザでお楽しみください。 IEは10+対応です。 また、左上のボタン「Mobile Version」で、スマホにも対応しています。
![写真の勉強にいい!被写界深度とボケの作り方がよく分かり、レンズと被写体・背景の関係を学べるシミュレーター](https://cdn-ak-scissors.b.st-hatena.com/image/square/130db5cca2187882dfda62d122f85de732551cbb/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015082504-01.png)
普通のHTMLで作成したページをブラウザ上から簡単に更新・修正できるようにするオープンソースのCMSを紹介します。 HTMLはごく普通なものでOK、BootstrapやFoundationにも対応しています。 ブラウザ上で編集できる領域を指定できるのもいいですね。特定ページの特定箇所だけ簡単に更新できるようにするとかにも使えます。 Sitecake Sitecake -GitHub Sitecakeの特徴 Sitecakeのデモ Sitecakeの使い方 Sitecakeの特徴 プレーンなHTMLで動作 通常のHTMLファイルをブラウザ上から修正して、保存することができます。PHPやテンプレートなどの知識は不要です。 更新・修正は簡単 テキストを変更する時はクリックするだけで編集可能に、要素を追加・削除する時はドラッグ&ドロップでOK。 データベースは必要無し すべての変更はHTMLファイ
画像にマウスをホバーさせると、キャプションがアニメーションでスライド表示される省スペース用エフェクトを実装するスタイルシートのチュートリアルを紹介します。 Slide In Image Captions [ad#ad-2] キャプションをスライド表示させる画像のデモ デモでは、画像ごとに異なる方向から異なる位置にキャプションがスライド表示されます。 デモページ スライドは、CSS3 transitionに対応したブラウザ(Chrome, Safari, Opera)ではアニメーションで表示し、非対応ブラウザ(Firefox3)ではアニメーション無しで表示されます。 [ad#ad-2] 以下は元記事の各ポイントを意訳したものです。 なぜ、このようなエフェクトをするのでしょう? それはレイアウトのスペースを節約するためです。そして、キャプションの存在は画像からユーザーの気を散らしてしまうことも
jQueryはプラグインが豊富にあり、非常に便利で、確かに簡単です。しかし、自分にあったプラグインが見つからなかったり、カスタマイズする必要があったり、場合によってはプラグインに合わせてページを作り直したりといったこともあります。 jQueryを学ぶ際にプラグインから一旦離れ、実務で役立つスキルを確実に身につけたい人にオススメの本を紹介します。 本書のスクリプトは2014年現在あちこちで見かけるレスポンシブ対応のさまざまなUIをシンプルなコードで実装しており、単なる書籍サンプルにとどまらない高いクオリティで実用的なものとなっています。 jQueryとちょっと真剣に向き合いたいなと思った時、手にとってみてください。
ボタンやロゴや画像にclassを加えるだけで簡単に利用できるホバーエフェクトがまとめられたスタイルシート(SASSも有り)を紹介します。 40種類以上のCSS3アニメーションは、見てるだけでも楽しいです。 Hover.css Hover.css -GitHub Hover.cssの使い方 Hover.cssのデモ Hover.cssの使い方 使い方は非常に簡単です。 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <head> <link href="css/hover-min.css" rel="stylesheet"> </head> 一部のエフェクトだけを使用したい場合は、そのスタイルだけコピペすればOK! Step 2: HTML あとは、ボタンやロゴや画像にclassを指定するだけで、さまざまなホバーエフェクトが利用できます。 <a class="
今年も数多くの素晴らしいjQueryのプラグインがリリースされました。当ブログで紹介したものをはじめ、未紹介のものまで、jQueryのプラグイン100+α選です。 今年目立ったのは、アニメーションを使ったスクロール関連のスクリプト。 スクロール前提の1ページサイト、パララックスなど、コンテンツをより大きなサイズで楽しむものが増えました。また、スマフォ・タブレットに大きく影響を受けたインタラクションも目立ちましたね。 1ページコンテンツ用のスクロール関連 パララックス スクロール関連 スクロールで定位置関連 その他スクロール操作・補助関連 スクロールバー関連 レスポンシブ関連 エフェクト関連 ナビゲーション関連 レイアウト関連 画像ギャラリー関連 画像拡大・配置・キャプション関連 コンテンツスライダー関連 カルーセル関連 アニメーション関連 フォーム関連 コンテンツのツアー関連 テキスト関連
枠線から背景をずらして、ゆる〜い感じにデザインされたスタイルシートを紹介します。 HTMLはbutton要素一つで実装されており、二つの要素をマイナスマージンで強引に重ねるとかの荒技ではないです。 デモページ 実装は、こんな感じです。 HTML button要素一つで実装します。divなど他の要素に変更してもOKです。 色の違いはclass指定で。 <button class="yellow"> View More </button> <button class="blue"> View More </button> CSS 枠線は通常通りbutton要素にスタイルし、ずらした背景は疑似要素の:afterを使います。 ちょっとだけ傾けるのがポイントです。 body {width:70%;text-align:center;margin:40px auto;} button { positi
box-shadowでふわりとした影をつくるCSSのジェネレーター、レスポンシブのチェック、アスペクト比の計算機、CSS/JSの軽量化など、たくさんの便利な時短ツールがありますが、それらの便利なツールを一つの場所にまとめたCovelopingを紹介します。 FacebookのOPGチェックやGoogle Mapsの地図生成ツールもあり、新しいプロジェクトを始める時にも役立つものが揃っています。 Coveloping 便利ツールは現在23種類、アスペクト比の計算や一つのカラーに黒と白を加えたバリエーションを生成したり、box-shadowでふわりとした影をつけたり、jQueryのアニメーションのエフェクトなどがあります。 これからもどんどん増えていくそうです。 その中から、いくつか紹介します。
InContentの使い方 実装はとても簡単です。 Step 1: 外部ファイル 当スタイルシートをhead内に配置します。 <head> ... <link rel="stylesheet" href="css/incontent.css" type="text/css" /> </head> Step 2: HTML 画像のimg要素とキャプションのspan要素をdivで包みます。 <div class="pic"> <img src="img/01.jpg" class="pic-image" alt="Pic"/> <span class="pic-caption bottom-to-top"> <h1 class="pic-title">Pic Title</h1> <p>Some description or text.</p> </span> </div> 用意されているcl
iOS 7にも採用されているような落ち着いたパステルカラー、同じ明るさで異なる色合いを組み合わせたカラースキームなど、人間の目に優しくより見やすくなるように色合いを設計するためのカラースペース「HUSL」を紹介します。 HUSL -Human friendly HSL HUSL -GitHub HUSLは「Human friendly HSL」の略で、RGBのカラースペースに幾何学的な変換して設計されています。カラーの定義はHSLのように色相(hue)と輝度(lightness)を使い、彩度に「saturation」ではなく「chroma 」を使用します。 彩度のsaturationとchromaの違いは、こんな式になるようです。 Saturation(彩度:S)= Chroma(C) / 明度(V) 参考:イメージクリエーションの構築と基礎知識の習得 どんな感じかは、デモですぐに試すこと
10,000個以上あっても品質はどうよ、と思う人もいるかもしれませんが、サイトを運営しているのは当ブログともコラボしたfreepik.com! 彼らのアイコンをはじめ、質の高いアイコンが揃っています。 ちなみに、コラボしたのはCelebrations Icon Setです。
Bootstrap 3対応の高性能なカラースキーム コントロールとフラットなスタイルが特徴のテーマファイルを紹介します。 1pxdeep 1pxdeep -GitHub Bootstrap 3対応のテーマファイルも続々とリリースされていますが、このテーマファイルは他にはない高性能なカラースキーム コントール機能を備えています。 使い方は、簡単です。 「Seed Color」から自分の好きなカラーを選択し、「Color Wheel」でカラーセオリーを選択します。 カラーセオリーは、下記の5つが用意されています。 accented analogue 類似色と補色を使用、目立たせながらも調和のとれた配色。 monochrome 同一の色相を使用、全体の色味を統一した配色。 complement 対照の補色を使用、調和のとれた配色。 triad 3等分した配色を使用、バランスのとれた配色。 tet
WordPressはバグフィックスやセキュリティパッチで最新のバージョンにしておくと、かなり強靱で効率的なアプリケーションです。しかし長く使っていると、データベースに不必要な値が貯まってしまい、それが原因でサイトの速度を遅くしてしまいます。 WordPressのデータベースを掃除し、各種設定を見直し、最適化する方法を紹介します。 How To Clean Up & Optimize Your WordPress Install 下記は各ポイントを意訳したものです。 1. データベースのバックアップ 2. ファイルのバックアップ 3. 使用していないプラグインのゴミを掃除 4. 自動保存された記事の掃除 5. 記事のメタデータを掃除 6. サムネイル生成を停止 7. スパム判定待ちを削除 8. 古い記事だけコメントを閉じる 9. データベースの最適化 10. 最後にセキュリティのチェック 1
.htaccessを使用して、他のサイトが画像などのファイルを無許可で使用するのを禁止する方法をThe Web Squeezeから紹介します。 Stop Image Hotlinking with .htaccess 「.htaccess」に、下記を記述します。 ※必要の無い箇所は、削除・修正して使用してください。 ※「.htaccess」を修正する場合は、必ずバックアップをしてください。 ※有効範囲は、設置ディレクトリの配下です。 <textarea name="code" class="html" cols="60" rows="5"> #Stop Image Hotlinking RewriteEngine on RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC] RewriteCond %{HTT
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く