はてなブックマーク

レスポンシブデザインをやるときに必ずテーブルの対応で悩んでしまいます。今回はよく使う方法を実例を作ってまとめてみました。 簡単なCSSで実装する方法もあるので、案件に合わせて参考にしてもらえると嬉しいです！ CSSの記述箇所を見やすくするために、メディアクエリは「max-width」での指定とし、ブレイクポイントは720pxに設定しています。 まずは、デモをご覧ください。 HTML <div id="demo01"> <table> <thead> <tr> <th>プラン</th> <th>データ容量</th> <th>バージョン管理</th> <th>料金</th> </tr> </thead> <tbody> <tr> <td>無料プラン</td> <td>5GB</td> <td>なし</td> <td>無料</td> </tr> <tr> <td>個人事業主プラン</td> <t

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> <

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

デジタル一眼レフカメラの購入を考えている方の多くが、背景をぼかした写真を撮影したいと考えているようです。 ただ、せっかく購入したカメラで思うように背景をぼかすことができずに結局手軽なコンパクトデジタルカメラやスマートフォンで撮影している方が多いように感じます。 お問い合わせの１番多い内容なので簡単に背景をぼかす為の3つのコツをご紹介します。 3つだけで驚くほど写真が変わるので、ぜひ実践してみてくださいね。 今回は「Nikon(ニコン) D5300」を使ってやってみたいと思います。 年の瀬に事務作業をしながらの記事なので、作例が事務所内の写真で申し訳ないです。 1. 絞り優先モードを使う 撮影モードは「オート」ではなく「絞り優先モード」を使います。 実は「絞り優先モード」は、プロも含め多くの写真愛好家たちが使っているモードです。コツを掴めばカメラに全然詳しくなくても素敵な写真が撮れるんです。

複数の画像の拡大縮小などのリサイズ処理、レベル補正、トーンカーブなどの色調補正、正直一枚一枚やっていたらキリがないですよね。 そんな時に使って頂きたい「バッチ」！複数の画像をこちらで設定した通りに自動で一括処理してくれる優れものです！ 眠たい単調作業も「バッチ」のお陰で目がシャキッとなったという話も聞きます。嘘ですけど。 今回は画像の「リサイズ」と「トーンカーブ」を一括処理したいと思います！早速、準備からおこないましょう。 準備する まずは処理したい画像を一つのフォルダにまとめておきます。 失敗してファイルが無くなると変な汗が出るので、絶対にバックアップは取っておきましょう！ 僕は足の裏から変な汗が出ました。 「リサイズ」を行う場合、どういうサイズにするのか先に決めておきましょう。 横、もしくは縦の一方のサイズで統一したいんであれば気にすることはないんですが、比率を維持して「リサイズ」した

肌、目、唇の補正を素早く簡単に出来てしまう無料のPhotoshopアクション「Skin Retouching」を紹介したいとおもいます。 声を大にしては言えませんが、人物写真で「フォトショの補正が〜」とか聞いたり見たりするかと思いますが、その作業をものすごく軽減してくれます！ インストール Skin Retouching サイト下部の「Free Download」をクリックするとダウンロードが開始されます。 zipファイルですので解凍しましょう！ Skin by SparkleStock.atn Skin by SparkleStock.zxp この２つのファイルを確認できたでしょうか？ 他にもファイルがありますが、僕は２つしか無かった感じで進めます。 拡張子「.atn」がアクションファイルで「.zxp」はエクステンションです。 どちらを使用してもオッケー！

はじめまして。フォトグラファーの吉野です。 主に人物やweb掲載写真などを撮影していますが、店頭でのカメラやレンズの販売経験もありますので、今回はこれからデジタル一眼レフカメラを使ってみたい初心者の方を対象にした記事を書きたいと思います。 大きな量販店でカメラ売り場に行けば様々なカメラが売り場に陳列していて、予備知識が無ければどのカメラを手にとって良いのかも分からないですよね。 初心者におすすめと書きましたが、カメラに詳しくないからといって最初のカメラはぜひ入門機で！という勧め方はしません。 そしてデジタル一眼レフカメラでは無い、軽さが売りのミラーレス一眼は割愛させてもらいます。 ミラーレス一眼が決して悪いわけではありませんよ。 初心者でこれから納得のいく写真を撮れるようになる為のカメラ やはり一眼レフカメラだと考えます。 さすがにフィルムからとは言いませんが、今回はファインダーがEVF(

ブログを制作する時にやったこと、二回目はサイトデザインを行います。 今回作るのはデザインカンプというものです。 デザインカンプとはWebサイト制作の場合、ワイヤーフレームに肉付けをした完成形のイメージのことで、人によってはモックアップと呼ぶかたもおられるようです。 ちなみにモックアップは実物に似せた模型という意味だそうで、主にプロダクトデザインで使われているようです。 僕も次回からはモックアップと呼ぶことにします。なぜならカッコいいから。 制作ツール Illustrator（イラストレーター）やPhotoshop（フォトショップ）など、自身が慣れているツールで制作しましょう。 ここではPhotoshopでやっていきます。いいかしら？ 初めて作る方は環境を整えましょう！Adobe（アドビ）から体験版が提供されてますので、体験版を使用するかGIMP（ギンプ）というフリーソフトがいいとおもいます