テンプレートを使って作成されたHTMLメールがOutlookで盛大に崩れていたので調整してみた - Qiita
普段はwebサイトのHTMLを修正するのがメインの自分に、「幅の設定がおかしいから調整してみて」と依頼があり実際各メーラーで確認したところ幅の設定どころではなかった。 Gmail(PC): 表示される画像が画面をはみ出している Outlook(PC): 背景画像が表示されない ThunderBird(PC): 設定している横幅を貫通して要素が横並びになっている Android EmailApp: 背景画像が表示されない なんとか無難に表示できるようにはしたので 調べた内容をまとめておく 参考ページ @IT記事 vml参考記事 各メーラー仕様 viewportについて よくある width="device-width" はスマートフォン表示に必須 initial-scale=1.0 は幅決め打ちの要素がある場合にandroidで解釈がおかしくなる(device-widthを無視して、決め打ち
HTMLメールを作るにあたって知っておきたいこと - Qiita
最近、HTMLメールをいっぱい書く機会があったのですが、あまりウェブに良い情報がなかったので、メールを作る上でこれは知っておいた方が良いと思うことをまとめておきます。 メールの表示はブラウザとは異なる 大前提として、メールの表示はブラウザとは異なることが多いです。 なので、ちゃんとレイアウトを再現しようとすると、 ブラウザではなくメーラーで表示を確認する必要があります。 メールの表示はメーラーによってバラバラ メールの表示はメーラーによってバラバラです。ブラウザとほぼ同じように解釈してくれるメーラーもあれば、全然違うレイアウトで表示してくるメーラーもあります。なんでそんなに変わるのかというと、主に以下のような要因があります。 各種CSSプロパティの解釈の有無 ヘッドタグやスタイルタグの読み込みの有無 メーラーによる独自の最適化（それっぽい感じで'読みやすく'しようとする） CSS Supp
HTMLメールのメールマガジンのコーディング【スマートフォン最適化篇】 | 株式会社NONAME Produce(n2p)｜デジタルプロモーション企画・制作
HTMLメールのメールマガジン、スマートフォンでも、もっと見やすくする方法をまとめました！ 前回までは、PCで見るためのHTMLメールの作り方をお伝えしました。 しかし、前回までの方法ですと、Androidの一部機種で、 画面の領域から文字や画像がはみ出し、スクロールバーが表示されてしまい非常に読みにくい。 viewportを設定しても無効になってしまいます。 そんな難題に答えてみた本日のサンプルはこちらです。 デザイン上の注意 デザインは横幅300px程度のスマートフォンの画面で見ることを前提に、横幅600pxで作る。 横幅600px以上は背景色が見えるようにします。 600px未満では縮められるようにする想定です。 レイアウトは一カラムで メディアクエリやjavascriptなどはきかないので、 横幅に応じて一カラムと二カラムを切り替えるのは難しいです。 なので、ニカラム以上のレイアウ
CSSのvw, calc()を使用した、レスポンシブ対応のフォントサイズを指定するこれからのテクニック
本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？ フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精
font-sizeの指定にはrem、それ以外にはem。これからは？ - Qiita
remがそろそろ（いい加減IE8切り捨てて）一般的になりそうですね。 ってか、なってます？CSS初心者の方へのおさらいとこれからについて少し書きます。 そもそも remってのはroot emのこと。html（とは言い切れないけど）のフォントサイズを1として考える単位。 emってのはcssの「指定した場所」のフォントサイズを1として考える単位。 ついでにpxってのは画面の色の最小単位。例えるなら一般的な画面はpxっていうランプが1920個×1080個ついてるってこと。 emの便利なところ フォントサイズに合わせてさまざまな場所のデザインができるとこ。 <html> <body> <h1>ほげほげ</h1> <h2>hogehoge</h2> <ul> <li> <ul> <li>abc</li> <li>def</li> <li>ghi</li> </ul> </li> <li> なんちゃら
レスポンシブデザインで気をつけたい、電話番号の扱い - Qiita
レスポンシブデザインでWebページを制作する際、電話番号の扱いにいつも迷うのでまとめてみました。 電話番号の自動リンク機能を無効化する iPhoneやiPadに搭載されているsafariでは、ページ内の電話番号を自動でリンクに変換し、タップすることで電話をかけることができる機能が用意されています。 しかし、この機能は注文番号やIPアドレス、そのほか電話番号らしき数字で構成された文字列をすべてリンクしてしまうという問題があるほか、Android端末やChromeにはこの機能がないため、ユーザの混乱を避けるためにも無効化しておくのがベターです。 電話番号の自動リンク機能を無効化するには、head部に以下のように追記します。 <!DOCTYPE html> <html> <head> <!-- 電話番号の自動リンク機能を無効化 --> <meta name="format-detection"
digitalskill.jp
Buy this domain. digitalskill.jp 2020 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
新しいウィンドウ(またはタブ)で開いて前に出したい - Qiita
～だけなんだけど、ブラウザによって色々違って苦労した記録。 ウィンドウ(またはタブ)の記述は面倒なので以降は必要な場合を除いて「ウィンドウ」で統一する。 新しいウィンドウで開くには あるURLを新しいウィンドウで開きたい場合には何通りかの方法がある。 window.open関数の第2引数に名前を指定して実行 FORMタグのtarget属性に名前を指定してsubmit Aタグのtarget属性に名前を指定してclick 以下に簡単な解説、わかりきっているなら飛ばしていい。 window.open関数を利用 var win = window.open('http://example.com', 'newtab'); //=> 新しいタブで開く win = window.open('http://example.com', 'newwindow', 'width=400,height=300')
親ウインドウのページ移動と同時に子ウインドウを閉じる：himeflute@blog：So-net blog
フルート、web、PC、アロマ、手作り、空間・・・興味のあることい～っぱい！！ シングルマザーhimefluteはステキな生活を目指します☆ 今日、とあるwebサイトのHTMLとCSSとjavascriptをいじっていたら 今まで知らなかったワザが使えるようになりました。 私はjavascriptがまだよくわかってませんので、初歩的なワザかも知れませんが。。 内容はですね、説明がうまくできずややこしいんですが、 １) 親ウインドウからリンク先を子ウインドウで開く ２) 開いた子ウインドウで指定したページを親ウインドウで開かせる ３) １)で開いた子ウインドウを閉じる １) HTML内に＜a href="javascript:void(0)" onclick="window.open('new.html', 'newwindow','width=400','scrollbars=yes')"
[JavaScript]子ウインドウから親ウインドウの関数を実行する | アイスケット | 神奈川県相模原市ホームページ制作、SEO対策、運用なら
JavaScriptで子ウインドウから親ウインドウの関数を呼び出して、内容を通知する方法をご紹介します。 まずは子ウインドウをオープンするためのHTMLです。名前はmain.htmlとでもします。 onClickイベントでJavaScriptの関数を呼び出すように書いています。 <html> <head> <script type="text/javascript" src="form.js"></script> </head> <body> <input type="button" id="parent_button" value="子ウインドウを開く" onClick="openChildWindow()"> </body> </html> さらに子ウインドウに表示するchild.htmlはこちら。TESTという文字列を親ウインドウに送ります。 ポイントはopenerという変数です。子
window.openerプロパティ - JavaScript（ジャバスクリプト）リファレンス
サンプルの動作について 「新たにウィンドウを開く」ボタンをクリックすると、新たなウィンドウを開き、「①」の右横に「ウィンドウを開きました。」と表示する。 新しく開いたウィンドウ内の「このウィンドウを閉じる」ボタンをクリックすると、新しく開いたウィンドウを閉じ、このウィンドウの「②」の右横に「ウィンドウを閉じました。」と表示する。 サンプルのソースコード <script type="text/javascript"> var $sampleWindow; function openSampleWindow() { $sampleWindow = window.open( 'http://alphasis.info/wp-content/uploads/2013/07/javascript-windowObject-opener.html' ); $sampleWindow.opener.do
Boostnoteの使い方 まとめ - Boostnote
Boostnoteの記事一覧をまとめました。 お問い合わせなどありましたらこちらまでよろしくお願いします。 ・Twitter ・Facebook ・Reddit はじめに Boostnoteコミュニティの紹介 Boostnoteの各コミュニティのまとめです。 コミュニティ上で最新記事を発信しているので、ぜひ参加していただけると嬉しいです。 boostnote.hatenablog.com 記事一覧 基本的な使い方 ノートの作成方法と設置画面 上記の2つの主な機能の使い方と、Boostnoteのデザインやフォント、エディタのモードなどを変更方法を紹介している記事です。 boostnote.hatenablog.com Boostnoteのメモを、クラウド上に同期する方法。 Boostnoteは、何も設定しなければlocal storageにデータが保存されるようになっているのですが、 Dro
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
しみけん:photoshopで飛び出す３Ｄロゴをつくる
2007年10月03日 photoshopで飛び出す３Ｄロゴをつくる ちょっと必要に迫られて、Photoshopのみでこんな飛び出すロゴを作る方法を考えたので公開します。 Illustratorなら一発でできるプラグインがあるんですが、Photoshopでもちょっとした手間でできました。 まず立体にしたい文字などを画面の下のほうに配置します。 レイヤーを複製して、元の文字は隠しておきます。 エンボスフィルタをかけます。フィルタに限らず文字のフチ部分に明暗ができれば、他のやり方でも手書きでもかまいません。 テキストとフィルタもラスタライズして、自由変形[Ctrl＋t]でこんな形にします。 移動ツール[V]を選択してAltを押しながら↑キーを押すと位置ピクセルずれて複製されます。これでもう既に奥行きが伸びてきました。 それを10ピクセルくらい繰り返したらいったん結合して、Alt＋Shift＋ド
ミニマルスタイルの隠しテク！継ぎ目のない質感系フリーパターン素材まとめ
シンプルなデザインにしたいけど、なにか物足りない。 そんなときは、ほんの少しだけ繊細な質感を加えたパターンテクスチャを利用してみてはいかがでしょう。Photoshopを使えば、どんな範囲でも継ぎ目ないデザインパターンで作成でき、ウェブサイトやアートワークの背景など、スタイリッシュな雰囲気を気軽に演出することができます。 詳細は以下から。 ミニマルスタイルの隠しテク！質感系パターンテクスチャまとめ 11 Light Subtle Patterns PAT 大学ノートや方眼紙などの紙をモチーフにした、繊細なイメージを表現したいときに使えるPhotoshop用.PATファイルとjpegファイルも一緒に収録しています。 10 Fresh Light Patterns パターンの濃淡に応じて使用するテクスチャを変更して、どんなデザインにも合わせやすい工夫が。 Essential Patterns グ
Photoshopに役立つ、無料の万能パターンテクスチャ厳選40枚 2017年4月度
グラフィックデザインからウェブ制作まで、幅広く利用できる Photoshop 用の無料パターンテクスチャ素材をまとめてご紹介します。どれも最近公開されたものばかりで、新しいデザイントレンドも手軽に取り入れることができ、制作時間の短縮にもつながります。 特に今年人気の高いカラフルデザインやモダンレトロの他に、どんなデザインにも役立つ万能アイテムなどが揃います。デザインが何か物足りないと感じるときは、無料ダウンロードできるPhotoshopパターンを活用してみましょう。 デザインの現場ですぐ使える、おしゃれな無料パターン素材38枚まとめ ミニマルスタイルの隠しテク！継ぎ目のない質感系フリーパターン素材まとめ 商用利用にも対応！すごいフォトショップのパターンテクスチャ素材まとめ 2015年7月度 Photoshop パターンの基本的な使い方 パターン素材は、一度インストールしてまえばパターンピッ
デザインの現場ですぐ使える、おしゃれな無料パターン素材38枚まとめ
Photoshop の便利なデザインツールの中で、デザインをガラリと変えることができる機能のひとつが、パターン素材です。選択した範囲を、手軽に継ぎ目なく塗りつぶすことができ、ウェブデザインや広告バナー、プレゼン資料など、さまざまなデザインの背景にも利用されています。 今回は、デザインですぐに使えるパターンテクスチャ素材をまとめてご紹介します。どんなデザインにも合わせやすいシンプルな素材から、人気の和柄パターン、水彩ペイントや手描きなナチュラル系アイテムなどかわいい素材が豊富に揃います。どれも無料ダウンロード可能となっているので、今後のデザイン制作に活用してみましょう。 詳細は以下から。 デザインの現場ですぐ使える、おしゃれな無料パターン素材まとめ Free Photoshop Halftone Patterns 用意したアートワークや写真にパターン素材を重ねるだけで、質感をグッとアップでき
Photoshop の基本的なこと | Web Design Leaves
環境設定 環境設定ダイアログ：Ctrl + K (Command + K) 単位・定規 「定規」と「文字」を pixel に設定 ガイド・グリッド・スライス 「グリッド」の例 カラー：カスタム（#CCCCCC） スタイル：点線 グリッド線：「値（グリッドの間隔の値）」：100、「単位」：pixel、 分割数（１つのグリッド内の分割線の数）：20 必要に応じて、このオプションの単位を変更。「％」を選択すると、画像を均等に分割するグリッドを作成できる。例えば、「％」で 25 を指定すると、画像を縦と横に 4 分割するグリッドが作成される。 ショートカットの変更 「１段階戻る」のデフォルトは Ctrl + Alt + Z (Command + Option + Z) これを「Ctrl + Z (Command + Z)」に変更する場合 「編集」→「キーボードショートカット…」 「編集」の左横の▲
PostCSSとcssnextで最新CSS仕様を先取り！
どうも、Kaizen Platform, Inc.の@t32kです。今日はPostCSSについて解説しようと思います。PostCSSについてはそれを解説した同僚のスライドも素晴らしいので、そちらも参考にしてもらえば幸いです。 PostCSS とは何か // Speaker Deck PostCSSとはなにか？ PostCSSは、Autoprefixerの作者でも有名なロシアのAndrey Sitnik氏が開発しているツールです。 postcss/postcss 公式のレポジトリのREADMEには以下のように書かれています。 PostCSS is a tool for transforming styles with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax,
PostCSSとは何か - morishitter blog
PostCSSというnode.js製のツールがある。 PostCSSのGitHubでのStar数は4000を超え、海外のブログではPostCSSについての記事をよく目にするようになった。しかしまだ日本では盛り上がりを感じていないので、日本語のPostCSSの記事を書くことにした。 PostCSS PostCSSとは、JavaScriptで書いたプラグインでCSSを変換するためのツールだ。 PostCSS自体は、CSSパーサーとそのASTを操作するためのAPIのみを提供していて、ユーザーはPostCSSのプラグインを書くことでCSSを変換することができる。 僕もPostCSSを使って、以前ブログにも書いたAtCSSというCSSプリプロセッサーや、postcss-style-guideというスタイルガイドをMarkdownから自動生成するためのプラグインなどを書いたことがある。 PostCSS
Avenir Next
■■■ Avenir Next ■■■ Hermann Zapf 氏の Optima に続き、Avenir が生まれ変わりました。 書体デザイナーの Adrian Frutiger 氏といえば Univers や Frutiger などのサンセリフ書体のデザインで知られていますが、日本では意外と知られていないのが Avenir です。１９７６年に制作して以来、欧米ではつねに売り上げの上位に顔を出しているこの書体 Avenir も、最近デザインを一新した日本航空のキャンペーンで使われるなど日本で注目が高まりそうです。 大文字と小文字のオーがほぼ正円であることなどから、書体デザインの位置付けとしては「幾何学的サンセリフ」の部類にはいるこの書体は、同じ部類の Futura や Avant Garde Gothicとは明らかに異なる特長を持っています。小文字の a の形を、識別性の高い「二階建て」
HTMLメール用のCSSリセットとテンプレート、主要なメールクライアントのバグにも対応 -normalize.email.css
WebブラウザがFlexboxやCSS Gridをサポートしていく中、HTMLメールではXHTMLとtableレイアウトがまだまだ主流です。 HTMLメールを作成する時のベースになる、HTMLのテンプレートと有用なデフォルトのスタイルを提供するCSSリセットを紹介します。 normalize.email.css -GitHub normalize.email.cssの特徴 normalize.email.cssの構成 HTMLメールを作成する時のテンプレート normalize.email.cssの中身 normalize.email.cssの特徴 ほとんどの電子メールクライアントに有用なデフォルトのスタイルを提供。 ネイティブプラットフォームのフォントスタイルを作成。 HTMLメールの一般的なバグに対応。 コメントを使用したスタイルの説明。 normalize.email.cssの構成
よく使う正規表現はもうググりたくない！ - Qiita
タイトル通りによく使う正規表現を毎回ググるのが効率悪いのでまとめてみました。各言語で正規表現のサンプルを書いてみました。 正規表現式 Emailアドレス ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$ ドメイン名 ^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9]\.[a-zA-Z]{2,}$ インタネットURL ^(http|https)://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ユーザー名 (Twitter username) ^[a-zA-Z0-9_\-.]{3,15}$ 固定電話 ^0\d-\d{4}-\d{4}$ 携帯電話 ^(070|080|090)-\d{4}-\d{4}$ IP電話 ^050-\d{4}-\d{4}$ フリーダイヤル ^0120-\d{3}-\d{3}
かんたんMarkdown
↑↓Insert TagEditDownload×↑↓Insert TagEditDownload×↑↓Insert TagEditDownload×↑↓Insert TagEditDownload× # かんたんMarkdown KanTanMarkdown is a markdown editor and previewer which runs on single html. English contents is [here](temp/english_sample.html). かんたんMarkdownはメモ帳感覚で使えるちょっと変わったMarkdownエディタ、プレビューアです。クロスプラットフォームで、リアルタイムプレビューにも対応しています。 * ちょっとメモしたいけどMarkdownの環境がない * 人に渡す簡単な資料をMarkdownで作りたい * チーム内で小規模なド
簡単なMarkdownエディタを作る - Qiita
自作 Web アプリに簡単な Markdown エディタを入れたくなった。 埋込み型のエディタ はあるっぽい。 でもそんな高機能でなくていいし、いちいち使い方調べるのシンドイし、 Markdown の JavaScript 用パーサーはあるみたい だから簡単に作れそう。 作ってみたら、３０分くらいですぐにできた。 ということで作り方メモ。 作るもの こんなの 左のテキストエリアに Markdown を記述すると、右側に結果が出力される。 opengl-8080/SimpleMarkdownEditor 用意するもの Markdown のパーサー Markdown で書いたテキストをパースして、 HTML を吐き出すパーサー。 marked を使ってみる。 コードのハイライト コードブロックをハイライトしてくれるライブラリ。 highlight.js を使ってみる。 スタイル設定 marke
爆速でターミナルをポケモンにする - Qiita
hyperがインストールされるので開く 設定ファイル編集 homeに .hyper.js が生成されているはずなので、 config: {/* ここの部分 */}に pokemon: 'random', // Define your favorite pokemon theme pokecursor: 'true', // Activate your theme's pokecursor pokemonSyntax: 'dark', // Define the color of the terminal tabs unibody: 'false', // Define the color of the Hyper window header poketab: 'true', // Deactivate your theme's poketab // Future versions of H
デザインでつまずかない！ノンデザイナーのための基本ルール10個まとめ
優れたデザイン原則は、誰にでも学ぶことができ、活用することもできます。 このガイドは、デザインの現場で利用できる実用的で基本的なテクニック10個をまとめてご紹介します。これらの基本ルールを知るだけで、あなたのデザインがずっと良くなります。 ずっと使える、デザインの基本まとめました。【2020年改訂版】 プロに学ぶ、一生役立つ配色の基本ルール8個まとめ【保存版】 コンテンツ目次 1. コントラストを活用しよう。 2. 「黒に近い黒」が「黒」よりも読みやすい。 3. 重要なコンテンツを最初に。 4. すべてのものを整列させよう。 5. 文字サイズと文字スペースに気をつけよう。 6. 検索結果の順番が重要なときは「リスト表示」。 7. まずは白黒でデザイン、あとから色を追加しよう。 8. 快適なデザインを目指そう。 9. 素敵な配色カラーパレットを使おう。 10. Apple や Google
ノンデザイナー向けガイド！文字を美しく並べる3つの基本テクニック
海外サイトMediumで公開された「3 Typography Tips for a More Comfortable Read」の著者Luke Jonesより許可をもらい、日本語抄訳しています。 コンテンツをより読みやすくしてくれる、３つのテクニックがあります。デザイン性だけでなく、見た目も良くすることができるでしょう。 それぞれの原則名はむずかしく聞こえるかもしれませんが、理解して利用する方法はシンプルです。デモンストレーションとして、スタイリングされていない文章（A Clockwork Oragne by Anthony Burgess）を以下に用意しました。 詳細は以下から。 重要ポイント 選択するフォントによって異なるので、コンテンツとマッチしていないと感じるときは、自分で調整しましょう。今回、特にポイントとなるのは、読み手に対して読みやすい環境をつくり、目にやさしい見た目が大事に
最近見かけるレイアウト・ナビゲーション・スライダー・フォームなどがどうやって実装されているのかのまとめ
Webページやスマホアプリで見かけるレイアウト、ナビゲーション、ボタン、スライダー、フォーム、タイムライン、ボタンなど、CSSを使って実装されたテクニックがまとめられたコンテンツを紹介します。 デザインのアイデアとして、またそれが実装可能かどうか、実装はどうやっているのか、何かあった時にチェックすると便利です。
JavaScriptは適切に利用することが大事！HTMLとCSSだけで実はかなり高機能なスライダーを実装することができる
スライダーとは、ナビゲートできる一列に並べられた複数のボックスのことです。もちろん、あなたはスライダーが何であるかを知っているでしょう。 スライダーにはたくさんの機能があり、スワイプやスクロールできたり、自動再生やアニメーションを備えているものもあります。 HTMLとCSSだけで、見栄えがよい機能的なスライダーをどこまで実装できるか紹介します。HTMLとCSSを理解することで、JavaScriptも適切に利用できるようになります。 You can get pretty far in making a slider with just HTML and CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Step 1: 最初にセマンティックなマークアップ Step 2: flexboxを使ってスライダーを実装 Step 3:
Adobe CCを安い料金で毎年使う裏技 | yossy-style
今回は「Adobe CC（コンプリートプラン）を正規料金よりも安い料金･価格で毎年使う裏技」をこっそり紹介したいと思いますよ。 Adobe CCを既に使ってるユーザさんや、これから利用を検討している人の参考になれば幸いです(^^)/ もともとはAdobe CCを正規料金(月額￥4980税別)で使っていた 私ヨッシーは「Adobe CC（コンプリートプラン）／年間プラン」という月額4980円（税別）のAdobeのサブスクリプションサービスをクレジット払いでかれこれ5年以上利用してきました。年額にすると59,760円（税別）なので、なかなか高額なサービスです。 料金の高さには不満はありつつも、いかんせんAdobeのソフト（Photoshop/Illustrator/Dreamweaver等）は自分にとっても使用必須ソフトなので、Adobe CC（コンプリートプラン）をなんやかんやで使い続けてき
high-performance-sticky-sidebar.html
サイドバーをスクロールに合わせて、ぴたっとくっつける快適に動作する超軽量スクリプトを紹介します。 コンテンツが長い・短い場合はもちろん、サイドバーが長くてビューポートをはみ出す場合にも期待通り完璧に対応します。スクリプトは単体で動作し、jQueryのプラグインとして動作させることも可能です。 スクロール時にすべてのサイズを計算するのではなく、必要なサイズだけを再計算。 スクロール時のラグやジャンクを発生せず、リフローを起こさずにスムーズに動作。 サイドバーとコンテナのサイズが変更された時は、それらのサイズを正確に再計算。 特定の状況下でフックするために、イベントトリガーを用意。 コンテナが長くても短くてもサイドバーを扱うことができます。 他のスクリプトへの依存はなく動作。 jQueryやZeptoのプラグインとして利用することも可能。 実装はスーバー簡単！ Sticky Sidebarのデ
コードを書く際の指針として見返すサイトまとめ - Qiita
お勧めの記事がありましたらコメントなどで教えて頂けると幸いです。 Guidelines プログラマが知るべき97のこと 技術的負債 不慣れなコードベースで短期間に生産性を高めるための7つの方法 何も知らない人を育てるために(新人教育情報キュレーション) 保守開発に開発者として入って困ることのまとめ(実体験) 技術系の名言まとめ++ 真似をする前にバッドプラクティスかどうかを調べてみよう 読まれない名著「人月の神話」を本気で読み込んでみた（まとめ） 技術的負債とどうやって戦うか Coding Style モデルやメソッドに名前を付けるときは英語の品詞に気をつけよう 関数名や変数名に使えそうな動詞・名詞・形容詞のメモ Naming -名前付け- DRY原則をもう一度 -コンカレント・エンジニアリング- レガシーコードのメンテナンス担当になったら新人はどうすればいい クソコードに対する怒りとコー
[CSS]Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある
Webページのレイアウト、一昔前まではfloat、最近のプロジェクトではFlexboxが主流だと思います。CSS Gridはどうでしょうか？ CSS Gridは主要なすべてのブラウザにサポートされ、採用を検討している、また既に導入している人も少なくないでしょう。 注意しておきたいのが、CSS GridがあればFlexboxはいらないという考え方です。 これからのレイアウトは、FlexboxとCSS Gridを一緒に使用することで、それらの性能を効果的に利用できます。 Flexbox and Grids, your layout’s best friends by Eva Ferreira 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 FlexboxとCSS Gridは一緒に使用することでパワーを発揮する 神話は崩された Fri
![[CSS]Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある](https://cdn-ak-scissors.b.st-hatena.com/image/square/222e57e0cb617f5924de9e159879efca2a68aa3e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017111110.png)
Web制作者がチェックしておきたい、気持ちいいインタラクションやUIを実装できるJavaScriptのまとめ
Webサイトやブログに、気持ちいいインタラクションやユーザーインターフェイスを実装できるJavaScriptを紹介します。実用的なものから、あまり見かけない新鮮なものまで、素晴らしいアイデアがいっぱいです！
【Photoshop】マンションから出る光の柱のつくりかた | がんばるマーキュリー
みなさん、こんにちわ。 ガッキーです。 みなさん、一度はマンションのチラシって見たことありますよね。 私の家のポストには結構頻繁にマンションのチラシが入っています。 よく見ると、ほとんどのチラシにあるマンション建設地には 光の柱が描かれているのはご存知ですか？ 「ここにマンションが建っていますよー」 と分かりやすくしているんでしょうか。 光の柱を高くしてマンションを表現することで、 他の建物が並んでいても、どこにマンションがあるのか すぐに分かっちゃいますね。 実は、このマンションのチラシでよく見かける光の柱、 Photoshop初心者さんでも簡単に作ることが出来ちゃうんです！ そこで今回は、 Photoshop初心者さんでも簡単に光の柱が作れる 方法を紹介したいと思います。 イメージ画像用意をしよう まずはイメージ画像を読み込んでみましょう。 イメージ画像は、「ファイル」＞「開く」で 読
よりよいネーミングを目指して - Qiita
この記事は、俺コン Vol.1 / Day. 2 - connpassでの発表を、文章としてリライトしたものです。 スライド版: https://speakerdeck.com/takasek/20171003-number-orecon-ios-number-akibaswift 前置き このアスキーアートは、「矛盾塊」と呼ばれるそうです。矛盾する情報が同時に与えられたとき、人は混乱してしまいます。ここはQiitaなのでコードで書きますと、 コードになっても混乱しますね。 こんな矛盾に溢れたコードを、業務では見たくないですよね。しかし矛盾塊コードは、程度の差はあれ、普段の業務コードの中にも潜んでいるものです。たとえば、 update() で特定の条件ではupdateせずに戻る fetch() といいつつUIの更新もしてる 名前に困って func didReceive(hoge: Hoge
ギークなやーつ
うん・・もう、なんかね・・やらなきゃならないことが多すぎてなんか大変だった気がする。 というか、「気がする」で済んでいてほしいところでもある。・・ねぇ、まぁこの記事のトップの画像の日付け表記（MAY 2nd…つまり、ほとんど一ヶ月前。。）を見てもらえると分かるように、これ今月アタマのネタなんですよ。。苦笑 もう・・なんかすみません、って感じですね・・苦笑 とまぁ前置きはこれくらいにして、今回何を書こうとしたかと言うと「ちょっとギークにあこがれて・・」ということで、『PCを自分好みの環境にする』というトピックスについて書いていこうと思います。 ちょとしたライフハック的テーマですね。こちら、ウチのWindowsのデスクトップをキャプチャしたものなのですが、こんな感じにカスタマイズされてます。 やっぱり、見た目も使い勝手も「気持ちいいもの」がいい。 普通のWindowsって、こういう感じですよね
【デザイナー必読！！】Photoshopレイヤー整理４個のチェックリスト（Illustrator・Fireworksにも応用可） | 株式会社NONAME Produce(n2p)｜デジタルプロモーション企画・制作
コーダーは激怒した。必ず、かの邪智暴虐のPSDファイルを除かなければならぬと決意した。 だからこの記事を書かねばならぬ。 WEBデザイナーの皆様こんにちは。 今日もPhotoshopをお使いですか？ コーディングはご自分で？それともコーダーに回していますか？ もしもコーダーにPSDファイルを回しているのなら、 この記事を読んでレイヤーを整理してもらえたら嬉しいです。 レイヤーが整理されていないと、どうなるの？？ コーダーが死亡します。 たとえば文字や装飾、フキダシをまとめて別パーツとしてスライスしようとした場合、 レイヤーを探すのに時間がとられて、とっても非効率なことに……。 なんでデザイナーがそんなことしなきゃいけないの！？ PSDファイルのレイヤー構造について一番詳しいのが、 そのファイルを作ったデザイナーさんだからです。 レイヤーを整理することが前提であれば、 デザイナーさん自身も整
Illustratorを使うとき、私が手放せない10個のスクリプト（2017更新版）＋ 入手できるスクリプト一覧｜DTP Transit
#1 【アートボード】アートボード作成、修正、書き出し 三階ラボさんのアートボード作成・再構築・書き出しのワークフローが鉄板。 特にアートボード名の修正（一括置換など）はデフォルトではできないので、本当に重宝します。 3flab inc. | #Illustrator でアートボードごとに画像を書き出してからファイル名を変更するのが面倒くさい 3flab inc. | アートボード再構築 3flab inc. | #Illustrator でアートボードを作り、そして書き出す #2 【テキスト】選択したテキストの編集をダイアログボックス内で行う これまた、三階ラボさんのスクリプト。 3flab inc. | テキスト編集 | Edit Texts Pro for Illustrator 3flab inc. | #Illustrator のテキスト編集をスムーズに行う リアルタイムプレビュ
ギークなやーつ
うん・・もう、なんかね・・やらなきゃならないことが多すぎてなんか大変だった気がする。 というか、「気がする」で済んでいてほしいところでもある。・・ねぇ、まぁこの記事のトップの画像の日付け表記（MAY 2nd…つまり、ほとんど一ヶ月前。。）を見てもらえると分かるように、これ今月アタマのネタなんですよ。。苦笑 もう・・なんかすみません、って感じですね・・苦笑 とまぁ前置きはこれくらいにして、今回何を書こうとしたかと言うと「ちょっとギークにあこがれて・・」ということで、『PCを自分好みの環境にする』というトピックスについて書いていこうと思います。 ちょとしたライフハック的テーマですね。こちら、ウチのWindowsのデスクトップをキャプチャしたものなのですが、こんな感じにカスタマイズされてます。 やっぱり、見た目も使い勝手も「気持ちいいもの」がいい。 普通のWindowsって、こういう感じですよね
Illustratorでぼかした白フチを付ける
Illustratorで写真の上に文字などを置いた場合、背景によっては見にくくなったりすることがあります。 その場合、よく上の文字などに白いフチを付けたりするのですが、ただそれだけでは能がないので、背景と馴染むようにぼかした白フチを付けます。（完成形は左の写真のようになります。）
実務経験3年すぎた現役Webデザイナーのリアル【勉強方法編】 - IT系女子ログ
（7月25日、コーディング編更新しました。） 私がWebのスキルアップのために行っている勉強方法をすべてご紹介します。 たくさんありますが、「今日は模写をしてみよう」とか、「今日は案出ししてみよう」とか、楽しんで勉強するのが一番だと思います。 今まで自分に合っているものを優先して取り入れてきましたが、「もっと効率いい方法があるよ！」というアイデアがあれば、ぜひ教えていただきたいです！ デザイン編 忙しくてもできること 毎日5分でもデザインを観察する ニュースを見る、読む いいと感じたデザインを自分なりに消化してから制作に取り入れる 部分的でもいいので2案以上作る 周りの人に自分から意見をいただきにいく 意見をいただいたら要点を控えておく 提出する時には自分の言葉での説明も添える 広告を見て、伝えたい内容や狙いを考察する 時間あるときにしたいこと 思い浮かんだ案をできるだけ作ってみる 素敵だ
Webデザインを上達させるために大切なこと。デザインが苦手なあなたや私へ。 - IT系女子ログ
Webデザイナーとして参加していた案件が炎上してしまい、デザイン業務をすることがとても怖くなってしまいました…。 そんなデザイン恐怖症を克服するため、デザインをもっともっと上達させよう！と決めました。 私の個人的な意見で恐縮ですが、同じようにデザインで悩める方が、デザインを前向きに捉えるきっかけのひとつにでもなれればと思い、自分なりに大切だと思うことを書き出しました。 関連記事 デザインは2年でどのくらい向上するものなのか。（ビジュアルはウソつかない） - IT系女子ログ Webデザイナー2年目を、まるっと棚卸し［デザイン編］ - IT系女子ログ デザインが仕上がらず炎上 デザインとはとても難しいのだと痛感 デザインを追求する、という覚悟を決める デザインと向き合い続ける 他責でなく自責で考える 制限があるから、デザインがより重要になる デザイナーが提案してもいい 良いデザインをたくさん知
新人コーダーに知っておいて欲しいリダイレクトの基本｜クロノドライブ
サイトを運営していると、サイト内のページの移動や削除、またはサイト自体の移転をすることがあります。その場合、リダイレクトという処理を用いて新たなページに転送を行いますが、正しい知識と手順を以って対応しなければ、検索順位の下降、ページランクやドメインエイジの喪失といったSEO的なペナルティを招いてしまいます。 そこで、そのようなペナルティを受けないために、ページ移動・サイト移転時の正しいリダイレクトの設定方法と、代表的なリダイレクトの種類やその実装方法をご紹介します。 リダイレクトの種類 リダイレクトには、HTMLやJavaScriptといったクライアントサイドプログラム、PHPやPerlといったサーバサイドプログラム、あるいは.htaccessの設定変更を行う等、様々な対応方法があります。そのうちのいくつかを、実際のサンプルソースとともに解説します。 metaタグによるリダイレクト hea
ゴールドとシルバーのグラデーションが眩しいほどに美しい！490種類のPhotoshop用のグラデーション無料素材
ゴールドとシルバーのグラデーションが眩しいほどに美しい！490種類のPhotoshop用のグラデーション無料素材
実務経験3年すぎた現役Webデザイナーのリアル【勉強方法編】 - IT系女子ログ
（7月25日、コーディング編更新しました。） 私がWebのスキルアップのために行っている勉強方法をすべてご紹介します。 たくさんありますが、「今日は模写をしてみよう」とか、「今日は案出ししてみよう」とか、楽しんで勉強するのが一番だと思います。 今まで自分に合っているものを優先して取り入れてきましたが、「もっと効率いい方法があるよ！」というアイデアがあれば、ぜひ教えていただきたいです！ デザイン編 忙しくてもできること 毎日5分でもデザインを観察する ニュースを見る、読む いいと感じたデザインを自分なりに消化してから制作に取り入れる 部分的でもいいので2案以上作る 周りの人に自分から意見をいただきにいく 意見をいただいたら要点を控えておく 提出する時には自分の言葉での説明も添える 広告を見て、伝えたい内容や狙いを考察する 時間あるときにしたいこと 思い浮かんだ案をできるだけ作ってみる 素敵だ
Webデザインを上達させるために大切なこと。デザインが苦手なあなたや私へ。 - IT系女子ログ
Webデザイナーとして参加していた案件が炎上してしまい、デザイン業務をすることがとても怖くなってしまいました…。 そんなデザイン恐怖症を克服するため、デザインをもっともっと上達させよう！と決めました。 私の個人的な意見で恐縮ですが、同じようにデザインで悩める方が、デザインを前向きに捉えるきっかけのひとつにでもなれればと思い、自分なりに大切だと思うことを書き出しました。 関連記事 デザインは2年でどのくらい向上するものなのか。（ビジュアルはウソつかない） - IT系女子ログ Webデザイナー2年目を、まるっと棚卸し［デザイン編］ - IT系女子ログ デザインが仕上がらず炎上 デザインとはとても難しいのだと痛感 デザインを追求する、という覚悟を決める デザインと向き合い続ける 他責でなく自責で考える 制限があるから、デザインがより重要になる デザイナーが提案してもいい 良いデザインをたくさん知
新人Webデザイナーの私が、1年目で指摘されたことを振り返る[コーディング編] - IT系女子ログ
未経験からWebデザイナーに転職して、2年目に突入しました。 1年間チャレンジしてきて、数々の失敗をしましたし、注意も沢山して頂きました。まだまだ勉強が足りないなぁと思う次第です。 新人でなくなってしまうので、指摘されたこととその反省、2年目の目標を書き残しておきたいと思います。 おそらく皆様から見ると、当たり前すぎて書く程でないものも沢山あるでしょう…。 「無知の知」ということで、私も1年後には、そのような気持ちで読み返せるよう、しっかり勉強したいです。 関連記事 コーディングが苦手なWebデザイナーにおすすめしている独学方法 - IT系女子ログ 実務経験3年すぎた現役Webデザイナーのリアル【コーディングスキル編】 - IT系女子ログ コーディング環境 スライス スライスする前にコーディングの目安をつける デザインがズレていると感じたら必ずデザイナーに確認する スライスの名称に使用する
![新人Webデザイナーの私が、1年目で指摘されたことを振り返る[コーディング編] - IT系女子ログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/4d5ae2b3c18cdfce1c52a18e478f9b90463e0122/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Ft%2Ftosssaurus%2F20150321%2F20150321135745.jpg)
新人Webデザイナーの私が、1年目で指摘されたことを振り返る [デザイン編] - IT系女子ログ
昨年、未経験からWebデザイナーとして入社してはや1年が経とうとしています。ふと自分を客観的に見つめてみると、「思ってた程、成長していない…」ということに気づき、今更ながら焦り始めているところです。情けないですが。 Webのことも入社前に比べ、遥かに知識を得たし、デザインやコーディング、プログラムのことも少しは自力で調べられるくらいにはなりましたが、あまり実務で役立てられていない、成果を発揮できていないと思っています。 そういう訳で、だらだら2年目に突入する前に、1年間で指摘されたこととそれを踏まえた目標を記録しておきます。 まずは、デザインについてです。 コーディング編はこちら。 新人Webデザイナーの私が、1年目で指摘されたことを振り返る[コーディング編] - IT系女子ログ ※自分の為のまとめなので、読みづらいかと思いますがご容赦頂けると幸いです。 目次 指摘されたこと 指摘を受けて
![新人Webデザイナーの私が、1年目で指摘されたことを振り返る [デザイン編] - IT系女子ログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/0ab65d030571dd540fe5560e3ec8cb1855013d6f/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Ft%2Ftosssaurus%2F20150319%2F20150319001648.jpg)
sanitize.css
sanitize.css is a CSS library that corrects broken and missing styles in all browsers, preserving useful defaults rather than unstyling everything. It’s developed alongside normalize.css, so every normalization includes the browsers or browser versions being targeted, and every opinionated change is marked and documented. Installation Install with Bower bower install --save sanitize-css Install wi
CSSのコードを整理し、効率的に管理する方法のまとめ
CSSのコードを書くことは簡単ですが、コードを整理し、効率的に管理する方法は難しいものです。大規模なプロジェクトだけでなく、小規模なプロジェクトにも、そして未来の自分のためにも必須と言えます。 CSSを効率的に管理する一連のソリューションについて紹介します。 OOCSSはオブジェクト指向のCSSの略です。OOCSSのアプローチには、2つのポイントがあります。 構造とデザインの分離 コンテナとコンテンツの分離 このアプローチにより、制作者は異なる場所でも使用できる総合的なclassを利用することができます。 これには、良いニュースと悪いニュースがあります 良いニュース: 再利用することで、コードの量を減らします。「DRY Principle」と呼ばれるものです。 悪いニュース: 保守が複雑になります。特定の要素のスタイルを変更する時、ほとんどのclassが共通で使用されているため、そのスタイ
Johto Mono v2.6.0
We all love the pixelated games we played as kids. Now, as programmers, video makers, and creators of side projects that make our hearts pound with passion, there is nothing more satisfying than imagining ourselves in the shoes of the people that inspired us. We want to feel like we're right back there in the excitement of 1990s Tokyo, as an artist or engineer.
PhotoshopでWebデザインをする際に知っていると便利なこと。 | ネクストページブログ
HOMEブログウェブ制作PhotoshopでWebデザインをする際に知っていると便利なこと。 | ネクストページブログ こんにちは、少しずつPhotoshopでのWebデザインに耐性がついてきたiuchiです。 以前「FireworksからPhotoshopへ移行するためにすること。」という記事を書きましたが、あれからいくつかPhotoshopでWebデザインをやってみて気づいたことや、調べていて便利だと思ったことを改めて纏めてみました。 ※作業環境：Photoshop CC 2015 カラー変更 テキストやパスのカラーを素早く変更する Alt+Delete：描画色に変更 Ctrl+Delete：背景色に変更 ただし、複数オブジェクトを一括で変更することは出来ないので、以下のスクリプトと併用します。 複数オブジェクトの色を変更（スクリプト） カラーピッカー（colorPicker.jsx）
YouTube Player APIを使って色々やってみる ｜ Tips Note by TAM
ページに埋め込んだYouTubeをJavaScriptで制御する機会が何度かあったので、 YouTube Player API の使い方をまとめてみます。 今回使用するのは、以下のIFrame API になります。 iframe 組み込みの YouTube Player API リファレンス - YouTube - Google Developers ■目次 基本的な埋め込み JavaScriptでの操作 プレーヤーの状態に応じて処理をする プレーヤーの準備ができてからJavaScriptでの操作を行う パラメータを設定する 基本的な埋め込み まずはYouTubeプレーヤーをページに埋め込んでみます。 1.YouTubeを埋め込む場所を指定 ■HTML <div id="sample"></div> ※id="sample"内にYouTube(iframe)が埋め込まれるのではなく、#sa
FireworksファイルからIllustrator CCへの移行ガイド（FXGファイルが開けない人向け）
概要 ▶ FireworksのファイルをIllustrator CCで読み込むための移行ガイドです。簡単にはいかないのが開発終了したFireworks側の辛いところ。 ようやく会社のPCもAdobe Creative Cloudの環境を導入でき、CC環境で便利に作業をしています。 それで、CC環境というと、Web制作でよく使われてきたFireworksがCS6で開発終了ということで、Fireworks CCは無い状況なわけです。Fireworks 3からさんざん使ってきた人間としては悲しいよ…。 Fireworks CS6からAdobe FXG経由で変換 それで、Fireworks CS6自体はライセンス的に使えるのですが、先がないソフトを使い続けるのもなんだな…ということで、FireworksのPNGファイル（CS6だと.fw.pngという拡張子ですかね）をIllustratorへ移行し
LDSports乐动体育下载_主站
FILE: /home/wwwroot/wxzhenrong.com/ThinkPHP/Library/Think/App.class.php LINE: 101 #0 /home/wwwroot/wxzhenrong.com/ThinkPHP/Library/Think/App.class.php(101): E('\xE6\x97\xA0\xE6\xB3\x95\xE5\x8A\xA0\xE8\xBD\xBD\xE6\x8E\xA7...') #1 /home/wwwroot/wxzhenrong.com/ThinkPHP/Library/Think/App.class.php(202): Think\App::exec() #2 /home/wwwroot/wxzhenrong.com/ThinkPHP/Library/Think/Think.class.php(120): Thi
gulpで作るスタイルガイドをFrontNoteにした
みなさん、スタイルガイドは使ってますか。 私は今年になって使い始めました。 これまではstyledoccoを使っていましたが、長年メンテナンスされてない不安と、使ってるうちに自分のCSS設計と合わない部分がでてきたので乗り換える事にしました。 乗り換えたスタイルガイドジェネレーターは「frontNote」です。 FrontNoteとは FrontnoteはNode.js製のスタイルガイドジェネレータです。 このスタイルガイドジェネレーターはKSSをインスパイアして開発されたものです。 KSSにない機能としてスタイル全体の概要、カラーパレット、スタイルに任意のラベル付けの機能があります。 スライド-CSS Living StyleGuide 公式にGulp.js・Grunt.jsのプラグインもあり、簡単にスタイルガイド作成を自動化することができます。 FrontNote-gulp Front
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
横並びのメニュー項目の高さを揃えたい！CSSで子要素にheight100%、親要素に高さを指定するのがコツ
The Blog | Welcome to Adobe Blog
クリックしたら閉じるリンク（ホームページは難しくない）
CSSのpositionとz-indexの関係 (absoluteやfixedよりもstaticを手前に表示する)
CSSで、内容がないときでもテキスト1行分の高さを確保する方法 - Qiita
CSS3のtext-shadowを使ったテキスト装飾のサンプル集
[CSS]最近のWebサイトで見かけるコンポーネントを実装するチェックしておきたい便利なスニペットのまとめ -LittleSnippets![[CSS]最近のWebサイトで見かけるコンポーネントを実装するチェックしておきたい便利なスニペットのまとめ -LittleSnippets](https://cdn-ak-scissors.b.st-hatena.com/image/square/35e1785dbd3d615dd95dbbb956f2f495cc968350/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201504%2F2015120401.png)
CSSのすぐに使える小技から驚きのスゴ技まで！CSSアニメーションの素晴らしいアイデアのまとめ | コリス
Good Web Design
【マンションバナー研究会】コンバージョンにつながる配色の基本 | がんばるマーキュリー
がんばるマーキュリー
The Blog | Welcome to Adobe Blog
コメントに最新版URLを追記しています。【タグマネージャー】GTM と YTMのタグの貼付位置(設置場所)について
便利すぎ！Bootstrapベースのデザインカンプ作成がびっくりするほど簡単にできてしまうPhotoshopの機能拡張 -Bootcomp
https://kasegood.net/seo-book