Creativity When photography meets purpose, real change happens The profound power of photography as captured by purpose-driven photographers who challenge, educate, and inspire us to act through their art Read the article
人物紹介:つるたま(TSURUTA MAKOTO) 2015年4月までアパレルECサイトにて撮影を担当。現在は表参道のワンピースや宝飾店の撮影の他、Webのあちらこちらに生息。 サイト:http://one-cut.net ファッション雑誌やアパレルのECサイトなどでは、おしゃれなポートレート写真が多いですよね。屋外で綺麗な写真を撮りたいと試行錯誤している人たちにとっては、とても参考になる写真ばかりです。 今回は、ポートレート撮影初心者や、アパレルでの撮影担当者向けに、屋外ロケでのファッションポートレートのポイントをご紹介いたします。 撮影の前に ポートレート撮影の前にこれらを準備しておきましょう。 カメラ機材を準備しよう 必要なカメラ機材はこちらです。 一眼カメラ マクロなど35mm換算100mmくらいのレンズ 標準ズームの広角域レンズだと顔や体が伸びてしまいますが、焦点距離100mmほ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました レスポンシブコンテンツの中で最も扱いづらいのは画像と言えます。バイナリファイルであるために画面の大きさに関わらず同じサイズですし、画面幅の変更に対してレスポンシブに変化することができません。 そこで使ってみたいのがResponsifyJSです。画像をレスポンシブにするjQueryプラグインで、単に縮小されてしまう表示とは一味違った演出が見ものです。 ResponsifyJSの使い方 ResponsifyJSを使った例です。これは普通の表示です。 画面幅を変えました。写真は小さくなりましたが、メインとおぼしき部分の大きさはほとんど変わっていません。 実際にブラウザのウィンドウを動かしてみると、画面幅に応じて画像の内容が若干動いているのが分かるはずです。 ResponsifyJSは画像
ここで el に上記 <ul> が格納されているものとすると、 el.firstElementChild は最初の <li> になります。想定通りと思います。一方 el.firstChild はというと、 <ul> と最初の <li> の間の「改行とインデント」から成る文字列ノードが格納されています。そう、文字列もノードです。 デモ 他にもこんな感じで「ノード全種から取得」するものと「要素ノードの中から取得」するものとがあります。 parentNode vs parentElementNode children vs childNodes firstChild vs firstElementChild lastChild vs lastElementChild ? previousSibling vs previousElementSibling ? nextSibling vs next
console.log(document.forms[0]); // <form id="foo"></form> console.log(document.forms[1]); // <form id="bar"></form> console.log(document.forms['foo']); // <form id="foo"></form> console.log(document.forms['bar']); // <form id="bar"></form> forms については過去記事をどうぞ。 JavaScriptで要素を検索せずに取得する方法があります。(JavaScriptおれおれAdvent Calendar 2013 – 03日目) HTMLCollectionの出番 以下の場合がHTMLCollectionになります。 document.anchors do
DOMおれおれAdvent Calendar 2015 – 14日目分 TreeWalkerというオブジェクトがあります。その名の通り、(DOMの)ツリーを歩き回るオブジェクトです。 例えばこんな構成。(インデント等によるテキストノードはないものとします。) div#root + div#el-1 + div#el-1-1 + div#el-1-1-1 あるノード(#root)を起点に、長子の子孫を巡り(#el-1→#el-1-1→#el-1-1-1)、また戻ってくる(#el-1-1→#el-1→#root)という処理が必要だとします。 普通に関連ノードを参照して移動していくコードはこんな感じです。 var origin = document.querySelector('#root'); var current = origin; // 子孫を巡る while (current.firs
var el1 = document.body; var el2 = document.querySelector('body'); console.log(el1 === el2); // => true
var origin = document.querySelector('#origin'); var parent = document.querySelector('#parent'); var result = origin.compareDocumentPosition(parent); console.log(!!(result & origin.DOCUMENT_POSITION_PRECEDING)); // => true console.log(!!(result & origin.DOCUMENT_POSITION_FOLLOWING)); // => false console.log(!!(result & origin.DOCUMENT_POSITION_CONTAINS)); // => true console.log(!!(result & origin.D
DOMおれおれAdvent Calendar 2015 – 17日目分 HTML5になって data-xxx という形の任意の属性を、あらゆるタグに書けるようになりました。属性なので getAttribute() とかで扱えるんだけど、それとは別に専用の dataset というものもあります。 var el; // => <div data-foo="123" data-sushi-type="roll" /> // 取得 console.log(el.getAttribute('data-foo')); // => "123" console.log(el.dataset.foo); // => "123" // 設定 el.dataset.foo = "Woof!"; console.log(el.getAttribute('data-foo')); // => "Woof!" //
var el = document.querySelector('#wrapper'); el.addEventListener('click', function(event) { console.log(this.id, event.target.id, event.currentTarget.id); }); デモ event.currentTarget event.currentTarget が this と同じになります。(なので、よく bind() で this は違うものにしたりします。) event.target event.target は最初にイベントが起こった要素です。上記の例だと監視しているのは <div> です。その要素内の <button> をクリックした場合、 event.target はクリックした <button> 、 event.currentTarge
DOMおれおれAdvent Calendar 2015 – 20日目 イベント監視のコールバックでもらえるeventオブジェクト、色々使えます。 UIのデフォルト動作を止める 何と言っても event.preventDefault() が一番良く使われるかと思います。リンクで実装されてるけど見た目も動作もボタンていうね。(できるなら <button> で書いてほしい……。) var elButton = document.querySelector('a#the-button'); elButton.addEventListener('click', function(event) { // リンクの画面遷移をキャンセル event.preventDefault(); // 何かボタンを押した際の処理…… }); ウェブページが持つUIは利用者の操作を受け付けて諸々の「デフォルト」動作を行
1920年代の建築物・美術品・工芸品・ファッションなど、実在のリソースを参考にハンドメイドでベクター化されたアール・デコ調のデザイン素材を紹介します。 アール・デコの幾何学な図形はいろいろ組み合わせても楽しめます。 Free Art Deco Vector 素材は無料版と有料版があり、無料版は個人でも商用でも利用できます。 その無料版の中身を紹介します。 まずは、フレームのエレメント素材。 組み合わせて使用することで、さまざまなフレームを作成できます。
Webページ作成のベースになる、HTML5の必要最小限の構成にしたテンプレート、各ブラウザのスタイルを正常化・リセットするスタイルシート、レスポンシブ対応の柔軟なグリッドをつくるスタイルシート、さまざまなCSS3アニメーションを簡単に利用できるスタイルシートを紹介します。 HTML5で作成する時の必要最小限のテンプレート スタイルの正常化・リセット グリッドをつくるスタイルシート CSS3アニメーション HTML5で作成する時の必要最小限のテンプレート まずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。 A Generic HTML5 Template -GitHub ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。 テンプレートはIE9や8以下への最低限の配
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く