初めまして。 WEBデザインにおける、ヘッダーのレイアウト及びコーディングに関してご質問させて頂きます。 HTML・CSS初心者の為、初歩的なご質問となります。

画像
補足

「補足1」 添付画像❷の内部メニューについては、それぞれSVGで制作しており、ホバー時に色の変更とテキストの変更(ABOUT→事業者概要)がかかるCSSを適用しております。displayはinline-blockで指定し、横並びになるようにしております。 「補足2」 添付画像❸のSNSメニューについても、それぞれSVGで制作し、inline-blockで横並びになるようにしております。 「補足3」 本文に記載した質問1について、display:flexではなく、display:inline-blockでしてしても横並びになりませんでした。 以上、ご参考になれば幸いです。

HTML、CSS82閲覧

ベストアンサー

0

oishii_mahou ご丁寧にご回答頂きありがとうございます。 質問に対してのご回答内容はよく分かりました。実践致します。 以下、「質問の内容でわからない点」について。 後者です。1920px×200pxの縦横比を保つように縮小・拡大ができることを望んでいます。 またテキストの文字サイズについては、全体の縮小・拡大に合わせて大きさが変化するようになることを望んでいます。 簡単に言えば、画像の縮小・拡大と同じで、ディスプレイサイズが変わったとしても、ヘッダー及びヘッダー内部要素のデザインが変化しない事を望んでいます。 以上です。 初心者でコーディングに対する矛盾点をご指摘頂けるの大変助かります。 ご返信お待ちしております。

その他の回答(3件)

0

無茶だ! そもそも左右1920pxもあるヘッダーを、スマホに縮小表示するというのは、あまりにも雑な発想です。 iPhoneSEの縦画面だとツマヨウジみたいになるのが分かりませんか? SVGを編集してロールオーバーまで入れたものを、そのまま使いたいという本音はわかりますが。 とにかく、レスポンシブに関して、顧客から「スマホで閲覧されることはない」みたいな話を間に受けて、これ幸いとばかりに力技で終わらせるつもりだろうけど、Webデザイナの良心としてそんなものは作れません普通。 リキッドレイアウト レスポンシブ メディアクエリ とか、勉強して出直してください。 DTPデザイナーって、いまどきそんなことも知らないのかと唖然。

ご丁寧なご回答ありがとうございます。 何卒初心者でございまして、至らない所があり大変申し訳なく思っております。 しかしながら、当方「WEB」デザイナーでもなく、ご質問内容はWEB制作に関する顧客案件でもございません。 それと、レスポンシブ対応ももちろん考えておりますが、スマホというワードを一言も出しておりませんのでご承知おき下さい。 私は単なるデザイナーですので、自信のポートフォリオサイトを作成し、勉強がてらコーディングまで行えればなと思ったまでであります。 せっかくのご回答ではございますが、一言余計な言葉が多い方ですね。 初めから、「初心者」と記載しておりますので、しっかりと文面を読んだ方が宜しいかと。 この件について何かまだご意見ありましたら、以下までご連絡下さい。 makun8481@gmail.com

0

Nixさん >・・・・ヘッダー全体:1920px × 200px・・・・・・・・・・ 固定??? ご参考に↓ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <style> header{ height:200px; display: flex; justify-content: space-between; margin: 0 auto; } header div { background:#eee; border:1px solid #333; } header .left { width:250px; } header .center { width:1370px; } header .right { width:300px; } </style> </head> <body> <header> <div class="left"> ロゴ画像 </div> <div class="center"> <img src="https://s.yimg.jp/images/ks/official/qa/ico_no_avater.gif" > <img src="https://s.yimg.jp/images/ks/official/nt/grd/prf_48.png" > </div> <div class="right"> SNSにて発信中 </div> </header> </body> </html>

ご回答ありがとうございます。 ご記載頂いたコードをもとに、一度試してみようと思います。 ありがとうございました。