画像や要素などに影をつけることができる、CSSのbox-shadowはとても簡単です。
参考URL:Front-end Tools
LINK
【CSS】画像にカーソル乗せた時、画像が拡大 transform:scale
画像の上にカーソルを乗せた時、画像が大きくなるような動きをCSSアニメーションで実装することができます。
具体的にはtransformプロパティを使います。scale()は値です。
(例)transform: scale(1.6, 1.6) ・・・ 要素をx軸方向、y軸方向に1.6倍拡大する
【CSS】hover（マウスオーバー）で画像を拡大ズームする方法
参考URL：2024.10.4 じゅんぺいブログ
<<<<< その他 transformプロパティで指定できる関数 >>>>>
■rotate() 要素を回転させることができる関数
【transform:rotate()】要素を回転させることができる
■translate() 要素を移動させることができる関数
【transform:translate()】xy軸上の移動することができる
■scale() 要素を伸縮させることができる関数
【transform: scale(1.6, 1.6) 】要素をx軸方向、y軸方向に1.6倍拡大できる
■skew() 要素を歪ませることができる関数
【transform:skew()】要素に傾斜をつけることができる
font-sizeの単位をvwにする【vw】とは？
■VWとは
vwは、ビューポートの幅に応じてサイズが変化するピクセル単位で、ウェブデザインでリキッドなレイアウトを実現するのに役立ちます。例えば、画面幅に応じてフォントサイズを自動的に調整したい場合に有用です。
■スマホの画面幅は、モデルによって全然ことなる
スマホの時に、固定サイズのフォントでいいのか？
1vwはビューポートの幅の1%に相当し、親要素ではなくビューポートを基準とした相対値を表します。つまり、ビューポートが100ピクセルなら1vwは1ピクセルになります。この特性により、画面幅に合わせて要素のサイズを拡縮させることができます。そのため、小さいデバイスでは小さく、大きいデバイスでは大きく表示されるようにする場合に適しています。
remはルートのフォントサイズを基準にしてサイズを変更しますが、vwはビューポートの幅を基準とするため、レスポンシブ対応する際にはルートのフォントサイズを変更する必要がありません。
fontの単位には以下があります。
| 単位名 | 説明 |
|---|---|
| vw | ビューポートの幅の 1/100（100vwで横幅いっぱい） |
| vh | ビューポートの高さの 1/100（100vhで縦幅いっぱい） |
| vmax | ビューポートの高さか幅の大きいほうの 1/100 |
| vmin | ビューポートの高さか幅の小さいほうの 1/100 |
320pxの横幅を基準にfont-sizeを指定した例
| px | vw |
|---|---|
| 10px | 3.125vw |
| 11px | 3.4375vw |
| 12px | 3.75vw |
| 13px | 4.0625vw |
| 14px | 4.375vw |
| 15px | 4.6875vw |
| 16px | 5vw |
外部リンク：画面サイズに応じてfont-sizeを「ちょっとずつ」拡縮させる 参考：OLDOFFICE&CO Update：2022-07-31
【font】16px ⇆ 1rem 数値変換早見表
■16px ⇆ 1rem 数値変換早見表
16pxの時にrem値の計算表。コーディングの際に役立ててください。
2pxにつき0.125pxプラスされます。
| px | rem |
|---|---|
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 22px | 1.375rem |
| 24px | 1.5rem |
| 26px | 1.625rem |
| 28px | 1.75rem |
| 30px | 1.875rem |
| 32px | 2rem |
| 34px | 2.125rem |
| 36px | 2.25rem |
| 38px | 2.375rem |
| 40px | 2.5rem |
| 42px | 2.625rem |
| 44px | 2.75rem |
| 46px | 2.875rem |
| 48px | 3rem |
| 50px | 3.125rem |
| 60px | 3.75rem |
| 70px | 4.375rem |
| 80px | 5rem |
| 90px | 5.625rem |
| 100px | 6.25rem |
段落テキスト&ポイントテキストとは？ その変更方法【Photoshop】
Photoshopのテキストツールにおける、段落テキスト、ポイントテキストとは？
■段落テキスト
段落テキストはバウンディングボックス内に文章が入るもの。ボックス内から文字がはみ出ず、折り返されます。テキストの範囲をここからここまで！と決めて文章を作成したい場合に便利です。
■ポイントテキスト
ポイントテキストは、通常時（デフォルト）で、文字に下線が出ており、タイトルなどで使用されることが多いです。
作ったテキストのレイヤーを右クリック→段落テキストに変更（ポイントテキストに変更）で変更ができます。
外部リンク：【Photoshop】意外と便利？！段落テキスト&ポイントテキストの変更方法 参考ゼロワンアース 2019.02.08
https://01earth.jp/web-create/photoshop/photoshop-text-change/
テキストボックス（テキスト）の選択解除方法
Photoshop(フォトショップ)のテキストボックスを解除したい場合、（テキストの範囲を設定、折り返すボックスのこと）テキストをクリックすると、テキスト入力時に、画面上にあるオプションバーに「×」「○」ボタンが表示されます。この「○」をクリックすると、文章が確定され、テキストボックスの選択が解除が可能になります。
外部リンク：テキストボックスの選択解除方法 参考：株式会社ComD
外部リンク：Photoshop でテキストを追加および編集する方法 Adobe
https://helpx.adobe.com/jp/photoshop/using/add-edit-text.html
iPhoneでmp4の動画が自動再生されない時の対処法
まずiPhoneが停電力モードになっていないか確かめましょう。
低電力モードになっていると、一部機能が制限されて、自動再生されなくなります。
設定から、「バッテリー」で、停電力モードを解除しましょう。
外部リンク：iPhoneの低電力モードに設定していると動画が自動再生されないCMAブログ 2019.11.01
また、videoタグの「autoplay muted playsinline」はセットです。
これが無いと、勝手に音を再生させないように、Chormeは初期設定されているので、自動再生の場合は「autoplay muted」もいれましょう。
外部リンク：デザイン事務所セーノ 更新日：2022.07.21
画像圧縮・変換サービス一覧
画像圧縮サービス一覧
■『Squoosh』スクワッシュ https://squoosh.app/
Googleが開発した画像最適化、圧縮サービスです。画像を軽くしたい時におすすめ
外部リンク：Google製の画像圧縮・変換サービス『Squoosh』の使い方
unprinted最終更新日：2024.03.12
マージン（margin）やパディング(padding)が効かない場合
マージンやパディングが効かない場合の対処法
インライン要素になっていませんか？ ブロック要素にしましょう。
box-sizing`プロパティが`border-box`の場合、`box-sizing: content-box`に変えてみましょう。
ちなみに、padding には、「auto」も「負の値」も不可です。※marginには可能です。
外部リンク：CSSのpaddingプロパティが効かない時の10の実例と対処法
外部リンク：【CSS】マージンとパディングが効かない時の注意点と違いについて Uptech/Design 2021.10.13
マージン（margin）とパディング(padding)の違いとは？
外部リンク：【CSS】マージンとパディングが効かない時の注意点と違いについて Uptech/Design 2021.10.13 結論から言うと、marginは【外余白】、paddingは【内余白】です。 また、marginやpaddingが効かない時は、インライン要素になっている可能性があります。 インライン要素をブロック要素に変えて対応すると、効く場合があります。