サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
neganin.com
サイトをみてると数字がカウントアップして表示されてるのを見たことありませんか? 保険の見積もりや、ECサイトでの合計金額、不動産での物件数、サイトでのPV数にポートフォリオサイトでのスキルを数値化したもの・・・今回は簡単にカウントアップできるプラグイン「animateNumber」を紹介したいと思います。 ちなみにカウントダウンや計算はできるか試していないのでわかりません! まずはデモをご覧ください。 「jquery.animateNumber」のダウンロード 「jQuery」本体はダウンロードするか、Googleにホストされているファイルを読み込みましょう。 ここで使用する「jquery.animateNumber」のバージョンは0.0.12です。下記サイトから「jquery.animateNumber.min.js」をダウンロードし、使用します。 jQuery jquery.anima
みなさん「チキンラーメン」は食べたことはありますか?といっても日本人誰しも食べたことがあるかと思いますが!中国のラストエンペラー・溥儀も、死の間際に「めっちゃチキンラーメン食べたいわー」って言ってたとかなんとか。 そんな「チキンラーメン」を今回はオシャレに撮ってみたいという私欲のもと、メンバーに協力してもらいました。 実際に撮影したチキンラーメンの写真 撮影中に何度も縮れた麺をみては何故チキンラーメンにしてしまったのかと自分を責めましたが、お付き合い頂いたメンバーのお陰で、初回にしてはまずまずではないかと思います。 天国のラストエンペラーもきっと「あっれー?これチキンラーメンなん?」といってることでしょう。 それくらい、ごまかしました。ごまかすことに力を入れたといってもいいでしょう。 撮影をする前の準備と反省点 では、今回の撮影を振り返ってみます。 撮影前にはどのような構図にするかは、ある
Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/neganin/web/neganin/wp/wp-content/plugins/jetpack/_inc/lib/class.media-summary.php on line 77 Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/neganin/web/neganin/wp/wp-content/plugins/jetpack/_inc/lib/class.media-summary
CSS3アニメーションを採用できる案件が増えてきたので、最近はjqueryを使用することが少なくなってきました。今回は入力フォームにjQueryを使わずにアニメーションを取り入れてみたいと思います。 フォームにデフォルトで付いているCSSのリセットも含めながら説明させて下さい。まずは、デモをご覧ください。 2. HTML 予めアニメーションさせたい「input」「textarea」「ラジオボタン」にclassを付けていきます。 <form> <div> <p><span class="ate1">必須</span>名前:</p> <p><input type="text" name="name" class="input_text" placeholder="名前"></p> </div> <div> <p><span class="ate1">必須</span>E-mail:</p> <
私の周りにはブライダルなどの人物写真を得意とするカメラマンが多く、仲間内で集まればレンズの話題に花が咲きます。 皆、用途に応じて色々なカメラやレンズを使っていらっしゃいますが、多くの方がニコン(Nikon)・キヤノン(Canon)ユーザーで、仕事では「35mm判フルサイズ」の頻度が高く、レンズは純正の「70-200mm f2.8」を使われています。 しかし、よく話題に上るのはポートレートに使う単焦点レンズだったりします。 ※表紙画像は「AF-S NIKKOR 58mm f/1.4G」 f1.4 ISO100 D750 ポートレート・人物写真にオススメなレンズ 各社から出ている「70-200mm f2.8」のレンズですが、望遠側で撮影すれば近所のちっちゃな公園でも背景の余計なものを排除してシンプルに被写体を際立たせるポートレートが撮れます。 プロの現場では時間の制約もあるので、幅広い焦点域を
3月からKodak(コダック)のフィルム価格が値上がりしましたが、フィルムユーザーの皆様もう買いだめはされましたか? 私は買いだめしようにもお財布の中に在宅していらっしゃったのは夏目漱石さんがお二人とコンビニのレシートだけでしたので、今回ご紹介する「エクター100」と「PORTRA160」を2本だけ購入しました。 実は「Instagram」でもフィルムカメラを愛用している方は多く、中判カメラの「ハッセルブラッド」「ペンタックスのバケペン」「ローライコード」「フレックス」「ブロニカS2」や「フィルム写真普及委員会」なんてタグがあったりします。そのなかで最も使用率が高いと思われる人気のフィルムをレビューしてみようと思います。 撮影機材 Nikon F100 今回使用した機材は「Nikon(ニコン) F100」。 AF-S NIKKOR 50mm f/1.8G レンズはみんな大好き、最高のコスト
2. ダウンロード 「jQuery」本体はダウンロードするか、Googleにホストされているファイルを読み込みましょう。 「Waypoints」のバージョンは3.1.1です。下記サイトからダウンロードし「lib」フォルダ内の「jquery.waypoints.min.js」を使用します。 jQuery Waypoints <header id="header"> <h1>Waypoints</h1> </header> <p id="text">jQuery Waypoints Demo</p> <div id="content"> <div id="wrapper"> <section class="section"> <figure class="thumb"><img src="img/thumb1.jpg"></figure> <h2>Title</h2> <p>Text Text
SVGとは、XMLベースのベクターイメージ用の画像形式で、アニメーションなどをサポートしています。 Webで使われている一般的な画像(png、jpeg、gif)はビットマップ形式といって、拡大縮小すると劣化してしまうのですが、このベクター形式は画像が劣化しません。 昔からある技術ですが、スマホの普及などで高解像度のデバイスや、ディスプレイが出てきたことにより、少し前から注目され、Web上で使用されるようになってきました。 今回はこのSVGを使用して、今までgifで使用していたローディング画像を置き換えたいと思います! 1. デモ Demo ベーシックな感じのローディング画像を用意しました。まずはデモをご覧ください。 IEでは動作しませんので、別のブラウザをお使いください。
「pjax」とは「Ajax」と「pushState」を組み合わせたもので、非同期通信をしながらURLを変更することができる「jQueryプラグイン」です。 各ページの差分だけ読み込み、描画するので、転送量削減ができ時間短縮を図れますし、ページ遷移時のエフェクトも追加できたり、カスタマイズ性に優れています。検索エンジンからのマイナス点もない非常に優秀なプラグインです。 「Ajax」と「pushState」が何なのかというと・・・ Ajax ページを遷移せずにサーバーからデータだけを非同期でとり、サイトに描画する仕組みのことで、「Google Maps」などに使用されています。 pushState 「HTML5」で導入されたURL操作のAPIで「Ajax」を使用して非同期なサイトを作る時などにアドレスが変更されない問題を解消してくれます。 1. デモ 前置きが長くなりましたが、実際に「pjax
デジタル一眼レフカメラの購入を考えている方の多くが、背景をぼかした写真を撮影したいと考えているようです。 ただ、せっかく購入したカメラで思うように背景をぼかすことができずに結局手軽なコンパクトデジタルカメラやスマートフォンで撮影している方が多いように感じます。 お問い合わせの1番多い内容なので簡単に背景をぼかす為の3つのコツをご紹介します。 3つだけで驚くほど写真が変わるので、ぜひ実践してみてくださいね。 今回は「Nikon(ニコン) D5300」を使ってやってみたいと思います。 年の瀬に事務作業をしながらの記事なので、作例が事務所内の写真で申し訳ないです。 1. 絞り優先モードを使う 撮影モードは「オート」ではなく「絞り優先モード」を使います。 実は「絞り優先モード」は、プロも含め多くの写真愛好家たちが使っているモードです。コツを掴めばカメラに全然詳しくなくても素敵な写真が撮れるんです。
Webサイトのデザイン制作フローのラスト!画像に関しての記事です。 「なぜ写真やイラストなどの画像を使うのか?」というと「読んでもらうため」「解り易くするため」です。 文字だけのコンテンツというのはどれだけ良いことを書いていてもパッと見小難しそうで嫌厭しがち!小説よりも漫画が読まれているように、Webもイメージを具現化したものが圧倒的に好まれます。 商用的なWebサイトなんかでは画像を使うだけでコンバージョン率が上がるなんて話も耳にするほどです。 そんな画像の覚えておくと役に立つかも知れない有効な使用方法と加工方法をいくつか! コンテンツのテーマに沿った写真を使いましょう 飲料メーカーのサイトだったら、商品の写真、商品を飲んでいる場面の写真などを使いましょうということです。 飲料メーカーのサイトで家具がメインの写真を使ってたりすると「なんのサイト?」とユーザーを困惑させたり、ネガティブな感
はじめまして。フォトグラファーの吉野です。 主に人物やweb掲載写真などを撮影していますが、店頭でのカメラやレンズの販売経験もありますので、今回はこれからデジタル一眼レフカメラを使ってみたい初心者の方を対象にした記事を書きたいと思います。 大きな量販店でカメラ売り場に行けば様々なカメラが売り場に陳列していて、予備知識が無ければどのカメラを手にとって良いのかも分からないですよね。 初心者におすすめと書きましたが、カメラに詳しくないからといって最初のカメラはぜひ入門機で!という勧め方はしません。 そしてデジタル一眼レフカメラでは無い、軽さが売りのミラーレス一眼は割愛させてもらいます。 ミラーレス一眼が決して悪いわけではありませんよ。 初心者でこれから納得のいく写真を撮れるようになる為のカメラ やはり一眼レフカメラだと考えます。 さすがにフィルムからとは言いませんが、今回はファインダーがEVF(
ブログを制作する時にやったこと、二回目はサイトデザインを行います。 今回作るのはデザインカンプというものです。 デザインカンプとはWebサイト制作の場合、ワイヤーフレームに肉付けをした完成形のイメージのことで、人によってはモックアップと呼ぶかたもおられるようです。 ちなみにモックアップは実物に似せた模型という意味だそうで、主にプロダクトデザインで使われているようです。 僕も次回からはモックアップと呼ぶことにします。なぜならカッコいいから。 制作ツール Illustrator(イラストレーター)やPhotoshop(フォトショップ)など、自身が慣れているツールで制作しましょう。 ここではPhotoshopでやっていきます。いいかしら? 初めて作る方は環境を整えましょう!Adobe(アドビ)から体験版が提供されてますので、体験版を使用するかGIMP(ギンプ)というフリーソフトがいいとおもいます
このページを最初にブックマークしてみませんか?
『Neganin(ネガニン)』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く