webデザイン勉強ノート６日目
今日はヘッダー（backgroud-image）の幅と、画面遷移などをやってみたいと思います。
●画面を横スクロールすると切れるやつ
こちらなどを参考に直しました。今回はwidthの指定をして解決しましたが、ほかのデバイス・ブラウザからどうなるのか…そのあたりも勉強したいと思います。とりあえず今回のを終わらせます。
●デザイン通りに配置する（css）
さてindexページではヘッダーの色が１部分しかなかったのでスルーしていましたが、aboutに画面遷移すると本来こうしたかった
そして現在の実装状況は こう
恐らくヘッダー内にボックスを作ってその範囲に均等配置すれば問題ないような気がしますが、もともとのデザインを横幅1920で作成しているため、若干の計算が必要になりました。
1920（元の横幅）:1254（画面の横幅）=264（元のX位置）：？
というわけです
答えは172.425なので、ボックスの大きさを1254-172-172で、910pxで作ってみます。
ちなみに中身のflex要素はこれでした
んん…そういえば、ホームに戻るボタンが…ない…
メインロゴを画像にしてリンクにしなければならなかったようです…
まぁそれはこの次にやるとして、マウスオーバーを少しやってみます。
●マウスオーバーでラインが出る
これは色々なサイトで紹介されていて、CSSだけで実装できるみたいです！
こちらのｻｲﾄはたくさん情報があってこれからもお世話になりそう。
そしてやってみたのですが…
アニメーション自体はされているのですが、ヘッダー全体に適用されてしまいました。ナンデ？明日また調べてみます！
●転職状況（グチ）
家族に話したら、「転職できるの？雇ってもらえるの？」みたいなことを言われれてしまい、悲しみがありました…；；
でもこの悲しみがいかりパワーとなり、行動の原動力にもなる！と思ってます。
＾ー＾＜マタネ
タイトルロゴ作成のお支払いはこちら（どの記事からでもokです）でお願い致します。頂いたお金はillustratorの月額料金と変貌します。