Open HIROKO-M opened 1 week ago
Original createdAt: 12/05/2023
コメントなし
Original createdAt: 12/05/2023
コメントなし
Original createdAt: 12/05/2023
@松田 寛子 内容確認いたしました。 よろしくお願いします。
Original createdAt: 12/05/2023
@松田 寛子 お疲れ様です。 修正に関して、「画像サイズを1250pxに」とのことですが、1250pxに修正いたしますと、元の画像サイズより大きくなってしまいます。上記の画像を参照させていただくと900pxくらいがちょうどいいかなと思います。開発環境にて実装いたしましたのでご確認よろしくお願いいたします。
Original createdAt: 15/05/2023
@湊拓実 お疲れ様です。
修正に関して、「画像サイズを1250pxに」とのことですが、1250pxに修正いたしますと、元の画像サイズより大きくなってしまいます。
すみません。。「元の画像サイズより大きくなってしまう」というのが理解できていないです。 (元画像のサイズは 2555 x 2555 ピクセルの認識) 元のサイズとはどこを指していますか?
修正いただいた内容を確認しましたが、以下を追記した理解で合っていますか?
.p-article__header-image {
width: 900px;
height: 900px;
margin: auto;
上記のように width と height でそれぞれサイズを固定してしまうと、画面サイズが小さくなった(例えばスマホ)時にもサイズ変更れずに固定になってしまうので、以下のようにmaxで指定するのがいいかと思います。
.p-article__header-image {
max-width: 1200px;
height: auto;
margin: auto;
※修正したら、必ず画面サイズを各サイズに切り替えて、期待する表示になるか確認してみて!
どうぞよろしくお願いいたします。
Original createdAt: 16/05/2023
@松田 寛子
修正に関して、「画像サイズを1250pxに」とのことですが、1250pxに修正いたしますと、元の画像サイズより大きくなってしまいます。上記の画像を参照させていただくと900pxくらいがちょうどいいかなと思います。開発環境にて実装いたしましたのでご確認よろしくお願いいたします。
こちら自分の勘違いでした。申し訳ございません。
.p-article__header-image { max-width: 1200px; height: auto; margin: auto;
こちらの方法で修正いたしましたが、PC表示ではうまく表示されましたが、スマホ表示に変更した際拡大されてしまい縦長の表示となってしまいました。(https://i.gyazo.com/c08f23824a8d6a3eb8a20f262a89cccb.jpg) 引き続き修正方法の検討を行っていきます。
Original createdAt: 22/05/2023
@湊拓実 上記実装ありがとうございます! そしてスミマセン!要件を再度確認しましたら 画像サイズを1250pxに修正 という事ですので、以下記述だけ私の方で修正させていただきました。
.p-article__header-image {
max-width: 1200px; → 1250px
@肥田麻乃 お疲れ様です。 上記の通りdev環境で修正完了しましたのでご確認をお願いいたします。 問題なければ、引き続き本番環境へCSSを反映させていただきます。
Original createdAt: 22/05/2023
@松田 寛子 おつかれさまです。 上記ご対応ありがとうございます。
dev環境にて確認させていただきましたところ、 【現行サイトもdev環境も見た目としての違いはない】という認識なのですが、 こちら寛子さんの方でも同様の見た目で間違いないでしょうか?
お手隙きの際にご確認をお願い致します。
例) 現行:https://sensitive-skin.real-cosme.net/?spec=82368 ![image][現行サイト.png]
dev環境:https://dev-sensitive-skin.real-cosme.net/?spec=82368 ![image][dev環境.png]
Original createdAt: 22/05/2023
@肥田麻乃 お疲れ様です。
【現行サイトもdev環境も見た目としての違いはない】という認識なのですが、 こちら寛子さんの方でも同様の見た目で間違いないでしょうか?
すみませんが、ご質問の意味が理解できておりません。 上記でおっしゃられている「見た目」とは何を指していますでしょうか? この課題では、要件に従い、PC表示の時に各投稿記事においてタイトル画像サイズをmax1250pxに制限しております。
肥田さんの環境下では、画面サイズが改修されていないという判断ですか? 画像サイズは1250pxということでしたので、ご確認いただくPC画面のサイズは1600px以上であれば 以前の画面との違いをご確認いただけると思いますがいかがでしょうか?
どうぞよろしくお願いいたします。
Original createdAt: 22/05/2023
@松田 寛子
上記でおっしゃられている「見た目」とは何を指していますでしょうか?
見た目=修正いただいた箇所の画面サイズです。 修正前(現行)、修正後(dev環境)とまったく画面サイズは変わっていないです。 (※一つ前のコメント内に比較キャプチャあり)
n=2 MacBook Air (M1, 2020) Googlechrome・Safari
寛子さんの方ではdev環境の方は画面サイズ変わっていますか? 変わっているようでしたら、お手数ですがキャプチャいただけますでしょうか?
寛子さんの方で、私の送ったキャプチャと同じということでしたら、 今回ご指定させていただいた1250pxという数値自体が 私共の想定した画面サイズと違っていたのだと考えます。
ご確認どうぞよろしくお願いいたします。
Original createdAt: 22/05/2023
@肥田麻乃 お疲れ様です。 ご返信ありがとうございます。 私の環境下では以下の通り、dev環境で最大1250pxに固定されます。 ![image][画像サイズ.png]
Original createdAt: 22/05/2023
@松田 寛子 先程はミーティングありがとうございました。
お話にも上がりました通り、 現段階の修正内容で本番環境へ反映をお願いいたします。
後日サイズ修正をした際は、都度ご報告させていただきます。
引き続きどうぞよろしくお願いいたします。
Original createdAt: 22/05/2023
@肥田麻乃 承知しました。 よろしくお願いいたします。
Original createdAt: 22/05/2023
@肥田麻乃 お疲れ様です。 本番環境へ、現段階までの改修済みカスタムCSSコードを反映しました。 ご確認のほどよろしくお願いいたします。
Original createdAt: 22/05/2023
コメントなし
Original createdAt: 23/05/2023
@松田 寛子 お疲れ様です。 修正反映を確認いたしました。 ご対応ありがとうございました。
Original createdAt: 12/05/2023
要件
PC表示の時に、各投稿記事においてタイトル画像が大きいため、サイズを小さくしたい 例)https://sensitive-skin.real-cosme.net/?p=53814 ![image][sensitive-skin.real-cosme.net__p=53814.png]
・画像サイズを1250pxに修正 ・画像は
<article class="p-article">
内て左右中央に配置する