precommendのブックマーク - はてなブックマーク

Photoshopで一部分が暗い画像を明るくする方法

Photoshopで画像の一部分を明るくする方法を紹介します。１．はじめに次のように、撮影した写真の右側が暗くなってしまいました。全体を明るくするのであれば、「Photoshopで暗い写真を明るくする方法」でできるのですが、部分的に明るくする方法が分かりません。ということで、Photoshopで一部分が暗い画像を明るくする方法を紹介します。２．画像の一部分を明るくする画像の一部分を明るくするには、「グラデーションツール」をクリック。メニューバーの「選択範囲」→「クイックマスクモードで編集」を選択（メニュー左にチェックがつきます）。画像上をマウスでドラッグし（矢印の部分）、補正したい部分グラデーションをかけます。補正しない部分に赤色が付きます。メニューバーの「選択範囲」→「クイックマスクモードで編集」を選択し、チェックを外します。選択範囲が表示されます。メニューバーの

precommend 2016/07/29

リンク

異なる用紙サイズが混在するPDFのサイズを統一する方法

異なる用紙サイズが混在するPDFのサイズを統一する方法を紹介します。１．問題点 PDFファイルに異なるサイズのページが混在しているものとします。各ページを縮小表示した状態（クリックで画像拡大、以下同様）このファイルの中のページをすべて同じサイズに変更したいのですが、方法が分かりません。２．PDFのサイズを統一する Adobe AcrobatでPDFファイルを開き「ファイル」→「印刷」をクリック。プリンタから「Adobe PDF」を選択し、右にある「プロパティ」をクリック。「レイアウト」タブをクリック。印刷の向きを設定。ここでは縦を選択します。「詳細設定」をクリック。「用紙サイズ」から出力したいサイズを選択。ここでは「A4」を選択します。設定後、各画面を「OK」をクリックして閉じます。「ページの拡大縮小」を「用紙に合わせる」に設定。「自動回転と中央配置」と「PDFのペー

precommend 2014/10/15

リンク

HTML要素を別の要素を基点にしてCSSで絶対配置する方法

HTML要素を別の要素を基点にして、CSSで絶対配置する方法を紹介します。１．はじめに次のようなHTMLマークアップで、画像の上に「coffee」と文字を表示させたいと思います。 HTMLマークアップ <div> <img src="coffee.png" /> <div>coffee</div> </div> 完成イメージまた、ブラウザの幅や高さを変更してもテキスト位置が画像からずれないようにしたいです。この場合、子のdiv要素の内容をimg要素に重なるように配置する必要がありますが、その方法が分かりません。２．ある要素を別の要素を基点にして絶対配置するある要素を別の要素を基点にして絶対配置するには、基点となる親要素にposition:relativeを設定し、子要素（ターゲットの要素）にposition:absoluteを指定して親要素からの絶対位置を指定します。さきほど

precommend 2014/09/27

リンク

JavaScriptメールアドレスチェッカー

JavaScriptのメールアドレスチェッカーを作ってみました。記事を書くにあたって、メールアドレスについてのRFCや関連記事をざっと調べてみました。結果、どういったバリデーションチェックがよいのか落としどころがみつかってませんが、単純にJavaScriptで正規表現を使って動くものを作ってみたいと思っただけなので、ゆるいチェック（現実的）とややきびしいチェックの2つに対応させてみました。１．メールアドレスチェッカー下記のフォームからモードを選択し、メールアドレスを入力して「チェック」をクリックすれば検証結果を表示します。ゆるい（現実的）きびしい結果：ゆるい方のチェックは次のとおりです（抜粋）。 $(function(){ $('#check').click(function(){ var address = $('#address').val(); if (address

precommend 2014/09/22

リンク

JavaScriptでCSSの擬似クラスを設定する方法

JavaScriptでCSSの擬似クラス（:link/:visited/:hover/:activeなど）を設定する方法を紹介します。１．問題点 JavaScriptでCSSを設定する場合、例えばテキストリンクの色を設定するには、styleプロパティを利用して次のように記述します。 <a href="http://.../">foo</a> <script> var foo = document.getElementsByTagName('a'); foo[0].style.color = '#f00'; </script> ですが、styleプロパティには擬似クラスがなく（というか、そもそもプロパティではない）、 a:link a:visited a:hover a:active などの設定方法が不明です。注：jQueryは使わない前提とします。２．擬似クラスを設定する調べるとい

precommend 2013/06/01

リンク

CSSでfloatを解除する方法のまとめ

CSSのfloatを解除（クリア）する方法をまとめてみました。以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除するということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。１．floatにより親要素の高さが出なくなる（＝背景がなくなる）問題親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。例えば、次のCSSとHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi