パースのついた画像から不要なものを消す時、なかなか上手くいかないことはありませんか。 画像から不要な部分を消す場合「コピースタンプツール」や「コンテンツに応じた塗りつぶし」をよく使いますが、このようなパース（遠近感）のついた画像だと、、 コピースタンプツールを利用↓ コンテンツに応じた塗りつぶしを利用↓ ちょっと違和感がありますね。。 こんな時、PhotoshopのVanishing Pointが良いということで試してみました。 Vanishing Pointで不要なものを消す手順 メニューからVanishing Pointを選択 ダイアログボックスで編集範囲を作成 Vanishing Pointのスタンプツールで不要な部分を消していく 編集を確定し、ダイアログボックスを閉じる 1. メニューからVanishing Pointを選択 メニューの「フィルター」→「Vanishing Poin

URLのパラメータやアンカー（#以降の部分）を取得して、その値ごとに処理を変更する方法をまとめました。 URLのパラメータで判断する場合 パラメータは、「?」+「変数(パラメータ)＝値」というかたちで構成されています。 ※パラメータは1つとは限らず、複数ある場合は「&」でつないでいきます。 まずlocation.searchを利用して「?」で始まるパラメータ部分を取得します。（substring(1)とすることで2文字目以降［?以外］を取得します） もしURLにパラメータが存在すれば、さらに「&」で分割した後に、連想配列のkeyとvalueにそれぞれパラメータのkeyとvalueを格納します。 処理を変更するにはif文で条件を指定するだけです。 【パラメータに「id=osaka」が含まれるかどうかを調べる場合】 // URLのパラメータを取得 var urlParam = location

SafariのWebインスペクタ for MAC ウェブページの制作を行う際、iPhoneでどのように表示されるか・動作するかをチェックする際に便利な機能があるのをご存知でしょうか？ Safariには「Webインスペクタ」という開発者向けツールが標準で搭載されており、この「Webインスペクタ」で要素の検証や、デバックなどがPCから調査できる!という機能です。 ご利用の手順 まず、iPhone側の準備としては以下の通りになります。 ホーム画面から、「設定」→「Safari」を開きます。 画面一番下の「詳細」を開き、「Webインスペクタ」をONにします。 次に、PC側の設定。 MacからSafariを立ち上げます。 Safariのメニューから「環境設定」を開きます。 「詳細」タブから「メニューバーに"開発"メニューを表示」にチェックをいれます。 メニューバーに「開発」が追加されていることを確認

突然ですが、僕はずっとPostCSSを誤解していました… このたび晴れて誤解が解けたので、記念に記事を書きたいと思います。 Sassの代わりではない はい、これです。 この記事で言いたいことは、これがほぼ全てです。 僕は、PostCSSを、コンパイルしてCSSを生成するSassのようなものだと思っていました！ ですが、そもそもSassを使っていたので全くと言っていいほど必要性を感じてませんでした。 PostCSSは自分で必要な機能だけを選べるからカスタマイズ性がある！楽しい！軽い！ とか言われても、Sass遅くないし、むしろ必要な機能を選んで構成するのがめんどくさいと思ってました。というか今も思ってます。 ポストプロセッサーとしてのPostCSS PostCSSというくらいなので、ポストプロセッサーとして、生成されたCSSに対して後処理をすることに使えます。 (導入するプラグインによっては

position:fixedを使ってヘッダを固定した場合 ページ内リンクの位置がヘッダの高さ分ずれてしまいます。 ヘッダを固定する案件が増えてきましたので覚書です。 CSSで調整する方法と、JavaScriptで調整する方法があります。 ヘッダの高さ：100px ■HTML <div id="header"> ヘッダーがはいります </div> <div id="content"> <a href="#link01">なんとか</a> <div name="link01" id="link01">かんとか</div> </div> CSSで調整する padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるとうまくいきます。 margin-top:-100px; padding-top:100px; ■CSS #header { width: 100%; m

みなさん、インデントはタブ派ですかスペース派ですか。 インデントは 2つですか 4つですか。 一人でコードを書いている分には好みの書き方でいいかと思いますが、チーム作業する場合には、ここを揃えておかないとエラいことになりますね。タブとスペースと混じったコードは見てて気持ち悪いですし、git のコミットログもめちゃくちゃになる。ストレスたまる。 なので何らかの規約に則って、各自がしっかりエディタの設定をすればよい！！！……とはいえ、この手間を楽にできたりはしないもんか。 たとえばプロジェクトごとに事情があり、この案件はタブであの案件ではスペース、という場合は？ いちいち設定切り替える……？ 設定忘れでコード崩れるとかつまらないので、できれば未然に防ぎたい。 ということで EditorConfig の出番となります。 EditorConfig とは？ http://editorconfig.o

2019年11月のブラウザと OS のバージョン別シェアを調査しました。 引用元を別記しているものを除き、以下サイトから引用しています。 Market Share Reports｜NetMarketShare https...

テキストを長体にしたいとき、画像ではなくCSS3を使う方法があります。 テキスト要素に対してtransformのscaleの値を調整すると、文字の一つ一つを細くしたり平たくしたりできます。この方法はWebフォントに対しても使えます。 表現の幅が広がりますね。 ただし、transformの性質上、説明文などの長い文章や、文章中の一部に使おうとするとき、表示がうまくいかないことがあります。ハマりやすいポイントがあるので、すべてのテキストに適用するのではなく、使う場所を選んで設定することをオススメします。 基本的な使い方 <p class="text">普通のテキスト</p> <p class="text text-narrow">長体テキスト</p> <p class="text text-wide">平体テキスト</p> <style> .text { text-align: center;

ブレンドモードとは？ 簡単にいうとPhotoshopやIllustratorで使うオーバーレイがなんとCSSでできちゃいます！ 残念ながらSafariの一部、IE, Edgeはサポートしていないので実際に案件で使うことはまだ少ないかと思います。 参考：Can I use … mix-blend-mode こんな感じでcssで加工ができます。 例 ： 背景色　+　画像 ※Chrome や Firefoxなど、対応ブラウザでご覧ください！ See the Pen XgMKGp by hitomi (@hitomi701) on CodePen. backround-blend-mode 背景画像にも対応できます！ .blend-mode { background:green url(images/img01.jpg) no-repeat; background-blend-mode: mult

以前Pug(Jade)を使った制作環境を作る方法を紹介しました。 Pug(Jade)で効率的なマークアップ環境を作る 今回はPugでマークアップをしていくときに、よく使う書き方を紹介します。 ベースになるルールは9個あります。 タグ名はHTMLタグになる 改行をしてインデントをつければ入れ子になる インライン要素や改行にはパイプライン（|）を使う（ここだけ慣れが必要） HTMLはドット（.）で終わる要素の中に入れておけば解釈される 属性は丸括弧内に記述する クラス属性はドット（.）、ID属性はシャープ（#）で表す コメントにはHTMLとして出力されるものと、されないものがある イコール（=）を使えばエスケープできる インクルード（include [ファイル名へのパス]）で共通化したファイルを挿入できる Pugとはなにか？ Sassを使ってCSSを作成している人は多いと思いますが、PugはH

来月・2017年4月11日、「Windows Vista」の Microsoft による延長サポート終了とともに、IE9 の公式サポートも終わります。 公式サポートは IE11 のみに IE10 と IE8 はともに、2016年1月にサポートが終了していますので、IE9 のサポートが終わる 4月11日以降は、Microsoftが公式サポートする IE は IE11 のみになります。 サイト制作時の対象ブラウザとして、IEのバージョンは 9〜 にしていることも多いかと思いますが、以下のようなリスクがあるため、「IE11」に変更することをおすすめいたします。 「セキュリティ更新プログラム」が提供されなくなるため、脆弱性を突いた不正アクセス、情報漏えい、データ改ざんなどのリスクがある。 テクニカルサポートの提供を受けることができなくなる。 ［参照］ 2017 年にサポートが終了する製品 - Mi

レスポンシブ対応などの際、デザイン性を重視し、「ここだけは文字サイズを小さくしてエリア内に納めたい!」という要望があったとします。その場合、みなさんはどんな方法で対応しますか？ ブラウザ上でフォントを 10px以下のサイズとして表示させたい ブラウザが表示できるテキストの大きさ（font-size）には限界があります。最小サイズはブラウザの設定によっても異なりますが、例えば chrome では 10pxが一番小さいフォントサイズです。 transform:scaleを使ってみる！ CSS3 の機能で要素を拡大・縮小表示する際に使う scale。こちらを利用し、font-size:10px; に設定した文字を縮小させ、ブラウザが表示できる限界のサイズを超えていきたいと思います。 では早速。 CSSコード div{ font-size: 10px; } .font_01{ transform:

はじめに：HTMLメールを取り巻く環境 HTMLメール、作ってますか？ マーケティングオートメーションと組み合わせたメールマガジンや、アプリケーションの通知メールなど、多くのプラットフォームがメール配信を行っていますが、その制作で頭を悩ませる担当者は多いことでしょう。 通常のWebサイト制作と同様には行かず、制約の多さ、対応するデバイスの豊富さなど数多の困難が待ち受けています。 総務省から出された平成26年度の情報通信白書の図4-1-1-26によれば、スマートフォンを購入することでGmailなどのメールサービスの利用頻度が増えたという調査結果があります。 他国に比べ携帯キャリアメールの強い日本でも、SIMロック解除の進む今、クラウドメールサービスの台頭は今後も続いていくでしょう。 GmailやiCloudなどのメールサービスでは、メールクライアントに昔ながらのPOP/IMAPなどの設定をせ