kataokanagi/portfolio-websites

For job hunting

portfolio-websites's Issues

Youtubeの幅がmain-containerからはみ出す

いつ

ページが狭くなったとき。
特に、スマートフォンで閲覧したとき。

なぜ

Youtubeのiframeのサイズが固定幅であるため。

試行錯誤

多くの記事で紹介されていた、autoの横幅から比率で縦幅を決定する方法を採用。この場合、横幅が広くなりすぎてしまう。width: n%;で横幅を減らせるが、**揃えができない。

align="centor"やmargin-width: auto; margin-height: auto;、text-align:centorを試したが、**揃えはできなかった。親要素のposition:relative，position:absoluteやinline-blockなどが関わってきそうだが、長くなりそうなので中断した。

参考文献

あなたのブログの動画はスマートフォンではみ出してるかもしれない
CSSで**寄せする9つの方法（縦・横にセンタリング）

トップ画像のSafariへの対応

症状

Safariでトップ画像（top-page.cssのfuji-sunrise.JPG）が適切に表示されない
（拡大され過ぎて？真っ白になる）

原因

使用しているbackground-attachment: fixed;はSafariに対応していない。

試行錯誤の失敗

「iOSでbackground-attachment:fixedが表示されない不具合の解決方法」 のコードを引用し、header-containeのz-indexを-100、bodyのz-indexを0に設定したが、bodyのクリーム色のbackgroundがトップ画像の下に回ってしまう

その他参考

「スマホで『background-attachment: fixed』が効かないときの解決法」