キレたので書く。 Photoshop2019から急に拡大縮小時のシフトキーの仕様が変更になりました。 ところがこの仕様の雑さ加減が半端ないです。 Photoshopの拡大縮小のみ適応された これまでの製品では、シフトキー押しながらサイズを変更すると、縦横比率を維持したまま変更できました。 2019からはシフトキーを押さずに変更することで、縦横比率を維持するようになりました。逆に今まで通りシフトキーを押しながら変更すると比率が無視されるようになったわけですね。 タチが悪いのは同じPhotoshopなのにシェイプの拡大縮小変更は今まで通りシフトキーが必要で、IllustratorやInDesignも今まで通りと言う見事なまでの雑仕様。なんなのまじで。 と言うわけで解決方法 1）メモ帳やテキストエディタを開く 一応ワードとかじゃダメです。プレーンテキストとして作成してください。 2）以下の文字列

こんにちは。sitoです。 11月20日（火）にパシフィコ横浜で開催されたAdobe MAX Japanに行ってきました！ セッションの内容はもちろん、去年買えなかったPhotoshopクッションを買えたので私は満足です。（XDクッションも欲しかったのですが、クッションは１人１個までだったので諦めました。。。また来年買えるといいなあ。。。） 今回はAdobe MAXでも話題になっていた、XDの自動アニメーション機能をいじっていきたいと思います。 自動アニメーションで、上から展開するメニューを作ってみた ▼やりたいこと ハンバーガーメニューをタップすると、上から下に向かってメニューが展開する ハンバーガーアイコンがアニメーションして「✕」アイコンに変わる ▼サンプルはこちら ハンバーガーアイコンがアニメーションして「✕」アイコンに変わる 先にアイコンのアニメーションを作っていきます。 ハンバ

このWordPressブログでSVG画像をアップロードしようと思ったら「セキュリティの理由によりこのファイル形式は許可されていません」とエラーが出てくるようになってしまいました。このブログでは「SVG Support 」というプラグインを入れて対応していたんですが、どうやらWordPress 4.9.9でプラグインが機能しなくなってしまったようです。 参考までに以前書いたSVGについての記事へのリンクです： WordPressの投稿でSVG画像を使えるようにしても、OGPやTwitter Cardsで対応してなかった件 当面の対処法 当面は以下の2つの方法のどちらかで対処ができそうです。 1. プラグインを入れ替える 取り急ぎ、このブログでは「Safe SVG 」というプラグインに入れ替えて対処しました。こちらのプラグインは4.9.9でテストされていて、5.0.1にアップデートしたこのブロ

Adobe XDの2018年10月のアップデートで使えるようになった新機能「自動アニメーション」「ドラッグジェスチャー」を使用して、Webサイトやスマホアプリで見かけるUIのさまざまなアニメーションやインタラクションの実装を紹介します。 Adobe XDの「自動アニメーション機能」はかなり簡単にさまざまなエフェクトやトランジションが短時間で実装できます。さらに「ドラッグジェスチャー」を加えることで、タッチデバイスのドラッグ操作をシミュレートでき、自動アニメーション機能をさらに一歩進めることができます。 Adobe XD: putting auto-animate to the test 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ここで紹介したAdobe XDのファイルは、記事の最後でまとめてダウンロードできます。 また、こ

ここ一年でグラデーションの使い方がだいぶ進化してきました。使用するカラーだけでなく、使用する場所にも変化が見られます。 Webサイトやスマホアプリで最近増えてきたグラデーションのボーダーをCSSで実装するさまざまなテクニックを紹介します。 Gradient Borders in CSS ※CSS-TRICKSがリニューアルされ、グラデーションが随所に使用されていますね。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 要素の周りにグラデーションのボーダーが必要な場合、どうしますか？ グラデーションのボーダーを実装するCSSのAPIはありません。 線形グラデーションの背景を持つラッパー要素を作成し、少し小さい内側の要素に背景を定義してくり抜くようにボーダーを実装します。 これを実装すると、下記のようになります。

jQuery+CSS3で丸タイプのドロワーメニュー ドロワーメニューのバックグラウンドが丸になってるタイプのナビゲーションです。 クリックイベントにjQueryを使用してます。 投稿日2018年12月27日 更新日2018年12月27日 See the Pen Circle Drawermenu by webopixel (@webopixel) on CodePen. HTML メニューのトグルとなるボタンと、メニュー本体があります。 今回はメニューと円の部分は別々にアニメーションしたかったので、別の要素にしたほうが簡単です。 index.html <div id="nav-toggle"> <div> <span></span> <span></span> <span></span> </div> </div> <div id="nav-circle-bg"></div> <nav i

iOS 12のパブリックリリース版で使用されている全てのUI要素・スクリーンが収録された、Adobe XD, Sketch, Figma用の無料デザイン素材を紹介します。 iOS 12 GUI ダウンロードできる素材は、3種類です。 Adobe XD用 Sketch用 Figma用 利用にあたっては個人でも商用でも、クライアントのプロジェクトでもOKです。 詳しくは、ライセンスページをご覧ください。 iOS 12 GUIの中身を見てましょう。 iPhone XsとiPhone 8用のスクリーンが揃っており、それぞれ29種類のスクリーン、217種類のUI要素が収録されています。

死亡した生き物の皮を剥ぎ詰め物をして、生きているときの外形を再現するはく製師の仕事。何のために、誰のために、はく製はあるのか。展示・標本用につくられるのが一般的だが、亡くなったペットを慈しむために、はく製を希望する者も多い。かつて海外では狩猟で獲った生き物をトロフィがわりに、はく製にする文化もあったようだ。死が日常から遠ざけられている現代では、はく製は残酷なものだ、と考える人も少なくない。 「バカな仕事ですよ」と長谷川さんは言う。東京・経堂に工房を構えるはく製師は、昭和7年生まれの86歳。これまでこしらえてきた愛らしいはく製たちに囲まれ、我が子のように愛情を注ぎながら穏やかに暮らす。「バカな仕事」の真意を読み取るのは難しい。ただ50年以上はく製と向き合い、誰よりも〈はく製とは何か〉を自問自答してきたのではないだろうか。そんな職人の、人生のおしゃべり、そして、はく製製作の現場から見据える死生

AppleはmacOS Mojaveでフォントのレンダリング方法を変更し、非Retinaディスプレイでテキストを表示すると、これまでよりも汚く表示されてしまうようになってしまいました。 Retinaディスプレイや4K/5Kといった高解像度ディスプレイでは影響がないそうですが、従来の非Retinaディスプレイを使用しているユーザーにとっては大きな問題です。 幸いこの問題はターミナルからコマンドを実行し、設定を変更することで解決することができます。今回はこの方法を説明します。 macOS Mojaveのフォントレンダリングを改善 macOS Mojaveで非Retinaディスプレイのフォントのレンダリングを改善するには、ターミナルを開いて以下のコマンドを実行します。 defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO

iOSでモーダルやハンバーガーメニューを開いている時に、スクロールで背景のコンテンツがスクロールされないようにする方法を調べたのでメモ。 うまくいかなかった例 今回は簡単なモーダルを実装してみます。 HTML <header class="header">ヘッダー</header> <div class="contents"> <p>コンテンツ本文コンテンツ本文コンテンツ本文コンテンツ本文</p> <p>コンテンツ本文<button class="modal-link" data-modaibody="modal01">モーダル01</button>コンテンツ本文コンテンツ本文コンテンツ本文</p> ～略～ <p>コンテンツ本文コンテンツ本文コンテンツ本文コンテンツ本文</p> </div> <footer class="footer">フッター</footer> <div class="

やること あらゆるOSにおいて、スクロールがあるハンバーガーメニューを表示している間、背景のスクロールは動かないようにする。 まえおき 基本的に、スクロールさせるには overflow : scroll;、スクロールをしないようにするにはoverflow: hidden;を使うことが一般的。 アプリケーションのhtmlタグには初期値でoverflow : scroll;がついている。 そのため、わざわざoverflow : scroll;を当てなくてもスクロールできるようになっている。 ちなみに htmlタグにoverflow: hiddenをつけてみてください。ほとんどの場合、スクロールがを防げます。 このほとんどというのがどういうことか後ほどわかります。 実装前のCSSとJSのコード ハンバーガーメニューのCSS .humburger-menu { /*スクロールするようにする*/ o

解　説 スマートフォン表示によく使われるハンバーガーナビ。ナビメニューが多いサイトの場合、指でスクロールさせてスルスルッと気持ちよく動かしたいですよね。ナビボタンはスマホ画面の最上部に「position:fixed」で固定させておき、メニューを開いた際に、中身だけがスクロールする、しかも気持ち良く！という方法をご紹介します。 1ナビボタンを「position:fix」で固定させ、中身を「overflow-y: scroll;」でスクロールさせる #sp_gnav_list{ position: fixed; overflow-y: scroll; z-index: 99; top:0; width:100%; height:100%; <---heightを指定します background-color:#f00; } ナビ要素であるsp_gnav_listを「position:fix」で最

ヘッダー・ナビゲーションを固定表示させるアイデア5つ 公開日:2017/12/28 /最終更新日:2019/02/09 CSS jQuery・JS Technique 最初から固定表示 基本なので言わずもがなですが一応。単なる固定表示ならCSSの「position: fixed;」だけです。簡単ですね。 HTML <header class="site-header"> <h1 class="site-logo"><img src="images/logo.png" alt="WEBDESIGNDAY"></h1> <nav class="gnav"> <ul class="gnav__menu"> <li class="gnav__menu__item"><a href="">About</a></li> <li class="gnav__menu__item"><a href="">W

Popular Screen Resolutions: Designing for All In today’s world, there are a plethora of devices for people to choose from and it can be daunting to try to accommodate and build for the best experiences on all devices. However, it’s important to stay up-to-date with the most popular screen sizes and resolutions when designing web and mobile sites. A site that is optimized and responsive makes for a

あれはどうだったかな？ という時にすぐ分かる、Web制作の実装や勉強に役立つチートシートを紹介します。 iPhone 8やXsのスクリーンサイズはいくつだったかな？ CSS FlexboxやGridの挙動がまとめて知りたい、CSSのプロパティの値や対応ブラウザは？ Vue.js, React.jsのよく使用するイベントや構文、ブラウザごとのバグやハックはあるのか、がまとめられています。

説明 Classic Editor (クラシックエディター) は、WordPress チームがメンテナンスしている公式プラグインです。以前の WordPress エディターおよび投稿編集画面を復元します。これにより、その画面を拡張したり、旧式のメタボックスを追加したり、以前のエディターに依存したプラグインを使用したりといったことが可能になります。 Classic Editor は公式な WordPress プラグインであり、少なくとも2024年まで、または必要なくなるまでの間、完全にサポート・保守されます。 このプラグインは主に以下の機能を追加します。 管理者は、すべてのユーザーに対してデフォルトのエディターを選択できます。 管理者は、ユーザーにデフォルトのエディターの変更を許可できます。 許可されている場合、ユーザーは各投稿に使用するエディターを選択できます。 各投稿は、誰が最後に編集し

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

MacOS high Sierraで`macOS could not be installed`と表示された。Mac環境構築初心者MacBookHighSierra 症状 macOSのHighSierraを使っており、アプリやらOSやらのアップデートが溜まっていたので、App　Storeから実行した。 やけにアプリのアップデートに時間かかるなぁと思いつつ、アプリのアップデートはなんとか終了。 OSのアップデートに移り、再起動が必要ということで再起動した。 再起動し、ユーザにログインしようとすると画面には、 のような文字列とRestartボタンが。 ん？と思い焦りながら何度かRestartして見るも、同様の画面が表示される。 対処 ググって見ると同様のエラーが出ている方が結構いるようだった。 メニューバーからstartup diskを選択し、起動ディスクを選択、Restartした。 その結果