JSのレスポンシブ対応をresizeからmatchMediaに移行した
JS でブレークポイント毎に処理を分ける場合の方法を resize から matchMedia に移行したので、その際のメモ書きです。 昔ながらの方法 恥ずかしながら、最近まで JS でブレークポイント毎に JS 処理を切り替える場合、 以下のように昔ながらの resize イベントの監視を使っていました... /** * イベントリスナー */ const listener = () => { // リサイズ時に行う処理 if (window.innerWidth >= 768) { // 768px以上 console.log('PC用ブレークポイント用処理'); } else { // 768px未満 console.log('SP用ブレークポイント用処理'); } }; // リスナー登録 window.addEventListener('resize', listener); /
フォトショップで写真などの画像を伸縮させずにリサイズする方法
この記事では、フォトショップで写真などの画像を伸縮させずにリサイズする方法をご紹介します。 「コンテンツに応じた拡大・縮小」機能を利用することで、思い通りの画像サイズに変更、リサイズすることができます。ここでは、2つの具体的なサンプル例を詳しくみていきます。 1つ目は写真を使った例、もうひとつはグラフィックデザインでのテクニックの活用方法となります。 リサイズする前の元画像がこちら 今回は、こちらの写真を参考に「横長バナーを作成」してみます。 「自由変形」の場合 メインメニューより「編集」>「自由変形」（Command/Ctrl+T）で、足りていない横幅サイズに合わせて、画像を自由変形させようとすると、写真全体が歪んでしまいます。車はもちろん、背景のヤシの木も太くなり、不自然な仕上がりに。 「コンテンツに応じた拡大・縮小」をつかった場合 次はメインメニューより「編集」>「コンテンツに応じた
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
