質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

388閲覧

ヘッダーのアイコンがうまく配置できません。初心者です。

ShopMaidens

総合スコア6

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/07/24 07:49

前提・実現したいこと

宜しくお願い致します。
ホームページのリニュアルをしています。(初心者です)
ヘッダー部分の黒丸とinstagramマークを横並びに綺麗にしたいのですが、縦並び尚且つ場所の収まりが悪く、
スマホで見たときにはハンバーガーメニューとのバランスも悪いです。

発生している問題・エラーメッセージ

ヘッダーがうまく配置ができません。

該当のソースコード

下記の<div class="title">

<div class="header"> <div class="header-top"> </div> <div class="header-area"> <div class="header-layout"> </div>
<a class="menu-trigger" href="javascript:;"><span></span><span></span><span></span></a> <div class="navi"> <ul> <li><a title="#mens">MEN</a> <ul> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000619/?s=4#risFil/top">NEW ARRIVAL</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000179/?s=4#risFil/top">OUTER</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000969/?s=4#risFil/top">SHIRTS</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000119/?s=4#risFil/top">TOPS</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000105/?s=4#risFil/top">BOTTOMS</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000170/?s=4#risFil/top">SHOES</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000189/?s=4#risFil/top">BAG</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000373/?s=4#risFil/top">GOODS</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000133/?s=4#risFil/top">ACCESSORY</a></li> <li><a href="https://item.rakuten.co.jp/coupy/c/0000001563/?s=4#risFil/top">OUTLET</a></li> </ul> </li> <li><a title="#ladies">WOMEN</a> <ul> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000618/?s=4#risFil/top">NEW ARRIVAL</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000153/?s=4#risFil/top">OUTER</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000128/?s=4#risFil/top">TOPS</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000129/?s=4#risFil/top">ONEPIECE</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000121/?s=4#risFil/top">BOTTOMS</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000148/?s=4#risFil/top">SHOES</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000155/?s=4#risFil/top">BAG</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000393/?s=4#risFil/top">GOODS</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000141/?s=4#risFil/top">ACCESSORY</a></li> <li><a href="https://item.rakuten.co.jp/coupy/c/0000001564/?s=4#risFil/top">OUTLET</a></li> </ul> </li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000965/?s=4#risFil/top"><span>LIFE STYLE</span></a></li> <li><a href="#brand">OUTLET</a> <ul> <li><a href="https://item.rakuten.co.jp/coupy/c/0000001563/">MENS</a></li> <li><a href="https://item.rakuten.co.jp/coupy/c/0000001564/">LADIES</a></li> </ul> <li><a href="#brand">BRAND</a> <ul> <li><a href="https://www.rakuten.ne.jp/gold/coupy/brand-mens.html">MENS</a></li> <li><a href="https://www.rakuten.ne.jp/gold/coupy/brand-ladies.html">LADIES</a></li> </ul> </li> <li><a href="http://www.rakuten.ne.jp/gold/coupy/shoppingguide.html">SHOPPING GUIDE</a> <ul class="last"> <li><a href="http://www.rakuten.ne.jp/gold/coupy/shoppingguide.html#payment">お支払いについて</a></li> <li><a href="http://www.rakuten.ne.jp/gold/coupy/shoppingguide.html#delivery">発送について</a></li> <li><a href="http://www.rakuten.ne.jp/gold/coupy/shoppingguide.html#shop">実店舗情報</a></li> <li><a href="http://www.rakuten.ne.jp/gold/coupy/shoppingguide.html#infomation">お問い合わせ</a></li> <li><a href="https://www.rakuten.co.jp/coupy/news.html">メールマガジン</a></li> <li><a href="https://basket.step.rakuten.co.jp/rms/mall/bs/cartempty/?shop_bid=208695">カート</a></li> </ul> </li> </ul> </div> <div class="title"> <li><a href="http://www.rakuten.ne.jp/gold/coupy/index.html"><img src="img/top_icon_maru-01.png"></li> <li><a href="https://www.instagram.com/jeune_en_ligne/" target="_parent"><img src="https://image.rakuten.co.jp/coupy/cabinet/top/instagram.jpg" width="35"></a></li> </div> </div>
</div> </div>
ソースコード

試したこと

displayをinlineblockに変更
floatを変更

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/07/24 07:53

>初心者です。 要件とは関係ないので初心者アイコンをつけてください https://teratail.com/help/question-tips#questionTips3-1 [ありがちな失敗としては、「助けてください」「初心者です」という表題をつけてしまうことです。] コードはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/help#about-markdown ※質問は編集できますので適宜ご対応ください
y_waiwai

2019/07/24 08:14

その具合悪いというスクリーンショットを提示できませんか
yoshinavi

2019/07/24 11:56

レイアウトに関する場合は、HTMLだけでは判断出来ません。CSSも提示してください。 また、提示コードで、タグの入れ子(親・子・孫等)には「インデント」を付けると、見やすくなり、間違いも見つけやすくなります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問