見出し画像

webデザイン勉強ノート13日目

今日は仕事が休みだったので面接でお話しすることをまとめていました。少し短めにwebデザインをやっていきます。

●news等メニューの位置

これまで少し気になっていたメニューの位置です。
newsが左寄りだなあ…と思っていたのですが、こう開発者ツールで見るとかなりずれています。

ズレ

今日はこのあたりをいじってみようと思います。
まずlogoですが、width138pxに縮小しており、左に30pxpaddingをつけています。このせいでnewsが左寄りになるんでしょうか。

paddingをとるとこうなります。

newsはやや左寄りで、ロゴが右寄りになってしまう

そしてこちらがillustratorファイルでの中心確認

中心になっている

もしかしてwebデザインだと均等に配置というのは一般的ではない…?

紙媒体のデザインをやっていたり、WEBにあまり詳しくない方から文字を左右均等になるようにしてください!というのはよく頼まれます。
ですが、きっぱり「WEBではできません!」と、今は断ってもいいと思います。
それでも納得してもらえない時は「あのgoogleでもやってませんよ!」という根拠のようで根拠になっていない理由で押し通してください。
いつか他のブラウザでもtext-align-last: justify;が使えるようになるのを待ちましょう。

…みたいですね…
うーん、つまりこれはデザインそのままで楽して実装しようとした失敗であり、webデザインの実装では各文字、画像に指定して配置せよということなのでしょうか。

考えていてもわからないので、今回のデザインに関して関して参考にしたサイトを見てみます!

こちらです。(念のためですが、メニューのアニメーションや画像スライドショーを見て、私も実装したい!と思い今回のデザインにしました。コードは初めて見ます)

このあたり

list-style: none;ですが、均等割り付けはしておらず各リストアイテムをmarginで離していました。

このようにすれば、私の場合も背景の表示を崩さずに実装できる…のかしら。いやそもそも背景画像が変わる(のをメニュー文字と一緒にブラウザの横幅に合わせて表示)というのが無理なデザインだった可能性もあります。

うーん、次はとりあえず手を動かしてみます。

タイトルロゴ作成のお支払いはこちら(どの記事からでもokです)でお願い致します。頂いたお金はillustratorの月額料金と変貌します。